Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8316f741 1 parent ead4785c

✨ feat: 新增邮箱输入框模块

Inline Side-by-side
Showing 3 changed files with 92 additions and 37 deletions
1 +<!--
2 + * @Date: 2022-08-29 14:31:20
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-06 15:20:47
5 + * @FilePath: /data-table/src/components/EmailField/index.vue
6 + * @Description: 单行文本输入框
7 +-->
8 +<template>
9 + <div class="text-field-page">
10 + <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 + <van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.placeholder" :rules="rules"
12 + :required="item.required" clearable />
13 + </div>
14 +</template>
15 +
16 +<script setup>
17 +const props = defineProps({
18 + item: Object
19 +});
20 +
21 +const pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
22 +const rules = [{ pattern, message: '请输入正确内容邮箱' }]
23 +</script>
24 +
25 +<style lang="less" scoped>
26 + .text-field-page {
27 + .label {
28 + padding: 1rem 1rem 0 1rem;
29 + font-size: 0.9rem;
30 + font-weight: bold;
31 + span {
32 + color: red;
33 + }
34 + }
35 + }
36 +</style>
...@@ -9,6 +9,7 @@ import AreaPickerField from '@/components/AreaPickerField/index.vue' ...@@ -9,6 +9,7 @@ import AreaPickerField from '@/components/AreaPickerField/index.vue'
9 import DatePickerField from '@/components/DatePickerField/index.vue' 9 import DatePickerField from '@/components/DatePickerField/index.vue'
10 import ImageUploaderField from '@/components/ImageUploaderField/index.vue' 10 import ImageUploaderField from '@/components/ImageUploaderField/index.vue'
11 import PhoneField from '@/components/PhoneField/index.vue' 11 import PhoneField from '@/components/PhoneField/index.vue'
12 +import EmailField from '@/components/EmailField/index.vue'
12 13
13 /** 14 /**
14 * 生成自定义组件类型 15 * 生成自定义组件类型
...@@ -22,6 +23,7 @@ import PhoneField from '@/components/PhoneField/index.vue' ...@@ -22,6 +23,7 @@ import PhoneField from '@/components/PhoneField/index.vue'
22 * @type date_picker 日期选择器 DatePickerField 23 * @type date_picker 日期选择器 DatePickerField
23 * @type image_uploader 图片上传 ImageUploaderField 24 * @type image_uploader 图片上传 ImageUploaderField
24 * @type phone 手机输入框 PhoneField 25 * @type phone 手机输入框 PhoneField
26 + * @type email 邮箱输入框 EmailField
25 */ 27 */
26 export function createComponentType(data) { 28 export function createComponentType(data) {
27 // 判断类型和使用组件 29 // 判断类型和使用组件
...@@ -69,5 +71,9 @@ export function createComponentType(data) { ...@@ -69,5 +71,9 @@ export function createComponentType(data) {
69 item.name = item.key; 71 item.name = item.key;
70 item.component = PhoneField; 72 item.component = PhoneField;
71 } 73 }
74 + if (item.component_props.name === 'email') {
75 + item.name = item.key;
76 + item.component = EmailField;
77 + }
72 }) 78 })
73 } 79 }
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-06 15:05:23 4 + * @LastEditTime: 2022-09-06 15:24:52
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -32,28 +32,40 @@ const mockData = ref([]); ...@@ -32,28 +32,40 @@ const mockData = ref([]);
32 onMounted(() => { 32 onMounted(() => {
33 table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' 33 table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
34 table_title.value = '这是一个表单的描述' 34 table_title.value = '这是一个表单的描述'
35 - mockData.value = [{ 35 + mockData.value = [
36 - key: 'phone',
37 - value: '',
38 - label: '手机号',
39 - placeholder: '请输入手机号',
40 - component: '',
41 - component_props: {
42 - name: 'phone'
43 - },
44 - required: true,
45 - },
46 // { 36 // {
47 - // key: 'username', 37 + // key: 'phone',
48 - // value: 'test', 38 + // value: '',
49 - // label: '用户名', 39 + // label: '手机号',
50 - // placeholder: '请输入用户名', 40 + // placeholder: '请输入手机号',
51 // component: '', 41 // component: '',
52 // component_props: { 42 // component_props: {
53 - // name: 'text' 43 + // name: 'phone'
54 // }, 44 // },
55 // required: true, 45 // required: true,
56 // }, 46 // },
47 + {
48 + key: 'username',
49 + value: 'test',
50 + label: '用户名',
51 + placeholder: '请输入用户名',
52 + component: '',
53 + component_props: {
54 + name: 'text'
55 + },
56 + required: true,
57 + },
58 + {
59 + key: 'email',
60 + value: '',
61 + label: '邮箱',
62 + placeholder: '请输入邮箱',
63 + component: '',
64 + component_props: {
65 + name: 'email'
66 + },
67 + required: true,
68 + },
57 // { 69 // {
58 // key: 'age', 70 // key: 'age',
59 // value: '', 71 // value: '',
...@@ -125,16 +137,16 @@ onMounted(() => { ...@@ -125,16 +137,16 @@ onMounted(() => {
125 // ], 137 // ],
126 // required: true, 138 // required: true,
127 // }, 139 // },
128 - // { 140 + {
129 - // key: 'city', 141 + key: 'city',
130 - // value: '天津市/天津市/和平区', 142 + value: '天津市/天津市/和平区',
131 - // city_code: '120101', 143 + city_code: '120101',
132 - // label: '省市区', 144 + label: '省市区',
133 - // placeholder: '请选择省市区', 145 + placeholder: '请选择省市区',
134 - // component_props: { 146 + component_props: {
135 - // name: 'area_picker' 147 + name: 'area_picker'
136 - // }, 148 + },
137 - // }, 149 + },
138 // { 150 // {
139 // key: 'datetime', 151 // key: 'datetime',
140 // value: [], 152 // value: [],
...@@ -147,16 +159,17 @@ onMounted(() => { ...@@ -147,16 +159,17 @@ onMounted(() => {
147 // columns_type: ['year', 'month'] 159 // columns_type: ['year', 'month']
148 // }, 160 // },
149 // }, 161 // },
150 - { 162 + // {
151 - key: 'imageUploader', 163 + // key: 'imageUploader',
152 - value: '', 164 + // value: '',
153 - label: '图片上传', 165 + // label: '图片上传',
154 - component_props: { 166 + // component_props: {
155 - name: 'image_uploader', 167 + // name: 'image_uploader',
156 - image_type: ['jpg', 'png'], 168 + // image_type: ['jpg', 'png'],
157 - multiple: false 169 + // multiple: false
158 - } 170 + // }
159 - }]; 171 + // }
172 + ];
160 // 生成自定义组件 173 // 生成自定义组件
161 createComponentType(mockData.value) 174 createComponentType(mockData.value)
162 }) 175 })
......