基础用法

vue2

vue3

用于在输入中提及某人或某事,同时配置`dicData`为字典值

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '提及框',
    prop: 'mention',
    type: 'mention',
    value: '@',
    dicData: [{
      label: '字典1',
      value: 0
    }, {
      label: '字典2',
      value: 1
    }]
  }]
});
</script>

默认值

vue2

vue3

`value`属性可以提供一个初始化的默认值

<template>
  <tvue-form :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'mention',
      type: 'mention',
      dicData: [
        { label: '字典1', value: 0 },
        { label: '字典2', value: 1 }
      ],
      value: '@',
    }
  ]
});
</script>

禁用状态

vue2

vue3

通过`disabled`属性指定是否禁用

<template>
  <tvue-form :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'mention',
      type: 'mention',
      dicData: [{
        label: '字典1',
        value: 0
      }, {
        label: '字典2',
        value: 1
      }],
      disabled: true
    }
  ]
});
</script>

可清空

vue2

vue3

使用`clearable`属性即可得到一个可清空的输入框,默认为`true`

<template>
  <tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'mention',
      type: 'mention',
      value: '@',
      clearable: false,
      dicData: [
        { label: '字典1', value: 0 },
        { label: '字典2', value: 1 }
      ]
    }
  ]
});
</script>

复合型输入框

带有图标标记输入类型

vue2

vue3

可以通过 `prefixIcon` 和 `suffixIcon`以及`prepend`和`append`属性在 `input` 组件首部和尾部增加显示图标

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
const form = ref({})
const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'mention',
      type: 'mention',
      value: '@',
      appendClick: () => {
        ElMessage.success('appendClick')
      },
      prependClick: () => {
        ElMessage.success('prependClick')
      },
      prepend: 'HTTP',
      append: 'COM'
    },
    {
      label: '输入框',
      prop: 'tag1',
      type: 'tag',
      value: '@',
      suffixIcon: "el-icon-date",
      prefixIcon: "el-icon-search"
    }
  ]
})
</script>

字典属性

指定标签文本和值，默认为 label 和 value

vue2

vue3

配置`props`属性来指定标签文本和值，默认为`label`和`value`

<template>
  <tvue-form :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '提及框',
    prop: 'mention',
    type: 'mention',
    value: '@',
    props: {
      label: 'name',
      value: 'code'
    },
    dicData: [{
      name: '字典1',
      code: 0
    }, {
      name: '字典2',
      code: 1
    }]
  }]
});
</script>

网络字典

更多用法参考表单数据字典

vue2

vue3

配置`dicUrl`指定后台接口的地址

<template>
  <tvue-form :option="option"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '提及框',
    prop: 'mention',
    type: 'mention',
    value: '@',
    props: {
      label: 'name',
      value: 'code'
    },
    dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
  }]
});
</script>

自定义模板

vue2

vue3

配置`props`名称加`Type`卡槽开启即可自定义下拉框的内容,`typeformat`配置回显的内容,但是你提交的值还是`value`并不会改变

<template>
  <tvue-form :option="option"
             v-model:form="form"
             ref="formRef">
    <template #province-type="{ item, value, label }">
      <img src="/logo.png"
           style="width:20px" />
      <span>{{ item.label }}</span>
    </template>
  </tvue-form>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const form = ref({
  province: '120000'
});

const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'province',
      type: 'mention',
      value: '@',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
      typeformat (item, label, value) {
        return `值:${item[label]}-名:${item[value]}`;
      },
      change (val) {
        setSelectImg(val);
      },
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    }
  ]
});

function setSelectImg (val) {
  nextTick(() => {
    const provinceRef = formRef.value.getPropRef('province');
    if (provinceRef) {
      const img = provinceRef.$el.querySelector('img');
      if (img) {
        img.setAttribute('style', `
          background: url('/logo.png') no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding-left:20px;
          text-indent: 30px;
        `);
      }
    }
  });
}

const formRef = ref(null);
</script>

远程搜索

当你的下拉框数据量很大的时候，你可以启动远程搜索

vue2

vue3

配置`remote`为`true`即可开启远程搜索，其中`dicUrl`中`'{{key}}'`为用户输入的关键字

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({
  province: '110000',
  province1: '110000,120000,130000,140000'
});

const option = ref({
  column: [
    {
      label: '提及框',
      prop: 'province',
      type: 'mention',
      remote: true,
      value: '@',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince?id={{key}}`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>