All files / src/components/u-popup-combination.vue index.vue

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
79
80
81
82
83
84
85
 
 
 
7x
 
7x
 
 
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
    <span :class="$env.VUE_APP_DESIGNER? [$style.root, $style.rootDesigner]:$style.root" :display="display" :ellipsis="ellipsis"
        :vusion-click-enabled="$env.VUE_APP_DESIGNER">
        <span vusion-slot-name="reference" :class="$style.reference">
            <slot name="reference"></slot>
            <s-empty v-if="$env.VUE_APP_DESIGNER && !$slots.reference && !!$attrs['vusion-node-path']"></s-empty>
        </span>
        <u-popup reference="prev" v-bind="$attrs" v-on="$listeners" ref="popup" :vusion-scope-id="$vnode.context.$options._scopeId">
            <slot></slot>
        </u-popup>
    </span>
</template>
 
<script>
import UPopup from '../u-popup.vue/index.vue';
import SEmpty from '../../components/s-empty.vue';
export default {
    name: 'u-popup-combination',
    components: { SEmpty, UPopup },
    props: {
        display: String,
        ellipsis: Boolean,
    },
    methods: {
        // 双击打开弹出框
        // designerDbControl() {
        //     this.$refs.popup.designerDbControl();
        // },
        // 单击打开弹出框
        designerControl() {
            this.$refs.popup.toggle();
        },
        open() {
            this.$refs.popup.open();
        },
        close() {
            this.$refs.popup.close();
        },
        toggle(opened) {
            this.$refs.popup.toggle(opened);
        },
        update() {
            this.$refs.popup.update();
        },
        scheduleUpdate() {
            this.$refs.popup.scheduleUpdate();
        },
    },
};
</script>
 
<style module>
.root{
    display: inline-block;
    vertical-align: middle;
}
.root[display="block"]{
    display: block;
}
.root[ellipsis] {
    width: 100%;
}
.root[ellipsis] .reference {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.root[ellipsis] .reference > * {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rootDesigner{
    padding: 2px;
    border: 1px dashed #C3C3C3;
    /* min-height: 100px; */
}
.reference{
    display: inline-block;
}
</style>