mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-16 12:04:12 +08:00
2f17df1209
* perf: change to import-x * feat: add rules * chore: fix rule * chore: fix * chore: fix * chore: fix * style: `pnpm lint:fix` * Revert "style: `pnpm lint:fix`" This reverts commit db0116a288299c507e3cfc4d7a22e2207265d920. * Revert "chore: fix" This reverts commit 69c82a90c01525e38180be4c21e8ef5602512318. * chore: fix * style: `pnpm lint:fix` * fix: lint * chore: `pnpm format`
48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<template>
|
|
<el-mention
|
|
v-model="value1"
|
|
whole
|
|
:options="options1"
|
|
style="width: 320px"
|
|
placeholder="Please input"
|
|
/>
|
|
<el-divider />
|
|
<el-mention
|
|
v-model="value2"
|
|
:options="options2"
|
|
:prefix="['@', '#']"
|
|
whole
|
|
:check-is-whole="checkIsWhole"
|
|
style="width: 320px"
|
|
placeholder="input @ to mention people, # to mention tag"
|
|
@search="handleSearch"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import type { MentionOption } from 'element-plus'
|
|
|
|
const MOCK_DATA: Record<string, string[]> = {
|
|
'@': ['Fuphoenixes', 'kooriookami', 'Jeremy', 'btea'],
|
|
'#': ['1.0', '2.0', '3.0'],
|
|
}
|
|
const value1 = ref('')
|
|
const value2 = ref('')
|
|
const options1 = ref<MentionOption[]>(
|
|
MOCK_DATA['@'].map((value) => ({ value }))
|
|
)
|
|
const options2 = ref<MentionOption[]>([])
|
|
|
|
const handleSearch = (_: string, prefix: string) => {
|
|
options2.value = (MOCK_DATA[prefix] || []).map((value) => ({
|
|
value,
|
|
}))
|
|
}
|
|
|
|
const checkIsWhole = (pattern: string, prefix: string) => {
|
|
return (MOCK_DATA[prefix] || []).includes(pattern)
|
|
}
|
|
</script>
|