Mentions

Rules

Basic Example

const rule = {
    type:"aMentions",
    title:"Mention",
    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 Configuration Examples

Custom Trigger Prefix

const rule = {
    type:"aMentions",
    title:"@User",
    field:"content",
    modelField: "value",
    value: "",
    props: {
        prefix: '#',
        options: [
            {label: 'Topic 1', value: 'topic1'},
            {label: 'Topic 2', value: 'topic2'},
        ],
        placeholder: "Type # to mention a topic",
    },
}

Remote Load Options

const rule = {
    type:"aMentions",
    title:"@User",
    field:"content",
    modelField: "value",
    value: "",
    inject: true,
    props: {
        prefix: '@',
        options: [],
        placeholder: "Type @ to mention a user",
    },
    on: {
        search: ($inject, value, prefix) => {
            // Remote search users
            if (prefix === '@' && value) {
                searchUsers(value).then(res => {
                    $inject.self.props.options = res.data.map(user => ({
                        label: user.name,
                        value: user.id
                    }));
                });
            }
        },
    },
}

Events Examples

Listen to Mention Events

const rule = {
    type:"aMentions",
    title:"Comment",
    field:"comment",
    modelField: "value",
    value: "",
    props: {
        prefix: '@',
        options: [
            {label: 'Zhang San', value: '1'},
            {label: 'Li Si', value: '2'},
        ],
    },
    on: {
        search: (value, prefix) => {
            console.log('Search mention:', value, prefix);
        },
        select: (option, prefix) => {
            console.log('Select mention:', option, prefix);
        },
        change: (value) => {
            console.log('Content changed:', value);
        },
        focus: () => {
            console.log('Component focused');
        },
        blur: () => {
            console.log('Component blurred');
        },
    },
}

Complete configuration items: Ant-design-vue_Mentions

value :Number

Props

Parameter	Description	Type	Default
autofocus	Auto focus	boolean	false
filterOption	Custom filter logic	false | (input: string, option: OptionProps) => boolean
getPopupContainer	Specify HTML node where suggestion box is mounted	() => HTMLElement
notFoundContent	Content displayed when dropdown list is empty	string | slot	'Not Found'
placement	Display position of popup layer	top | bottom	bottom
prefix	Set trigger keyword	string | string[]	'@'
split	Set separator before and after selected item	string	' '
status	Set validation status	'error' | 'warning'	-
validateSearch	Custom trigger validation logic	(text: string, props: MentionsProps) => void
options	Option configuration	Options	[]
option	Custom node through option slot	v-slot:option="option"	-

Events

Event Name	Description	Callback Parameters
blur	Callback when losing focus	function
change	Triggered when value changes	function(value: string)
focus	Callback when gaining focus	function
search	Callback when text box value changes	function(value: string, prefix: string)
select	Triggered when option is selected	function(option: OptionProps, prefix: string)

Option

Parameter	Description	Type	Default
value	Value filled when selected	string	number
label	Title of option	VueNode	(o: Option)=> VueNode
disabled	Whether selectable	boolean	-
class	css class name	string	-
style	Option style	CSSProperties	-
payload	Other data	object	-