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 | 7x 7x 7x 7x 7x | <template> <div :class="$style.root" :column="currentColumn" :label-size="currentLabelSize" :style="responsiveStyle"> <div :class="$style.label" vusion-slot-name="label" vusion-slot-name-edit="label"> <slot name="label">{{ label }}</slot> </div> <div v-if="$env.VUE_APP_DESIGNER" :class="$style.value" :ellipsis="ellipsis" vusion-slot-name="default"> <slot></slot> <s-empty v-if="(!$slots.default) && !!$attrs['vusion-node-path']"></s-empty> </div> <div v-else :class="$style.value" :ellipsis="ellipsis"> <slot></slot> </div> </div> </template> <script> import MEmitter from '../m-emitter.vue'; import SEmpty from '../s-empty.vue'; import { isIE } from '../../utils/dom'; export default { name: 'u-info-list-item', parentName: 'u-info-list', groupName: 'u-info-list-group', components: { SEmpty, }, mixins: [MEmitter], props: { label: String, labelSize: String, ellipsis: { type: Boolean, default: false }, span: { type: [Number, String], default: 1 }, }, data() { return { groupVM: undefined, parentVM: undefined, currentSpan: this.span, }; }, computed: { currentColumn() { return ( (this.groupVM && this.groupVM.column) || (this.parentVM && this.parentVM.column) || 'auto' ); }, currentLabelSize() { return ( this.labelSize || (this.groupVM && this.groupVM.labelSize) || (this.parentVM && this.parentVM.labelSize) || 'auto' ); }, responsiveStyle() { const width = this.getPercent(this.currentSpan); return { width }; }, }, watch: { span(span) { this.currentSpan = span; }, }, created() { this.$dispatch(this.$options.groupName, 'add-item-vm', this); this.$dispatch(this.$options.parentName, 'add-item-vm', this); }, destroyed() { this.$dispatch(this.$options.groupName, 'remove-item-vm', this); this.$dispatch(this.$options.parentName, 'remove-item-vm', this); }, methods: { getPercent(span) { // 兼容原来的column属性 if ( (this.groupVM && this.groupVM.column) || (this.parentVM && this.parentVM.column) ) return ''; const repeat = (this.groupVM && this.groupVM.repeat) || (this.parentVM && this.parentVM.repeat) || 3; if (isIE()) { // 兼容ie宽度有小数点添1 return ((span / repeat) * 100) - 0.2 + '%'; } else { return (span / repeat) * 100 + '%'; } }, }, }; </script> <style module> .root { position: relative; display: inline-flex; padding: 16px 0 16px 20px; vertical-align: top; line-height: 24px; white-space: nowrap; } .root[column="1"] { width: 100% !important; } .root[column="2"] { width: 50% !important; } .root[column="3"] { width: 33.333% !important; } .root[column="4"] { width: 25% !important; } .label { flex: 0 0 auto; padding-right: 20px; color: var(--color-light); } .root .label { max-width: calc(50% - 20px); white-space: normal; } .root[label-size$="small"] .label { width: 80px; white-space: normal; } .root[label-size$="normal"] .label { width: 100px; white-space: normal; } .root[label-size$="large"] .label { width: 120px; white-space: normal; } .value { white-space: normal; word-break: break-all; width: 100%; } .value[ellipsis] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } </style> |