import Vue from 'vue';
import {SendCode} from 'vue-ydui/dist/lib.rem/sendcode';
/* 使用px：import {SendCode} from 'vue-ydui/dist/lib.px/sendcode'; */
Vue.component(SendCode.name, SendCode);<template>
<yd-cell-group>
<yd-cell-item>
<yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
<input type="text" slot="right" placeholder="请输入手机号码">
<!-- ↓↓关键代码是这里↓↓ -->
<yd-sendcode slot="right"
v-model="start1"
@click.native="sendCode1"
type="warning"
></yd-sendcode>
<!-- ↑↑关键代码是这里↑↑ -->
</yd-cell-item>
</yd-cell-group>
</template>
<script type="text/babel">
export default {
data() {
return {
start1: false
}
},
methods: {
sendCode1() {
this.$dialog.loading.open('发送中...');
setTimeout(() => {
this.start = true;
this.$dialog.loading.close();
this.$dialog.toast({
mes: '已发送',
icon: 'success',
timeout: 1500
});
}, 1000);
}
}
}
</script>将yd-sendcode组件的 v-model 绑定到一个本地变量start1，将其设置为true即开始倒计时。
yd-sendcode组件继承yd-button组件，因此与yd-button有同样的 props。
<template>
<yd-sendcode
v-model="start2"
@click.native="sendCode2"
second="15"
initStr="点我啊，你点我啊"
runStr="在{%s}秒后你就可以重新获取啦"
resetStr="你可以重新获取验证码啦"
size="large"
type="primary"
></yd-sendcode>
</template>
<script type="text/babel">
export default {
data() {
return {
start2: false
}
},
methods: {
sendCode2() {
this.start2 = true;
}
}
}
</script>通过second属性设置倒计时时长（秒），initStr属性设置初始显示文本，runStr属性设置运行时显示文本（需包含{%s}），resetStr属性设置结束后按钮显示文本