Mentions 提及

规则

基础示例

const rule = {
    type:"aMentions",
    title:"提及",
    field:"mention",
    modelField: "value",
    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:"aMentions",
    title:"@用户",
    field:"content",
    modelField: "value",
    value: "",
    props: {
        prefix: '#',
        options: [
            {label: '话题1', value: 'topic1'},
            {label: '话题2', value: 'topic2'},
        ],
        placeholder: "输入 # 提及话题",
    },
}

远程加载选项

const rule = {
    type:"aMentions",
    title:"@用户",
    field:"content",
    modelField: "value",
    value: "",
    inject: true,
    props: {
        prefix: '@',
        options: [],
        placeholder: "输入 @ 提及用户",
    },
    on: {
        search: ($inject, value, prefix) => {
            // 远程搜索用户
            if (prefix === '@' && value) {
                searchUsers(value).then(res => {
                    $inject.self.props.options = res.data.map(user => ({
                        label: user.name,
                        value: user.id
                    }));
                });
            }
        },
    },
}

Events 事件示例

监听提及事件

const rule = {
    type:"aMentions",
    title:"评论",
    field:"comment",
    modelField: "value",
    value: "",
    props: {
        prefix: '@',
        options: [
            {label: '张三', value: '1'},
            {label: '李四', value: '2'},
        ],
    },
    on: {
        search: (value, prefix) => {
            console.log('搜索提及:', value, prefix);
        },
        select: (option, prefix) => {
            console.log('选择提及:', option, prefix);
        },
        change: (value) => {
            console.log('内容改变:', value);
        },
        focus: () => {
            console.log('获得焦点');
        },
        blur: () => {
            console.log('失去焦点');
        },
    },
}

完整配置项:Ant-design-vue_Mentions

value :Number

Props

参数	说明	类型	默认值
autofocus	自动获得焦点	boolean	false
filterOption	自定义过滤逻辑	false | (input: string, option: OptionProps) => boolean
getPopupContainer	指定建议框挂载的 HTML 节点	() => HTMLElement
notFoundContent	当下拉列表为空时显示的内容	string | slot	'Not Found'
placement	弹出层展示位置	top	bottom
prefix	设置触发关键字	string | string[]	'@'
split	设置选中项前后分隔符	string	' '
status	设置校验状态	'error' | 'warning'	-
validateSearch	自定义触发验证逻辑	(text: string, props: MentionsProps) => void
options	选项配置	Options	[]
option	通过 option 插槽，自定义节点	v-slot:option="option"	-

Events

事件名称	说明	回调参数
blur	失去焦点的时回调	function
change	值改变时触发	function(value: string)
focus	获得焦点时回调	function
search	文本框值变化时回调	function(value: string, prefix: string)
select	选择选项时触发	function(option: OptionProps, prefix: string)

Option

参数	说明	类型	默认值
value	选择时填充的值	string	number
label	选项的标题	VueNode	(o: Option)=> VueNode
disabled	是否可选	boolean	-
class	css 类名	string	-
style	选项样式	CSSProperties	-
payload	其它数据	object	-