chore: change example

Tencent · Dec 15, 2024 · 568f980 · 568f980
1 parent cb44b05
commit 568f980
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 73 deletions.
diff --git a/src/search/demos/action.vue b/src/search/demos/action.vue
@@ -1,17 +1,57 @@
 <template>
   <div class="example-search">
-    <t-search placeholder="搜索预设文案" :center="true" action="取消" @change="onChange"></t-search>
+    <t-search
+      :value="searchValue"
+      placeholder="搜索预设文案"
+      center
+      action="取消"
+      @action-click="onActionClick"
+      @blur="onBlur"
+      @change="onChange"
+      @clear="onClear"
+      @focus="onFocus"
+      @search="onSearch"
+      @submit="onSubmit"
+    ></t-search>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const onChange = (val: string) => {
-  console.log('change: ', val);
+const searchValue = ref('');
+
+const onChange = (value: string, context: { e?: InputEvent | MouseEvent }) => {
+  console.log('change: ', value, context);
+  searchValue.value = value;
+};
+
+const onBlur = (context: { value: string; e: FocusEvent }) => {
+  console.log('blur: ', context);
+};
+
+const onClear = (context: { e: MouseEvent }) => {
+  console.log('clear: ', context);
+};
+const onFocus = (context: { value: string; e: FocusEvent }) => {
+  console.log('focus: ', context);
 };
 
-const value = ref('');
+const onActionClick = (context: { e: MouseEvent }) => {
+  console.log('action: ', context);
+};
+
+const onSearch = (context?: {
+  value: string;
+  trigger: 'submit' | 'option-click' | 'clear';
+  e?: InputEvent | MouseEvent;
+}) => {
+  console.log('search: ', context);
+};
+
+const onSubmit = (context: { value: string; e: KeyboardEvent }) => {
+  console.log('submit: ', context);
+};
 </script>
 <style lang="less">
 .example-search {

diff --git a/src/search/demos/base.vue b/src/search/demos/base.vue
@@ -1,53 +1,35 @@
 <template>
   <div class="example-search">
-    <t-search
-      v-model="value1"
-      placeholder="搜索预设文案"
-      @change="onChange"
-      @blur="onBlur"
-      @clear="onClear"
-      @focus="onFocus"
-      @submit="onSubmit"
-      @action-click="onActionClick"
-    ></t-search>
+    <t-search placeholder="搜索预设文案"></t-search>
   </div>
   <div class="example-search">
     <t-search
-      v-model="value2"
+      v-model="value"
+      :result-list="resultList"
       placeholder="输入tdesign，有预览效果"
       @change="onChange"
-      @blur="onBlur"
-      @clear="onClear"
-      @focus="onFocus"
-      @submit="onSubmit"
-      @action-click="onActionClick"
     ></t-search>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const value1 = ref('');
-const value2 = ref('');
+const value = ref('');
+
+const list = [
+  'tdesign-vue',
+  'tdesign-react',
+  'tdesign-miniprogram',
+  'tdesign-angular',
+  'tdesign-mobile-vue',
+  'tdesign-mobile-react',
+];
+const resultList = ref([]);
 
 const onChange = (val: string) => {
-  console.log('change: ', val);
-};
-const onBlur = () => {
-  console.log('blur');
-};
-const onClear = () => {
-  console.log('clear');
-};
-const onFocus = () => {
-  console.log('focus');
-};
-const onSubmit = () => {
-  console.log('submit');
-};
-const onActionClick = () => {
-  console.log('action-click');
+  console.log('onChange: ', val);
+  val ? (resultList.value = list.filter((item) => item.includes(val))) : (resultList.value = []);
 };
 </script>
 <style lang="less">

diff --git a/src/search/demos/maxLength.vue → src/search/demos/max-length.vue b/src/search/demos/maxLength.vue → src/search/demos/max-length.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="example-search">
-    <t-search v-model="value1" :max-length="10" placeholder="搜索预设文案"></t-search>
+    <t-search v-model="value1" :maxcharacter="10" placeholder="最大输入10个字符"></t-search>
   </div>
   <div class="example-search">
-    <t-search v-model="value2" :max-length="10" placeholder="输入tdesign，有预览效果"></t-search>
+    <t-search v-model="value2" :maxcharacter="10" placeholder="最大输入10个字符，汉字算两个"></t-search>
   </div>
 </template>
 

diff --git a/src/search/demos/mobile.vue b/src/search/demos/mobile.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="tdesign-mobile-demo">
-    <h1 class="title">Search 搜索框123</h1>
+    <h1 class="title">Search 搜索框</h1>
     <p class="summary">用于用户输入搜索信息，并进行页面内容搜索。</p>
     <tdesign-demo-block title="01 组件类型" summary="基础搜索框">
       <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="输入值后显示取消按钮">
+    <tdesign-demo-block summary="字数限制">
+      <maxLengthDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="获取焦点后显示取消按钮">
       <actionDemo />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 组件样式" summary="搜索框形状">
@@ -19,6 +22,7 @@
 
 <script lang="ts" setup>
 import baseDemo from './base.vue';
+import maxLengthDemo from './max-length.vue';
 import actionDemo from './action.vue';
 import shapeDemo from './shape.vue';
 import otherDemo from './other.vue';

diff --git a/src/search/demos/shape.vue b/src/search/demos/shape.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="example-search">
-    <!-- <t-search v-model="value" :clearable="true" shape="round" placeholder="请输入关键字" @change="onChange"></t-search> -->
+    <t-search v-model="value" :clearable="true" placeholder="搜索预设文案" @change="onChange"></t-search>
+  </div>
+  <div class="example-search">
+    <t-search v-model="value" :clearable="true" shape="round" placeholder="搜索预设文案" @change="onChange"></t-search>
   </div>
 </template>
 

diff --git a/src/search/search.tsx b/src/search/search.tsx
@@ -1,5 +1,5 @@
 import { SearchIcon as TSearchIcon, CloseCircleFilledIcon as TIconClear } from 'tdesign-icons-vue-next';
-import { ref, computed, defineComponent, nextTick } from 'vue';
+import { ref, computed, defineComponent, nextTick, h, Fragment } from 'vue';
 import { useFocus } from '@vueuse/core';
 import config from '../config';
 import { preventDefault } from '../shared/dom';
@@ -10,6 +10,7 @@ import { useTNodeJSX } from '../hooks/tnode';
 import { TdSearchProps } from './type';
 import { ENTER_REG } from '../_common/js/common';
 import { getCharacterLength } from '../shared';
+import TCell from '../cell/cell';
 
 const { prefix } = config;
 
@@ -20,6 +21,8 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
     const searchClass = usePrefixClass('search');
 
+    const isShowResultList = ref(false);
+    const isShowAction = ref(false);
     const inputRef = ref<HTMLInputElement>();
     const { focused } = useFocus(inputRef, { initialValue: props.focus });
     const [searchValue] = useDefault<TdSearchProps['value'], TdSearchProps>(props, context.emit, 'value', 'change');
@@ -52,25 +55,23 @@ export default defineComponent({
       const { value } = e.target as HTMLInputElement;
       const { maxcharacter } = props;
       if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
-        const { length = 0, characters = '' } = getCharacterLength(value, maxcharacter) as {
-          length: number;
+        const { characters = '' } = getCharacterLength(value, maxcharacter) as {
           characters: string;
         };
         searchValue.value = characters;
       } else {
         searchValue.value = value;
       }
-
       nextTick(() => setInputValue(searchValue.value));
     };
 
     const handleInput = (e: Event) => {
+      isShowResultList.value = true;
       if (e instanceof InputEvent) {
         // 中文输入的时候inputType是insertCompositionText所以中文输入的时候禁止触发。
         const checkInputType = e.inputType && e.inputType === 'insertCompositionText';
         if (e.isComposing || checkInputType) return;
       }
-
       inputValueChangeHandle(e);
     };
 
@@ -81,10 +82,12 @@ export default defineComponent({
     };
 
     const handleFocus = (e: FocusEvent) => {
+      isShowAction.value = true;
       props.onFocus?.({ value: searchValue.value, e });
     };
 
     const handleBlur = (e: FocusEvent) => {
+      isShowAction.value = false;
       props.onBlur?.({ value: searchValue.value, e });
     };
 
@@ -123,40 +126,79 @@ export default defineComponent({
       };
       const readerAction = () => {
         const action = renderTNodeJSX('action');
-        if (action && searchValue.value) {
+        if (action && isShowAction.value) {
           return (
-            <div class={`${searchClass.value}__search-action`} onClick={handleAction}>
+            <button class={`${searchClass.value}__search-action ${prefix}-class-action`} onClick={handleAction}>
               {action}
-            </div>
+            </button>
           );
         }
         return null;
       };
 
+      const onSelectResultItem = (params: { item: string }) => {
+        isShowResultList.value = false;
+        searchValue.value = params.item;
+      };
+
+      const highlightSearchValue = (item: string, searchValue: string) => {
+        const parts = item.split(new RegExp(`(${searchValue})`, 'gi'));
+        return parts.map((part, index) =>
+          part.toLowerCase() === searchValue.toLowerCase() ? (
+            <span key={index} class={`${searchClass.value}__result-item--highLight`}>
+              {part}
+            </span>
+          ) : (
+            part
+          ),
+        );
+      };
+
+      const listNodes = (params: { item: string; index: number }) => {
+        return h(
+          TCell,
+          {
+            key: params.index,
+            class: `${searchClass.value}__result-item`,
+            onClick: () => onSelectResultItem({ item: params.item }),
+          },
+          {
+            title: () => highlightSearchValue(params.item, searchValue.value),
+          },
+        );
+      };
+
       return (
-        <div class={`${searchClass.value}`}>
-          <div class={boxClasses.value}>
-            {readerLeftIcon()}
-            <input
-              ref={inputRef}
-              maxlength={props.maxLength || -1}
-              value={searchValue.value}
-              type="search"
-              class={inputClasses.value}
-              autofocus={props.focus}
-              placeholder={props.placeholder}
-              readonly={props.readonly}
-              disabled={props.disabled}
-              onKeypress={handleSearch}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onInput={handleInput}
-              onCompositionend={handleCompositionend}
-            />
-            {readerClear()}
+        <Fragment>
+          <div class={`${searchClass.value}`}>
+            <div class={boxClasses.value}>
+              {readerLeftIcon()}
+              <input
+                ref={inputRef}
+                maxlength={props.maxLength || -1}
+                value={searchValue.value}
+                type="search"
+                class={inputClasses.value}
+                autofocus={props.focus}
+                placeholder={props.placeholder}
+                readonly={props.readonly}
+                disabled={props.disabled}
+                onKeypress={handleSearch}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onInput={handleInput}
+                onCompositionend={handleCompositionend}
+              />
+              {readerClear()}
+            </div>
+            {readerAction()}
           </div>
-          {readerAction()}
-        </div>
+          {isShowResultList.value && (
+            <div class={`${searchClass.value}__result-list`}>
+              {props.resultList.map((item, index) => listNodes({ item, index }))}
+            </div>
+          )}
+        </Fragment>
       );
     };
   },