Skip to content

Commit 7e29eb2

Browse files
tangjinzhoutangjinzhou
committed
doc: update mentions demo
1 parent 92795a8 commit 7e29eb2

14 files changed

+210
-73
lines changed

‎components/_util/warning.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type Warning = (valid: boolean, component: string, message?: string) => void;
99
let warning: Warning = noop;
1010
if (process.env.NODE_ENV !== 'production') {
1111
warning = (valid, component, message) => {
12-
vcWarning(valid, `[antdv: ${component}] ${message}`);
12+
vcWarning(valid, `[ant-design-vue: ${component}] ${message}`);
1313

1414
// StrictMode will inject console which will not throw warning in React 17.
1515
if (process.env.NODE_ENV === 'test') {

‎components/mentions/demo/async.vue

+23-7
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@ async.
1616

1717
</docs>
1818
<template>
19-
<a-mentions v-model:value="value" :loading="loading" @search="onSearch">
20-
<a-mentions-option v-for="{ login, avatar_url: avatar } in users" :key="login" :value="login">
21-
<img :src="avatar" :alt="login" style="width: 20px; margin-right: 8px" />
22-
<span>{{ login }}</span>
23-
</a-mentions-option>
19+
<a-mentions v-model:value="value" :options="options" :loading="loading" @search="onSearch">
20+
<template #option="{ payload }">
21+
<img :src="payload.avatar_url" :alt="payload.login" />
22+
<span>{{ payload.login }}</span>
23+
</template>
2424
</a-mentions>
2525
</template>
2626

2727
<script lang="ts">
2828
import { debounce } from 'lodash-es';
29-
import { defineComponent, ref } from 'vue';
29+
import { computed, defineComponent, ref } from 'vue';
30+
import { MentionsProps } from '..';
3031
export default defineComponent({
3132
setup() {
3233
const value = ref<string>('');
@@ -56,14 +57,29 @@ export default defineComponent({
5657
console.log('Search:', searchValue);
5758
loadGithubUsers(searchValue);
5859
};
59-
60+
const options = computed<MentionsProps['options']>(() =>
61+
users.value.map(user => ({
62+
key: user.login,
63+
value: user.login,
64+
class: 'antd-demo-dynamic-option',
65+
payload: user,
66+
})),
67+
);
6068
return {
6169
value,
6270
loading,
6371
users,
6472
loadGithubUsers,
6573
onSearch,
74+
options,
6675
};
6776
},
6877
});
6978
</script>
79+
<style>
80+
.antd-demo-dynamic-option img {
81+
width: 20px;
82+
height: 20px;
83+
margin-right: 8px;
84+
}
85+
</style>

‎components/mentions/demo/basic.vue

+15-5
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ Basic usage.
1616

1717
</docs>
1818
<template>
19-
<a-mentions v-model:value="value" autofocus @select="onSelect">
20-
<a-mentions-option value="afc163">afc163</a-mentions-option>
21-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
22-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
23-
</a-mentions>
19+
<a-mentions v-model:value="value" autofocus :options="options" @select="onSelect"></a-mentions>
2420
</template>
2521
<script lang="ts">
2622
import { defineComponent, ref, watch } from 'vue';
@@ -37,6 +33,20 @@ export default defineComponent({
3733
return {
3834
value,
3935
onSelect,
36+
options: [
37+
{
38+
value: 'afc163',
39+
label: 'afc163',
40+
},
41+
{
42+
value: 'zombieJ',
43+
label: 'zombieJ',
44+
},
45+
{
46+
value: 'yesmeck',
47+
label: 'yesmeck',
48+
},
49+
],
4050
};
4151
},
4252
});

‎components/mentions/demo/form.vue

+17-10
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,7 @@ to work with `Form`.
2424
name="coders"
2525
v-bind="validateInfos.coders"
2626
>
27-
<a-mentions v-model:value="modelRef.coders" rows="1">
28-
<a-mentions-option value="afc163">afc163</a-mentions-option>
29-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
30-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
31-
</a-mentions>
27+
<a-mentions v-model:value="modelRef.coders" rows="1" :options="options"></a-mentions>
3228
</a-form-item>
3329
<a-form-item
3430
label="Bio"
@@ -41,11 +37,8 @@ to work with `Form`.
4137
v-model:value="modelRef.bio"
4238
rows="3"
4339
placeholder="You can use @ to ref user here"
44-
>
45-
<a-mentions-option value="afc163">afc163</a-mentions-option>
46-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
47-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
48-
</a-mentions>
40+
:options="options"
41+
></a-mentions>
4942
</a-form-item>
5043
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
5144
<a-button type="primary" @click="handleSubmit">Submit</a-button>
@@ -93,6 +86,20 @@ export default defineComponent({
9386
resetFields,
9487
validateInfos,
9588
handleSubmit,
89+
options: [
90+
{
91+
value: 'afc163',
92+
label: 'afc163',
93+
},
94+
{
95+
value: 'zombieJ',
96+
label: 'zombieJ',
97+
},
98+
{
99+
value: 'yesmeck',
100+
label: 'yesmeck',
101+
},
102+
],
96103
};
97104
},
98105
});

‎components/mentions/demo/placement.vue

+15-5
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@ Change the suggestions placement.
1616

1717
</docs>
1818
<template>
19-
<a-mentions v-model:value="value" placement="top">
20-
<a-mentions-option value="afc163">afc163</a-mentions-option>
21-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
22-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
23-
</a-mentions>
19+
<a-mentions v-model:value="value" placement="top" :options="options"></a-mentions>
2420
</template>
2521
<script lang="ts">
2622
import { defineComponent, ref } from 'vue';
@@ -29,6 +25,20 @@ export default defineComponent({
2925
const value = ref<string>('');
3026
return {
3127
value,
28+
options: [
29+
{
30+
value: 'afc163',
31+
label: 'afc163',
32+
},
33+
{
34+
value: 'zombieJ',
35+
label: 'zombieJ',
36+
},
37+
{
38+
value: 'yesmeck',
39+
label: 'yesmeck',
40+
},
41+
],
3242
};
3343
},
3444
});

