uniProject/pages/admin/Jiazheng/index.vue

<template>
	<view>
		<view class="jiazheng-uni-list">

			<view>
				<view @click="clickAlltype">
					全部类型
				</view>
				<view v-if="isOpen" v-for="(item,index) in allType" :key="index" @click="onSelectCell(item,index)">
					<view class="le-dropdown-cell-active-text">{{item.label}}</view>
					<view v-show="item.value==typeChecked" class=""></view>
				</view>

				<view>
					更新时间
				</view>
				<view>
					录入时间
				</view>
				<view>
					<view  @click="toggle('top')">搜索</view>
				</view>
			</view>
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view>
						asdfdsfadsf阿萨德发生的发的顺丰
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	// import {
	// 	DropdownList
	// } from "./data.js";
	// const menuList = ref(DropdownList)
	const allType = [{
			label: "由近到远",
			value: 0
		},
		{
			label: "由远到近",
			value: 1
		},
		{
			label: "由远到近",
			value: 2
		},
		{
			label: "由远到近",
			value: 3
		},
	]

	let isOpen = ref(false)
	let typeChecked = ref(1)
	const popup = ref(null);
	const clickAlltype = (data) => {
		isOpen.value = true
	}
	const onSelectCell = (data, index) => {
		console.log('data', data);
		console.log('index', index);
		isOpen.value = false
	}
	const toggle = (data, index) => {
		popup.value.open('top')
	}
</script>

<style>
	.jiazheng-uni-list {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.jiazheng-uni-list-left {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>