app-van-select.vue 3.1 KB
Newer Older
KK's avatar
KK committed
1
<template>
2 3
  <van-dropdown-menu  :class="showTitle === title?'':'dropdown-menu-ative'" class="ibiz-dropdown-menu">
    <van-dropdown-item get-container="#app" :lazy-render="false" :title="showTitle" ref="item" >
KK's avatar
KK committed
4 5 6 7 8 9
        <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>
10 11
      <van-button  class="dropdown-btn" @click="onReset" >{{$t('reset')}}</van-button>
      <van-button  class="dropdown-btn" type="info" @click="onConfirm">{{$t('confirm')}}</van-button>
KK's avatar
KK committed
12 13
    </van-dropdown-item>
  </van-dropdown-menu>
KK's avatar
KK committed
14 15 16
</template>

<script lang="ts">
17
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
KK's avatar
KK committed
18 19

@Component({
20 21 22 23 24 25 26 27 28 29 30 31 32
    components: {},
    i18n: {
        messages: {
            'ZH-CN': {
                confirm: '确定',
                reset: '重置',
            },
            'EN-US': {
                confirm: 'Confirm',
                reset: 'Reset',
            }
        }
    }
KK's avatar
KK committed
33 34 35
})
export default class AppVanSelect extends Vue {

36 37 38 39 40 41
    /**
      * 数据集
      *
      * @type {any}
      * @memberof AppVanSelect
      */
KK's avatar
KK committed
42 43
    @Prop() public items?: any;

44 45 46 47
    /**
     * 搜索名
     *
     * @type {any}
48
     * @memberof AppVanSelect
49
     */
KK's avatar
KK committed
50
    @Prop() public name!: string;
51

KK's avatar
KK committed
52 53 54 55
    /**
     * 名称
     *
     * @type {any}
56
     * @memberof AppVanSelect
KK's avatar
KK committed
57 58 59 60 61 62 63
     */
    @Prop() public title?: any;

    /**
     * 展示信息
     *
     * @type {any}
64 65 66 67 68 69 70 71 72
     * @memberof AppVanSelect
     */
    public showTitle: any = "";

    /**
     * 当前选中数据
     *
     * @type {any}
     * @memberof AppVanSelect
KK's avatar
KK committed
73
     */
74
    public selectItem: any = {};
KK's avatar
KK committed
75 76 77 78 79

    /**
     * 重置按钮
     *
     * @type {string}
80
     * @memberof AppVanSelect
KK's avatar
KK committed
81
     */
82
    public onReset() {
KK's avatar
KK committed
83 84 85
        this.selectItem = {};
        this.showTitle = this.title;
        this.closeDropdown();
86
        this.$emit('onConfirm', { [this.name]: this.selectItem.value })
KK's avatar
KK committed
87 88 89 90 91 92
    }

    /**
     * 数据点击事件
     *
     * @type {any}
93
     * @memberof AppVanSelect
KK's avatar
KK committed
94
     */
95
    public itemClick(item: any) {
KK's avatar
KK committed
96 97 98
        this.selectItem = item;
    }

99

KK's avatar
KK committed
100 101 102 103 104

    /**
     * 收起数据
     *
     * @type {any}
105
     * @memberof AppVanSelect
KK's avatar
KK committed
106 107
     */
    public closeDropdown() {
108 109
        let dropdown: any = this.$refs.item;
        if (dropdown.toggle && dropdown.toggle instanceof Function) {
KK's avatar
KK committed
110 111
            dropdown.toggle();
        }
112

KK's avatar
KK committed
113
    }
114

KK's avatar
KK committed
115 116 117 118
    /**
     * 提交事件
     *
     * @type {any}
119
     * @memberof AppVanSelect
KK's avatar
KK committed
120 121
     */
    public onConfirm() {
122 123
        if (this.selectItem.label) {
            this.showTitle = this.selectItem.label;
KK's avatar
KK committed
124
        }
125
        this.closeDropdown();
126 127 128 129 130 131 132 133 134 135
        this.$emit('onConfirm', { [this.name]: this.selectItem.value })
    }

    /**
     * 生命周期
     *
     * @memberof AppVanSelect
     */
    created() {
        this.showTitle = this.title;
KK's avatar
KK committed
136 137 138 139 140
    }

}
</script>
<style lang="less">
141
@import "./app-van-select.less";
KK's avatar
KK committed
142
</style>