125 lines
2.6 KiB
Markdown
125 lines
2.6 KiB
Markdown
|
## 插件使用方法：
|
|||
|
|
|
|||
|
|
`<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
|
|||
|
|
|
|||
|
|
## 配置参数：
|
|||
|
|
|
|||
|
|
属性名|类型|默认值|说明
|
|||
|
|
:--:|:--:|:--:|-
|
|||
|
|
showClearIcon|Boolean|false|是否显示全部清空按钮
|
|||
|
|
showValueClear|Boolean|true|是否显示单个删除
|
|||
|
|
zindex|Number|""|层级，默认999，防止多个组件一起使用时下拉栏穿透
|
|||
|
|
slabel|String|label|自定义列表中键值对关系，参考示例
|
|||
|
|
svalue|String|value|自定义列表中键值对关系，该值对应value，参考示例
|
|||
|
|
placeholder|String|请选择|无选项时展示的文字
|
|||
|
|
showplaceholder|Boolean|true|下拉时是否展示请选择按钮
|
|||
|
|
options|Array|无|数据列表
|
|||
|
|
disabled|Boolean|false|是否禁用
|
|||
|
|
value|Array|无|选中值及回显
|
|||
|
|
isPaging|Boolean|false|是否开启分页默认不需要
|
|||
|
|
## 事件：
|
|||
|
|
|
|||
|
|
事件名|说明|返回值
|
|||
|
|
:--:|:--:|-
|
|||
|
|
@change|点击项目或者删除触发的事件|返回全量选中项及只有value的选中项
|
|||
|
|
@scrolltolower|分页触底事件|发送你的请求获取分页数据
|
|||
|
|
## 说明：
|
|||
|
|
|
|||
|
|
此插件依赖scss，请务必安装！！！
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 示例：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<form @submit="formSubmit">
|
|||
|
|
<view class="item">写法：</view>
|
|||
|
|
<select-cy :value="tval" placeholder="请选择项目" :options="datalist" @change="change"></select-cy>
|
|||
|
|
<select-cy :value="tval" placeholder="请选择项目1" :options="datalist" @change="change"></select-cy>
|
|||
|
|
<button type="submit" @click="formSubmit">提交</button>
|
|||
|
|
</form>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//模拟数据列表
|
|||
|
|
datalist: [],
|
|||
|
|
//模拟初始数据
|
|||
|
|
tval: []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.datalist = [
|
|||
|
|
{
|
|||
|
|
label: 'label1',
|
|||
|
|
value: 'value1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label2',
|
|||
|
|
value: 'value2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label3',
|
|||
|
|
value: 'value3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label4',
|
|||
|
|
value: 'value4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label5',
|
|||
|
|
value: 'value5'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label6',
|
|||
|
|
value: 'value6'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label7',
|
|||
|
|
value: 'value7'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label8',
|
|||
|
|
value: 'value8'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'label9',
|
|||
|
|
value: 'value9'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
formSubmit(e) {
|
|||
|
|
console.log(this.tval,'提交参数');
|
|||
|
|
},
|
|||
|
|
change(item,value) {
|
|||
|
|
console.log(item,value);
|
|||
|
|
this.tval = value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.content {
|
|||
|
|
width: 300px;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|