✨ feat: 新增姓名控件，新增性别控件

hookehuyr
Commit 19b0dba25d9bc537f90150bd2554a01e47f9fde8 19b0dba2 1 parent 435f8243
Showing 4 changed files with 141 additions and 0 deletions
components.d.ts
src/components/GenderField/index.vue
src/components/NameField/index.vue
src/hooks/useComponentType.js
--- a/components.d.ts
View file @19b0dba
+++ b/components.d.ts
View file @19b0dba
@@ -12,16 +12,19 @@ declare module '@vue/runtime-core' {
     CalendarField: typeof import('./src/components/CalendarField/index.vue')['default']
     CheckboxField: typeof import('./src/components/CheckboxField/index.vue')['default']
     ContactField: typeof import('./src/components/ContactField/index.vue')['default']
+    copy: typeof import('./src/components/RadioField copy/index.vue')['default']
     DatePickerField: typeof import('./src/components/DatePickerField/index.vue')['default']
     DateTimePickerField: typeof import('./src/components/DateTimePickerField/index.vue')['default']
     DesField: typeof import('./src/components/DesField/index.vue')['default']
     DividerField: typeof import('./src/components/DividerField/index.vue')['default']
     EmailField: typeof import('./src/components/EmailField/index.vue')['default']
     FileUploaderField: typeof import('./src/components/FileUploaderField/index.vue')['default']
+    GenderField: typeof import('./src/components/GenderField/index.vue')['default']
     IdentityField: typeof import('./src/components/IdentityField/index.vue')['default']
     ImageUploaderField: typeof import('./src/components/ImageUploaderField/index.vue')['default']
     MarqueeField: typeof import('./src/components/MarqueeField/index.vue')['default']
     MultiRuleField: typeof import('./src/components/MultiRuleField/index.vue')['default']
+    NameField: typeof import('./src/components/NameField/index.vue')['default']
     NoteField: typeof import('./src/components/NoteField/index.vue')['default']
     NumberField: typeof import('./src/components/NumberField/index.vue')['default']
     PhoneField: typeof import('./src/components/PhoneField/index.vue')['default']
--- a/src/components/GenderField/index.vue 0 → 100644
View file @19b0dba
+++ b/src/components/GenderField/index.vue 0 → 100644
View file @19b0dba
+<!--
+ * @Date: 2022-08-30 11:34:19
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-01 11:06:05
+ * @FilePath: /data-table/src/components/GenderField/index.vue
+ * @Description: 性别选择控件
+-->
+<template>
+  <div v-if="HideShow" class="radio-field-page">
+    <div class="label">
+      {{ item.component_props.label
+      }}<span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
+    <van-field :name="item.name" :rules="item.rules">
+      <template #input>
+        <van-radio-group v-model="item.value" direction="horizontal">
+          <van-radio name="男">男</van-radio>
+          <van-radio name="女">女</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { styleColor } from "@/constant.js";
+
+const props = defineProps({
+  item: Object,
+});
+
+// TAG: 自定义主题颜色
+const themeVars = {
+  radioColor: styleColor.baseColor,
+};
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+
+onMounted(() => {
+})
+</script>
+
+<style lang="less" scoped>
+.radio-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+  .note {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    color: gray;
+    padding-bottom: 0.5rem;
+    white-space: pre;
+  }
+}
+
+:deep(.van-radio) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  // width: 100vw;
+}
+</style>
--- a/src/components/NameField/index.vue 0 → 100644
View file @19b0dba
+++ b/src/components/NameField/index.vue 0 → 100644
View file @19b0dba
+<!--
+ * @Date: 2022-08-29 14:31:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-02-01 10:53:53
+ * @FilePath: /data-table/src/components/NameField/index.vue
+ * @Description: 姓名输入框
+-->
+<template>
+  <div v-if="HideShow" class="text-field-page">
+    <div class="label">
+      {{ item.component_props.label
+      }}<span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      :type="item.type"
+      :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
+      :rules="item.rules"
+      :required="item.required"
+      :readonly="item.component_props.readonly"
+      :disabled="item.component_props.disabled"
+      :input-align="item.component_props.align"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
+</script>
+
+<style lang="less" scoped>
+.text-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+
+:deep(.van-field__body) {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>
--- a/src/hooks/useComponentType.js
View file @19b0dba
+++ b/src/hooks/useComponentType.js
View file @19b0dba
@@ -27,6 +27,8 @@ 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';
+import NameField from '@/components/NameField/index.vue';
+import GenderField from '@/components/GenderField/index.vue';
 /**
  * 生成自定义组件类型
@@ -54,6 +56,8 @@ import NoteField from '@/components/NoteField/index.vue';
  * @type rule 活动规则控件 RuleField
  * @type multi_rule 活动规则控件 MultiRuleField
  * @type note 富文本控件 NoteField
+ * @type name 姓名控件 NameField
+ * @type gender 性别控件 GenderField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -166,5 +170,13 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = NoteField;
     }
+    if (item.component_props.tag === 'name') {
+      item.name = item.key;
+      item.component = NameField;
+    }
+    if (item.component_props.tag === 'gender') {
+      item.name = item.key;
+      item.component = GenderField;
+    }
   })
 }