142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-inputtimepoint组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">时间选择框</view>
|
||
<view class="content">
|
||
选择时间，例如营业起止时间。<br />
|
||
数据为0点之后的秒数。<br/>
|
||
同时支持 时分秒 00:00:00 格式。<br/>
|
||
1为00:00，86400为23:59:59。0未选。
|
||
</view>
|
||
</view>
|
||
<view v-for="n in 7" :key="n" class="zw"> 占位 {{n}}</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-inputtimepoint name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputtimepoint>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>时分</label>
|
||
<view>
|
||
<ciy-inputtimepoint hasmore eft name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-inputtimepoint>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>时分秒</label>
|
||
<view>
|
||
<ciy-inputtimepoint hasmore bsec name="ciy3" :value="formvalue" @change="chglog('change', $event)"></ciy-inputtimepoint>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-inputtimepoint disabled name="ciy4" value="34234" @change="chglog('change', $event)"></ciy-inputtimepoint>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue=17700">改变值</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,value,v-model</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">disabled</view>
|
||
<view class="tip">
|
||
禁止选择。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">initevent</view>
|
||
<view class="tip">
|
||
是否产生初始事件。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">hasmore</view>
|
||
<view class="tip">
|
||
是否form携带更多格式的数据。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">bsec</view>
|
||
<view class="tip">
|
||
是否设置秒。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">left</view>
|
||
<view class="tip">
|
||
是否左侧显示。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">diastema</view>
|
||
<view class="tip">
|
||
弹出上下间隙，弹出效果更好看。<br />
|
||
默认 16, 单位px
|
||
</view>
|
||
</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, update:modelValue</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: init,calendar,hour,minute,done
|
||
</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: 25234,
|
||
maxdate: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.maxdate = this.tostamp() + 86400 * 7;
|
||
},
|
||
methods: {
|
||
qd(e) {
|
||
if (e.day == '')
|
||
return false;
|
||
return Math.random() > 0.7;
|
||
}
|
||
}
|
||
}
|
||
</script> |