Text 文本

一般用于直接显示文本。

代码演示

<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">
      <el-button type="primary" @click="changeText"> 设置文本 </el-button>
      <el-button type="primary" @click="submit"> 提交 </el-button>
    </div>
  </div>
</template>

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

const form = ref<InstanceType<typeof VFormly> | null>(null);
const formData = ref<any>({});
const id1Text = ref("包含 title 和 text 的文本");

const meta = {
  properties: {
    name: {
      title: "姓名",
      type: "string",
      ui: {
        showRequired: true,
      },
    },
    id1: {
      title: "title",
      type: "null",
      ui: {
        component: "text",
        text: id1Text, // string
      },
    },
    id2: {
      type: "null",
      ui: {
        component: "text",
        text: () => "() => string 类型的 text", // () => string
      },
    },
    id3: {
      type: "null",
      ui: {
        component: "text",
        html: `<h1 style="color: red">HTML 类型的 text</h1>`, // v-html
        text: "default text",
      },
    },
    id4: {
      type: "null",
      ui: {
        component: "text",
        slotNameOfDefault: "testSlot", // slot
        html: `<h1 style="color: red">I am Text</h1>`,
        text: "default text",
      },
    },
    id8: {
      type: "null",
      ui: {
        component: "text",
        text: "多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本",
        spanControl: 24,
      },
    },
    address: {
      title: "地址",
      type: "string",
    },
  },
  required: ["name"],
};

function changeText() {
  id1Text.value = unref(id1Text) + " 新文本";
}

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

复制

API

meta.ui 属性

成员	说明	类型	默认值
`:text`	指定的 `text`	`string \| () => string`
`:html`	指定的 `html`	`HTML`	-
`:slotNameOfDefault`	指定的 `slot`	`string`	-

注意

文本显示的优先级：slot > html > text

# Text 文本

# 代码演示

HTML 类型的 text

# API

# meta.ui 属性

Text 文本

代码演示

API

meta.ui 属性