海浪进度条

基础用法

下面是海浪进度条的基础用法。

<template>
  <div class="t-wave-circle-progress-area">
    <div class="btn-area">
      <button class="show-btn" @click="showProgress">显示进度条</button>
      <button class="hide-btn" @click="hideProgress">隐藏进度条</button>
    </div>
    <div class="text-area" v-if="waveProgressExpandShow">
      <as-animation-wave-circle-progress @finish="finishProgress" :time-interval="100">
      </as-animation-wave-circle-progress>
    </div>
  </div>
</template>

<script>
export default {
  name: "t-wave-progress",
  data(){
    return{
      waveProgressExpandShow:false,
    }
  },
  methods:{
    showProgress(){
      this.waveProgressExpandShow=true;
    },
    hideProgress(){
      this.waveProgressExpandShow=false;
    },
    finishProgress(){
      console.log("进度条完成")
    },
  }
}
</script>

<style>
.t-wave-circle-progress-area .btn-area{
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-wave-circle-progress-area .btn-area button{
  background-color: dodgerblue;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
.t-wave-circle-progress-area .btn-area .hide-btn{
  margin-left: 20px;
}
.t-wave-circle-progress-area .text-area{
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #253854;
  padding-top: 30px;
  padding-bottom: 30px;
}
</style>

Expand Copy Copy

Attributes

参数	说明	必填
background	背景颜色,类型为String,默认为#76DAFE	否
time-interval	时间间隔,类型为Number,默认为200	否

Events

事件名称	说明	回调参数
finish	加载完成	不传参,如上所示,在方法里面写要执行的操作。