element-plus/docs/examples/mention/prefix.vue
赵添 0456c790db
feat: add mention component (#17586)
* feat: add mention component

* fix: build error

* fix: build error

* feat: delete as a whole

* fix: update docs

* fix: update global.d.ts

* fix: update

* fix: update code

* fix: update code

* fix: update code

* fix: rename

* fix: update code

* fix: upload code

* fix: update code

* fix: fixed cursor position abnormality

* fix: update code

* fix: docs add avatar

* fix: tooltip position is wrong when placing on top

* feat: add overview icon

* fix: overview icon color
2024-08-02 11:00:26 +08:00

29 lines
671 B
Vue

<template>
<el-mention
v-model="value"
:options="options"
:prefix="['@', '#']"
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 value = ref('')
const options = ref<MentionOption[]>([])
const handleSearch = (_: string, prefix: string) => {
options.value = (MOCK_DATA[prefix] || []).map((value) => ({
value,
}))
}
</script>