vue模仿twitter写一个自己的博客——Button组件

twitter的Button组件实现最主要的是点击时的蓝色边框的弹出动画效果，长按时弹到最大范围且边框不动。这直接让我想到了伪类 active，通过伪元素加上伪类就很好的实现了这个效果。
BlogButton.vue

<template>
  <div :class="['btn-msg','bounce',isPrimary?'primary':'']" ref="btn" @click="handleClick">{{info}}</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class extends Vue {
  @Prop()
  private info!: string;
  @Prop()
  private type!: string;
  @Prop()
  private size!: string;
  private isPrimary: boolean = false;
  private handleClick(evt) {
    this.$emit("click", evt);
  }
  private mounted() {
    if (this.size) {
      if (!isNaN(Number(this.size))) {
        const elBtn = this.$refs.btn as HTMLElement;
        elBtn.style.width = this.size + "px";
      }
    }
    if (this.type === "primary") {
      this.isPrimary = true;
    }
  }
}
</script>
<style scoped lang="scss">
.btn-msg {
  width: 105px;
  height: 35.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid $twitter-blue;
  border-radius: 100px;
  box-sizing: border-box;
  color: $twitter-blue;
  font-weight: bold;
}
:hover {
  cursor: pointer;
}
.btn-msg:hover {
  background-color: $button-hover;
}
.bounce {
  position: relative;
}
.bounce:focus {
  outline: none;
}
.bounce:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 100px;
  border: 0px solid $twitter-blue;
  opacity: 0.7;
  transition: all 0.1s;
}
.bounce:active:after {
  //.bounce active时 伪元素:after的样式
  opacity: 1;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 100px;
  border: 2px solid $twitter-blue;
  transition: all 0.2s;
}
.primary {
  color: #ffffff;
  background-color: #4ab3f4;
}
.primary:hover {
  background-color: $twitter-blue;
}
</style>

效果展示

项目地址

https://github.com/pppercyWang/twitter-blog-vue