Mention Mentions

Rules

Basic Example

const rule = {
    type:"elMention",
    title:"Mention",
    field:"mention",
    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:"elMention",
    title:"@User",
    field:"content",
    value: "",
    props: {
        prefix: '#',
        options: [
            {label: 'Topic 1', value: 'topic1'},
            {label: 'Topic 2', value: 'topic2'},
        ],
        placeholder: "Enter # to mention topic",
    },
}

Remote Load Options

const rule = {
    type:"elMention",
    title:"@User",
    field:"content",
    value: "",
    props: {
        prefix: '@',
        options: [],
        loading: false,
        placeholder: "Enter @ to mention user",
    },
    on: {
        search: (query, cb) => {
            // Remote search users
            searchUsers(query).then(res => {
                cb(res.data.map(user => ({
                    label: user.name,
                    value: user.id
                })));
            });
        },
    },
}

Delete Entire Mention

const rule = {
    type:"elMention",
    title:"Comment",
    field:"comment",
    value: "",
    props: {
        prefix: '@',
        whole: true,
        options: [
            {label: 'John', value: '1'},
            {label: 'Mary', value: '2'},
        ],
        placeholder: "Enter @ to mention user, backspace to delete entire mention",
    },
}

Events Examples

Listen to Mention Events

const rule = {
    type:"elMention",
    title:"Comment",
    field:"comment",
    value: "",
    props: {
        prefix: '@',
        options: [
            {label: 'John', value: '1'},
            {label: 'Mary', value: '2'},
        ],
    },
    on: {
        search: (query, cb) => {
            console.log('Search mention:', query);
            cb([
                {label: query + '1', value: '1'},
                {label: query + '2', value: '2'},
            ]);
        },
        select: (option) => {
            console.log('Select mention:', option);
        },
        change: (value) => {
            console.log('Content changed:', value);
        },
    },
}

Full configuration: Element_Mention

value :String

Props

Name	Description	Type	Default Value
options	List of mention options	array	[]
prefix	Prefix for trigger field. String length must be exactly 1	string	array
split	Character used to split mentions. String length must be exactly 1	string	' '
filterOption	Custom filter option logic	false	Function
placement	Set popup position	string	'bottom'
showArrow	Whether dropdown menu content has arrow	boolean	false
offset	Dropdown panel offset	number	0
whole	When backspace is pressed for deletion, whether to delete the mention part as a whole	boolean	false
checkIsWhole	When backspace is pressed for deletion, check whether to delete the mention part as a whole	Function	—
loading	Whether mention dropdown panel is in loading state	boolean	false
popperClass	Custom popup layer class name	string	—
popperOptions	popper.js parameters	object refer to popper.js doc	—
input props	—	—	—

Events

Name	Description	Type
search	Triggered when trigger field is pressed	Function
select	Triggered when user selects option	Function
input events	—	—

Slots

Name	Description	Type
label	Custom label content	object
loading	Custom loading content	—
header	Content at top of dropdown list	—
footer	Content at bottom of dropdown list	—
input slots	—	—