Mentions提及 (版本：1.5.0+)

提及组件。

何时使用

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

代码演示

基础列表

基本使用。

<template>
  <a-mentions v-model="value" @change="onChange" @select="onSelect">
    <a-mentions-option value="afc163">
      afc163
    </a-mentions-option>
    <a-mentions-option value="zombieJ">
      zombieJ
    </a-mentions-option>
    <a-mentions-option value="yesmeck">
      yesmeck
    </a-mentions-option>
  </a-mentions>
</template>
<script>
export default {
  data() {
    return {
      value: '@afc163',
    };
  },
  methods: {
    onSelect(option) {
      console.log('select', option);
    },
    onChange(value) {
      console.log('Change:', value);
    },
  },
};
</script>

Top coders

Bio

SubmitReset

配合 Form 使用

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

<template>
  <a-form :form="form" layout="horizontal">
    <a-form-item label="Top coders" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-mentions
        v-decorator="[
          'coders',
          {
            rules: [{ validator: checkMention }],
          },
        ]"
        rows="1"
      >
        <a-mentions-option value="afc163">
          afc163
        </a-mentions-option>
        <a-mentions-option value="zombieJ">
          zombieJ
        </a-mentions-option>
        <a-mentions-option value="yesmeck">
          yesmeck
        </a-mentions-option>
      </a-mentions>
    </a-form-item>
    <a-form-item label="Bio" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-mentions
        v-decorator="[
          'bio',
          {
            rules: [{ required: true }],
          },
        ]"
        rows="3"
        placeholder="You can use @ to ref user here"
      >
        <a-mentions-option value="afc163">
          afc163
        </a-mentions-option>
        <a-mentions-option value="zombieJ">
          zombieJ
        </a-mentions-option>
        <a-mentions-option value="yesmeck">
          yesmeck
        </a-mentions-option>
      </a-mentions>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" @click="handleSubmit">
        Submit
      </a-button>
      <a-button style="margin-left: 8px;" @click="handleReset">
        Reset
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { Mentions } from 'ant-design-vue';
const { getMentions } = Mentions;
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'mentions' }),
    };
  },
  methods: {
    handleReset(e) {
      e.preventDefault();
      this.form.resetFields();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((errors, values) => {
        if (errors) {
          console.log('Errors in the form!!!');
          return;
        }
        console.log('Submit!!!');
        console.log(values);
      });
    },
    checkMention(rule, value, callback) {
      const mentions = getMentions(value);
      if (mentions.length < 2) {
        callback(new Error('More than one must be selected!'));
      } else {
        callback();
      }
    },
  },
};
</script>

无效或只读

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

<template>
  <div>
    <div style="margin-bottom: 10px">
      <a-mentions placeholder="this is disabled Mentions" disabled>
        <a-mentions-option v-for="value in options" :key="value" :value="value">
          {{ value }}
        </a-mentions-option>
      </a-mentions>
    </div>
    <a-mentions placeholder="this is readOnly a-mentions" readonly>
      <a-mentions-option v-for="value in options" :key="value" :value="value">
        {{ value }}
      </a-mentions-option>
    </a-mentions>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: ['afc163', 'zombieJ', 'yesmeck'],
    };
  },
};
</script>

异步加载

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

<template>
  <a-mentions :loading="loading" @search="onSearch">
    <a-mentions-option
      v-for="({ login, avatar_url: avatar }) in users"
      :key="login"
      :value="login"
    >
      <img :src="avatar" :alt="login" style="width: 20px; margin-right: 8px;">
      <span>{{ login }}</span>
    </a-mentions-option>
  </a-mentions>
</template>
<script>
import debounce from 'lodash/debounce';
export default {
  data() {
    return {
      loading: false,
      users: [],
    };
  },
  mounted() {
    this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
  },
  methods: {
    onSearch(search) {
      this.search = search;
      this.loading = !!search;
      console.log(!!search);
      this.users = [];
      console.log('Search:', search);
      this.loadGithubUsers(search);
    },
    loadGithubUsers(key) {
      if (!key) {
        this.users = [];
        return;
      }
      fetch(`https://api.github.com/search/users?q=${key}`)
        .then(res => res.json())
        .then(({ items = [] }) => {
          const { search } = this;
          if (search !== key) return;
          this.users = items.slice(0, 10);
          this.loading = false;
        });
      },
  },
};
</script>
<style>

自定义触发字符

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

<template>
  <a-mentions
    placeholder="input @ to mention people, # to mention tag"
    :prefix="['@', '#']"
    @search="onSearch"
  >
    <a-mentions-option v-for="value in MOCK_DATA[prefix] || []" :key="value" :value="value">
      {{ value }}
    </a-mentions-option>
  </a-mentions>
</template>
<script>
const MOCK_DATA = {
  '@': ['afc163', 'zombiej', 'yesmeck'],
  '#': ['1.0', '2.0', '3.0'],
};
export default {
  data() {
    return {
      prefix: '@',
      MOCK_DATA,
    };
  },
  methods: {
    onSearch(_, prefix) {
      console.log(_, prefix);
      this.prefix = prefix;
    },
  },
};
</script>

向上展开

向上展开建议。

<template>
  <a-mentions placement="top">
    <a-mentions-option value="afc163">
      afc163
    </a-mentions-option>
    <a-mentions-option value="zombieJ">
      zombieJ
    </a-mentions-option>
    <a-mentions-option value="yesmeck">
      yesmeck
    </a-mentions-option>
  </a-mentions>
</template>

API

Mentions

事件

Mentions 方法

Option