底部弹出popup:弹出式多项选择
需要引入组件uni-popup ,引入流程略，可看官方文档import uniPopup from '@/components/uni-popup/uni-popup.vue';千万不要打错单词。。。。。。。。修改组件文件夹中的该组件的vue文件，可调整至想要的效果，下面将给出我修改后的源码该组件的将用户选择的数据传出到使用组件的页面接收：该组...
·
需要引入组件uni-popup ,引入流程略，可看官方文档
import uniPopup from '@/components/uni-popup/uni-popup.vue';千万不要打错单词。。。。。。。。
修改组件文件夹中的该组件的vue文件，可调整至想要的效果，下面将给出我修改后的源码
该组件的
将用户选择的数据传出到使用组件的页面
接收：
该组件的显示是通过:show传入布尔量true，即改变type可改变popup的显示与否
子组件改变父组件的值的方法见“报错”文档第3
t:
<button type="button" @click="togglePopup('bottom')" class="mybutton">选择</button>
<uni-popup @getclasslist='getclasslist' v-on:typechange="change($event)" :show="type === 'bottom'" position="bottom" mode="fixed" msg="底部弹出popup" @hidePopup="togglePopup('')"></uni-popup>js:
data: 声明labellist
methods：
change(e){
this.type=e;
},
getschool(){
showPicker(3)
},
getclasslist(classlist)
{
// console.log(classlist);
this.labellist=classlist;
},
//popup
togglePopup(type) {
this.type = type;
},css:
略
修改后的组件代码：多选列表的css布局还须调整
<template>
<view>
<view class="uni-mask" v-show="show" :style="{ top: offsetTop + 'px' }" @click="hide" @touchmove.stop.prevent="moveHandle"></view>
<view class="uni-popup" :class="'uni-popup-' + position + ' ' + 'uni-popup-' + mode" v-show="show">
<view class="top">
<view>点击课程</view>
<view class="" v-on:click="sub">确定</view>
</view>
<view class="content">
<checkbox-group @change="checkboxChange" class="checkgroup">
<view v-for="(item,index) in labelList" :key="item.value" >
<label :class="item.checked ? 'checkbox selectBox' : 'checkbox '" @click="labelBtn(item.value,index)" >
<checkbox :value="item.value" :checked="item.checked" v-show="false"/>{{item.name}}
</label>
</view>
</checkbox-group>
</view>
<slot></slot>
<view v-if="position === 'middle' && mode === 'insert'" class=" uni-icon uni-icon-close" :class="{
'uni-close-bottom': buttonMode === 'bottom',
'uni-close-right': buttonMode === 'right'
}" @click="closeMask"></view>
</view>
</view>
</template>
<script>
export default {
props: {
/**
* 页面显示
*/
show: {
type: Boolean,
default: false
},
/**
* 对齐方式
*/
position: {
type: String,
//top - 顶部， middle - 居中, bottom - 底部
default: 'middle'
},
/**
* 显示模式
*/
mode: {
type: String,
default: 'insert'
},
/**
* 额外信息
*/
msg: {
type: String,
default: ''
},
/**
* h5遮罩是否到顶
*/
h5Top: {
type: Boolean,
default: false
},
buttonMode: {
type: String,
default: 'bottom'
}
},
data() {
return {
offsetTop: 0,
labelName:'',
labelDataList:'',
labelList: [{
name: '语文',
value: '0',
checked: false
},
{
name: '数学',
value: '1',
checked: false
},
{
name: '英语',
value: '2',
checked: false
},
{
name: '物理',
value: '3',
checked: false
},
{
name: '化学',
value: '4',
checked: false
},
{
name: '生物',
value: '5',
checked: false
},
{
name: '历史',
value: '6',
checked: false
},
{
name: '地理',
value: '7',
checked: false
},
{
name: '政治',
value: '8',
checked: false
}],
name: 'uni-popup',
show2:false
};
},
watch: {
h5Top(newVal) {
if (newVal) {
this.offsetTop = 44;
} else {
this.offsetTop = 0;
}
}
},
methods: {
hide() {
if (this.mode === 'insert' && this.position === 'middle') return;
this.$emit('hidePopup');
},
closeMask() {
if (this.mode === 'insert') {
this.$emit('hidePopup');
}
},
labelBtn(name,index){
console.log(name,index,"nameindex")
this.labelName = name
if(this.labelDataList.join(',').indexOf(name) >-1){
this.labelList[index].checked = true
// console.log(this.labelList[index].name)
}else{
this.labelList[index].checked = false
}
},
checkboxChange: function (e) {
this.labelDataList = e.detail.value
// console.log(this.labelList[1].name);
// console.log(e)
console.log(e.detail.value)
// console.log('checkbox发生change事件，携带value值为：' + this.labelList[e.detail.value].name)
console.log(this.labelDataList,"labelDataList");
var classlist='';
for (var i=0;i<e.detail.value.length;i++) {
// console.log(this.labelList[e.detail.value[i]].name);
classlist=classlist+this.labelList[e.detail.value[i]].name+',';
// console.log(classlist);
}
this.$emit('getclasslist',classlist);
},
moveHandle() {},
sub:function(){
this.$emit("typechange","");
}
},
created() {
let offsetTop = 0;
//#ifdef H5
if (!this.h5Top) {
offsetTop = 44;
} else {
offsetTop = 0;
}
//#endif
this.offsetTop = offsetTop;
},
};
</script>
<style>
.top{
width: 92%;
margin: 0 4%;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #FFFFFF;
}
.uni-mask {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.uni-popup {
position: absolute;
z-index: 999;
background-color: #ffffff;
}
.uni-popup-middle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.uni-popup-middle.uni-popup-insert {
min-width: 380upx;
min-height: 380upx;
max-width: 100%;
max-height: 80%;
transform: translate(-50%, -65%);
background: none;
box-shadow: none;
}
.uni-popup-middle.uni-popup-fixed {
border-radius: 10upx;
padding: 30upx;
}
.uni-close-bottom,
.uni-close-right {
position: absolute;
bottom: -180upx;
text-align: center;
border-radius: 50%;
color: #f5f5f5;
font-size: 60upx;
font-weight: bold;
opacity: 0.8;
z-index: -1;
}
.uni-close-right {
right: -60upx;
top: -80upx;
}
.uni-close-bottom:after {
content: '';
position: absolute;
width: 0px;
border: 1px #f5f5f5 solid;
top: -200upx;
bottom: 56upx;
left: 50%;
transform: translate(-50%, -0%);
opacity: 0.8;
}
.uni-popup-top {
top: 0;
left: 0;
width: 100%;
height: 100upx;
line-height: 100upx;
text-align: center;
}
.uni-popup-bottom {
left: 0;
bottom: 0;
width: 100%;
min-height: 100upx;
line-height: 100upx;
text-align: center;
}
.selectBox{
background: #EB5248!important;
color: #fff!important;
}
.checkbox{
padding: 5px 10px;
border: 1px solid #EB5248;
margin: 10px;
border-radius: 7upx;
color: #000;
}
.content{
padding: 10px;
}
.checkgroup{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
</style>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)