Browse Source

fix: 文档,demo 去掉 nut-icon

Ymm0008 3 years ago
parent
commit
6895197136

+ 5 - 2
src/packages/__VUE/noticebar/demo.vue

@@ -66,7 +66,7 @@
     <div class="interstroll-list">
       <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
         <template v-slot:rightIcon>
-          <nut-icon name="fabulous" color="#f0250f"> </nut-icon>
+          <Fabulous />
         </template>
       </nut-noticebar>
     </div>
@@ -75,6 +75,7 @@
 
 <script lang="ts">
 import { onMounted, reactive, toRefs } from 'vue';
+import { Fabulous } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('noticebar');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -113,6 +114,7 @@ const initTranslate = () =>
 
 export default createDemo({
   props: {},
+  components: { Fabulous },
   setup() {
     initTranslate();
     const state = reactive({
@@ -133,7 +135,8 @@ export default createDemo({
       ...toRefs(state),
       hello,
       go,
-      translate
+      translate,
+      Fabulous
     };
   }
 });

+ 5 - 3
src/packages/__VUE/noticebar/doc.en-US.md

@@ -197,17 +197,19 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue';
   export default {
+    components: { Fabulous },
     setup(props) {
-      const horseLamp1 = ref(['Noticebar', 'Cascader', 'DatePicker', 'CheckBox']);
-      return { horseLamp1 };
+      const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+      return { horseLamp1,Fabulous };
     }
   }
 </script>

+ 4 - 2
src/packages/__VUE/noticebar/doc.md

@@ -199,17 +199,19 @@ app.use(Noticebar);
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue';
   export default {
+    components: { Fabulous },
     setup(props) {
       const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp1 };
+      return { horseLamp1,Fabulous };
     }
   }
 </script>

+ 4 - 2
src/packages/__VUE/noticebar/doc.taro.md

@@ -194,17 +194,19 @@ app.use(Noticebar);
 <template>
     <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
       <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"></nut-icon>
+        <Fabulous />
       </template>
     </nut-noticebar>
 </template>
 
 <script>
   import { ref } from 'vue';
+  import { Fabulous } from '@nutui/icons-vue';
   export default {
+    components: { Fabulous },
     setup(props) {
       const horseLamp1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp1 };
+      return { horseLamp1,Fabulous };
     }
   }
 </script>

+ 0 - 45
src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -1,14 +1,6 @@
 import { mount, config } from '@vue/test-utils';
 import Searchbar from '../index.vue';
 
-import NutIcon from '../../icon/index.vue';
-
-beforeAll(() => {
-  config.global.components = {
-    NutIcon
-  };
-});
-
 afterAll(() => {
   config.global.components = {};
 });
@@ -140,40 +132,3 @@ test('clear event test', async () => {
   expect((wrapper.emitted('update:modelValue') as any)[1][0]).toEqual('');
   expect(clear.exists()).toBe(true);
 });
-
-test('slot test', () => {
-  const wrapper = mount(Searchbar, {
-    props: { modelValue: '' },
-    slots: {
-      default: () => {
-        `
-          <template v-slot:leftout>
-            <nut-icon size="20" name="left"></nut-icon>
-          </template>
-          <template v-slot:leftin>
-            <nut-icon size="14" name="search2"></nut-icon>
-          </template>
-          <template v-slot:rightin>
-            <nut-icon size="20" name="photograph"></nut-icon>
-          </template>
-          <template v-slot:rightout>
-            <nut-icon size="20" name="message"></nut-icon>
-          </template>
-        `;
-      }
-    }
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('custom clear icon', () => {
-  const wrapper = mount(Searchbar, {
-    props: {
-      clearIcon: 'close',
-      modelValue: 'test'
-    }
-  });
-  const input = wrapper.find('.nut-searchbar__input-clear i');
-  expect(input.classes()).toContain('nut-icon-close');
-});

+ 10 - 7
src/packages/__VUE/searchbar/doc.taro.md

@@ -74,14 +74,15 @@ 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';
+  import { Search2 } from '@nutui/icons-vue';
   export default {
+    components: { Search2 },
     setup() {
       const state = reactive({
         searchValue: ""
@@ -89,6 +90,7 @@ app.use(Icon);
 
       return {
         ...toRefs(state),
+        Search2
       };
     }
   };
@@ -178,23 +180,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: ""