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>
|