Showing
1 changed file
with
25 additions
and
15 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: 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"> *</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"> *</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; |
| 30 | - font-weight: bold; | 40 | + font-weight: bold; |
| 31 | - span { | 41 | + span { |
| 32 | - color: red; | 42 | + color: red; |
| 33 | - } | ||
| 34 | } | 43 | } |
| 35 | } | 44 | } |
| 45 | +} | ||
| 36 | </style> | 46 | </style> | ... | ... |
-
Please register or login to post a comment