Mentions提及 (版本:1.5.0+)

提及组件。

何时使用

  • 用于在输入中提及某人或某事,常用于发布、聊天或评论功能。

代码演示

Mentions提及 - 图1

基础列表

基本使用。

  1. <template>
  2. <a-mentions v-model="value" @change="onChange" @select="onSelect">
  3. <a-mentions-option value="afc163">
  4. afc163
  5. </a-mentions-option>
  6. <a-mentions-option value="zombieJ">
  7. zombieJ
  8. </a-mentions-option>
  9. <a-mentions-option value="yesmeck">
  10. yesmeck
  11. </a-mentions-option>
  12. </a-mentions>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. value: '@afc163',
  19. };
  20. },
  21. methods: {
  22. onSelect(option) {
  23. console.log('select', option);
  24. },
  25. onChange(value) {
  26. console.log('Change:', value);
  27. },
  28. },
  29. };
  30. </script>

Top coders

Bio

SubmitReset

配合 Form 使用

受控模式,例如配合 Form 使用。

  1. <template>
  2. <a-form :form="form" layout="horizontal">
  3. <a-form-item label="Top coders" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
  4. <a-mentions
  5. v-decorator="[
  6. 'coders',
  7. {
  8. rules: [{ validator: checkMention }],
  9. },
  10. ]"
  11. rows="1"
  12. >
  13. <a-mentions-option value="afc163">
  14. afc163
  15. </a-mentions-option>
  16. <a-mentions-option value="zombieJ">
  17. zombieJ
  18. </a-mentions-option>
  19. <a-mentions-option value="yesmeck">
  20. yesmeck
  21. </a-mentions-option>
  22. </a-mentions>
  23. </a-form-item>
  24. <a-form-item label="Bio" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
  25. <a-mentions
  26. v-decorator="[
  27. 'bio',
  28. {
  29. rules: [{ required: true }],
  30. },
  31. ]"
  32. rows="3"
  33. placeholder="You can use @ to ref user here"
  34. >
  35. <a-mentions-option value="afc163">
  36. afc163
  37. </a-mentions-option>
  38. <a-mentions-option value="zombieJ">
  39. zombieJ
  40. </a-mentions-option>
  41. <a-mentions-option value="yesmeck">
  42. yesmeck
  43. </a-mentions-option>
  44. </a-mentions>
  45. </a-form-item>
  46. <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
  47. <a-button type="primary" @click="handleSubmit">
  48. Submit
  49. </a-button>
  50. <a-button style="margin-left: 8px;" @click="handleReset">
  51. Reset
  52. </a-button>
  53. </a-form-item>
  54. </a-form>
  55. </template>
  56. <script>
  57. import { Mentions } from 'ant-design-vue';
  58. const { getMentions } = Mentions;
  59. export default {
  60. data() {
  61. return {
  62. form: this.$form.createForm(this, { name: 'mentions' }),
  63. };
  64. },
  65. methods: {
  66. handleReset(e) {
  67. e.preventDefault();
  68. this.form.resetFields();
  69. },
  70. handleSubmit(e) {
  71. e.preventDefault();
  72. this.form.validateFields((errors, values) => {
  73. if (errors) {
  74. console.log('Errors in the form!!!');
  75. return;
  76. }
  77. console.log('Submit!!!');
  78. console.log(values);
  79. });
  80. },
  81. checkMention(rule, value, callback) {
  82. const mentions = getMentions(value);
  83. if (mentions.length < 2) {
  84. callback(new Error('More than one must be selected!'));
  85. } else {
  86. callback();
  87. }
  88. },
  89. },
  90. };
  91. </script>

Mentions提及 - 图2

无效或只读

通过 disabled 属性设置是否生效。通过 readOnly 属性设置是否只读。

  1. <template>
  2. <div>
  3. <div style="margin-bottom: 10px">
  4. <a-mentions placeholder="this is disabled Mentions" disabled>
  5. <a-mentions-option v-for="value in options" :key="value" :value="value">
  6. {{ value }}
  7. </a-mentions-option>
  8. </a-mentions>
  9. </div>
  10. <a-mentions placeholder="this is readOnly a-mentions" readonly>
  11. <a-mentions-option v-for="value in options" :key="value" :value="value">
  12. {{ value }}
  13. </a-mentions-option>
  14. </a-mentions>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. options: ['afc163', 'zombieJ', 'yesmeck'],
  22. };
  23. },
  24. };
  25. </script>