‎components/mentions/demo/prefix.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,9 @@ Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also
2020
v-model:value="value"
2121
placeholder="input @ to mention people, # to mention tag"
2222
:prefix="['@', '#']"
23+
:options="options"
2324
@search="onSearch"
24-
>
25-
<a-mentions-option v-for="val in options" :key="val" :value="val">
26-
{{ val }}
27-
</a-mentions-option>
28-
</a-mentions>
25+
></a-mentions>
2926
</template>
3027
<script lang="ts">
3128
import { computed, defineComponent, ref } from 'vue';
@@ -38,7 +35,11 @@ export default defineComponent({
3835
const prefix = ref<string>('@');
3936
const value = ref<string>('');
4037
const options = computed(() => {
41-
return MOCK_DATA[prefix.value] || [];
38+
return (MOCK_DATA[prefix.value] || []).map(value => ({
39+
key: value,
40+
value,
41+
label: value,
42+
}));
4243
});
4344
4445
const onSearch = (_: string, val: string) => {

‎components/mentions/demo/readonly.vue

+26-12
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,19 @@ Configurate disabled and readonly.
1818
<template>
1919
<div>
2020
<div style="margin-bottom: 10px">
21-
<a-mentions v-model:value="value1" placeholder="this is disabled Mentions" disabled>
22-
<a-mentions-option v-for="value in options" :key="value" :value="value">
23-
{{ value }}
24-
</a-mentions-option>
25-
</a-mentions>
21+
<a-mentions
22+
v-model:value="value1"
23+
:options="options"
24+
placeholder="this is disabled Mentions"
25+
disabled
26+
></a-mentions>
2627
</div>
27-
<a-mentions v-model:value="value2" placeholder="this is readOnly a-mentions" readonly>
28-
<a-mentions-option v-for="value in options" :key="value" :value="value">
29-
{{ value }}
30-
</a-mentions-option>
31-
</a-mentions>
28+
<a-mentions
29+
v-model:value="value2"
30+
:options="options"
31+
placeholder="this is readOnly a-mentions"
32+
readonly
33+
></a-mentions>
3234
</div>
3335
</template>
3436
<script lang="ts">
@@ -37,11 +39,23 @@ export default defineComponent({
3739
setup() {
3840
const value1 = ref<string>('');
3941
const value2 = ref<string>('');
40-
const options = ref<string[]>(['afc163', 'zombieJ', 'yesmeck']);
4142
return {
4243
value1,
4344
value2,
44-
options,
45+
options: [
46+
{
47+
value: 'afc163',
48+
label: 'afc163',
49+
},
50+
{
51+
value: 'zombieJ',
52+
label: 'zombieJ',
53+
},
54+
{
55+
value: 'yesmeck',
56+
label: 'yesmeck',
57+
},
58+
],
4559
};
4660
},
4761
});

‎components/mentions/demo/status.vue

+28-10
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,20 @@ Add status to Mentions with `status`, which could be `error` or `warning`。
1717
</docs>
1818
<template>
1919
<a-space direction="vertical">
20-
<a-mentions v-model:value="value" autofocus status="error" @select="onSelect">
21-
<a-mentions-option value="afc163">afc163</a-mentions-option>
22-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
23-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
24-
</a-mentions>
25-
<a-mentions v-model:value="value" autofocus status="warning" @select="onSelect">
26-
<a-mentions-option value="afc163">afc163</a-mentions-option>
27-
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
28-
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
29-
</a-mentions>
20+
<a-mentions
21+
v-model:value="value"
22+
:options="options"
23+
autofocus
24+
status="error"
25+
@select="onSelect"
26+
></a-mentions>
27+
<a-mentions
28+
v-model:value="value"
29+
:options="options"
30+
autofocus
31+
status="warning"
32+
@select="onSelect"
33+
></a-mentions>
3034
</a-space>
3135
</template>
3236
<script lang="ts">
@@ -44,6 +48,20 @@ export default defineComponent({
4448
return {
4549
value,
4650
onSelect,
51+
options: [
52+
{
53+
value: 'afc163',
54+
label: 'afc163',
55+
},
56+
{
57+
value: 'zombieJ',
58+
label: 'zombieJ',
59+
},
60+
{
61+
value: 'yesmeck',
62+
label: 'yesmeck',
63+
},
64+
],
4765
};
4866
},
4967
});

‎components/mentions/index.en-US.md

+17-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ When you need to mention someone or something.
2828
| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | 3.3.0 |
2929
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | |
3030
| value(v-model) | Set value of mentions | string | |
31+
| options | Option Configuration | [Options](#option) | \[] | 4.0 |
32+
| option | custom option label | v-slot:option="option" | - | 4.0 |
3133

3234
### Events
3335

@@ -46,8 +48,22 @@ When you need to mention someone or something.
4648
| blur() | remove focus |
4749
| focus() | get focus |
4850

49-
### Option
51+
### Mention.Option (< 4.0)
5052

5153
| Property | Description | Type | Default |
5254
| --- | --- | --- | --- |
5355
| value | value of suggestion, the value will insert into input filed while selected | string | '' |
56+
57+
### Option
58+
59+
Support from v4.0
60+
61+
<!-- prettier-ignore -->
62+
| Property | Description | Type | Default |
63+
| --- | --- | --- | --- |
64+
| value | value of suggestion, the value will insert into input filed while selected | string | - |
65+
| label | Title of the option | VueNode | () => VueNode | - |
66+
| disabled | Optional | boolean | - |
67+
| class | className | string | - |
68+
| style | The style of the option | CSSProperties | - |
69+
|payload| other data | object | - |

0 commit comments

Comments
 (0)