Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1150c942 1 parent 987bce32

✨ feat(便签控件): 样式和功能调整

Inline Side-by-side
Showing 2 changed files with 16 additions and 13 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-03-08 15:28:33 4 + * @LastEditTime: 2023-04-13 16:09:03
5 - * @FilePath: /data-table/src/components/NoteField/index.vue 5 + * @FilePath: /custom_form/src/components/NoteField/index.vue
6 * @Description: 富文本组件 6 * @Description: 富文本组件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="note-field-page"> 9 <div v-if="HideShow" class="note-field-page">
10 <div class="label"> 10 <div class="label">
11 - <span v-if="item.component_props.required" class="required">&nbsp;*</span> 11 + <text v-if="item.component_props.required" class="required">&nbsp;*</text>
12 - <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span> 12 + <text v-if="!item.component_props.hide_label">{{ item.component_props.label }}</text>
13 </div> 13 </div>
14 - <div class="html" style="padding: 0.5rem 1rem 0 1rem;" v-html="item.component_props.note"></div> 14 + <div class="html" style="padding: 0 1rem; font-size: 16px;" v-html="item.component_props.note"></div>
15 </div> 15 </div>
16 </template> 16 </template>
17 17
18 <script setup> 18 <script setup>
19 +import { ref, computed, watch, onMounted, reactive } from "vue";
20 +
19 const props = defineProps({ 21 const props = defineProps({
20 item: Object, 22 item: Object,
21 }); 23 });
...@@ -28,11 +30,12 @@ const HideShow = computed(() => { ...@@ -28,11 +30,12 @@ const HideShow = computed(() => {
28 <style lang="less"> 30 <style lang="less">
29 .note-field-page { 31 .note-field-page {
30 .label { 32 .label {
31 - padding: 1rem 1rem 0 1rem; 33 + margin-left: 1rem;
32 - font-size: 0.9rem; 34 + padding-bottom: 20px;
35 + font-size: 26px;
33 font-weight: bold; 36 font-weight: bold;
34 37
35 - span.required { 38 + text.required {
36 color: red; 39 color: red;
37 } 40 }
38 } 41 }
......
...@@ -25,7 +25,7 @@ import NumberField from '@/components/NumberField/index.vue' ...@@ -25,7 +25,7 @@ import NumberField from '@/components/NumberField/index.vue'
25 // import RuleField from '@/components/RuleField/index.vue' 25 // import RuleField from '@/components/RuleField/index.vue'
26 import MultiRuleField from '@/components/MultiRuleField/index.vue' 26 import MultiRuleField from '@/components/MultiRuleField/index.vue'
27 // import ButtonField from '@/components/ButtonField/index.vue' 27 // import ButtonField from '@/components/ButtonField/index.vue'
28 -// import NoteField from '@/components/NoteField/index.vue' 28 +import NoteField from '@/components/NoteField/index.vue'
29 // import NameField from '@/components/NameField/index.vue' 29 // import NameField from '@/components/NameField/index.vue'
30 // import GenderField from '@/components/GenderField/index.vue' 30 // import GenderField from '@/components/GenderField/index.vue'
31 31
...@@ -168,10 +168,10 @@ export function createComponentType(data) { ...@@ -168,10 +168,10 @@ export function createComponentType(data) {
168 item.value = [] 168 item.value = []
169 item.component = MultiRuleField 169 item.component = MultiRuleField
170 } 170 }
171 - // if (item.component_props.tag === 'note') { 171 + if (item.component_props.tag === 'note') {
172 - // item.name = item.key 172 + item.name = item.key
173 - // item.component = NoteField 173 + item.component = NoteField
174 - // } 174 + }
175 // if (item.component_props.tag === 'name') { 175 // if (item.component_props.tag === 'name') {
176 // item.name = item.key 176 // item.name = item.key
177 // item.component = NameField 177 // item.component = NameField
......