You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
2 months ago | |
---|---|---|
.. | ||
components/select-lay | 2 months ago | |
changelog.md | 2 months ago | |
package.json | 2 months ago | |
readme.md | 2 months ago |
readme.md
插件使用方法:
<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>
配置参数:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | "" | 默认展示的value值 |
name | String | "" | input的字段名 |
zindex | Number | "" | 层级,默认999,防止多个组件一起使用时下拉栏穿透 |
slabel | String | label | 自定义列表中键值对关系,参考示例 |
svalue | String | value | 自定义列表中键值对关系,该值对应value,参考示例 |
placeholder | String | 请选择 | 无选项时展示的文字 |
showplaceholder | Boolean | true | 下拉时是否展示请选择按钮 |
options | Array | 无 | 数据列表 |
disabled | Boolean | false | 是否禁用 |
事件:
事件名 | 说明 | 返回值 |
---|---|---|
@selectitem | 点击项目触发的事件 | 参数 (索引,具体项目) |
说明:
此插件依赖scss,请务必安装!!!
示例:
<template>
<view class="content">
<form @submit="formSubmit">
<view class="item">通用写法:</view>
<select-lay :zindex="1211" :value="tval" name="name" placeholder="请选择项目" :options="datalist"
@selectitem="selectitem">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">禁用组件:</view>
<select-lay :zindex="1111" :value="tval2" name="name2" placeholder="请选择项目2" :options="datalist2"
:disabled="true">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">自定义数据索引对象:</view>
<select-lay :value="tval3" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目3"
:options="datalist3" @selectitem="selectitem3">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">取消下拉默认展示的提醒按钮</view>
<select-lay :value="tval4" name="name4" placeholder="请选择项目4" :showplaceholder="false" :options="datalist4" @selectitem="selectitem4">
</select-lay>
<button class="btn" form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
//模拟数据列表
datalist: [],
//模拟初始数据
tval: "value2",
//模拟数据列表
datalist2: [],
//模拟初始数据
tval2: "2value1",
//模拟数据列表
datalist3: [],
//模拟初始数据
tval3: "myvalue1",
//模拟数据列表
datalist4: [],
//模拟初始数据
tval4: "4value1"
}
},
onReady() {
this.datalist = [{
label: "label1",
value: "value1"
},
{
label: "label2",
value: "value2"
},
{
label: "label3",
value: "value3"
}
];
this.datalist2 = [{
label: "2label1",
value: "2value1"
},
{
label: "2label2",
value: "2value2"
},
{
label: "2label3",
value: "2value3"
}
];
this.datalist3 = [{
myname: "我是myname1",
myvalue: "myvalue1"
},
{
myname: "我是myname2",
myvalue: "myvalue2"
},
{
myname: "我是myname3",
myvalue: "myvalue3"
},
{
myname: "我是myname4",
myvalue: "myvalue4"
}
];
this.datalist4 = [{
label: "4label1",
value: "4value1"
},
{
label: "4label2",
value: "4value2"
},
{
label: "4label3",
value: "4value3"
}
];
},
methods: {
formSubmit(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
},
selectitem(index, item) {
console.log(item)
if (index >= 0) {
this.tval = item.value;
} else {
this.tval = ""
}
},
selectitem3(index, item) {
console.log(item)
if (index >= 0) {
this.tval3 = item.myvalue;
} else {
this.tval3 = ""
}
},
selectitem4(index, item) {
console.log(item)
if (index >= 0) {
this.tval4 = item.value;
} else {
this.tval4 = ""
}
}
}
}
</script>