共计 848 个字符，预计需要花费 3 分钟才能阅读完成。
点击确定之后更改状态 button.vue
<template>
<div class=”container”>
<button
v-if=’state’
@click=’confirm’
class=’confirm’
:style=”{background:btnColor}”
>
<slot> 按钮 </slot>
</button>
<button class=”confirm” :disabled=’!state’ v-else> 正在加载 </button>
</div>
</template>
<script>
export default{
data(){
return {
state:true,
btnColor:’red’
}
},
props:{
text:{
type:String,
default:’ 注册 ’
}
},
methods:{
confirm(){
this.state=false;
this.btnColor = ‘blue’;
this.$emit(“confirm”);
},
cancel(){
let that=this;
setTimeout(function(){
that.state = true;
that.btnColor = ‘red’;
}, 1000)
}
}
}
</script>
<style scoped>
.confirm {
border: none;
color: #fff;
width: 100%;
padding: 1rem 0;
border-radius: 4px;
font-size: 1.6rem;
background: #5da1fd;
}
</style>
index.vue
<template>
<Btn @confirm=”confirm” ref=”btn”> 确定 </Btn>
</template>
<script>
import Btn from ‘./components/button’
export default {
components: {
Btn
},
methods: {
confirm(){
this.$refs.btn.cancel()
}
}
}
</script>
