Mention
Used to mention someone or something in an input.
Basic Usage
The most basic usage.
export function MentionBasic() { const [value, setValue] = useState("@"); return ( <ElMention value={value} onChange={setValue} options={BASIC_OPTIONS} style={mentionStyle} placeholder="Please input" /> ); } Props 2.11.3
You can customize the alias of the options through the props attribute.
export function MentionProps() { const [value, setValue] = useState("@"); const options: MentionOption[] = [ { name: "Fuphoenixes", id: "Fuphoenixes", unable: true }, { name: "kooriookami", id: "kooriookami" }, { name: "Jeremy", id: "Jeremy", unable: true }, { name: "btea", id: "btea" }, ]; return ( <ElMention value={value} onChange={setValue} options={options} props={{ label: "name", value: "id", disabled: "unable" }} style={mentionStyle} placeholder="Please input" /> ); } Textarea
The input type can be set to textarea.
export function MentionTextarea() { const [value, setValue] = useState(""); return ( <ElMention value={value} onChange={setValue} type="textarea" options={BASIC_OPTIONS} style={mentionStyle} placeholder="Please input" /> ); } Customize label
Customize label by label slot.
export function MentionLabel() { const [value, setValue] = useState(""); const options: MentionOption[] = [ { value: "Fuphoenixes", avatar: "https://avatars.githubusercontent.com/u/27912232" }, { value: "kooriookami", avatar: "https://avatars.githubusercontent.com/u/38392315" }, { value: "Jeremy", avatar: "https://avatars.githubusercontent.com/u/15975785" }, { value: "btea", avatar: "https://avatars.githubusercontent.com/u/24516654" }, ]; return ( <ElMention value={value} onChange={setValue} options={options} style={mentionStyle} placeholder="Please input" labelSlot={({ item }) => ( <div style={labelRowStyle}> <ElAvatar size={24} src={item.avatar as string} /> <span style={labelTextStyle}>{item.value}</span> </div> )} /> ); } Load remote options
Load options asynchronously.
export function MentionLoading() { const [value, setValue] = useState(""); const [loading, setLoading] = useState(false); const [options, setOptions] = useState<MentionOption[]>([]); const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined); useEffect(() => () => clearTimeout(timerRef.current), []); const handleSearch = (pattern: string) => { clearTimeout(timerRef.current); setLoading(true); timerRef.current = setTimeout(() => { setOptions( ["Fuphoenixes", "kooriookami", "Jeremy", "btea"].map((item) => ({ label: pattern + item, value: pattern + item, })), ); setLoading(false); }, 1500); }; return ( <ElMention value={value} onChange={setValue} options={options} loading={loading} onSearch={handleSearch} style={mentionStyle} placeholder="Please input" /> ); } Customize trigger token
Customize trigger token by prefix props. Default to @, Array<string> also supported.
export function MentionPrefix() { const [value, setValue] = useState(""); const [options, setOptions] = useState<MentionOption[]>([]); const handleSearch = (_pattern: string, prefix: string) => { setOptions((MOCK_DATA[prefix] || []).map((item) => ({ value: item }))); }; return ( <ElMention value={value} onChange={setValue} options={options} prefix={["@", "#"]} onSearch={handleSearch} style={mentionStyle} placeholder="input @ to mention people, # to mention tag" /> ); } Delete as a whole
Set the whole attribute to true, and when you press the backspace, the mention will be deleted as a whole.
Set the check-is-whole attribute to customize the checking logic.
export function MentionWhole() { const [value1, setValue1] = useState(""); const [value2, setValue2] = useState(""); const [options2, setOptions2] = useState<MentionOption[]>([]); const options1: MentionOption[] = (MOCK_DATA["@"] || []).map((item) => ({ value: item, })); const handleSearch = (_pattern: string, prefix: string) => { setOptions2((MOCK_DATA[prefix] || []).map((item) => ({ value: item }))); }; const checkIsWhole = (pattern: string, prefix: string) => (MOCK_DATA[prefix] || []).includes(pattern); return ( <> <ElMention value={value1} onChange={setValue1} whole options={options1} style={mentionStyle} placeholder="Please input" /> <ElDivider /> <ElMention value={value2} onChange={setValue2} options={options2} prefix={["@", "#"]} whole checkIsWhole={checkIsWhole} onSearch={handleSearch} style={mentionStyle} placeholder="input @ to mention people, # to mention tag" /> </> ); } to work with el-form.
export function MentionForm() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState({ name: "", desc: "" }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); const submit = async () => { try { const ok = await formRef.current!.validate(); console.log(ok ? "submit!" : "not valid"); } catch (fields) { console.log("error submit!", fields); } }; return ( <ElForm ref={formRef} model={form} rules={RULES} style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="name" prop="name"> <ElMention value={form.name} onChange={(v) => patch({ name: v })} options={BASIC_OPTIONS} /> </ElFormItem> <ElFormItem label="desc" prop="desc"> <ElMention value={form.desc} onChange={(v) => patch({ desc: v })} type="textarea" options={BASIC_OPTIONS} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}>Reset</ElButton> </ElFormItem> </ElForm> ); } ::: tip
Since this component is developed based on the component el-input
API
Attributes
Name Description Type Default options mention options list array[]props 2.11.3 configuration options object{value: 'value', label: 'label', disabled: 'disabled'}prefix prefix character to trigger mentions. The string length must be exactly 1 stringarray'@'split character to split mentions. The string length must be exactly 1 string' 'filter-option customize filter option logic falseFunction— placement set popup placement string'bottom'show-arrow whether the dropdown panel has an arrow booleanfalseoffset offset of the dropdown panel number0whole when backspace is pressed to delete, whether the mention content is deleted as a whole booleanfalsecheck-is-whole when backspace is pressed to delete, check if the mention is a whole Function— loading whether the dropdown panel of mentions is in a loading state booleanfalsemodel-value / v-model input value string— popper-class custom class name for dropdown panel stringobject'' popper-style 2.11.5 custom style for dropdown panel stringobject— popper-options popper.js parametersobjectpopper.js doc — input props — — —
Events
Name Description Type search trigger when prefix hit Functionselect trigger when user select the option Functionwhole-remove 2.10.4 trigger when a whole mention is removed and whole is true or check-is-whole is true Functioninput events — —
Slots
Name Description Type label content as option label objectloading content as option loading — header content at the top of the dropdown — footer content at the bottom of the dropdown — input slots — —
Exposes
Name Description Type input el-input component instance objecttooltip el-tooltip component instance objectdropdownVisible 2.8.5 tooltip display status object
Type Declarations
Show declarations
type MentionOption = {
value ?: string
label ?: string
disabled ?: boolean
[key: string] : any
}
type MentionOptionProps = {
value ?: string
label ?: string
disabled ?: string
[key: string] : string | undefined
}
