fix: navbar warning (#1051)

* fix: baktop 挂载 props 类型

src/packages/__VUE/backtop/__tests__/__snapshots__/backtop.spec.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should allow to use the elId prop 1`] = `""`;
+
+exports[`should allow to use the teleport prop 1`] = `""`;

src/packages/__VUE/backtop/__tests__/backtop.spec.ts

@@ -12,26 +12,55 @@ beforeAll(() => {
 afterAll(() => {
   config.global.components = {};
 });
+
 test('emit click event', () => {
   const wrapper = mount(BackTop);
   wrapper.trigger('click');
   expect(wrapper.emitted('click')!.length).toEqual(1);
 });
+
 test('backtop show', () => {
   const wrapper = mount(BackTop);
   const backtop = wrapper.find('.nut-backtop');
   expect(backtop.exists()).toBe(true);
 });
+
 test('backtop style', () => {
   const wrapper = mount(BackTop, {
     props: {
-      bottom: 50,
-      right: 40,
-      zIndex: 100
+      bottom: 50
     }
   });
   const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.bottom).toBe('50px');
+});
+
+test('backtop style', () => {
+  const wrapper = mount(BackTop, {
+    props: {
+      right: 40
+    }
+  });
+  const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.right).toBe('40px');
+});
+
+test('backtop style', () => {
+  const wrapper = mount(BackTop, {
+    props: {
+      zIndex: 100
+    }
+  });
+  const backtop: any = wrapper.find('.nut-backtop');
   expect(backtop.element.style.zIndex).toBe('100');
 });
+
+test('should allow to use the elId prop', () => {
+  const root = document.createElement('div');
+  mount(BackTop, {
+    props: {
+      elId: root
+    }
+  });
+  expect(root.innerHTML).toMatchSnapshot();
+});

src/packages/__VUE/backtop/index.vue

@@ -7,14 +7,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  onActivated,
-  onDeactivated,
-  reactive
-} from 'vue';
+import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('backtop');
 export default create({
@@ -28,9 +21,10 @@ export default create({
       default: 10
     },
     elId: {
-      type: String,
-      default: ''
+      type: [String, Element],
+      default: 'body'
     },
+
     distance: {
       type: Number,
       default: 200
@@ -92,9 +86,7 @@ export default create({
 
     function scrollAnimation() {
       let cid = requestAniFrame()(function fn() {
-        var t =
-          props.duration -
-          Math.max(0, state.startTime - +new Date() + props.duration);
+        var t = props.duration - Math.max(0, state.startTime - +new Date() + props.duration);
         var y = (t * -state.scrollTop) / props.duration + state.scrollTop;
         scroll(y);
         cid = requestAniFrame()(fn);
@@ -136,9 +128,7 @@ export default create({
 
     function init() {
       if (props.elId && document.getElementById(props.elId)) {
-        state.scrollEl = document.getElementById(props.elId) as
-          | HTMLElement
-          | Window;
+        state.scrollEl = document.getElementById(props.elId) as HTMLElement | Window;
       }
       addEventListener();
       initCancelAniFrame();

src/packages/__VUE/navbar/demo.vue

@@ -28,7 +28,6 @@
       title="购物车"
       titIcon="cart2"
       desc="编辑"
-      icon="more-x"
     >
       <template #right>
         <nut-icon class="right" name="more-x"></nut-icon>
@@ -36,13 +35,7 @@
     </nut-navbar>
 
     <h2>自定义导航栏中间内容</h2>
-    <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
-      @on-click-right="rightClick"
-      desc="编辑"
-      icon="horizontal-n"
-    >
+    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-right="rightClick" desc="编辑">
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
           <nut-tabpane title="商品"> </nut-tabpane>
@@ -56,7 +49,7 @@
     </nut-navbar>
 
     <h2>多tab切换导航</h2>
-    <nut-navbar @on-click-back="back" icon="more-x">
+    <nut-navbar @on-click-back="back">
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
           <nut-tabpane title="商品"> </nut-tabpane>

src/packages/__VUE/navbar/doc.md

@@ -55,7 +55,6 @@ app.use(TabPane);
       title="购物车"
       titIcon="cart2"
       desc="编辑"
-      icon="more-x"
     >
       <template #right>
         <nut-icon class="right" name="more-x"></nut-icon>
@@ -100,7 +99,6 @@ app.use(TabPane);
       @on-click-title="title"
       @on-click-right="rightClick"
       desc="编辑"
-      icon="horizontal-n"
     >
       <template #content>
         <nut-tabs v-model="tab1value" @click="changeTab">
@@ -151,7 +149,7 @@ app.use(TabPane);
 :::demo
 ```html
   <template>
-    <nut-navbar @on-click-back="back" icon="more-x">
+    <nut-navbar @on-click-back="back" >
       <template #content>
         <nut-tabs v-model="tab2value" @click="changeTabList">
           <nut-tabpane title="商品"> </nut-tabpane>

src/packages/__VUE/navbar/index.taro.vue

@@ -3,13 +3,13 @@
     <view class="nut-navbar__left">
       <nut-icon v-if="leftShow" color="#979797" name="left" @click="handleLeft"></nut-icon>
     </view>
-    <view class="nut-navbar__title" :class="{ icon }">
+    <view class="nut-navbar__title">
       <view v-if="title" class="text__title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
-    <view class="nut-navbar__right" :class="{ icon }" v-if="desc || icon">
-      <view v-if="desc" :style="{ 'text-align': descTextAlign }" @click="handleClear">{{ desc }}</view>
+    <view class="nut-navbar__right" v-if="desc || icon">
+      <view v-if="desc" @click="handleClear">{{ desc }}</view>
       <template v-if="icon">
         <view @click="handleSends">
           <slot name="icons"></slot>

src/packages/__VUE/navbar/index.vue

@@ -5,16 +5,14 @@
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-navbar__title" :class="{ icon }">
+    <view class="nut-navbar__title">
       <view v-if="title" @click="handleCenter">{{ title }}</view>
       <nut-icon v-if="titIcon" class="icon" :name="titIcon" @click="handleCenterIcon"></nut-icon>
       <slot name="content"></slot>
     </view>
 
-    <view class="nut-navbar__right" :class="{ icon }">
-      <view v-if="desc" class="right_text" :style="{ 'text-align': descTextAlign }" @click="handleRight">{{
-        desc
-      }}</view>
+    <view class="nut-navbar__right">
+      <view v-if="desc" class="right_text" @click="handleRight">{{ desc }}</view>
       <slot name="right"></slot>
     </view>
   </view>