uni-app微信小程序下拉多選框?qū)嵗a
更新時(shí)間：2023年08月25日 10:35:45 作者：徐小碩
這篇文章主要給大家介紹了關(guān)于uni-app微信小程序下拉多選框的相關(guān)資料,在通過(guò)uniapp做app開發(fā)的時(shí)候,有場(chǎng)景需要用到下拉選擇框,需要的朋友可以參考下
插件來(lái)自：select-cy - DCloud 插件市場(chǎng)
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>
<!-- 為空時(shí)的顯示文案 -->
<view v-if="realValue.length == 0 && showplaceholder">{{ placeholder }}</view>
<!-- 禁用圖標(biāo) -->
<view class="uni-select-cy-icon" :class="{ disabled: disabled }"><text></text></view>
</view>
<!-- 下拉選項(xiàng) -->
<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,
},
// 是否顯示單個(gè)刪除
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: '請(qǐng)選擇',
},
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 = [];
}
},
// 點(diǎn)擊展示選項(xiàng)
handleSelect() {
if (this.disabled) return;
this.active = !this.active;
},
// 移除數(shù)據(jù)
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);
},
// 點(diǎn)擊組件列
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、使用說(shuō)明
## 插件使用方法：
`<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
## 配置參數(shù)：
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
| :-------------: | :-----: | :----: | ------------------------------------------------ |
| showClearIcon | Boolean | false | 是否顯示全部清空按鈕 |
| showValueClear | Boolean | true | 是否顯示單個(gè)刪除 |
| zindex | Number | "" | 層級(jí)，默認(rèn) 999，防止多個(gè)組件一起使用時(shí)下拉欄穿透 |
| slabel | String | text | 自定義列表中鍵值對(duì)關(guān)系，參考示例 |
| svalue | String | value | 自定義列表中鍵值對(duì)關(guān)系，該值對(duì)應(yīng) value，參考示例 |
| placeholder | String | 請(qǐng)選擇 | 無(wú)選項(xiàng)時(shí)展示的文字 |
| showplaceholder | Boolean | true | 下拉時(shí)是否展示請(qǐng)選擇按鈕 |
| options | Array | 無(wú) | 數(shù)據(jù)列表 |
| disabled | Boolean | false | 是否禁用 |
| value | Array | 無(wú) | 選中值及回顯 |
## 事件：
| 事件名 | 說(shuō)明 | 返回值 |
| :-----: | :------------------------: | ----------------------------------- |
| @change | 點(diǎn)擊項(xiàng)目或者刪除觸發(fā)的事件 | 返回全量選中項(xiàng)及只有 value 的選中項(xiàng) |
## 說(shuō)明：
此插件依賴 scss，請(qǐng)務(wù)必安裝?。。?
## 示例：
```
<template>
<view class="content">
<form @submit="formSubmit">
<view class="item">寫法：</view>
<select-cy :value="tval" placeholder="請(qǐng)選擇項(xiàng)目" :options="datalist" @change="change"></select-cy>
<select-cy :value="tval" placeholder="請(qǐng)選擇項(xiàng)目1" :options="datalist" @change="change"></select-cy>
<button type="submit" @click="formSubmit">提交</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
//模擬數(shù)據(jù)列表
datalist: [],
//模擬初始數(shù)據(jù)
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,'提交參數(shù)');
},
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>
```總結(jié)
到此這篇關(guān)于uni-app微信小程序下拉多選框的文章就介紹到這了,更多相關(guān)uni-app小程序下拉多選框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
本文給大家js遍歷數(shù)組和遍歷對(duì)象的區(qū)別，一般來(lái)說(shuō)for用來(lái)遍歷數(shù)組對(duì)象而for-in用來(lái)遍歷非數(shù)組對(duì)象。接下來(lái)小編給大家?guī)?lái)了js遍歷數(shù)組和對(duì)象的區(qū)別及js遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解，一起看下吧2016-06-06
下面小編就為大家?guī)?lái)一篇es6系列教程_ Map詳解以及常用api介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在使用JavaScript對(duì)數(shù)組進(jìn)行操作的時(shí)候，我們經(jīng)常需要將數(shù)組進(jìn)行備份，事實(shí)證明如果只是簡(jiǎn)單的將它賦予其他變量，那么我們只要更改其中的任何一個(gè)，然后其他的也會(huì)跟著改變，這就導(dǎo)致了問(wèn)題的發(fā)生。2014-04-04
用一段js程序來(lái)實(shí)現(xiàn)動(dòng)畫功能
用一段js程序來(lái)實(shí)現(xiàn)動(dòng)畫功能...2007-03-03
JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法
這篇文章主要介紹了JavaScript組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值的方法,涉及輸入框與錨點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于BootStrap的前端分頁(yè)帶省略號(hào)和上下頁(yè)效果
這篇文章主要介紹了基于BootStrap的前端分頁(yè)帶省略號(hào)和上下頁(yè)效果,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序左右滾動(dòng)公告欄效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
用 js 的 selection range 操作選擇區(qū)域內(nèi)容和圖片
本篇文章主要介紹了用js的selection range操作選擇區(qū)域內(nèi)容和圖片的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
讓javascript加載速度倍增的方法(解決JS加載速度慢的問(wèn)題)
這篇文章主要介紹了讓javascript加載速度倍增的方法,通過(guò)document.write輸出js解決廣告加載速度慢的問(wèn)題,需要的朋友可以參考下2014-12-12
JavaScript下通過(guò)的XMLHttpRequest發(fā)送請(qǐng)求的代碼
JavaScript下通過(guò)的XMLHttpRequest發(fā)送請(qǐng)求的代碼，需要的朋友可以參考下。2011-06-06