示例:
代码:
父组件
<!-- 经营范围 -->
<uni-popup ref="fw_popup" type="bottom">
<com-screen :list="fwList" :defultValue="type_ids" :type="Number(type)" @change="getIds" @close="close" :setType="true"></com-screen>
</uni-popup>
import comScreen from "@/components/com-screen/com-screen.vue"
组件
<template>
<!-- 经营范围选择 -->
<view class="screenCon" @tap.stop="tapstop">
<view class="headbar">
<image class="leftArrow" @click="tapCancel" src="/static/index/arrow.png" mode=""></image>
<text class="labelTitle">选择{{title}}</text>
<text class="confirm" @click="tapback">确定</text>
</view>
<scroll-view scroll-y="true" style="height: 450rpx; width: 710rpx;" :show-scrollbar="false">
<view class="optionCon">
<view class="optionitem" :class="ids.indexOf(item.id) >=0 ?'activeitem':''" v-for="(item,index) in lists" :key="index"
@click="tapitem(item.id)">
<text class="optionname" :class="ids.indexOf(item.id) >=0 ?'activename':''">{{item.name}}</text>
</view>
</view>
<view class="" style="height: 40rpx;"></view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "indexScreen",
props:{
//选择类型 1经营范围 2承包范围 3工作性质
type:{
type: Number,
default: 1,
},
title:{
type:String,
default:'经营范围(最多三项)'
},
list:{
type: Array,
default: [],
},
setType:{
type: Boolean,
default: false, //表示为注册,true 搜索为false
},
defultValue:{
type:String,
default:''
}
},
data() {
return {
types:0,
current: 0,
ids:[],
indexs:[],
lists:[],
};
},
created() {
this.types = this.type;
if(this.defultValue != ''){
this.ids = this.defultValue.split(',').map(Number);
console.log(this.ids);
}
setTimeout(()=>{
this.lists = this.list;
},300)
},
// watch: {
// // type: function(type1,oldtype){
// // console.log(type1,oldtype)
// // this.types = type1; //newVal即是chartData
// // }
// },
destroyed() {
this.$off('change')
},
methods: {
tapstop() {},
tapitem(id){
console.log(this.type)
if(this.ids.indexOf(id) >=0){
this.ids.splice(this.ids.indexOf(id),1)
}else{
if(this.setType){//注册情况
if(this.ids.length< 3 && this.type!=2){
this.ids.push(id);
return
}
}else{
this.ids.push(id);
return
}
}
},
tapback(){
let idss =this.ids.join(',');
console.log(idss)
this.$emit('change',idss)
},
tapCancel(){
this.$emit('close',{})
}
}
}
</script>
<style lang="scss">
.screenCon {
width: 750rpx;
padding: 0rpx 20rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
background-color: #FFFFFF;
flex-direction: column;
justify-content: center;
align-items: center;
}
.headbar {
width: 710rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #EEEEEE;
padding: 25rpx 20rpx;
}
.leftArrow {
width: 43rpx;
height: 43rpx;
}
.labelTitle {
font-size: 30rpx;
color: #333333;
font-weight: bold;
}
.confirm {
font-size: 30rpx;
color: #F39D0E;
font-weight: bold;
}
.optionCon {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 20rpx;
}
.optionitem {
width: 340rpx;
height: 80rpx;
margin-top: 25rpx;
padding: 0 5rpx;
font-size: 26rpx;
border-radius: 20rpx;
background: #EEEEEE;
text-align: center;
border: 1px solid #EEEEEE;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
}
.optionname {
width: 330rpx;
height: 80rpx;
font-size: 26rpx;
font-weight: 400;
color: #333333;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
line-height: 80rpx;
overflow: hidden;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
text-overflow: ellipsis;
}
.activeitem {
background-color: #FFE9D2;
border: 1px solid #FB8C16;
color: #F39A10;
// text-align: center;
}
.activename {
color: #F39A10;
}
</style>