133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
|
<ciy-header ref="header" title="ciy-segment组件"></ciy-header>
|
|
<view>
|
|
<view class="ciy-card">
|
|
<view class="title">分类切换</view>
|
|
<view class="content">
|
|
<view class="tip">
|
|
左右拖动的分类选项。<br />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<ciy-segment v-model="li1" all="全部" :lis="lis" @change="chglog('change', $event)"></ciy-segment>
|
|
<view style="height:3em;line-height:3em;text-align:center;">{{li1}}</view>
|
|
<ciy-segment v-model="li2" :lis="lis2" @change="chglog('change', $event)"></ciy-segment>
|
|
<view style="height:3em;line-height:3em;text-align:center;">{{li2}}</view>
|
|
<ciy-segment :lis="lis3" @change="chglog('change', $event)"></ciy-segment>
|
|
<view style="height:3em;"></view>
|
|
|
|
<view class="ciy-card">
|
|
<view class="title">属性</view>
|
|
<view class="content">
|
|
<view class="prp">value,v-model</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">initevent</view>
|
|
<view class="tip">
|
|
是否产生初始事件。<br />
|
|
默认 false
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">all</view>
|
|
<view class="tip">
|
|
全部选项名称。<br />
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="prp">lis</view>
|
|
<view class="tip">
|
|
选项数组[{}, {}, ...]。<br />
|
|
id, name。<br />
|
|
</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</view>
|
|
<view class="tip">
|
|
点击切换事件<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 scoped>
|
|
@import '@/pages/demo/zdemo.css';
|
|
</style>
|
|
|
|
<script>
|
|
import zmixin from '@/pages/demo/zmixin.js';
|
|
export default {
|
|
mixins: [zmixin],
|
|
data() {
|
|
return {
|
|
li1:'',
|
|
li2:'',
|
|
lis: [{
|
|
id: 1,
|
|
name: '选项1'
|
|
}, {
|
|
id: 2,
|
|
name: '选项2'
|
|
}, {
|
|
id: 3,
|
|
name: '选项3'
|
|
}, {
|
|
id: 4,
|
|
name: '选项4'
|
|
}, {
|
|
id: 5,
|
|
name: '选项5'
|
|
}, {
|
|
id: 6,
|
|
name: '选项6'
|
|
}, {
|
|
id: 7,
|
|
name: '选项7'
|
|
}, {
|
|
id: 8,
|
|
name: '选项8'
|
|
}, {
|
|
id: 9,
|
|
name: '选项9'
|
|
}, {
|
|
id: 10,
|
|
name: '选项10'
|
|
}, {
|
|
id: 11,
|
|
name: '选项11'
|
|
}, {
|
|
id: 12,
|
|
name: '选项12'
|
|
}],
|
|
lis2: [{
|
|
id: 0,
|
|
name: '所有'
|
|
}, {
|
|
id: 1,
|
|
name: '选项1'
|
|
}, {
|
|
id: 2,
|
|
name: '选项2'
|
|
}],
|
|
lis3:[]
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|