xnzt/xnzt-h5/uni_modules/select-cy
2024-11-11 10:27:27 +08:00
..
components/select-cy 初始化 2024-11-11 10:27:27 +08:00
changelog.md 初始化 2024-11-11 10:27:27 +08:00
package.json 初始化 2024-11-11 10:27:27 +08:00
readme.md 初始化 2024-11-11 10:27:27 +08:00

插件使用方法:

<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>