168 lines
4.1 KiB
Vue
168 lines
4.1 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-switch组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">开关块</view>
|
||
<view class="content">
|
||
相比传统switch组件，样式动画个性化。<br />
|
||
返回值是true和false
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>原生组件</label>
|
||
<view>
|
||
<switch name="ori" :value="txtori" range-key="name" @change="chglog('change', $event)">选择</switch>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-switch name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>value绑定</label>
|
||
<view>
|
||
<ciy-switch ms="1000" :value="formvalue" name="ciy2" @change="chglog('change', $event)"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-switch disabled :value="formvalue" name="ciy3" @change="chglog('change', $event)"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>带文字</label>
|
||
<view>
|
||
<ciy-switch y="确定" n="取消" :value="formvalue" name="ciy4" @change="chglog('change', $event)"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>左侧</label>
|
||
<view style="text-align: left;">
|
||
<ciy-switch :value="formvalue" name="ciy5" @change="chglog('change', $event)"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue=2">改变值</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="slt">list自定义选项</view>
|
||
<view class="hr"></view>
|
||
<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">y</view>
|
||
<view class="tip">
|
||
选中文字。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">n</view>
|
||
<view class="tip">
|
||
未选中文字。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">ms</view>
|
||
<view class="tip">
|
||
动画毫秒数。<br />
|
||
默认 200
|
||
</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,input<br/>
|
||
</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: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.setrange(3);
|
||
},
|
||
methods: {
|
||
setrange(num) {
|
||
this.rang = [];
|
||
for (var i = 1; i <= num; i++) {
|
||
this.rang.push({
|
||
id: i,
|
||
name: '选项' + i
|
||
});
|
||
}
|
||
},
|
||
search(e) {
|
||
if (!e.value)
|
||
return;
|
||
//请求ajax
|
||
var newrange = [];
|
||
var x = parseInt(Math.random() * 100);
|
||
newrange.push({
|
||
id: x,
|
||
name: e.value + '新增' + x
|
||
});
|
||
for (var i = 0; i < 30; i++) {
|
||
x = parseInt(Math.random() * 100);
|
||
newrange.push({
|
||
id: x,
|
||
name: e.value + '新增' + x
|
||
});
|
||
}
|
||
e.com.Addrange(newrange);
|
||
}
|
||
}
|
||
}
|
||
</script> |