Mention 提及

规则

基础示例

const rule = {
    type:"elMention",
    title:"提及",
    field:"mention",
    value: "hello @Jeremy",
    props: {
      options: [
        {
            label: 'Fuphoenixes',
            value: 'Fuphoenixes',
        },
        {
            label: 'kooriookami',
            value: 'kooriookami',
        },
        {
            label: 'Jeremy',
            value: 'Jeremy',
        },
        {
            label: 'btea',
            value: 'btea',
        },
      ]
    }
}

Props 配置示例

自定义触发前缀

const rule = {
    type:"elMention",
    title:"@用户",
    field:"content",
    value: "",
    props: {
        prefix: '#',
        options: [
            {label: '话题1', value: 'topic1'},
            {label: '话题2', value: 'topic2'},
        ],
        placeholder: "输入 # 提及话题",
    },
}

远程加载选项

const rule = {
    type:"elMention",
    title:"@用户",
    field:"content",
    value: "",
    props: {
        prefix: '@',
        options: [],
        loading: false,
        placeholder: "输入 @ 提及用户",
    },
    on: {
        search: (query, cb) => {
            // 远程搜索用户
            searchUsers(query).then(res => {
                cb(res.data.map(user => ({
                    label: user.name,
                    value: user.id
                })));
            });
        },
    },
}

整体删除

const rule = {
    type:"elMention",
    title:"评论",
    field:"comment",
    value: "",
    props: {
        prefix: '@',
        whole: true,
        options: [
            {label: '张三', value: '1'},
            {label: '李四', value: '2'},
        ],
        placeholder: "输入 @ 提及用户，退格键整体删除",
    },
}

Events 事件示例

监听提及事件

const rule = {
    type:"elMention",
    title:"评论",
    field:"comment",
    value: "",
    props: {
        prefix: '@',
        options: [
            {label: '张三', value: '1'},
            {label: '李四', value: '2'},
        ],
    },
    on: {
        search: (query, cb) => {
            console.log('搜索提及:', query);
            cb([
                {label: query + '1', value: '1'},
                {label: query + '2', value: '2'},
            ]);
        },
        select: (option) => {
            console.log('选择提及:', option);
        },
        change: (value) => {
            console.log('内容改变:', value);
        },
    },
}

完整配置项:Element_Mention

value :String

Props

名称	说明	类型	默认值
options	提及选项列表	array	[]
prefix	触发字段的前缀。 字符串长度必须且只能为 1	string	array
split	用于拆分提及的字符。 字符串长度必须且只能为 1	string	' '
filterOption	定制筛选器选项逻辑	false	Function
placement	设置弹出位置	string	'bottom'
showArrow	下拉菜单的内容是否有箭头	boolean	false
offset	下拉面板偏移量	number	0
whole	当退格键被按下做删除操作时，是否将提及部分作为整体删除	boolean	false
checkIsWhole	当退格键被按下做删除操作时，检查是否将提及部分作为整体删除	Function	—
loading	提及的下拉面板是否处于加载状态	boolean	false
popperClass	自定义浮层类名	string	—
popperOptions	popper.js 参数	object refer to popper.js doc	—
input props	—	—	—

Events

名称	说明	类型
search	按下触发字段时触发	Function
select	当用户选择选项时触发	Function
input events	—	—

Slots

名称	说明	类型
label	自定义标签内容	object
loading	自定义 loading内容	—
header	下拉列表顶部的内容	—
footer	下拉列表底部的内容	—
input slots	—	—