Mentions提及 - 图3

异步加载

匹配内容列表为异步返回时。

  1. <template>
  2. <a-mentions :loading="loading" @search="onSearch">
  3. <a-mentions-option
  4. v-for="({ login, avatar_url: avatar }) in users"
  5. :key="login"
  6. :value="login"
  7. >
  8. <img :src="avatar" :alt="login" style="width: 20px; margin-right: 8px;">
  9. <span>{{ login }}</span>
  10. </a-mentions-option>
  11. </a-mentions>
  12. </template>
  13. <script>
  14. import debounce from 'lodash/debounce';
  15. export default {
  16. data() {
  17. return {
  18. loading: false,
  19. users: [],
  20. };
  21. },
  22. mounted() {
  23. this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
  24. },
  25. methods: {
  26. onSearch(search) {
  27. this.search = search;
  28. this.loading = !!search;
  29. console.log(!!search);
  30. this.users = [];
  31. console.log('Search:', search);
  32. this.loadGithubUsers(search);
  33. },
  34. loadGithubUsers(key) {
  35. if (!key) {
  36. this.users = [];
  37. return;
  38. }
  39. fetch(`https://api.github.com/search/users?q=${key}`)
  40. .then(res => res.json())
  41. .then(({ items = [] }) => {
  42. const { search } = this;
  43. if (search !== key) return;
  44. this.users = items.slice(0, 10);
  45. this.loading = false;
  46. });
  47. },
  48. },
  49. };
  50. </script>
  51. <style>

Mentions提及 - 图4

自定义触发字符

通过 prefix 属性自定义触发字符。默认为 @, 可以定义为数组。

  1. <template>
  2. <a-mentions
  3. placeholder="input @ to mention people, # to mention tag"
  4. :prefix="['@', '#']"
  5. @search="onSearch"
  6. >
  7. <a-mentions-option v-for="value in MOCK_DATA[prefix] || []" :key="value" :value="value">
  8. {{ value }}
  9. </a-mentions-option>
  10. </a-mentions>
  11. </template>
  12. <script>
  13. const MOCK_DATA = {
  14. '@': ['afc163', 'zombiej', 'yesmeck'],
  15. '#': ['1.0', '2.0', '3.0'],
  16. };
  17. export default {
  18. data() {
  19. return {
  20. prefix: '@',
  21. MOCK_DATA,
  22. };
  23. },
  24. methods: {
  25. onSearch(_, prefix) {
  26. console.log(_, prefix);
  27. this.prefix = prefix;
  28. },
  29. },
  30. };
  31. </script>

Mentions提及 - 图5

向上展开

向上展开建议。

  1. <template>
  2. <a-mentions placement="top">
  3. <a-mentions-option value="afc163">
  4. afc163
  5. </a-mentions-option>
  6. <a-mentions-option value="zombieJ">
  7. zombieJ
  8. </a-mentions-option>
  9. <a-mentions-option value="yesmeck">
  10. yesmeck
  11. </a-mentions-option>
  12. </a-mentions>
  13. </template>

API

Mentions

参数说明类型默认值
autoFocus自动获得焦点booleanfalse
defaultValue默认值string
filterOption自定义过滤逻辑false | (input: string, option: OptionProps) => boolean
notFoundContent当下拉列表为空时显示的内容ReactNode‘Not Found’
placement弹出层展示位置top | bottombottom
prefix设置触发关键字string | string[]‘@’
split设置选中项前后分隔符string‘ ‘
validateSearch自定义触发验证逻辑(text: string, props: MentionsProps) => void
value(v-model)设置值string
getPopupContainer指定建议框挂载的 HTML 节点() => HTMLElement

事件

事件名称说明回调参数
blur失去焦点的时回调function
change值改变时触发function(value: string)
focus获得焦点时回调function
search文本框值变化时回调function(value: string, prefix: string)
select选择选项时触发function(option: OptionProps, prefix: string)

Mentions 方法

名称描述
blur()移除焦点
focus()获取焦点

Option

参数说明类型默认值
value选择时填充的值string‘’