chore(searchbar): icon 更换,文档修改 (#1956)

* feat: collapse api 更换,icon 图标更换 * feat: searchbar icon 更换,文档修改
jdf2e · Dec 20, 2022 · 1ead40c · 1ead40c
1 parent 00997c7
commit 1ead40c
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 64 deletions.
diff --git a/src/packages/__VUE/searchbar/demo.vue b/src/packages/__VUE/searchbar/demo.vue
@@ -10,7 +10,7 @@
     <h2>{{ translate('basic3') }}</h2>
     <nut-searchbar v-model="searchValue2" @click-left-icon="clickLeftIcon">
       <template v-slot:leftin>
-        <nut-icon size="14" name="search2"></nut-icon>
+        <Search2 />
       </template>
     </nut-searchbar>
 
@@ -28,21 +28,25 @@
     </nut-searchbar>
 
     <h2>{{ translate('basic7') }}</h2>
-    <nut-searchbar v-model="searchValue6" :clear-icon="icon"> </nut-searchbar>
+    <nut-searchbar v-model="searchValue6">
+      <template v-slot:clearIcon>
+        <img :src="icon" style="width: 10px; height: 10px" />
+      </template>
+    </nut-searchbar>
 
     <h2>{{ translate('basic6') }}</h2>
     <nut-searchbar v-model="searchValue5" @click-right-icon="clickRightIcon">
       <template v-slot:leftout>
-        <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+        <Left @click="clickLeft" />
       </template>
       <template v-slot:leftin>
-        <nut-icon size="14" name="search2"></nut-icon>
+        <Search2 />
       </template>
       <template v-slot:rightin>
-        <nut-icon size="20" name="photograph"></nut-icon>
+        <Photograph />
       </template>
       <template v-slot:rightout>
-        <nut-icon size="20" name="message"></nut-icon>
+        <Message />
       </template>
     </nut-searchbar>
   </div>
@@ -52,6 +56,7 @@
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Toast } from '@/packages/nutui.vue';
+import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('searchbar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -82,6 +87,7 @@ const initTranslate = () =>
   });
 export default createDemo({
   props: {},
+  components: { Search2, Left, Photograph, Message },
   setup() {
     const icon =
       'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';

diff --git a/src/packages/__VUE/searchbar/doc.en-US.md b/src/packages/__VUE/searchbar/doc.en-US.md
@@ -10,14 +10,12 @@ Search bar
 import { createApp } from 'vue';
 
 // vue
-import { Searchbar, Icon } from '@nutui/nutui';
+import { Searchbar } from '@nutui/nutui';
 // taro
-import { Searchbar, Icon } from '@nutui/nutui-taro';
+import { Searchbar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Searchbar);
-app.use(Icon);
-
 ```    
 
 ### Basic Usage
@@ -74,17 +72,45 @@ app.use(Icon);
 
 ### Display search Icon
 :::demo
-```html
+````html
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
+    </template>
+  </nut-searchbar>
+</template>
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+import { Search2 } from '@nutui/icons-vue';
+export default {
+  components: { Search2 },
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  }
+};
+</script>
+```
+:::
+
+### Add search text to the right
+:::demo
+```html
+<template>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:rightout>
+      Search
     </template>
   </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
   export default {
     setup() {
       const state = reactive({
@@ -100,15 +126,11 @@ app.use(Icon);
 ```
 :::
 
-### Add search text to the right
+### Change the background style inside and outside the input box
 :::demo
 ```html
 <template>
-  <nut-searchbar v-model="searchValue">
-    <template v-slot:rightout>
-      搜索
-    </template>
-  </nut-searchbar>
+  <nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
@@ -127,51 +149,62 @@ app.use(Icon);
 ```
 :::
 
-### Change the background style inside and outside the input box
+### Custom Clear Button icon
+
 :::demo
 ```html
 <template>
-  <nut-searchbar v-model="searchValue4" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff"> </nut-searchbar>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:clearIcon>
+      <img :src="icon" style="width: 10px; height: 10px" />
+    </template>
+  </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
   export default {
     setup() {
+      const icon = 
+      'https://img10.360buyimg.com/imagetools/jfs/t1/170133/30/22902/10546/61833626E32d7ccde/a7c373ba30de9a89.png';
       const state = reactive({
         searchValue: ""
       });
 
       return {
         ...toRefs(state),
+        icon
       };
     }
   };
 </script>
 ```
 :::
+
+
 ### Show all icons
 :::demo
 ```html
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftout>
-      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+      <Left @click="clickLeft" />
     </template>
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
     </template>
     <template v-slot:rightin>
-      <nut-icon size="20" name="photograph"></nut-icon>
+      <Photograph />
     </template>
     <template v-slot:rightout>
-      <nut-icon size="20" name="message"></nut-icon>
+      <Message />
     </template>
   </nut-searchbar> 
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
+  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
   export default {
+    components: { Search2, Left, Photograph, Message },
     setup() {
       const state = reactive({
         searchValue: ""

diff --git a/src/packages/__VUE/searchbar/doc.md b/src/packages/__VUE/searchbar/doc.md
@@ -10,13 +10,12 @@
 import { createApp } from 'vue';
 
 // vue
-import { Searchbar, Icon } from '@nutui/nutui';
+import { Searchbar } from '@nutui/nutui';
 // taro
-import { Searchbar, Icon } from '@nutui/nutui-taro';
+import { Searchbar } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Searchbar);
-app.use(Icon);
 
 ```    
 
@@ -78,24 +77,25 @@ app.use(Icon);
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
     </template>
   </nut-searchbar>
 </template>
 <script lang="ts">
-  import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
-  export default {
-    setup() {
-      const state = reactive({
-        searchValue: ""
-      });
+import { toRefs, reactive } from 'vue';
+import { Search2 } from '@nutui/icons-vue';
+export default {
+  components: { Search2 },
+  setup() {
+    const state = reactive({
+      searchValue: ""
+    });
 
-      return {
-        ...toRefs(state),
-      };
-    }
-  };
+    return {
+      ...toRefs(state),
+    };
+  }
+};
 </script>
 ```
 :::
@@ -154,7 +154,11 @@ app.use(Icon);
 :::demo
 ```html
 <template>
-  <nut-searchbar v-model="searchValue" :clear-icon="icon"> </nut-searchbar>
+  <nut-searchbar v-model="searchValue">
+    <template v-slot:clearIcon>
+      <img :src="icon" style="width: 10px; height: 10px" />
+    </template>
+  </nut-searchbar>
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
@@ -182,23 +186,24 @@ app.use(Icon);
 <template>
   <nut-searchbar v-model="searchValue">
     <template v-slot:leftout>
-      <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
+      <Left @click="clickLeft" />
     </template>
     <template v-slot:leftin>
-      <nut-icon size="14" name="search2"></nut-icon>
+      <Search2 />
     </template>
     <template v-slot:rightin>
-      <nut-icon size="20" name="photograph"></nut-icon>
+      <Photograph />
     </template>
     <template v-slot:rightout>
-      <nut-icon size="20" name="message"></nut-icon>
+      <Message />
     </template>
   </nut-searchbar> 
 </template>
 <script lang="ts">
   import { toRefs, reactive } from 'vue';
-  import { Icon } from '@nutui/nutui';
+  import { Search2, Left, Photograph, Message } from '@nutui/icons-vue';
   export default {
+    components: { Search2, Left, Photograph, Message },
     setup() {
       const state = reactive({
         searchValue: ""

diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue
@@ -33,7 +33,10 @@
           v-if="clearable"
           v-show="String(modelValue).length > 0"
         >
-          <nut-icon :name="clearIcon" size="12" color="#555"></nut-icon>
+          <template v-if="$slots.clearIcon">
+            <slot name="clearIcon"></slot>
+          </template>
+          <component :is="renderIcon(clearIcon)" v-else></component>
         </view>
       </view>
       <view v-if="$slots.rightin" class="nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon">
@@ -48,7 +51,8 @@
 
 <script lang="ts">
 import { toRefs, reactive, computed, ref, onMounted, PropType, Ref, CSSProperties } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent, renderIcon } from '@/packages/utils/create';
+import { CircleClose } from '@nutui/icons-vue-taro';
 const { create, translate } = createComponent('searchbar');
 export type confirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 
@@ -75,8 +79,8 @@ export default create({
       default: true
     },
     clearIcon: {
-      type: String,
-      default: 'circle-close'
+      type: Object,
+      default: () => CircleClose
     },
     background: {
       type: String,
@@ -225,7 +229,8 @@ export default create({
       clickInput,
       leftIconClick,
       rightIconClick,
-      styleSearchbar
+      styleSearchbar,
+      renderIcon
     };
   }
 });