223 lines
6.3 KiB
Vue
223 lines
6.3 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-selcas组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">联级选择框</view>
|
||
<view class="content">
|
||
多级联级选择。<br />
|
||
选项原始数据格式，[{id,name,upid}]数组。<br />
|
||
</view>
|
||
</view>
|
||
<form @submit="submitlog">
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-selcas v-model="formvalue" name="ciy1" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>value绑定</label>
|
||
<view>
|
||
<ciy-selcas left hasmore placeholder="选择地区" :value="formvalue" name="ciy2" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-selcas disabled :value="formvalue" name="ciy3" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label class="imp">自定义显示</label>
|
||
<view>
|
||
<ciy-selcas :value="formvalue" name="ciy4" :range="g.ciy_arearpc" @change="chglog('change', $event)">
|
||
<template v-slot:list="{data}">
|
||
<view class="code" v-for="(item,index) in data.value.sels" :key="index">
|
||
{{item.name}}
|
||
</view>
|
||
<view v-if="data.value.sels.length == 0" style="color:var(--txt1);">选择地区</view>
|
||
</template>
|
||
</ciy-selcas>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label class="imp">选择部分</label>
|
||
<view>
|
||
<ciy-selcas initevent allowpart clearbtn :value="formvalue" name="ciy5" :range="g.ciy_arearpc" :rootupid="0" @change="chglog('change', $event)"></ciy-selcas>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>增量加载</label>
|
||
<view>
|
||
<ciy-selcas hasmore asyncdata @loaddata="loaddata" :value="formvalue" name="ciy6" :range="dict" @change="chglog('change', $event)"></ciy-selcas>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="txt-center px4 py4">
|
||
<button class="btn" form-type="submit">提交表单</button>
|
||
<button class="btn" @tap="formvalue=210112">改变值</button>
|
||
<button class="btn" @tap="formvalue=140600">改变值</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">hasmore</view>
|
||
<view class="tip">
|
||
是否form携带更多格式的数据。<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">range</view>
|
||
<view class="tip">
|
||
选项数组，object需包含id,name,upid。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">placeholder</view>
|
||
<view class="tip">
|
||
占位文字。<br />
|
||
默认 请选择
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">clearbtn</view>
|
||
<view class="tip">
|
||
是否显示清空按钮。<br />
|
||
默认 false 不显示
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">rootupid</view>
|
||
<view class="tip">
|
||
根upid值。<br/>
|
||
首先在range中检索upid为该值的选项。<br />
|
||
默认 undefined
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">allowpart</view>
|
||
<view class="tip">
|
||
是否允许选择一部分。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">asyncdata</view>
|
||
<view class="tip">
|
||
是否支持异步请求下一分支数据。<br />
|
||
默认 false
|
||
</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,clear,done
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@loaddata</view>
|
||
<view class="tip">
|
||
当asyncdata开启后，所有无下级的选项都将调用该事件。<br />
|
||
如未正确响应，则认为该选项无需加载下级。<br />
|
||
事件参数: range, success/fail(function)<br />
|
||
1、加载下级选项数据，更新range属性。<br />
|
||
2、成功则调用success，失败调用fail。<br />
|
||
如果调用fail，用再次点击会重试调用。
|
||
</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>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
formvalue: 210111,
|
||
dict: [{
|
||
id: 1,
|
||
name: '选项1'
|
||
}, {
|
||
id: 2,
|
||
name: '选项2'
|
||
}, {
|
||
id: 3,
|
||
name: '选项3'
|
||
}, {
|
||
id: 5,
|
||
upid: 1,
|
||
name: '选项1-1'
|
||
}, {
|
||
id: 6,
|
||
upid: 1,
|
||
name: '选项1-2'
|
||
}]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.load_ciydict(this.file_stor('/dict/ciy_arearpc.js')).then(json => {
|
||
if (json.code != 1)
|
||
return this.alert(json.errmsg);
|
||
this.g.ciy_arearpc = json.arr;
|
||
});
|
||
},
|
||
methods: {
|
||
loaddata(e) {
|
||
console.log('loaddata', e);
|
||
this.eventlog.unshift('loaddata: ' + JSON.stringify(e, null, ' '));
|
||
setTimeout(() => {
|
||
var start = e.range.id * 100;
|
||
if (start > 2000000)
|
||
return e.success();
|
||
for (var i = start; i <= start + 10; i++) {
|
||
this.dict.push({
|
||
id: i,
|
||
upid: e.range.id,
|
||
name: '选项' + (i - start)
|
||
});
|
||
}
|
||
e.success();
|
||
}, 500);
|
||
}
|
||
}
|
||
}
|
||
</script> |