340 lines
9.2 KiB
Vue
340 lines
9.2 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-select组件"></ciy-header>
|
||
<view>
|
||
<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
|
||
<ciy-query ref="query" :gdict="g" :qry="querys"></ciy-query>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">单选下拉框</view>
|
||
<view class="content">
|
||
有筛选能力，可添加增量选项。<br />
|
||
相比传统picker组件，可与字典联动。<br/>
|
||
支持选项自定义，可多列排列。
|
||
</view>
|
||
</view>
|
||
<view v-for="n in 5" :key="n" class="zw"> 占位 {{n}}</view>
|
||
<form @submit="submitlog">
|
||
<view class="flex flex-center py1">
|
||
<view class="px2">选项数</view>
|
||
<button size="mini" @tap="setrange(5)">5个</button>
|
||
<button size="mini" @tap="setrange(10)">10个</button>
|
||
<button size="mini" @tap="setrange(20)">20个</button>
|
||
<button size="mini" @tap="setrange(120)">120个</button>
|
||
<view class="flex1"></view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>原生组件</label>
|
||
<view>
|
||
<picker name="ori" mode="selector" :value="txtori" :range="rang" range-key="name" @change="chglog('change', $event)">选择</picker>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>v-model绑定</label>
|
||
<view>
|
||
<ciy-select name="ciy1" :range="rang" v-model="formvalue" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>value绑定</label>
|
||
<view>
|
||
<ciy-select hasmore initevent itemalign="center" :value="formvalue" name="ciy2" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>禁用</label>
|
||
<view>
|
||
<ciy-select placeholder="" disabled :value="formvalue" name="ciy3" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label class="imp">自定义列表</label>
|
||
<view>
|
||
<ciy-select left placeholder="请选择" :value="formvalue" name="ciy4" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)">
|
||
<template v-slot:list="{data}">
|
||
<view style="background:var(--bg2);border-radius: 0.5em;">
|
||
<view v-for="(item,index) in data.range" :key="index" @tap="data.onselect(index);" style="padding:1em;background:linear-gradient(90deg, var(--bg9), var(--bg4));margin: 0.5em;border-radius: 0.5em;">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label class="imp">外部增量加载字典</label>
|
||
<view>
|
||
<ciy-select :minselectsearch="2" :value="formvalue" name="ciy5" :range="rang" @change="chglog('change', $event)" @search="search"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label class="imp">增量字典(多列)</label>
|
||
<view>
|
||
<ciy-select :rows="3" itemalign="center" :value="formvalue" name="ciy6" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>显示样式</label>
|
||
<view>
|
||
<ciy-select :ciystyle="{color:'#cc0000'}" :value="formvalue" name="ciy7" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-form">
|
||
<label>无箭头</label>
|
||
<view>
|
||
<ciy-select noarrow :value="formvalue" name="ciy8" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
|
||
</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">hasmore</view>
|
||
<view class="tip">
|
||
是否form携带更多格式的数据。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">placeholder</view>
|
||
<view class="tip">
|
||
占位文字。<br />
|
||
默认 请选择
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">range</view>
|
||
<view class="tip">
|
||
选项数组，object需包含id,name。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">left</view>
|
||
<view class="tip">
|
||
是否左侧显示。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">itemalign</view>
|
||
<view class="tip">
|
||
设置选项上的text-align属性<br/>
|
||
left/center/right/justify等。<br />
|
||
默认 无
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">all</view>
|
||
<view class="tip">
|
||
在range上增加一个0值选项<br/>
|
||
默认 无
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">ciystyle</view>
|
||
<view class="tip">
|
||
内部显示属性<br/>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">disabled</view>
|
||
<view class="tip">
|
||
禁止选择。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">noarrow</view>
|
||
<view class="tip">
|
||
是否无箭头。<br />
|
||
默认 false
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">rows</view>
|
||
<view class="tip">
|
||
选项列数。<br />
|
||
默认 1
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">minselectsearch</view>
|
||
<view class="tip">
|
||
选项少于n条，则不显示搜索框。<br />
|
||
默认 5
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">diastema</view>
|
||
<view class="tip">
|
||
弹出上下间隙，弹出效果更好看。<br />
|
||
默认 12 单位px
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">Addrange([])</view>
|
||
<view class="tip">增量添加选项数组</view>
|
||
<view class="hr"></view>
|
||
<view class="fun">Selitem(index)</view>
|
||
<view class="tip">设置选中项</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@search</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: input,confirm<br />
|
||
接收数据后，异步加载新字典数据，调用Addrange函数更新选项。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@change, update:modelValue</view>
|
||
<view class="tip">
|
||
数值变更事件<br />
|
||
from: init,select<br/>
|
||
value: 当前选择项object<br/>
|
||
lastvalue: 历史选择项object<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>
|
||
<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: '',
|
||
querys: [{
|
||
form: 'inp1',
|
||
name: '输入1',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp2',
|
||
name: '输入2',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp3',
|
||
name: '输入3',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp4',
|
||
name: '输入4',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp5',
|
||
name: '输入5',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'sel',
|
||
name: '下拉选项',
|
||
type: 'select',
|
||
select: 'cata_auditstatus',
|
||
all: '全部'
|
||
},
|
||
{
|
||
form: 'inp6',
|
||
name: '输入6',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp7',
|
||
name: '输入7',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp8',
|
||
name: '输入8',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp9',
|
||
name: '输入9',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp10',
|
||
name: '输入10',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp11',
|
||
name: '输入11',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp12',
|
||
name: '输入12',
|
||
type: 'input'
|
||
},
|
||
{
|
||
form: 'inp13',
|
||
name: '输入13',
|
||
type: 'input'
|
||
}
|
||
],
|
||
rang: [],
|
||
txtori: 1,
|
||
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> |