Browse Source

fix: 修改issuess

zhenyulei 5 years ago
parent
commit
48af8aa852

+ 1 - 1
package.json

@@ -17,7 +17,7 @@
     "build:site": "nutui-cli build-site",
     "build:site": "nutui-cli build-site",
     "clean": "nutui-cli clean",
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
     "add": "nutui-cli add",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/*/__test__/**.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/**/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch"
     "test:watch": "npm run test --watch"
   },
   },

+ 1 - 0
src/packages/elevator/demo.vue

@@ -17,6 +17,7 @@
 export default {
 export default {
   data() {
   data() {
     return {
     return {
+      navHei: '30',
       dataList: [
       dataList: [
         {
         {
           title: 'A',
           title: 'A',

+ 1 - 1
src/packages/elevator/elevator.vue

@@ -28,7 +28,7 @@
           v-bind:key="index"
           v-bind:key="index"
           :id="'nav' + index"
           :id="'nav' + index"
           class="nut-nav-list"
           class="nut-nav-list"
-          :style="{ height: navListHeight + 'px' }"
+          :style="{ height: navListHeight + 'px', lineHeight: navListHeight + 'px' }"
           @click="clickNav(item.title, index)"
           @click="clickNav(item.title, index)"
           >{{ item.title }}</li
           >{{ item.title }}</li
         >
         >

+ 1 - 1
src/packages/tab/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo-list-pd">
   <div class="demo-list-pd">
     <!-- DEMO区域 -->
     <!-- DEMO区域 -->
     <h4>默认用法</h4>
     <h4>默认用法</h4>
-    <nut-tab @tab-switch="tabSwitch">
+    <nut-tab @tab-switch="tabSwitch" :lineWidth="20">
       <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
       <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
       <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
       <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
       <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
       <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>

+ 2 - 1
src/packages/tab/doc.md

@@ -9,7 +9,7 @@
 ## 基本用法
 ## 基本用法
 
 
 ```html
 ```html
-<nut-tab @tab-switch="tabSwitch">
+<nut-tab @tab-switch="tabSwitch" line-width="20">
     <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
     <nut-tab-panel tab-title="页签1">页签1</nut-tab-panel>
     <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
     <nut-tab-panel tab-title="页签2">页签2</nut-tab-panel>
     <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
     <nut-tab-panel tab-title="页签3">页签3</nut-tab-panel>
@@ -232,6 +232,7 @@ export default {
 | is-show-line|是否显示tab切换时的红条|Boolean|true|
 | is-show-line|是否显示tab切换时的红条|Boolean|true|
 | is-scroll|是否支持滑动选择多个页签|Boolean|false|
 | is-scroll|是否支持滑动选择多个页签|Boolean|false|
 | wrapper-height |设置tab的高度,只有在 is-scroll=true;positionNav=left或者right 的情况下有效|Number/String|200|
 | wrapper-height |设置tab的高度,只有在 is-scroll=true;positionNav=left或者right 的情况下有效|Number/String|200|
+| line-width | 页签底部红条自定义宽度|默认为0,则等于页签的宽度|
 
 
 ### nut-tab-panel
 ### nut-tab-panel
 
 

+ 28 - 5
src/packages/tab/tab.vue

@@ -52,6 +52,10 @@ export default {
     wrapperHeight: {
     wrapperHeight: {
       type: [String, Number],
       type: [String, Number],
       default: '200'
       default: '200'
+    },
+    lineWidth: {
+      type: Number,
+      default: 0
     }
     }
   },
   },
   data() {
   data() {
@@ -64,6 +68,12 @@ export default {
     };
     };
   },
   },
   watch: {
   watch: {
+    isScroll() {
+      this.updeteTab();
+    },
+    lineWidth() {
+      this.updeteTab();
+    },
     defIndex() {
     defIndex() {
       this.updeteTab();
       this.updeteTab();
     },
     },
@@ -108,12 +118,14 @@ export default {
       if (this.positionNav === 'top' || this.positionNav === 'bottom') {
       if (this.positionNav === 'top' || this.positionNav === 'bottom') {
         return {
         return {
           transform: `translateX(${this.initX}px)`,
           transform: `translateX(${this.initX}px)`,
-          width: this.navWidth + 'px'
+          //width: this.navWidth + 'px'
+          width: (this.lineWidth ? this.lineWidth : this.navWidth) + 'px'
         };
         };
       }
       }
       return {
       return {
         transform: `translateY(${this.initX}px)`,
         transform: `translateY(${this.initX}px)`,
-        height: this.navWidth + 'px'
+        //height: this.navWidth + 'px'
+        height: (this.lineWidth ? this.lineWidth : this.navWidth) + 'px'
       };
       };
     },
     },
     customHeight: function() {
     customHeight: function() {
@@ -168,8 +180,14 @@ export default {
           this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetHeight;
           this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetHeight;
           tapWidth = this.$refs.navlist.offsetHeight;
           tapWidth = this.$refs.navlist.offsetHeight;
         }
         }
-        this.initX = parseInt(this.navWidth * this.defIndex);
-        this.tapWidth = tapWidth / 2 - this.navWidth / 2;
+        // this.initX = parseInt(this.navWidth * this.defIndex);
+        // this.tapWidth = tapWidth / 2 - this.navWidth / 2;
+        if (this.lineWidth > 0 && this.lineWidth < this.navWidth) {
+          this.initX = parseInt((this.navWidth - this.lineWidth) / 2 + this.navWidth * this.defIndex);
+        } else {
+          this.initX = parseInt(this.navWidth * this.defIndex);
+          this.tapWidth = tapWidth / 2 - this.navWidth / 2;
+        }
       });
       });
     },
     },
     findParent(event, myclass) {
     findParent(event, myclass) {
@@ -187,7 +205,12 @@ export default {
     switchTab: function(index, event, disable) {
     switchTab: function(index, event, disable) {
       if (!disable) {
       if (!disable) {
         this.activeIndex = index;
         this.activeIndex = index;
-        this.initX = parseInt(this.navWidth * index);
+        // this.initX = parseInt(this.navWidth * index);
+        if (this.lineWidth > 0 && this.lineWidth < this.navWidth) {
+          this.initX = parseInt((this.navWidth - this.lineWidth) / 2 + this.navWidth * index);
+        } else {
+          this.initX = parseInt(this.navWidth * index);
+        }
         if (this.positionNav == 'top' || this.positionNav == 'bottom') {
         if (this.positionNav == 'top' || this.positionNav == 'bottom') {
           this.$refs.navlist.scroll(this.initX - this.tapWidth, 0);
           this.$refs.navlist.scroll(this.initX - this.tapWidth, 0);
         } else {
         } else {