Mention 提及框

提示

3.6.0+

基础用法

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

默认值

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

可清空

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

复合型输入框

带有图标标记输入类型

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-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

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-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>

网络字典

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

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-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://api.avuejs.com/area/getProvince'
  }]
});
</script>

自定义模板

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"
             v-model:form="form"
             ref="formRef">
    <template #province-type="{ item, value, label }">
      <img src="/images/logo.png"
           style="width:20px" />
      <span>{{ item.label }}</span>
    </template>
  </avue-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://api.avuejs.com/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('/images/logo.png') no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding-left:20px;
          text-indent: 30px;
        `);
      }
    }
  });
}

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

远程搜索

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

效果预览可直接操作下方示例

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

正在加载示例…

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

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

const baseUrl = 'https://api.avuejs.com/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>