131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-capcode组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">验证码组件</view>
|
||
<view class="content">
|
||
数秒倒计时，后台交互联动。<br />
|
||
判断真人点击。
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>账号</label>
|
||
<view>
|
||
<ciy-input name="account" bb v-model="account"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>验证码</label>
|
||
<view>
|
||
<ciy-capcode hasmore name="ciy1" btntxt="发送短信" :account="account" :btntxt="props.btntxt" :func="props.func" :placeholder="props.placeholder" :maxlength="props.maxlength" :maxsec="props.maxsec" @change="chglog('change', $event)"></ciy-capcode>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
</view>
|
||
<view class="ciy-card formcard" v-if="formdata">
|
||
<view class="content">
|
||
<view v-html="tobr(formdata, true)" class="formdata"></view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">name</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">hasmore</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">placeholder</view>
|
||
<view class="tip">
|
||
占位文字。<br />
|
||
默认 请选择
|
||
</view>
|
||
<ciy-input bb v-model="props.placeholder"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">btntxt</view>
|
||
<view class="tip">
|
||
按钮文字。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.btntxt"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">account</view>
|
||
<view class="tip">
|
||
外部账号数据。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">func</view>
|
||
<view class="tip">
|
||
调用的函数名称。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.func"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">codelength</view>
|
||
<view class="tip">
|
||
生成的验证码长度。<br />
|
||
默认 4
|
||
</view>
|
||
<ciy-input bb v-model="props.codelength" style="width:4em;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">maxsec</view>
|
||
<view class="tip">
|
||
数秒倒计时。<br />
|
||
默认 60
|
||
</view>
|
||
<ciy-input bb v-model="props.maxsec" style="width:4em;"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change</view>
|
||
<view class="tip">
|
||
发送事件<br />
|
||
from: send,tickend
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
formvalue: 0,
|
||
account: '',
|
||
props:{
|
||
btntxt:'发送短信',
|
||
placeholder:'请选择',
|
||
func:'login.sendsms',
|
||
codelength:4,
|
||
maxsec:60
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script> |