hookehuyr

✨ feat(邮箱组件): 文字显示调整

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: 2022-09-16 17:13:01 4 + * @LastEditTime: 2022-11-18 10:54:23
5 * @FilePath: /data-table/src/components/EmailField/index.vue 5 * @FilePath: /data-table/src/components/EmailField/index.vue
6 - * @Description: 单行文本输入框 6 + * @Description: 邮箱输入框
7 --> 7 -->
8 <template> 8 <template>
9 <div class="text-field-page"> 9 <div class="text-field-page">
10 - <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.component_props.placeholder" :rules="rules" 11 + {{ item.component_props.label
12 - :required="item.component_props.required" clearable /> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + :name="item.name"
17 + type="email"
18 + :placeholder="item.component_props.placeholder"
19 + :rules="rules"
20 + :required="item.component_props.required"
21 + clearable
22 + />
13 </div> 23 </div>
14 </template> 24 </template>
15 25
16 <script setup> 26 <script setup>
17 const props = defineProps({ 27 const props = defineProps({
18 - item: Object 28 + item: Object,
19 }); 29 });
20 30
21 const pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 31 const pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
22 -const rules = [{ pattern, message: '请输入正确内容邮箱' }] 32 +const rules = [{ pattern, message: "请输入正确邮箱" }];
23 </script> 33 </script>
24 34
25 <style lang="less" scoped> 35 <style lang="less" scoped>
26 - .text-field-page { 36 +.text-field-page {
27 .label { 37 .label {
28 padding: 1rem 1rem 0 1rem; 38 padding: 1rem 1rem 0 1rem;
29 font-size: 0.9rem; 39 font-size: 0.9rem;
...@@ -32,5 +42,5 @@ const rules = [{ pattern, message: '请输入正确内容邮箱' }] ...@@ -32,5 +42,5 @@ const rules = [{ pattern, message: '请输入正确内容邮箱' }]
32 color: red; 42 color: red;
33 } 43 }
34 } 44 }
35 - } 45 +}
36 </style> 46 </style>
......