✨ feat: 新增单列选择器组件

+<!--
+ * @Date: 2022-08-30 13:46:51
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-30 14:23:32
+ * @FilePath: /data-table/src/components/PickerField/index.vue
+ * @Description: 单列选择器组件
+-->
+<template>
+  <div class="picker-field-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
+      :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker :columns="item.options" @confirm="onConfirm" @cancel="showPicker = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+})
+const selectedValues = ref('');
+const showPicker = ref(false);
+
+const onConfirm = ({ selectedOptions }) => {
+  props.item.value = selectedOptions[0]?.value;
+  showPicker.value = false;
+};
+
+</script>
+
+<style lang="less" scoped>
+.picker-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -4,6 +4,7 @@ import TextField from '@/components/TextField/index.vue'
 import TextareaField from '@/components/TextareaField/index.vue'
 import RadioField from '@/components/RadioField/index.vue'
 import CheckboxField from '@/components/CheckboxField/index.vue'
+import PickerField from '@/components/PickerField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -12,6 +13,7 @@ import CheckboxField from '@/components/CheckboxField/index.vue'
  * @type textarea 多行文本 TextareaField
  * @type radio 单选框 RadioField
  * @type checkbox 多选框 CheckboxField
+ * @type picker 单列选择器 PickerField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -25,13 +27,13 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = TextField;
     }
-    if (item.component_type === 'textarea') {
-      item.type = 'textarea';
-      item.name = item.key;
-      item.rows = 2;
-      item.autosize = true;
-      item.component = TextareaField;
-    }
+    // if (item.component_type === 'textarea') {
+    //   item.type = 'textarea';
+    //   item.name = item.key;
+    //   item.rows = 2;
+    //   item.autosize = true;
+    //   item.component = TextareaField;
+    // }
     if (item.component_type === 'number') {
       item.type = 'number';
       item.name = item.key;
@@ -43,5 +45,8 @@ export function createComponentType(data) {
     if (item.component_type === 'checkbox') {
       item.component = CheckboxField;
     }
+    if (item.component_type === 'picker') {
+      item.component = PickerField;
+    }
   })
 }

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 13:28:54
+ * @LastEditTime: 2022-08-30 14:23:18
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -51,11 +51,11 @@ onMounted(() => {
     placeholder: '',
     component: '',
     component_type: 'radio',
-    sub: [{
-      key: 'male',
+    options: [{
+      key: '男',
       value: '男'
     }, {
-      key: 'female',
+      key: '女',
       value: '女'
     }]
   }, {
@@ -65,11 +65,11 @@ onMounted(() => {
     placeholder: '',
     component: '',
     component_type: 'checkbox',
-    sub: [{
-      key: 'football',
+    options: [{
+      key: '足球',
       value: '足球'
     }, {
-      key: 'basketball',
+      key: '篮球',
       value: '篮球'
     }]
   }, {
@@ -79,6 +79,19 @@ onMounted(() => {
     placeholder: '请输入留言',
     component: '',
     component_type: 'textarea',
+  }, {
+    key: 'vehicle',
+    value: '',
+    label: '交通工具',
+    placeholder: '请选择交通工具',
+    component: '',
+    component_type: 'picker',
+    options: [
+      { text: '自行车', value: '自行车' },
+      { text: '汽车', value: '汽车' },
+      { text: '地铁', value: '地铁' },
+    ],
+    required: true,
   }];
   // 生成自定义组件
   createComponentType(mockData.value)