v-formly-v3

String 文本框

内置组件，用于字符串、密码等输入框。

代码演示

￥RMB
Http://.com
<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta">
      <!-- string2_x -->
      <template v-slot:string2_2_prefix>
        <user-outlined />
      </template>
      <template v-slot:string2_2_suffix>
        <a-tooltip title="Extra information">
          <info-circle-outlined />
        </a-tooltip>
      </template>

      <!-- string3_x -->
      <template v-slot:string3_1_addon_before>
        <a-select default-value="Http://" style="width: 90px">
          <a-select-option value="Http://"> Http:// </a-select-option>
          <a-select-option value="Https://"> Https:// </a-select-option>
        </a-select>
      </template>
      <template v-slot:string3_2_addon_after>
        <a-select default-value=".com" style="width: 80px">
          <a-select-option value=".com"> .com </a-select-option>
          <a-select-option value=".jp"> .jp </a-select-option>
          <a-select-option value=".cn"> .cn </a-select-option>
          <a-select-option value=".org"> .org </a-select-option>
        </a-select>
      </template>

      <!-- string6 -->
      <template v-slot:string6_suffix>
        <div style="cursor: pointer" @click="string6SuffixClick">
          <eye-invisible-outlined v-if="!visibilityToggle" />
          <eye-outlined v-if="visibilityToggle" />
        </div>
      </template>
    </v-formly-v3>
    <div class="btns">
      <a-button type="danger" @click="clear"> 重置 </a-button>
      <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";
import type { StringMeta } from "@/core/meta/string.meta";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const meta = {
  type: "object",
  properties: {
    string1: {
      title: "基本使用",
      type: "string",
      ui: {
        showRequired: true,
        placeholder: "Basic usage",
        errors: {
          required: "请输入",
        },
        change: (val: string) => console.log(val),
      },
    },
    string2_1: {
      title: "前缀和后缀",
      type: "string",
      ui: {
        placeholder: "prefix and suffix",
        prefix: "￥",
        suffix: "RMB",
      },
    },
    string2_2: {
      title: "前缀和后缀slot",
      type: "string",
      ui: {
        placeholder: "prefix and suffix with slot",
        slotNameOfPrefix: "string2_2_prefix",
        slotNameOfSuffix: "string2_2_suffix",
      },
    },
    string3_1: {
      title: "前置/后置标签",
      type: "string",
      default: "mysite",
      ui: {
        placeholder: "addonBefore/addonAfter",
        addonBefore: "Http://",
        addonAfter: ".com",
      },
    },
    string3_2: {
      title: "前置/后置标签slot",
      type: "string",
      ui: {
        placeholder: "addonBefore/addonAfter with slot",
        slotNameOfAddonBefore: "string3_1_addon_before",
        slotNameOfAddonAfter: "string3_2_addon_after",
      },
    },
    string4: {
      title: "带移除图标",
      type: "string",
      ui: {
        placeholder: "input with clear icon",
        allowClear: true,
      },
    },
    string5_1: {
      title: "大",
      type: "string",
      ui: {
        placeholder: "large size",
        size: "large",
        grid: {
          span: 8,
        },
      },
    },
    string5_2: {
      title: "默认",
      type: "string",
      ui: {
        placeholder: "default size",
        grid: {
          span: 8,
        },
      },
    },
    string5_3: {
      title: "小",
      type: "string",
      ui: {
        placeholder: "small size",
        size: "small",
        grid: {
          span: 8,
        },
      },
    },
    string6: {
      title: "密码框",
      type: "string",
      ui: {
        placeholder: "input password",
        type: "password",
        slotNameOfSuffix: "string6_suffix",
      },
    },
    string7: {
      title: "正则表达式",
      type: "string",
      pattern: "^[abc]+$",
      ui: {
        placeholder: "^[abc]+$",
        errors: {
          pattern: "数据格式不正确",
        },
      },
    },
  },
  required: ["string1"],
};
let formData: any = ref({});
let visibilityToggle = ref(false);

function clear() {
  formData.value = null;
}

async function submit() {
  let valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}

function string6SuffixClick() {
  visibilityToggle.value = !visibilityToggle.value;
  const context = form.value!.getContext<StringMeta>("/string6");
  context.ui.value.type = visibilityToggle.value ? "text" : "password";
}
</script>

<style scoped></style>
复制

API

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

meta 属性

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

meta.ui 属性(antdv)

成员说明类型默认值
:addOnAfter带标签的 input，设置后置标签string-
:slotNameOfAddonAfter带标签的 input，设置后置标签，slot 名称string-
:addOnBefore带标签的 input，设置前置标签string-
:slotNameOfAddonBefore带标签的 input，设置前置标签，slot 名称string-
:prefix带有前缀图标的 inputstring-
:slotNameOfPrefix带有前缀图标的 input，slot 名称string-
:suffix带有后缀图标的 inputstring-
:slotNameOfSuffix带有后缀图标的 input，slot 名称string-
@change输入框内容变化时的回调function(e)-

meta.ui 属性(element)

成员说明类型默认值
:slotNameOfPrepend输入框前置内容，只对非 type="textarea" 有效，slot 名称string-
:slotNameOfAppend输入框后置内容，只对非 type="textarea" 有效，slot 名称string-
:slotNameOfPrefix输入框头部内容，只对非 type="textarea" 有效，slot 名称string-
:slotNameOfSuffix输入框尾部内容，只对非 type="textarea" 有效，slot 名称string-
@change仅当 modelValue 改变时，当输入框失去焦点或用户按 Enter 时触发function(e)-
@input在 Input 值改变时触发function(e)-