<template> <van-dropdown-menu active-color="#323233" :class="showTitle === title?'':'dropdown-menu-ative'" class="dropdown-menu"> <van-dropdown-item :title="showTitle" ref="item" > <div class="dropdown-box"> <div v-for="(item,index) in items" :key="index" class="dropdown-item" @click="itemClick(item)"> <div v-show="selectItem == item" class="dropdown-item-icon"><van-icon name="success" /></div> <div class="dropdown-item-text">{{item.label}}</div> </div> </div> <van-button class="dropdown-btn" @click="onReset" >重置</van-button> <van-button class="dropdown-btn" type="info" @click="onConfirm">确定</van-button> </van-dropdown-item> </van-dropdown-menu> </template> <script lang="ts"> import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator"; @Component({ components: {} }) export default class AppVanSelect extends Vue { /** * 数据集 * * @type {any} * @memberof AppVanMenu */ @Prop() public items?: any; /** * 名称 * * @type {any} * @memberof AppVanMenu */ @Prop() public title?: any; /** * 展示信息 * * @type {any} * @memberof AppVanMenu */ public showTitle :any = ""; /** * 重置按钮 * * @type {string} * @memberof AppVanMenu */ public onReset(){ this.selectItem = {}; this.showTitle = this.title; this.closeDropdown(); } /** * 当前选中数据 * * @type {any} * @memberof AppVanMenu */ public selectItem: any ={}; /** * 数据点击事件 * * @type {any} * @memberof AppVanMenu */ public itemClick(item:any){ this.selectItem = item; } /** * 生命周期 * * @memberof AppVanMenu */ created(){ this.showTitle = this.title ; } /** * 收起数据 * * @type {any} * @memberof AppVanMenu */ public closeDropdown() { let dropdown: any =this.$refs.item; if(dropdown.toggle && dropdown.toggle instanceof Function){ dropdown.toggle(); } } /** * 提交事件 * * @type {any} * @memberof AppVanMenu */ public onConfirm() { if(this.selectItem.label){ this.showTitle = this.selectItem.label; } this.closeDropdown(); } } </script> <style lang="less"> .dropdown-box { display: flex; flex-wrap: wrap; padding: 15px 0; background: #f4f4f4; .dropdown-item { width: 50%; display: flex; padding: 8px 12px; .dropdown-item-icon { color: #e2676d; padding: 0 5px; position: absolute; } .dropdown-item-text { margin-left: 35px; } } } .dropdown-btn{ width: 50%; } .dropdown-menu{ min-width: 100px; max-width: 100px; height: 30px; border: solid #ccc 1px; border-radius: 30px; margin: 5px; background: #f2f2f2; .van-ellipsis { padding-right: 15px; } .van-dropdown-menu__title::after { right: 6px; } } .van-dropdown-item__content { border-radius: 0 0 15px 15px; } .dropdown-menu-ative{ border-color: #ee0a24; background: #ffe9ec; .van-ellipsis{ color: #ee0a24; } .van-dropdown-menu__title::after { color: #ee0a24; } } </style>