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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | <template> <a :class="isInNavbar ? $style.root : $style.dropdownRoot" :selected="parentVM.router ? active : isSelected" :readonly="parentVM.readonly" :disabled="disabled || parentVM.disabled" :href="currentHref" :target="target" @click="parentVM.router ? onClick($event) : onSelect($event)" v-on="listeners" v-ellipsis-title vusion-slot-name-edit="text" vusion-slot-name="default"> <i-ico v-if="icon" :name="icon" :class="$style.singleicon" notext></i-ico> <slot>{{ text }}</slot> <s-empty v-if="(!$slots.default) && !text && $env.VUE_APP_DESIGNER"> </s-empty> </a> </template> <script> import { MSinglexItem } from '../m-singlex.vue'; import ULink from '../u-link.vue'; export default { name: 'u-navbar-item-multi', parentName: 'u-navbar-multi', groupName: 'u-navbar-group-multi', extends: MSinglexItem, computed: { isInNavbar() { return !this.groupVM; }, }, methods: { onClick(e) { if (this.disabled || this.parentVM.readonly || this.parentVM.disabled || (this.groupVM && this.groupVM.disabled)) return e.preventDefault(); ULink.methods.onClick.call(this, e); if (this.parentVM.router) { let cancel = false; this.$emit('before-select', { value: this.value, item: this.item, itemVM: this, preventDefault: () => (cancel = true), }, this); if (cancel) { this.close(); return; } this.parentVM.select(this, true); } this.close(); }, onSelect(e) { this.select(e); this.close(); }, close() { if (this.groupVM && this.groupVM.close) { this.groupVM.close(); } }, }, }; </script> <style module> .root { display: inline-block; position: relative; user-select: none; cursor: var(--cursor-pointer); text-align: center; font-size: var(--navbar-item-font-size); padding: var(--navbar-item-padding); height: var(--navbar-height); line-height: var(--navbar-height); background: var(--navbar-item-background); color: var(--navbar-item-color); transition: var(--transition-duration-base); } .root:not(:last-child) { margin-right: var(--navbar-item-space); } .root:hover { background: var(--navbar-item-background-hover); color: var(--navbar-item-color-hover); } .root[readonly] { cursor: default; } .root[selected] { background: var(--navbar-item-background-selected); color: var(--navbar-item-color-selected); } .root[disabled] { cursor: var(--cursor-not-allowed); color: var(--navbar-item-color-disabled); } .root [class^="i-ico_lcp-iconv"] { margin-left: -8px; margin-right: 8px; } .dropdownRoot { display: block; position: relative; z-index: 1; cursor: var(--cursor-pointer); line-height: 32px; padding: 0 12px; font-size: 14px; color: var(--color-base); text-align: left; } .dropdownRoot:hover { color: var(--brand-primary); } .dropdownRoot[readonly] { cursor: default; background: none; } .dropdownRoot[selected] { color: var(--brand-primary); } .dropdownRoot[disabled] { /* @Private */ cursor: var(--cursor-not-allowed); background: none; color: var(--font-disabled-color); } .dropdownRoot[selected][disabled] { background: var(--background-color-disabled); } .dropdownRoot .singleicon { margin-right: 4px; } </style> |