快速分组组件

src/app-register.ts

@@ -86,6 +86,8 @@ export const AppComponents = {
         v.component('app-mob-menu-list-view', () => import('@/components/app-mob-menu-list-view/app-mob-menu-list-view.vue'));
         // 图片滑动视图
         v.component('app-mob-menu-swiper-view', () => import('@/components/app-mob-menu-swiper-view/app-mob-menu-swiper-view.vue'));
+        //快速分组组件
+        v.component('app-van-select', () => import('@/components/app-van-select/app-van-select.vue'));   
         // 默认样式视图
         v.component('app-mob-menu-default-view', () => import('@/components/app-mob-menu-default-view/app-mob-menu-default-view.vue'));
         // 菜单样式 END

src/components/app-van-select/app-van-select.vue

+<template>
+<van-dropdown-menu active-color="#ee0a24" :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() {
+         this.showTitle = this.selectItem.label;
+         this.closeDropdown();
+    }
+
+}
+</script>
+<style lang="less">
+.dropdown-box {
+    display: flex;
+    flex-wrap: wrap;
+    .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{
+        width: 100px;
+    height: 30px;
+    border: solid #ccc 1px;
+    border-radius: 30px;
+    .van-ellipsis {
+    padding-right: 15px;
+}
+.van-dropdown-menu__title::after {
+    right: 6px;
+}
+}
+.dropdown-menu-ative{
+    border-color: #ee0a24;
+    background: #ffe9ec;
+    .van-ellipsis{
+    color: #ee0a24;
+}
+.van-dropdown-menu__title::after {
+
+    color: #ee0a24;
+}
+}
+
+
+</style>
\ No newline at end of file