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 79 80 81 82 83 84 85 | 7x 7x 7x | <template>
<div :class="$style.root">
<div v-show="false"><slot></slot></div>
<u-linear-layout gap="small">
<template v-for="itemVM in outsideVMs">
<u-create-element tag="u-link" :key="itemVM._uid"
v-bind="itemVM.$attrs" v-on="itemVM.$listeners"
:data="itemVM.$vnode.data" :children="itemVM.$slots.default">
</u-create-element>
</template>
<u-link v-if="insideVMs.length">{{ menuTitle }} ▾
<u-popup :placement="placement">
<u-menu slot="root">
<template v-for="itemVM in insideVMs">
<u-create-element tag="u-menu-item" :key="itemVM._uid"
v-bind="itemVM.$attrs" v-on="itemVM.$listeners"
:data="itemVM.$vnode.data" :children="itemVM.$slots.default">
</u-create-element>
</template>
</u-menu>
</u-popup>
</u-link>
</u-linear-layout>
</div>
</template>
<script>
import i18n from './i18n';
import i18nMixin from '../../mixins/i18n';
export default {
name: 'u-actions',
childName: 'u-action',
// i18n,
mixins: [i18nMixin('u-actions')],
props: {
maxCount: { type: Number, default: 3 },
menuTitle: {
type: String,
default() {
return this.$tt('more');
},
},
placement: { type: String, default: 'bottom-end' },
},
data() {
return { itemVMs: [], outsideVMs: [], insideVMs: [] };
},
watch: {
itemVMs() {
this.watchValue();
},
},
created() {
this.$on('add-item-vm', (itemVM) => {
itemVM.parentVM = this;
this.itemVMs.push(itemVM);
});
this.$on('remove-item-vm', (itemVM) => {
itemVM.parentVM = undefined;
this.itemVMs.splice(this.itemVMs.indexOf(itemVM), 1);
});
},
methods: {
watchValue() {
const itemVMs = this.itemVMs.filter((itemVM) => !itemVM.hidden);
if (itemVMs.length <= this.maxCount) {
this.outsideVMs = itemVMs.slice(0, itemVMs.length);
this.insideVMs = [];
} else {
this.outsideVMs = itemVMs.slice(0, this.maxCount - 1);
this.insideVMs = itemVMs.slice(
this.maxCount - 1,
itemVMs.length,
);
}
},
},
};
</script>
<style module>
.root {}
</style>
|