textarea文本框 组件

components.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SimilarPositions: typeof import('./src/components/Position/similarPositions.vue')['default']
+    Textarea: typeof import('./src/components/FormUI/textarea/index.vue')['default']
     TextInput: typeof import('./src/components/FormUI/TextInput/index.vue')['default']
     VerificationCode: typeof import('./src/components/VerificationCode/index.vue')['default']
   }

src/components/CtForm/index.vue

@@ -28,6 +28,12 @@
                 :item="item"
                 @change="handleChange(item)"
               ></radioGroupUI>
+              <textareaUI
+                v-if="item.type === 'textarea'"
+                v-model="item.value"
+                :item="item"
+                @change="handleChange(item)"
+              ></textareaUI>
               <template v-if="item.slotName">
                 <slot :name="item.slotName" :item="item"></slot>
               </template>
@@ -44,6 +50,7 @@ defineOptions({ name:'components-ct-form'})
 import textUI from './../FormUI/TextInput'
 import autocompleteUI from './../FormUI/autocomplete'
 import radioGroupUI from './../FormUI/radioGroup'
+import textareaUI from './../FormUI/textarea'
 import { ref, defineEmits } from 'vue'
 const emit = defineEmits(['change', 'inputUpdateAutocomplete'])// 定义一个或多个自定义事件
 const props = defineProps({items: Object})

src/components/FormUI/textarea/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
+    <v-textarea
+      v-model="value"
+      :rules="item.rules"
+      variant="outlined"
+      :label="item.label"
+      :counter="item.counter"
+      :bg-color="item.bgColor"
+      :color="item.color || 'primary'"
+      :validate-on="item.validateOn"
+      :rows="item.rows || 3"
+      :disabled="item.disabled"
+      :density="item.dense || 'compact'"
+      :placeholder="item.placeholder || item.label"
+      :no-resize="!item.resize"
+      @update:modelValue="modelValueUpDate"
+    ></v-textarea>
+  </div>
+</template>
+<script setup>
+import { defineEmits, ref, watch } from 'vue';
+defineOptions({ name:'FormUI-v-textarea'})
+
+const props = defineProps({item: Object, modelValue: [String, Number]})
+const emit = defineEmits(['update:modelValue', 'change'])
+const item = props.item
+const value = ref(props.modelValue)
+
+watch(() => props.modelValue, (newVal) => {
+  value.value = newVal
+})
+const modelValueUpDate = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+  emit('change', value.value)
+}
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/resume/components/educationExp.vue

@@ -159,14 +159,15 @@ const formItems = ref({
       items: yearMonth
     },
     {
-      type: 'text',
-      key: 'email',
+      type: 'textarea',
+      key: 'majors',
       value: null,
       default: null,
-      label: '所学专业 *',
+      counter: 200,
+      label: '主修科目 *',
       col: 12,
       outlined: true,
-      rules: [v => !!v || '请输入所学专业']
+      rules: [v => !!v || '请输入主修科目']
     },
   ]
 })