新增富文本显示控件

+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-01-05 10:07:18
+ * @FilePath: /data-table/src/components/NoteField/index.vue
+ * @Description: 富文本组件
+-->
+<template>
+  <div class="note-field-page">
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
+    <div class="html" style="padding: 0.5rem 1rem 0 1rem;" v-html="item.component_props.note"></div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+</script>
+
+<style lang="less">
+.note-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+  .html {
+    img {
+      width: 100%;
+    }
+  }
+}
+</style>

@@ -26,6 +26,7 @@ import ContactField from '@/components/ContactField/index.vue'
 import RuleField from '@/components/RuleField/index.vue'
 import MultiRuleField from '@/components/MultiRuleField/index.vue'
 import ButtonField from '@/components/ButtonField/index.vue'
+import NoteField from '@/components/NoteField/index.vue';
 
 /**
  * 生成自定义组件类型
@@ -52,6 +53,7 @@ import ButtonField from '@/components/ButtonField/index.vue'
  * @type marquee 跑马灯控件 MarqueeField
  * @type rule 活动规则控件 RuleField
  * @type multi_rule 活动规则控件 MultiRuleField
+ * @type note 富文本控件 NoteField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -160,5 +162,9 @@ export function createComponentType(data) {
       item.value = [];
       item.component = MultiRuleField;
     }
+    if (item.component_props.tag === 'note') {
+      item.name = item.key;
+      item.component = NoteField;
+    }
   })
 }