property/staff_ui/components/home/picker.vue

<template>
	<view>
		<view class="topbtns mr12" @click="getShowFn">
			<block v-if="pickval==0">
				<image :src="online"  class="limg"></image>上线中
			</block>
			<block v-if="pickval==1">
				<image :src="noline" v-if="pickval==1" class="limg"></image>离线中
			</block>
			
			<image :src="upimg" class="upimg"></image>
			<view class="pickbg" v-if="pickflag" @click.stop="getHideFn"></view>
			<view class="absbox" v-if="pickflag">
				<view class="uni-popper__arrow"></view>
				<view class="lists">
					<view class="list" v-for="(ite,idx) in list" :key="idx" @click.stop="getTabFn(ite.val)">{{ite.tit}}</view>
					<!-- <view class="list">离线</view> -->
				</view>

			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	export default {
		components: {},
		props:{
			localdata:{
				type: Array,
				default () {
					return []
				}
			},
			// value: {
			// 	type: [String, Number],
			// 	default: ''
			// },
		},
		data() {
			return {
				noline: require("@/static/images/home/noline.png"),
				online: require("@/static/images/home/online.png"),
				upimg: require("@/static/images/home/up.png"),
				pickflag: false,
				pickval:0,
				list:[{tit:"在线",val:0},{tit:"离线",val:1}]
			}
		},
		onLoad: function() {

		},
		methods: {
			getTabFn(val){
				this.pickval=val;
				this.pickflag=false;
				this.$emit("getChange",val)
			},
			getHideFn(){
				this.pickflag=false;
			},
			getShowFn(){
				this.pickflag=true;
			}
		}
	}
</script>
<style>
	page {
		background: #F3F3F0;
	}
</style>
<style lang="scss" scoped>
.pickbg{position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 2;}
.topbtns{font-weight: bold;background: rgba(93, 147, 255, 0.5);font-size: 24rpx;min-width: 174rpx;height: 52rpx;display: flex;align-items: center;padding: 0 20rpx;border-radius: 26rpx;color: #FFFFFF;box-sizing: border-box;position: relative;
		.upimg{width: 12rpx;height: 6rpx;flex: 0 0 auto;margin-left: 16rpx;}
		.limg{width: 24rpx;height: 24rpx;margin-right: 16rpx;flex: 0 0 auto;}
}
			// 自定义选择框
.absbox{position: absolute;box-sizing: border-box;position: absolute;top: calc(100% + 24rpx);left: 0;width: 100%;background-color: #FFFFFF;border: 2rpx solid #EBEEF5;border-radius:12rpx;box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);z-index: 3;padding: 8rpx 0;
	.uni-popper__arrow{position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 12rpx;filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));top: -12rpx;left: 10%;margin-right: 6rpx;border-top-width: 0;border-bottom-color: #EBEEF5;
		&:after{position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 12rpx;content: " ";top: 2rpx;margin-left: -12rpx;border-top-width: 0;border-bottom-color: #fff;}
	}
	.lists{width: 100%;height: 100%;overflow: auto;}
	.list{line-height: 70rpx;font-size: 28rpx;color: #272727;padding: 0 10rpx;
		&:hover {
			background-color: #f9f9f9;
		}
	}
}
</style>