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 | 7x 7x 7x 7x 7x | <template> <div :class="$style.root"> <span v-if="readonly" :class="$style.readonly" vusion-slot-name="default"> <i-ico v-if="!parentVM.auto && parentVM.icon" :name="icon" notext :class="$style.icon"></i-ico> <slot>{{ text }}</slot> <s-empty v-if="(!$slots.default && !text) && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']" :class="$style.empty"></s-empty> </span> <span v-else-if="disabled" :class="$style.disabled" vusion-slot-name="default"> <i-ico v-if="!parentVM.auto && parentVM.icon" :name="icon" notext :class="$style.icon"></i-ico> <slot>{{ text }}</slot> <s-empty v-if="(!$slots.default && !text) && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']" :class="$style.empty"></s-empty> </span> <a v-else :class="$style.link" :href="currentHref" :target="target" :disabled="disabled" @click="onClick" v-on="listeners" vusion-slot-name="default"> <i-ico v-if="!parentVM.auto && parentVM.icon" :name="icon" notext :class="$style.icon"></i-ico> <slot>{{ text }}</slot> <s-empty v-if="(!$slots.default && !text) && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']" :class="$style.empty"></s-empty> </a> <span :class="$style.separator" :icon="parentVM.separator"></span> </div> </template> <script> import { MChild } from '../m-parent.vue'; import ULink from '../u-link.vue'; import IIco from '../i-ico.vue'; import SEmpty from '../s-empty.vue'; export default { name: 'u-crumb-item', parentName: 'u-crumb', components: { IIco, SEmpty }, mixins: [MChild, ULink], props: { text: String, readonly: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, icon: { type: String, default: null }, }, data() { return { // @inherit: parentVM: undefined, }; }, }; </script> <style module> .root { display: inline-block; color: var(--crumb-color-disabled); } .root .separator { display: inline-block; line-height: initial; font-size: 12px; margin: 0 var(--crumb-space-x); } .root .separator[icon="arrow"]::before { icon-font: url("../i-icon.vue/icons/line-right.svg"); } .root .separator[icon="slash"]::before { icon-font: url("../i-icon.vue/icons/slash.svg"); } /* 在 Safari 中 :last-child 与 display: none 并存时偶现渲染问题 */ .root:last-child .separator { position: absolute; visibility: hidden; opacity: 0; height: 0; width: 0; margin: 0; font-size: 0; line-height: 0; } .icon { line-height: initial; margin-right: var(--crumb-space-x); } .link { color: var(--crumb-color-link); } .link:hover { text-decoration: underline; } .readonly { color: inherit; cursor: default; } .disabled { color: var(--crumb-color-disabled); cursor: default; } .empty { width: calc(100% - 25px); } .icon + .empty { width: calc(100% - 50px); } </style> |