All files / src/components/u-select.vue item.vue

94.73% Statements 18/19
54.54% Branches 12/22
100% Functions 3/3
94.44% Lines 17/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78      7x   7x     7x                                                                                                                                          
<template>
<div :class="$style.root"
    :selected="parentVM.multiple ? currentSelected : isSelected"
    :isShowMultipleIcon="parentVM.multiple"
    :duplicated="parentVM.duplicated"
    :focused="isFocused"
    :readonly="parentVM.readonly"
    :disabled="disabled || parentVM.disabled"
    @mouseenter="hover"
    :style="{ direction: parentVM.ellipsisDirection }"
    @click="select"
    v-ellipsis-title
    vusion-slot-name="default">
    <!-- @override: 添加了flag功能 -->
    <span v-if="flag !== undefined" :class="$style.flag" :layer="layer" v-tooltip.top="flag"></span>
    <slot>
        {{ text }}
        <s-empty
            v-if="(!$slots.default)
            && !text
            && $env.VUE_APP_DESIGNER
            && !!$attrs['vusion-node-path']">
        </s-empty>
    </slot>
    <div :class="$style.desc" v-if="description || $slots.description">
        <slot name="description">
            {{ description }}
        </slot>
    </div>
</div>
</template>
 
<script>
import { UListViewItem } from '../u-list-view.vue';
import SEmpty from '../s-empty.vue';
 
export default {
    name: 'u-select-item',
    parentName: 'u-select',
    groupName: 'u-select-group',
    components: {
        SEmpty,
    },
    extends: UListViewItem,
    props: {
        flag: { type: String },
        layer: { type: String },
        text: { type: String },
        description: { type: String },
    },
    computed: {
        isFocused() {
            return this.parentVM && this.parentVM.focusedVM === this;
        },
        currentText() {
            return this.text || this.$slots.default[0]
                && (this.$slots.default[0].text // raw html text
                    || this.$slots.default[0].componentOptions
                    && this.$slots.default[0].componentOptions.propsData
                    && this.$slots.default[0].componentOptions.propsData.text); // u-text
        },
    },
    mounted() {
        this.$nextTick(() => {
            if (this.isSelected)
                this.$el.scrollIntoView({ block: 'center' });
        });
    },
    methods: {
        hover() {
            this.parentVM && (this.parentVM.focusedVM = this);
        },
    },
};
</script>
 
<style module src="./item.css"></style>