app-icon.vue 2.1 KB
<template>
    <tooltip v-if="icons.length > 0" :content="icons.length > 1 ? '其他' : icons[0].text" :class="`app-icon ${disabled ? 'app-icon--disabled' : 'app-icon--normal'}`" placement="top" :disabled="disabled" :transfer="true">
        <template v-if="icons.length > 1">
            <poptip v-model="visible" trigger="hover" content="content" placement="bottom" :transfer="true" popper-class="app-icon-others" :disabled="disabled">
                <img src="/assets/img/others.svg" />
                <div class="others" slot="content">
                    <div v-for="(icon, index) in icons" :key="index" class="others-item" @click="($event) => handleClick(icon, $event)">
                        <span class="icon-text">{{icon.text}}</span>
                    </div>
                </div>
            </poptip>
        </template>
        <template v-else-if="icons.length == 1">
            <img v-if="icons[0].imgPath" :src="icons[0].imgPath" @click="($event) => handleClick(icons[0], $event)"/>
            <i v-else-if="icons[0].iconClass" :class="icons[0].iconClass" @click="($event) => handleClick(icons[0], $event)"></i>
        </template>
    </tooltip>
</template>
<script lang='ts'>
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppIcon extends Vue {

    /**
     * 禁用
     *
     * @type {boolean}
     * @memberof AppIcon
     */
    @Prop({ default: false })
    public disabled!: boolean;

    /**
     * 图标集
     *
     * @type {any[]}
     * @memberof AppIcon
     */
    @Prop({ default: () => [] })
    public icons!: any[];

    /**
     * 显示poptip
     *
     * @type {any[]}
     * @memberof AppIcon
     */
    public visible: boolean = false;

    /**
     * 处理点击
     *
     * @memberof AppIcon
     */
    public handleClick(icon: any, $event: MouseEvent) {
        $event.stopPropagation();
        $event.preventDefault();
        this.visible = false;
        if (!this.disabled) {
            this.$emit('click', icon, $event);
        }
    }
}
</script>

<style lang="scss">
@import './app-icon.scss';
</style>