边框按钮

基础用法

下面是边框按钮的基础用法。

边框按钮

<template>
  <div class="t-border-button-area">
    <as-animation-border-button parent-background="#000000" :border-size="4" @click="clickBorderBtn">
      <span>边框按钮</span>
    </as-animation-border-button>
  </div>
</template>
<script>
export default {
  name: "t-border-button",
  methods:{
    clickBorderBtn(){
      alert("点击了边框按钮")
    }
  }
}
</script>
<style>
.t-border-button-area{
  width: 100%;
  height: 300px;
  background: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}
@media screen and (max-width: 480px) {
  .t-border-button-area{
    height: 180px;
  }
}
</style>

Expand Copy Copy

Attributes

参数	说明	必填
text-color	文字颜色,类型为String,默认值为#87CEFA	否
parent-background	父元素背景颜色,其值尽量与该组件的外部容器的背景色一致。类型为String,默认值为#000000	否
border-color	边框颜色。类型为String,默认值为#87CEFA	否
width	按钮宽度,单位px。类型为Number,默认值为200	否
height	按钮高度,单位px。类型为Number,默认值为80	否
border-size	边框大小,单位px。类型为Number,默认值为4	否

Events

事件名称	说明	回调参数
click	点击按钮	不传参,如上图所示,在方法里面写要执行的操作。