安装弹窗插件
This commit is contained in:
duan
216
uni_modules/niceui-popup-select/readme.md
Normal file
216
uni_modules/niceui-popup-select/readme.md
Normal file
@@ -0,0 +1,216 @@
|
||||
### 创作不易，请给五星评论
|
||||
### 有疑问或定制 +q:408757217,备注uniapp.
|
||||
|
||||
### 使用说明
|
||||
# ！！！注意：本插件要搭配 uni-icons、uni-popup、uni-scss使用
|
||||
### Popup-Select Props
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---- | ---- | ---- | ---- |
|
||||
| columns | String | - | 数据项 |
|
||||
| selectValue | Number | - | 选中的值 |
|
||||
| option | String | { label: 'label', value: 'value' } | 数据项的属性key |
|
||||
| isSearch | Boolean | true | 是否开启搜索功能 |
|
||||
| multiple | Boolean | true | 是否开启多选 |
|
||||
|
||||
### Popup-Select 示例
|
||||
```
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="uni-title uni-common-pl">uniapp下拉选择器（支持多选）</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择（多选）
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<view class="as-input" @click="openFruit">
|
||||
<view class="placeholder" v-if="resultFruit==undefined||resultFruit==''">请选择你喜欢的水果</view>
|
||||
<view class="as-content" v-else>{{resultFruit}}</view>
|
||||
<uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择（多选）
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<view class="as-input" @click="openFood">
|
||||
<view class="placeholder" v-if="resultFood==undefined||resultFood==''">请选择你喜欢的食物</view>
|
||||
<view class="as-content" v-else>{{resultFood}}</view>
|
||||
<uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择（单选）
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<view class="as-input" @click="openCountry">
|
||||
<view class="placeholder" v-if="resultCountry==undefined||resultCountry==''">请选择你最喜欢的国家</view>
|
||||
<view class="as-content" v-else>{{resultCountry}}</view>
|
||||
<uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<niceui-popup-select ref="showFruit" :columns="fruits" :selectValue="fruitId" :is-search="false"
|
||||
:option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
|
||||
<niceui-popup-select ref="showFood" :columns="foods" :selectValue="foodId"
|
||||
:option="{label:'name', value:'id'}" @confirm="confirmFood"></niceui-popup-select>
|
||||
|
||||
<niceui-popup-select ref="showCountry" :columns="countrys" :selectValue="countryId" :multiple="false"
|
||||
:option="{label:'name', value:'id'}" @confirm="confirmCountry"></niceui-popup-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NiceuiPopupSelect from '@/components/niceui-popup-select.vue'
|
||||
export default {
|
||||
components:{NiceuiPopupSelect},
|
||||
data() {
|
||||
return {
|
||||
fruits:[
|
||||
{
|
||||
id:'1',
|
||||
name:'苹果'
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
name:'香蕉'
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
name:'桃子'
|
||||
}
|
||||
],
|
||||
fruitId:[],
|
||||
fruitName:[],
|
||||
|
||||
foods:[
|
||||
{
|
||||
id:'1',
|
||||
name:'红烧鱼'
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
name:'炒三丝'
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
name:'青椒肉丝'
|
||||
}
|
||||
],
|
||||
foodId:[],
|
||||
foodName:[],
|
||||
|
||||
countrys:[
|
||||
{
|
||||
id:'1',
|
||||
name:'中国'
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
name:'美国'
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
name:'日本'
|
||||
}
|
||||
],
|
||||
countryId:[],
|
||||
countryName:[]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
resultFruit(){
|
||||
return this.fruitName.join(",");
|
||||
},
|
||||
resultFood(){
|
||||
return this.foodName.join(",");
|
||||
},
|
||||
resultCountry(){
|
||||
return this.countryName.join(",");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFruit(){
|
||||
this.$refs.showFruit.showPopup()
|
||||
},
|
||||
confirmFruit(value,data) {
|
||||
this.fruitId = value
|
||||
this.fruitName = data.map(it=>it.name)
|
||||
this.$refs.showFruit.closePopup()
|
||||
},
|
||||
|
||||
openFood(){
|
||||
this.$refs.showFood.showPopup()
|
||||
},
|
||||
confirmFood(value,data) {
|
||||
this.foodId = value
|
||||
this.foodName = data.map(it=>it.name)
|
||||
this.$refs.showFood.closePopup()
|
||||
},
|
||||
|
||||
openCountry(){
|
||||
this.$refs.showCountry.showPopup()
|
||||
},
|
||||
confirmCountry(value,data) {
|
||||
console.log('confirmCountry---------',value,data)
|
||||
this.countryId = value
|
||||
this.countryName = data.map(it=>it.name)
|
||||
this.$refs.showCountry.closePopup()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
background-color: #f7f7f7;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
.uni-title{
|
||||
font-size: 33rpx;
|
||||
font-weight: bold;
|
||||
padding: 20rpx 20rpx;
|
||||
}
|
||||
.uni-list-cell{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx;
|
||||
.uni-list-cell-left{
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
.uni-list-cell-db{
|
||||
flex:1
|
||||
}
|
||||
.as-input{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.customer-icon{
|
||||
padding: 0 0 0 5rpx;
|
||||
}
|
||||
.placeholder{
|
||||
font-size:33rpx;
|
||||
color:#999;
|
||||
}
|
||||
.as-content{
|
||||
color: #333;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user