ソースを参照

chore(backtop): use icons-vue component

richard1015 3 年 前
コミット
4cc2970e26

+ 2 - 4
src/packages/__VUE/backtop/__tests__/backtop.spec.ts

@@ -1,13 +1,11 @@
 import { mount, config } from '@vue/test-utils';
 import Backtop from '../index.vue';
 import { mockScrollTop } from './../../../utils/unit';
-
-import NutIcon from '../../icon/index.vue';
 import { nextTick } from 'vue';
-
+import { Top } from '@nutui/icons-vue';
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    Top
   };
 });
 

+ 3 - 1
src/packages/__VUE/backtop/demo.vue

@@ -27,7 +27,7 @@
     <div class="text-data">{{ translate('content') }}24</div>
     <nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="110">
       <view class="backtop-demo">
-        <nut-icon size="12px" class="nut-backtop-main" name="top"></nut-icon
+        <Top width="12px" height="12px" class="nut-backtop-main"></Top
         ><view class="title">{{ translate('backText') }}</view>
       </view>
     </nut-backtop>
@@ -39,12 +39,14 @@
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('backtop');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Top } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': { title: '基本用法', clg: '触发返回顶部', content: '我是测试数据', backText: '顶部' },
     'en-US': { title: 'Basic Usage', clg: 'backtop', content: 'test data', backText: 'Top' }
   });
 export default createDemo({
+  components: { Top },
   setup(props, { emit }) {
     initTranslate();
     const handleClick = () => {

+ 1 - 2
src/packages/__VUE/backtop/doc.en-US.md

@@ -9,11 +9,10 @@ Provides a quick return to the top function for long pages.
 ```javascript
 
 import { createApp } from 'vue';
-import { Backtop,Icon } from '@nutui/nutui';
+import { Backtop } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Backtop);
-app.use(Icon);
 
 ```
 

+ 1 - 2
src/packages/__VUE/backtop/doc.md

@@ -9,11 +9,10 @@
 ```javascript
 
 import { createApp } from 'vue';
-import { Backtop,Icon } from '@nutui/nutui';
+import { Backtop } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Backtop);
-app.use(Icon);
 
 ```
 

+ 1 - 2
src/packages/__VUE/backtop/doc.taro.md

@@ -9,11 +9,10 @@
 ```javascript
 
 import { createApp } from 'vue';
-import { Backtop,Icon } from '@nutui/nutui-taro';
+import { Backtop } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Backtop);
-app.use(Icon);
 
 ```
 

+ 4 - 2
src/packages/__VUE/backtop/index.taro.vue

@@ -11,7 +11,7 @@
     </Nut-Scroll-View>
     <view :class="classes" :style="style" @click.stop="click">
       <slot name="icon">
-        <nut-icon size="19px" class="nut-backtop-main" name="top"></nut-icon>
+        <Top width="19px" height="19px" class="nut-backtop-main"></Top>
       </slot>
     </view>
   </view>
@@ -22,9 +22,11 @@ import { reactive, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutScrollView from '../scrollView/index.taro.vue';
 const { componentName, create } = createComponent('backtop');
+import { Top } from '@nutui/icons-vue';
 export default create({
   components: {
-    NutScrollView
+    NutScrollView,
+    Top
   },
   props: {
     height: {

+ 5 - 1
src/packages/__VUE/backtop/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classes" :style="style" @click.stop="click">
     <slot>
-      <nut-icon size="19px" class="nut-backtop-main" name="top"></nut-icon>
+      <Top width="19px" height="19px" class="nut-backtop-main"></Top>
     </slot>
   </div>
 </template>
@@ -10,7 +10,11 @@
 import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('backtop');
+import { Top } from '@nutui/icons-vue';
 export default create({
+  components: {
+    Top
+  },
   props: {
     bottom: {
       type: Number,