Skip to content

Commit e5eb7d6

Browse files
RSS1102RSS1102
authored
Revert "chore(Select): optimization remote-search example (#5294)" (#5314)
This reverts commit e2b92be.
1 parent 6305796 commit e5eb7d6

File tree

3 files changed

+157
-100
lines changed

3 files changed

+157
-100
lines changed

‎packages/components/select/_example/base.vue

Lines changed: 42 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,55 @@
11
<template>
2-
<t-space direction="vertical">
2+
<t-space>
3+
<!-- 方式一：使用 options 输出下拉选项。优先级高于 t-option-->
34
<t-select
4-
v-model="value"
5-
filterable
6-
placeholder="请选择"
7-
:loading="loading"
8-
:options="options"
9-
style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
10-
@search="remoteMethod"
11-
/>
5+
v-model="value1"
6+
:options="options1"
7+
placeholder="请选择云解决方案"
8+
clearable
9+
@focus="onFocus"
10+
@blur="onBlur"
11+
></t-select>
1212

13-
<t-select
14-
v-model="multipleValue"
15-
filterable
16-
placeholder="请选择"
17-
:loading="multipleLoading"
18-
:options="multipleOptions"
19-
multiple
20-
value-type="object"
21-
reserve-keyword
22-
style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
23-
@search="remoteMultipleMethod"
24-
/>
13+
<!-- 方式二：使用 t-option 输出下拉选项。options 和 t-option 两种实现方式二选一即可 -->
14+
<!-- 宽度随内容自适应：auto-width -->
15+
<t-select v-model="value2" label="产品：" placeholder="请选择云产品" auto-width clearable>
16+
<t-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.label"></t-option>
17+
</t-select>
2518
</t-space>
2619
</template>
27-
<script setup>
20+
<script setup lang="jsx">
2821
import { ref } from 'vue';
2922
30-
const options = ref([]);
31-
const value = ref('');
32-
const loading = ref(false);
23+
const options1 = [
24+
{ label: '架构云', value: '1', title: '架构云选项' },
25+
{ label: '大数据', value: '2', title: '' },
26+
{ label: '区块链', value: '3' },
27+
{ label: '物联网', value: '4', disabled: true },
28+
{ label: '人工智能', value: '5' },
29+
// 可以使用渲染函数自定义下拉选项内容和样式
30+
{
31+
label: '计算场景（高性能计算）',
32+
value: '6',
33+
content: () => <span>计算场景（高性能计算）</span>,
34+
},
35+
];
36+
const options2 = [
37+
{ label: '云服务器', value: '1' },
38+
{ label: '云数据库', value: '2' },
39+
{ label: '域名注册', value: '3' },
40+
{ label: '网站备案', value: '4' },
41+
{ label: '对象存储', value: '5' },
42+
{ label: '低代码平台', value: '6' },
43+
];
3344
34-
const multipleOptions = ref([]);
35-
const multipleValue = ref([]);
36-
const multipleLoading = ref(false);
45+
const value1 = ref('');
46+
const value2 = ref('');
3747
38-
const remoteMethod = (search) => {
39-
console.log('search', search);
40-
if (search) {
41-
loading.value = true;
42-
setTimeout(() => {
43-
loading.value = false;
44-
options.value = [
45-
{
46-
value: `腾讯_test1`,
47-
label: `腾讯_test1`,
48-
},
49-
{
50-
value: `腾讯_test2`,
51-
label: `腾讯_test2`,
52-
},
53-
{
54-
value: `腾讯_test3`,
55-
label: `腾讯_test3`,
56-
},
57-
].filter((item) => item.label.includes(search));
58-
}, 500);
59-
}
48+
const onFocus = (ctx) => {
49+
console.log('focus:', ctx);
6050
};
6151
62-
const remoteMultipleMethod = (search) => {
63-
console.log('search', search);
64-
if (search) {
65-
multipleLoading.value = true;
66-
setTimeout(() => {
67-
multipleLoading.value = false;
68-
const remoteOptions = [
69-
{
70-
value: `腾讯_test1`,
71-
label: `腾讯_test1`,
72-
},
73-
{
74-
value: `腾讯_test2`,
75-
label: `腾讯_test2`,
76-
},
77-
{
78-
value: `腾讯_test3`,
79-
label: `腾讯_test3`,
80-
},
81-
{
82-
value: `腾讯_test1_1`,
83-
label: `腾讯_test1_1`,
84-
},
85-
{
86-
value: `腾讯_test2_2`,
87-
label: `腾讯_test2_2`,
88-
},
89-
{
90-
value: `腾讯_test3_3`,
91-
label: `腾讯_test3_3`,
92-
},
93-
].filter((item) => item.label.includes(search));
94-
95-
const mergedOptions = [...remoteOptions, ...multipleValue.value];
96-
multipleOptions.value = Array.from(new Map(mergedOptions.map((item) => [item.value, item])).values());
97-
}, 500);
98-
}
52+
const onBlur = (ctx) => {
53+
console.log('blur:', ctx);
9954
};
10055
</script>

‎packages/tdesign-vue-next/test/src/snap/__snapshots__/csr.test.ts.snap

Lines changed: 108 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72833,6 +72833,100 @@ exports[`csr snapshot test > csr test ./packages/components/guide/_example/dialo
7283372833
</div>
7283472834
`;
7283572835

72836+
exports[`csr snapshot test > csr test ./packages/components/guide/_example/dialog-body.vue 1`] = `
72837+
<div
72838+
class="dialog-body"
72839+
data-v-3a6cf5d6=""
72840+
>
72841+
<div
72842+
class="img-wrapper"
72843+
data-v-3a6cf5d6=""
72844+
>
72845+
<img
72846+
alt="demo"
72847+
data-v-3a6cf5d6=""
72848+
src="https://tdesign.gtimg.com/demo/demo-image-1.png"
72849+
/>
72850+
</div>
72851+
<p
72852+
data-v-3a6cf5d6=""
72853+
>
72854+
此处显示本页引导的说明文案，可按需要撰写，如内容过多可折行显示。图文也可按需自由设计。
72855+
</p>
72856+
</div>
72857+
`;
72858+
72859+
exports[`csr snapshot test > csr test ./packages/components/guide/_example/highlight-content.vue 1`] = `
72860+
<div
72861+
class="highlight"
72862+
data-v-d3ac002b=""
72863+
/>
72864+
`;
72865+
72866+
exports[`csr snapshot test > csr test ./packages/components/guide/_example/my-popup.vue 1`] = `
72867+
<div
72868+
class="my-popup"
72869+
data-v-dc261c21=""
72870+
>
72871+
<svg
72872+
class="t-icon t-icon-arrow-up pop-icon"
72873+
data-v-dc261c21=""
72874+
fill="none"
72875+
height="1em"
72876+
viewBox="0 0 24 24"
72877+
width="1em"
72878+
>
72879+
<path
72880+
d="M11.0002 19.5L11.0002 7.91424L6.50015 12.4142L5.08594 11L12.0002 4.08582L18.9144 11L17.5001 12.4142L13.0002 7.91424L13.0002 19.5H11.0002Z"
72881+
fill="currentColor"
72882+
/>
72883+
</svg>
72884+
<p
72885+
class="popup-desc"
72886+
data-v-dc261c21=""
72887+
>
72888+
自定义的图形或说明文案，用来解释或指导该功能使用。
72889+
</p>
72890+
<div
72891+
class="popup-action"
72892+
data-v-dc261c21=""
72893+
>
72894+
<button
72895+
class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s"
72896+
data-v-dc261c21=""
72897+
href=""
72898+
tabindex="0"
72899+
type="button"
72900+
>
72901+
<span
72902+
class="t-button__text"
72903+
>
72904+
72905+
跳过
72906+
72907+
</span>
72908+
</button>
72909+
<button
72910+
class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s"
72911+
data-v-dc261c21=""
72912+
href=""
72913+
tabindex="0"
72914+
type="button"
72915+
>
72916+
<span
72917+
class="t-button__text"
72918+
>
72919+
72920+
上一步
72921+
72922+
</span>
72923+
</button>
72924+
<!--v-if-->
72925+
<!--v-if-->
72926+
</div>
72927+
</div>
72928+
`;
72929+
7283672930
exports[`csr snapshot test > csr test ./packages/components/guide/_example/no-mask.vue 1`] = `
7283772931
<div
7283872932
class="t-row t-row--center t-row--align-top"
@@ -109226,7 +109320,7 @@ exports[`csr snapshot test > csr test ./packages/components/rate/_example/texts.
109226109320

109227109321
exports[`csr snapshot test > csr test ./packages/components/select/_example/base.vue 1`] = `
109228109322
<div
109229-
class="t-space t-space-vertical"
109323+
class="t-space t-space-horizontal"
109230109324
style="gap: 16px;"
109231109325
>
109232109326

@@ -109236,7 +109330,6 @@ exports[`csr snapshot test > csr test ./packages/components/select/_example/base
109236109330
>
109237109331
<div
109238109332
class="t-select__wrap"
109239-
style="width: 200px; display: inline-block; margin: 0px 20px 20px 0px;"
109240109333
>
109241109334
<div
109242109335
class="t-select-input t-select-input--empty t-select"
@@ -109246,16 +109339,17 @@ exports[`csr snapshot test > csr test ./packages/components/select/_example/base
109246109339
class="t-input__wrap"
109247109340
>
109248109341
<div
109249-
class="t-input t-input--suffix"
109342+
class="t-input t-is-readonly t-input--suffix"
109250109343
>
109251109344
<!---->
109252109345
<!---->
109253109346
<input
109254109347
class="t-input__inner"
109255-
placeholder="请选择"
109348+
placeholder="请选择云解决方案"
109349+
readonly=""
109256109350
spellcheck="false"
109257109351
type="text"
109258-
unselectable="off"
109352+
unselectable="on"
109259109353
/>
109260109354
<!---->
109261109355
<!---->
@@ -109296,36 +109390,38 @@ exports[`csr snapshot test > csr test ./packages/components/select/_example/base
109296109390
>
109297109391
<div
109298109392
class="t-select__wrap"
109299-
style="width: 200px; display: inline-block; margin: 0px 20px 20px 0px;"
109300109393
>
109301109394
<div
109302-
class="t-select-input t-select-input--multiple t-select-input--empty t-select"
109395+
class="t-select-input t-select-input--empty t-select"
109303109396
>
109304109397

109305109398
<div
109306-
class="t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon"
109399+
class="t-input__wrap t-input--auto-width"
109307109400
>
109308109401
<div
109309-
class="t-input t-input--prefix t-input--suffix"
109402+
class="t-input t-is-readonly t-input--prefix t-input--suffix"
109310109403
>
109311109404
<!---->
109312109405
<div
109313109406
class="t-input__prefix"
109314109407
>
109315109408

109409+
产品：
109410+
<!---->
109316109411

109317109412
</div>
109318109413
<input
109319109414
class="t-input__inner"
109320-
placeholder="请选择"
109415+
placeholder="请选择云产品"
109416+
readonly=""
109321109417
spellcheck="false"
109322109418
type="text"
109323-
unselectable="off"
109419+
unselectable="on"
109324109420
/>
109325109421
<span
109326109422
class="t-input__input-pre"
109327109423
>
109328-
请选择
109424+
请选择云产品
109329109425
</span>
109330109426
<!---->
109331109427
<!---->

0 commit comments

Comments
 (0)