92 lines
1.5 KiB
Vue
92 lines
1.5 KiB
Vue
<template>
|
|
<div class="ai-info-item" :style="contentStyle">
|
|
<label class="ai-info-item__left" :style="contentLabelStyle">
|
|
<template v-if="$slots.label">
|
|
<slot name="label"/>
|
|
</template>
|
|
<template v-else>{{ label }}</template>
|
|
</label>
|
|
<div class="ai-info-item__right">
|
|
<slot v-if="$scopedSlots.default"/>
|
|
<template v-else-if="!!openType">
|
|
<ai-open-data :type="openType" :openid="value"/>
|
|
</template>
|
|
<template v-else>{{ value || '-' }}</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiInfoItem',
|
|
|
|
inject: ['AiWrapper'],
|
|
|
|
props: {
|
|
label: {
|
|
type: String
|
|
},
|
|
|
|
value: {
|
|
type: [String, Number]
|
|
},
|
|
|
|
'label-width': {
|
|
type: String
|
|
},
|
|
|
|
isLine: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
openType: {default: ""}
|
|
},
|
|
|
|
computed: {
|
|
contentStyle() {
|
|
let width = this.AiWrapper.autoWidth
|
|
|
|
if (this.isLine) {
|
|
width = '100%'
|
|
}
|
|
|
|
return {
|
|
width
|
|
}
|
|
},
|
|
|
|
contentLabelStyle() {
|
|
return {
|
|
width: this.labelWidth || this.AiWrapper.autoLableWidth
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ai-info-item {
|
|
display: flex;
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
|
|
label {
|
|
flex-shrink: 0;
|
|
width: 96px;
|
|
margin-right: 40px;
|
|
text-align: right;
|
|
color: #888;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ai-info-item__right {
|
|
flex: 1;
|
|
color: #222;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
</style>
|