Textarea 多行文本框

一般用于多行字符串。

代码演示

描述

指定 autoSize

自适应内容高度

content content content content content content content content content content content content content content content content content content content content content content content content

不自适应内容高度

content content content content content content content content content content content content content content content content content content content content content content content content

禁用状态

content content content

显示清除按钮

content content content

最大长度

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta">
      <template v-slot:testSlot>
        <div style="color: green; border: 1px dashed green">
          slot 类型的 text
        </div>
      </template>
    </v-formly-v3>
    <div class="btns">
      <a-button type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, unref } from "vue";
import type VFormly from "@/ant-design-vue/AFormly.vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const formData = ref({});
const meta = {
  type: "object",
  properties: {
    remark: {
      type: "string",
      title: "描述",
      ui: {
        component: "textarea",
        showRequired: true,
        change: (val: any) => console.log("change", val),
        focus: (e: any) => console.log("focus", e),
        blur: (e: any) => console.log("blur", e),
        pressEnter: (e: any) => console.log("pressEnter", e),
      },
    },
    remark1: {
      type: "string",
      title: "指定 autoSize",
      ui: {
        component: "textarea",
        placeholder: "{ minRows: 2, maxRows: 6 }",
        autoSize: { minRows: 2, maxRows: 6 },
      },
    },
    remark2: {
      type: "string",
      title: "自适应内容高度",
      default:
        "content content content content content content content content content content content content content content content content content content content content content content content content",
      ui: {
        component: "textarea",
      },
    },
    remark3: {
      type: "string",
      title: "不自适应内容高度",
      default:
        "content content content content content content content content content content content content content content content content content content content content content content content content",
      ui: {
        component: "textarea",
        autoSize: false,
      },
    },
    remark4: {
      type: "string",
      title: "禁用状态",
      default: "content content content",
      ui: {
        component: "textarea",
      },
      readOnly: true,
    },
    remark5: {
      type: "string",
      title: "显示清除按钮",
      default: "content content content",
      ui: {
        component: "textarea",
        allowClear: true,
      },
    },
    remark6: {
      type: "string",
      title: "最大长度",
      maxLength: 10,
      ui: {
        component: "textarea",
        placeholder: "maxLength = 10",
        showCount: true,
        autoSize: false,
      },
    },
  },
  required: ["remark"],
};

async function submit() {
  const valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

显示复制复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员	说明	类型	默认值
:maxLength	最大长度	number	-
:readOnly	禁用状态	boolean	-

meta.ui 属性(antdv)

成员	说明	类型	默认值
:autosize	自适应内容高度，可设置为true | false或对象：{ minRows: 2, maxRows: 6 }	boolean | object	true
@change	内容变更事件	function(value)	-
@focus	焦点事件	function(e)	-
@blur	失焦事件	function(e)	-
@pressEnter	按下回车事件	function(e)	-

meta.ui 属性(element)

成员	说明	类型	默认值
:autosize	自适应内容高度，可设置为true | false或对象：{ minRows: 2, maxRows: 6 }	boolean | object	true
@change	内容变更事件	function(value)	-
@input	在 Input 值改变时触发	function(value)	-
@focus	焦点事件	function(e)	-
@blur	失焦事件	function(e)	-