当前位置:网站首页>uni-app微信小程序——下拉多选框
uni-app微信小程序——下拉多选框
2022-08-10 21:26:00 【徐小硕】
1、组件代码
<template>
<view class="uni-select-cy" :style="{ 'z-index': zindex }">
<view class="uni-select-cy-select" :class="{ active: active }" @click.stop="handleSelect">
<!-- 禁用mask -->
<view class="uni-disabled" v-if="disabled"></view>
<!-- 清空 -->
<view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
<text @click.stop="handleRemove(null)"></text>
</view>
<!-- 显示框 -->
<view class="uni-select-multiple" v-show="realValue.length">
<view class="uni-select-multiple-item" v-for="(item, index) in realValue" :key="index">
{
{ item }}
<view class="close-icon" v-if="showValueClear"><text @click.stop="handleRemove(index)"></text> </view>
</view>
</view>
<!-- 为空时的显示文案 -->
<view v-if="realValue.length == 0 && showplaceholder">{
{ placeholder }}</view>
<!-- 禁用图标 -->
<view class="uni-select-cy-icon" :class="{ disabled: disabled }"><text></text></view>
</view>
<!-- 下拉选项 -->
<scroll-view class="uni-select-cy-options" :scroll-y="true" v-show="active">
<template>
<view
class="uni-select-cy-item"
:class="{ active: realValue.includes(item[svalue]) }"
v-for="(item, index) in options"
:key="index"
@click.stop="handleChange(index, item)"
>
{
{ item[slabel] }}
</view>
</template>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'select-cy',
props: {
// 是否显示全部清空按钮
showClearIcon: {
type: Boolean,
default: false,
},
// 是否显示单个删除
showValueClear: {
type: Boolean,
default: true,
},
zindex: {
type: Number,
default: 999,
},
// 禁用组件
disabled: {
type: Boolean,
default: false,
},
options: {
type: Array,
default() {
return [];
},
},
value: {
type: Array,
default() {
return [];
},
},
placeholder: {
type: String,
default: '请选择',
},
showplaceholder: {
type: Boolean,
default: true,
},
slabel: {
type: String,
default: 'text',
},
svalue: {
type: String,
default: 'value',
},
},
data() {
return {
active: false, // 组件是否激活,
changevalue: [], // 搜索框同步
realValue: [],
};
},
mounted() {
// 初始化
this.init();
},
methods: {
close() {
this.active = false;
},
init() {
if (this.value.length > 0) {
this.changevalue = this.options.forEach((item) => {
this.value.forEach((i) => {
if (item[this.svalue] === i[this.svalue]) {
return item;
}
});
});
this.realValue = this.value;
} else {
this.changevalue = [];
this.realValue = [];
}
},
// 点击展示选项
handleSelect() {
if (this.disabled) return;
this.active = !this.active;
},
// 移除数据
handleRemove(index) {
if (index === null) {
this.realValue = [];
this.changevalue = [];
} else {
this.realValue.splice(index, 1);
this.changevalue.splice(index, 1);
}
this.$emit('change', this.changevalue, this.realValue);
},
// 点击组件列
handleChange(index, item) {
const arrIndex = this.realValue.indexOf(item[this.svalue]);
if (arrIndex > -1) {
this.changevalue.splice(arrIndex, 1);
this.realValue.splice(arrIndex, 1);
} else {
this.changevalue.push(item);
this.realValue.push(item[this.svalue]);
}
console.log(this.realValue, 'this.realValue');
this.$emit('change', this.changevalue, this.realValue);
},
},
};
</script>
<style lang="scss" scoped>
.uni-select-cy {
position: relative;
z-index: 999;
.uni-select-mask {
width: 100%;
height: 100%;
}
/* 删除按钮样式*/
.close-icon {
height: 100%;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
cursor: pointer;
text {
position: relative;
background: #c0c4cc;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid #bbb;
&::before,
&::after {
content: '';
position: absolute;
left: 20%;
top: 50%;
height: 1px;
width: 60%;
transform: rotate(45deg);
background-color: #909399;
}
&::after {
transform: rotate(-45deg);
}
}
}
//所有情空的定位
.close-postion {
position: absolute;
right: 35px;
top: 0;
height: 100%;
width: 15px;
}
/* 多选盒子 */
.uni-select-multiple {
overflow-x: auto;
display: flex;
.uni-select-multiple-item {
background: #f4f4f5;
margin-right: 5px;
padding: 2px 4px;
border-radius: 4px;
color: #909399;
display: flex;
}
}
// select部分
.uni-select-cy-select {
user-select: none;
position: relative;
z-index: 3;
height: 36px;
padding: 0 30px 0 10px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
display: flex;
align-items: center;
font-size: 14px;
color: #999;
.uni-disabled {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 19;
cursor: no-drop;
background: rgba(255, 255, 255, 0.5);
}
.uni-select-cy-input {
font-size: 14px;
color: #999;
display: block;
width: 96%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 30px;
box-sizing: border-box;
&.active {
color: #333;
}
}
.uni-select-cy-icon {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #e5e5e5;
}
text {
display: block;
width: 0;
height: 0;
border-width: 12rpx 12rpx 0;
border-style: solid;
border-color: #bbb transparent transparent;
transition: 0.3s;
}
&.disabled {
cursor: no-drop;
text {
width: 20rpx;
height: 20rpx;
border: 2px solid #ff0000;
border-radius: 50%;
transition: 0.3s;
position: relative;
z-index: 999;
&::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background-color: #ff0000;
transform: rotate(45deg);
}
}
}
}
&.active .uni-select-cy-icon {
text {
transform: rotate(180deg);
}
}
}
// options部分
.uni-select-cy-options {
user-select: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
height: 500rpx;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
background: #fff;
padding: 5px 0;
box-sizing: border-box;
z-index: 9;
.uni-select-cy-item {
padding: 0 10px;
box-sizing: border-box;
cursor: pointer;
line-height: 2.5;
transition: 0.3s;
font-size: 14px;
&.active {
color: #409eff;
background-color: #f5f7fa &hover {
color: #409eff;
background-color: #f5f7fa;
}
}
&:hover {
background-color: #f5f5f5;
}
}
}
}
</style>
2、使用说明
## 插件使用方法:
`<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
## 配置参数:
| 属性名 | 类型 | 默认值 | 说明 |
| :-------------: | :-----: | :----: | ------------------------------------------------ |
| showClearIcon | Boolean | false | 是否显示全部清空按钮 |
| showValueClear | Boolean | true | 是否显示单个删除 |
| zindex | Number | "" | 层级,默认 999,防止多个组件一起使用时下拉栏穿透 |
| slabel | String | text | 自定义列表中键值对关系,参考示例 |
| svalue | String | value | 自定义列表中键值对关系,该值对应 value,参考示例 |
| placeholder | String | 请选择 | 无选项时展示的文字 |
| showplaceholder | Boolean | true | 下拉时是否展示请选择按钮 |
| options | Array | 无 | 数据列表 |
| disabled | Boolean | false | 是否禁用 |
| value | Array | 无 | 选中值及回显 |
## 事件:
| 事件名 | 说明 | 返回值 |
| :-----: | :------------------------: | ----------------------------------- |
| @change | 点击项目或者删除触发的事件 | 返回全量选中项及只有 value 的选中项 |
## 说明:
此插件依赖 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>
```
边栏推荐
- ArcMap时间滑块功能动态显示图层数据并生成视频或动图
- shell编程之正则表达式与文本处理器
- LeetCode-402 - Remove K digits
- HGAME 2022 Week2 writeup by pankas
- B. Trouble Sort
- web逆向之丁香园
- LeetCode-36-二叉搜索树与双向链表
- 黑猫带你学Makefile第13篇:Makefile编译问题合集
- Labelme-5.0.1 version edit polygon crash
- What are the concepts, purposes, processes, and testing methods of interface testing?
猜你喜欢
Black cats take you learn Makefile article 13: a Makefile collection compile problem
化学制品制造业数智化供应链管理系统:建立端到端供应链采购一体化平台
Exploration and practice of the "zero trust" protection and data security governance system of the ransomware virus of Meichuang Technology
Using SylixOS virtual serial port, serial port free implementation system
直播课堂系统09--腾讯云点播管理模块(一)
黑猫带你学Makefile第13篇:Makefile编译问题合集
HighTec快捷键(Keys)设置位置
shell programming without interaction
使用SylixOS虚拟串口,实现系统串口自由
异常的了解
随机推荐
How to translate financial annual report, why choose a professional translation company?
DDL:ALTER 修改数据库——《mysql 从入门到内卷再到入土》
2022.8.9 模拟赛
Live Classroom System 09--Tencent Cloud VOD Management Module (1)
c语言之 练习题1 大贤者福尔:魔法数,神奇的等式
ENVI最小距离、最大似然、支持向量机遥感影像分类
Bedtime story | made a Bitmap and AST length system configuration
C. Social Distance
Black cats take you learn Makefile article 13: a Makefile collection compile problem
What are the concepts, purposes, processes, and testing methods of interface testing?
黑猫带你学Makefile第11篇:当头文件a.h改变时,如何将所有依赖头文件a.h的.c文件都重新编译
HGAME 2022 Week2 writeup by pankas
着力提升制造业核心竞争力,仪器仪表产业迎高质量发展
关于 DataFrame: 处理时间
FPGA - Memory Resources of 7 Series FPGA Internal Structure -03- Built-in Error Correction Function
TCL:事务的特点,语法,测试例——《mysql 从入门到内卷再到入土》
apr_thread使用内存之谜
翻译科技论文,俄译中怎样效果好
The use of TortoiseSVN little turtle
【SQL刷题】Day3----SQL必会的常用函数专项练习