uni-app微信小程序下拉多選框?qū)嵗a
更新時間：2023年08月25日 10:35:45 作者：徐小碩
這篇文章主要給大家介紹了關(guān)于uni-app微信小程序下拉多選框的相關(guān)資料,在通過uniapp做app開發(fā)的時候,有場景需要用到下拉選擇框,需要的朋友可以參考下
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;
},
// 移除數(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);
},
// 點擊組件列
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>`
## 配置參數(shù)：
| 屬性名 | 類型 | 默認值 | 說明 |
| :-------------: | :-----: | :----: | ------------------------------------------------ |
| showClearIcon | Boolean | false | 是否顯示全部清空按鈕 |
| showValueClear | Boolean | true | 是否顯示單個刪除 |
| zindex | Number | "" | 層級，默認 999，防止多個組件一起使用時下拉欄穿透 |
| slabel | String | text | 自定義列表中鍵值對關(guān)系，參考示例 |
| svalue | String | value | 自定義列表中鍵值對關(guān)系，該值對應 value，參考示例 |
| placeholder | String | 請選擇 | 無選項時展示的文字 |
| showplaceholder | Boolean | true | 下拉時是否展示請選擇按鈕 |
| options | Array | 無 | 數(shù)據(jù)列表 |
| disabled | Boolean | false | 是否禁用 |
| value | Array | 無 | 選中值及回顯 |
## 事件：
| 事件名 | 說明 | 返回值 |
| :-----: | :------------------------: | ----------------------------------- |
| @change | 點擊項目或者刪除觸發(fā)的事件 | 返回全量選中項及只有 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 {
//模擬數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js+css 實現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動條滾動)
本文為大家詳細介紹下使用js實現(xiàn)遮罩彈出層居中，且隨瀏覽器窗口滾動條滾動，示例代碼如下，感興趣的朋友可以參考下2013-12-12
JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了javascript多物體運動實現(xiàn)方法,結(jié)合實例形式分析了JavaScript多物體運動的相關(guān)注意事項與具體實現(xiàn)代碼,包含四個div塊的橫向、豎向移動,顏色與邊框漸變效果,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄猨s圖片放大鏡實例講解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
layui異步加載table表中某一列數(shù)據(jù)的例子
今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了javaScript日期工具類的匯總，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
簡述JavaScript提交表單的方式 （Using JavaScript Submit Form）
這篇文章主要介紹了簡述JavaScript提交表單的方式 （Using JavaScript Submit Form）的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要是對JavaScript中的變量作用域進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結(jié)合實例形式分析了冒泡的原理及javascript阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了萬字詳解JavaScript手寫一個Promise，Promise就是一個類，在執(zhí)行這個類的時候，需要傳遞一個執(zhí)行器(回調(diào)函數(shù))進去，執(zhí)行器會立即執(zhí)行2022-07-07