hookehuyr

✨ feat: 新增文字描述组件

1 +<!--
2 + * @Date: 2022-08-29 14:31:20
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-22 13:56:17
5 + * @FilePath: /data-table/src/components/DesField/index.vue
6 + * @Description: 描述文本
7 +-->
8 +<template>
9 + <div class="des-field-page">
10 + <div class="label">{{ item.component_props.label }}</div>
11 + <van-field
12 + v-model="item.component_props.desc"
13 + :name="item.name"
14 + :readonly="true"
15 + :border="false"
16 + />
17 + </div>
18 +</template>
19 +
20 +<script setup>
21 +const props = defineProps({
22 + item: Object,
23 +});
24 +</script>
25 +
26 +<style lang="less" scoped>
27 +.des-field-page {
28 + .label {
29 + padding: 1rem 1rem 0 1rem;
30 + font-size: 0.9rem;
31 + font-weight: bold;
32 + span {
33 + color: red;
34 + }
35 + }
36 +}
37 +</style>
...@@ -17,6 +17,7 @@ import RatePickerField from '@/components/RatePickerField/index.vue' ...@@ -17,6 +17,7 @@ import RatePickerField from '@/components/RatePickerField/index.vue'
17 import CalendarField from '@/components/CalendarField/index.vue' 17 import CalendarField from '@/components/CalendarField/index.vue'
18 import IdentityField from '@/components/IdentityField/index.vue' 18 import IdentityField from '@/components/IdentityField/index.vue'
19 import NumberField from '@/components/NumberField/index.vue' 19 import NumberField from '@/components/NumberField/index.vue'
20 +import DesField from '@/components/DesField/index.vue'
20 21
21 /** 22 /**
22 * 生成自定义组件类型 23 * 生成自定义组件类型
...@@ -109,5 +110,9 @@ export function createComponentType(data) { ...@@ -109,5 +110,9 @@ export function createComponentType(data) {
109 item.name = item.key; 110 item.name = item.key;
110 item.component = IdentityField; 111 item.component = IdentityField;
111 } 112 }
113 + if (item.component_props.name === 'desc') {
114 + item.name = item.key;
115 + item.component = DesField;
116 + }
112 }) 117 })
113 } 118 }
......