fix:优化leftslip组件，增加单元测试

package.json

@@ -1,165 +1,165 @@
 {
-  "name": "@nutui/nutui",
-  "version": "2.1.9",
-  "description": "一套轻量级移动端Vue组件库",
-  "typings": "dist/types/index.d.ts",
-  "main": "dist/nutui.js",
-  "files": [
-    "dist",
-    "README.md",
-    "package.json",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "dev": "npm run dev:new",
-    "dev:new": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open  --config build/webpack.dev.conf.js",
-    "dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
-    "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open  --config build/webpack.demo.dev.conf.js",
-    "dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
-    "build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
-    "build:doc": "cross-env NODE_ENV=production DOC_TYPE=true webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
-    "build:site": "npm run build:demo && npm run build:doc",
-    "build:prod": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.conf.js && node scripts/createIndexScss.js",
-    "build:prodmin": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.mini.conf.js",
-    "build:disp": "cross-env NODE_ENV=production PROD_TYPE=disp webpack --hide-modules --progress --config build/webpack.prod.disperse.conf.js",
-    "build": "npm run build:prod && npm run build:prodmin && npm run build:disp",
-    "clear": "node scripts/clearCache.js",
-    "eslint": "eslint src/packages/**/*.{js,vue}",
-    "add": "node scripts/createCptTpl.js",
-    "test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text  mocha-webpack --webpack-config build/webpack.test.conf.js --require test/setup.js src/packages/*/__test__/**.spec.js",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "test:watch": "npm run test --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jdf2e/nutui.git"
-  },
-  "keywords": [
-    "nutui",
-    "nutui2",
-    "vue",
-    "webpack",
-    "vue component",
-    "jdc",
-    "jdcfe"
-  ],
-  "author": "jdcfe",
-  "license": "MIT",
-  "dependencies": {
-    "@babel/polyfill": "7.0.0",
-    "@babel/runtime": "7.1.2",
-    "cache-loader": "^4.1.0",
-    "happypack": "^5.0.1",
-    "intersection-observer": "^0.5.1",
-    "os": "^0.1.1",
-    "progress-bar-webpack-plugin": "^1.12.1",
-    "webpack-build-notifier": "^1.1.1"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.10"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.1.2",
-    "@babel/core": "7.1.2",
-    "@babel/plugin-syntax-dynamic-import": "7.0.0",
-    "@babel/plugin-transform-runtime": "7.1.0",
-    "@babel/preset-env": "7.1.0",
-    "@nutui/carefree": "^0.4.0",
-    "@tweenjs/tween.js": "17.2.0",
-    "@vue/test-utils": "1.0.0-beta.25",
-    "autoprefixer": "9.1.3",
-    "babel-eslint": "8.2.6",
-    "babel-helper-vue-jsx-merge-props": "2.0.3",
-    "babel-jest": "23.4.2",
-    "babel-loader": "8.0.4",
-    "babel-plugin-add-module-exports": "0.2.1",
-    "babel-plugin-dynamic-import-node": "2.0.0",
-    "babel-plugin-syntax-jsx": "6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-stage-2": "6.24.1",
-    "chalk": "^2.4.2",
-    "chokidar": "^2.0.4",
-    "clipboard": "2.0.1",
-    "copy": "0.3.2",
-    "copy-webpack-plugin": "4.5.4",
-    "coveralls": "^3.0.2",
-    "cross-env": "^5.2.0",
-    "css-loader": "1.0.0",
-    "eslint": "4.19.1",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-vue": "4.7.1",
-    "expect": "23.6.0",
-    "file-loader": "1.1.11",
-    "folder-hash": "^2.1.2",
-    "friendly-errors-webpack-plugin": "1.7.0",
-    "google-code-prettify": "1.0.5",
-    "has": "1.0.3",
-    "highlight.js": "^9.13.1",
-    "html-webpack-plugin": "3.2.0",
-    "inquirer": "6.2.0",
-    "istanbul-instrumenter-loader": "3.0.1",
-    "jest": "23.5.0",
-    "jest-serializer-vue": "2.0.2",
-    "jsdom": "13.0.0",
-    "jsdom-global": "3.0.2",
-    "marked": "^0.6.1",
-    "mini-css-extract-plugin": "0.4.1",
-    "mocha": "5.2.0",
-    "mocha-webpack": "2.0.0-beta.0",
-    "moment": "2.22.2",
-    "node-filelist": "^1.0.0",
-    "node-notifier": "5.2.1",
-    "node-sass": "4.9.3",
-    "npm-run-all": "^4.1.5",
-    "nyc": "10.0.0",
-    "offline-plugin": "^5.0.6",
-    "optimize-css-assets-webpack-plugin": "5.0.0",
-    "ora": "3.0.0",
-    "path": "^0.12.7",
-    "portfinder": "1.0.17",
-    "postcss-import": "12.0.0",
-    "postcss-loader": "3.0.0",
-    "postcss-url": "8.0.0",
-    "qrcode": "1.3.2",
-    "raw-loader": "0.5.1",
-    "rimraf": "2.6.2",
-    "sass-loader": "7.1.0",
-    "sass-resources-loader": "1.3.3",
-    "semver": "5.5.1",
-    "shelljs": "^0.8.3",
-    "style-loader": "0.22.1",
-    "svg-sprite-loader": "3.9.2",
-    "three": "^0.99.0",
-    "uglifyjs-webpack-plugin": "1.3.0",
-    "url-loader": "1.1.1",
-    "vue": "^2.6.10",
-    "vue-i18n": "8.1.0",
-    "vue-jest": "2.6.0",
-    "vue-lazyload": "1.3.3",
-    "vue-loader": "15.4.0",
-    "vue-router": "^3.0.2",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "vueg": "1.3.4",
-    "webpack": "4.25.0",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.11",
-    "webpack-merge": "4.1.4",
-    "webpack-node-externals": "1.7.2"
-  },
-  "browserslist": [
-    "> 3%",
-    "Android >= 4",
-    "iOS >= 8"
-  ],
-  "nyc": {
-    "include": [
-      "src/packages/**/*.vue"
+    "name": "@nutui/nutui",
+    "version": "2.1.9",
+    "description": "一套轻量级移动端Vue组件库",
+    "typings": "dist/types/index.d.ts",
+    "main": "dist/nutui.js",
+    "files": [
+        "dist",
+        "README.md",
+        "package.json",
+        "LICENSE",
+        "CHANGELOG.md"
     ],
-    "instrument": false,
-    "sourceMap": false
-  }
-}
+    "scripts": {
+        "dev": "npm run dev:new",
+        "dev:new": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open  --config build/webpack.dev.conf.js",
+        "dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
+        "dev:demo": "cross-env NODE_ENV=development webpack-dev-server -d --open  --config build/webpack.demo.dev.conf.js",
+        "dev:doc": "cross-env NODE_ENV=development DOC_TYPE=true webpack-dev-server -d --open -w --progress --config build/webpack.doc.dev.conf.js",
+        "build:demo": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.demo.build.conf.js",
+        "build:doc": "cross-env NODE_ENV=production DOC_TYPE=true webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
+        "build:site": "npm run build:demo && npm run build:doc",
+        "build:prod": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.conf.js && node scripts/createIndexScss.js",
+        "build:prodmin": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.mini.conf.js",
+        "build:disp": "cross-env NODE_ENV=production PROD_TYPE=disp webpack --hide-modules --progress --config build/webpack.prod.disperse.conf.js",
+        "build": "npm run build:prod && npm run build:prodmin && npm run build:disp",
+        "clear": "node scripts/clearCache.js",
+        "eslint": "eslint src/packages/**/*.{js,vue}",
+        "add": "node scripts/createCptTpl.js",
+        "test": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text  mocha-webpack --webpack-config build/webpack.test.conf.js --require test/setup.js src/packages/*/__test__/**.spec.js",
+        "coveralls": "cat ./coverage/lcov.info | coveralls",
+        "test:watch": "npm run test --watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/jdf2e/nutui.git"
+    },
+    "keywords": [
+        "nutui",
+        "nutui2",
+        "vue",
+        "webpack",
+        "vue component",
+        "jdc",
+        "jdcfe"
+    ],
+    "author": "jdcfe",
+    "license": "MIT",
+    "dependencies": {
+        "@babel/polyfill": "7.0.0",
+        "@babel/runtime": "7.1.2",
+        "cache-loader": "^4.1.0",
+        "happypack": "^5.0.1",
+        "intersection-observer": "^0.5.1",
+        "os": "^0.1.1",
+        "progress-bar-webpack-plugin": "^1.12.1",
+        "webpack-build-notifier": "^1.1.1"
+    },
+    "peerDependencies": {
+        "vue": "^2.6.10"
+    },
+    "devDependencies": {
+        "@babel/cli": "7.1.2",
+        "@babel/core": "7.1.2",
+        "@babel/plugin-syntax-dynamic-import": "7.0.0",
+        "@babel/plugin-transform-runtime": "7.1.0",
+        "@babel/preset-env": "7.1.0",
+        "@nutui/carefree": "^0.4.0",
+        "@tweenjs/tween.js": "17.2.0",
+        "@vue/test-utils": "1.0.0-beta.25",
+        "autoprefixer": "9.1.3",
+        "babel-eslint": "8.2.6",
+        "babel-helper-vue-jsx-merge-props": "2.0.3",
+        "babel-jest": "23.4.2",
+        "babel-loader": "8.0.4",
+        "babel-plugin-add-module-exports": "0.2.1",
+        "babel-plugin-dynamic-import-node": "2.0.0",
+        "babel-plugin-syntax-jsx": "6.18.0",
+        "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
+        "babel-preset-env": "1.7.0",
+        "babel-preset-stage-2": "6.24.1",
+        "chalk": "^2.4.2",
+        "chokidar": "^2.0.4",
+        "clipboard": "2.0.1",
+        "copy": "0.3.2",
+        "copy-webpack-plugin": "4.5.4",
+        "coveralls": "^3.0.2",
+        "cross-env": "^5.2.0",
+        "css-loader": "1.0.0",
+        "eslint": "4.19.1",
+        "eslint-loader": "2.1.1",
+        "eslint-plugin-vue": "4.7.1",
+        "expect": "23.6.0",
+        "file-loader": "1.1.11",
+        "folder-hash": "^2.1.2",
+        "friendly-errors-webpack-plugin": "1.7.0",
+        "google-code-prettify": "1.0.5",
+        "has": "1.0.3",
+        "highlight.js": "^9.13.1",
+        "html-webpack-plugin": "3.2.0",
+        "inquirer": "6.2.0",
+        "istanbul-instrumenter-loader": "3.0.1",
+        "jest": "23.5.0",
+        "jest-serializer-vue": "2.0.2",
+        "jsdom": "13.0.0",
+        "jsdom-global": "3.0.2",
+        "marked": "^0.6.1",
+        "mini-css-extract-plugin": "0.4.1",
+        "mocha": "5.2.0",
+        "mocha-webpack": "2.0.0-beta.0",
+        "moment": "2.22.2",
+        "node-filelist": "^1.0.0",
+        "node-notifier": "5.2.1",
+        "node-sass": "4.9.3",
+        "npm-run-all": "^4.1.5",
+        "nyc": "10.0.0",
+        "offline-plugin": "^5.0.6",
+        "optimize-css-assets-webpack-plugin": "5.0.0",
+        "ora": "3.0.0",
+        "path": "^0.12.7",
+        "portfinder": "1.0.17",
+        "postcss-import": "12.0.0",
+        "postcss-loader": "3.0.0",
+        "postcss-url": "8.0.0",
+        "qrcode": "1.3.2",
+        "raw-loader": "0.5.1",
+        "rimraf": "2.6.2",
+        "sass-loader": "7.1.0",
+        "sass-resources-loader": "1.3.3",
+        "semver": "5.5.1",
+        "shelljs": "^0.8.3",
+        "style-loader": "0.22.1",
+        "svg-sprite-loader": "3.9.2",
+        "three": "^0.99.0",
+        "uglifyjs-webpack-plugin": "1.3.0",
+        "url-loader": "1.1.1",
+        "vue": "^2.6.10",
+        "vue-i18n": "8.1.0",
+        "vue-jest": "2.6.0",
+        "vue-lazyload": "1.3.3",
+        "vue-loader": "15.4.0",
+        "vue-router": "^3.0.2",
+        "vue-style-loader": "^4.1.2",
+        "vue-template-compiler": "^2.6.10",
+        "vueg": "1.3.4",
+        "webpack": "4.25.0",
+        "webpack-bundle-analyzer": "^3.3.2",
+        "webpack-cli": "3.1.0",
+        "webpack-dev-server": "3.1.11",
+        "webpack-merge": "4.1.4",
+        "webpack-node-externals": "1.7.2"
+    },
+    "browserslist": [
+        "> 3%",
+        "Android >= 4",
+        "iOS >= 8"
+    ],
+    "nyc": {
+        "include": [
+            "src/packages/**/*.vue"
+        ],
+        "instrument": false,
+        "sourceMap": false
+    }
+}

src/packages/leftslip/__test__/leftslip.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import LeftSlip from "../leftslip.vue"
+import Vue from 'vue';
+
+describe('LeftSlip.vue', () => {
+    const wrapper = shallowMount(LeftSlip, {});
+    it('一键删除设置', () => {
+        wrapper.setProps({
+            onlyDel: true,
+        });
+
+        return Vue.nextTick().then(function() {
+            expect(wrapper.find('.delbtn').isVisible()).toBe(true);
+        })
+    })
+
+
+});

src/packages/leftslip/leftslip.scss

@@ -1,7 +1,7 @@
 .nut-leftslip {
     position: relative;
     overflow: hidden;
-    &:first-child .slip-main {
+    &:first-child .nut-slip-main {
         border-top: 1px solid #d8d8d8;
     }
     .slip-main {
@@ -12,12 +12,12 @@
         border-bottom: 1px solid #d8d8d8;
         background: #fff;
     }
-    .leftslip-item {
+    .nut-leftslip-item {
         transition: all 0.6s ease;
     }
-    .delbtn{
+    .delbtn {
         position: absolute;
-        right: -50px;
+        right: -52px;
         top: 0;
         min-width: 40px;
         height: 100%;
@@ -29,7 +29,7 @@
         color: #fff;
         padding: 0 5px;
         font-size: 14px;
-        span{
+        span {
             // width: 40px;
             display: flex;
             position: absolute;
@@ -42,7 +42,7 @@
     }
     .slipbtns {
         position: absolute;
-        right: -0px;
+        right: 0;
         top: 0;
         // width: 80px;
         height: 100%;
@@ -63,4 +63,4 @@
             text-align: center;
         }
     }
-}
+}

src/packages/leftslip/leftslip.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="nut-leftslip">
-        <div class="leftslip-item" ref="slipItem" :style="deleteSlider">
+        <div class="nut-leftslip-item" ref="slipItem" :style="deleteSlider">
             <div @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
                 <slot name="slip-main"></slot>
             </div>
@@ -20,7 +20,7 @@ export default {
     name: 'nut-leftslip',
     props: {
         onlyDel: {
-            type: [Boolean],
+            type: Boolean,
             default: false
         }
     },
@@ -46,10 +46,6 @@ export default {
                 this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
             }
         });
-        var that = this;
-        this.$on('bridge', () => {
-            that.restSlide();
-        }); //设置接收父组件的方法
 
         window.addEventListener('scroll', this.handleScroll, true);
     },
@@ -62,35 +58,32 @@ export default {
             if (this.disX) {
                 this.restSlide();
             }
-            // this.restSlide();
         },
         handleClick() {
             this.restSlide();
         },
         onlyDelClick() {
-            // this.$emit('onlyDelBtnClick', this.$refs.slipItem);
+            //一键删除模式点击删除
             this.$emit('oneDelete', this.$refs.slipItem);
             this.restSlide();
         },
         touchStart(e) {
             this.restSlide();
-            // console.log('rest', e.touches.length);
             e = e || event;
-
-            //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
+            //等于1时表示此时有只有一只手指在触摸屏幕
             if (e.touches.length == 1) {
-                // 记录开始位置
                 this.startX = e.touches[0].clientX;
                 this.startY = e.touches[0].clientY;
             }
         },
         touchMove(e) {
             e = e || event;
-            // let parentElement = e.currentTarget.parentElement;
+            //获取当前滑动对象
+            let parentElement = e.currentTarget.parentElement;
             //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
             let itemWd = this.$refs.slipItem.offsetWidth;
-            // console.log(this.$refs.delBtn.offsetWidth);
             let wd = this.onlyDel ? 40 : this.buttonWidth;
+
             if (e.touches.length == 1) {
                 // 滑动时距离浏览器左侧实时距离
                 this.moveY = e.touches[0].clientY;
@@ -103,22 +96,18 @@ export default {
                         //单一删除，左滑一键删除
                         if (this.disX < 0 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
-                            // parentElement.dataset.type = 0;
-                            // 大于0，表示左滑了，此时滑块开始滑动
                         }
                         this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
                         this.delBtnStyle = 'width:' + this.disX + 'px';
+                        parentElement.dataset.type = 1;//设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
                     } else {
                         // 如果是向右滑动或者不滑动，不改变滑块的位置
                         if (this.disX < wd / 4 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
-                            // parentElement.dataset.type = 0;
-                            // 大于0，表示左滑了，此时滑块开始滑动
+                            parentElement.dataset.type = 0;
                         } else if (this.disX > wd / 4) {
-                            //具体滑动距离我取的是 手指偏移距离*5。
-                            // parentElement.dataset.type = 1;
+                            parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-
                             // 最大也只能等于删除按钮宽度
                             if (this.disX * 1.5 >= wd) {
                                 // parentElement.dataset.type = 1;
@@ -135,7 +124,7 @@ export default {
         },
         touchEnd(e) {
             e = e || event;
-            // let parentElement = e.currentTarget.parentElement;
+            let parentElement = e.currentTarget.parentElement;
             let itemWd = this.$refs.slipItem.offsetWidth;
             let wd = this.onlyDel ? 40 : this.buttonWidth;
             if (e.changedTouches.length == 1) {
@@ -148,28 +137,26 @@ export default {
                         //单一按钮，左滑一键删除
                         if (this.disX < 0 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
-                            // parentElement.dataset.type = 0;
-                            // 大于0，表示左滑了，此时滑块开始滑动
+                            parentElement.dataset.type = 0;
                         } else if (this.disX < itemWd - 20) {
-                            // parentElement.dataset.type = 0;
+                            parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-50px);';
                             this.delBtnStyle = ' width:0px;';
                         } else {
                             this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
                             this.delBtnStyle = ' width:' + itemWd + 'px;';
-                            // this.$emit('oneDelete', this.$refs.slipItem);
-                            // this.restSlide();
+                            parentElement.dataset.type = 1;
                             this.onlyDelClick();
                         }
                     } else {
                         //如果距离小于删除按钮的四分之一,强行回到起点
 
                         if (this.disX < wd / 4) {
-                            // parentElement.dataset.type = 0;
+                            parentElement.dataset.type = 0;
                             this.deleteSlider = 'transform:translateX(0px)';
                         } else {
                             //大于一半 滑动到最大值
-                            // parentElement.dataset.type = 1;
+                            parentElement.dataset.type = 1;
                             if (wd >= itemWd) {
                                 //按钮数不可超出整行宽度
                                 this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
@@ -184,18 +171,20 @@ export default {
             }
         },
         restSlide() {
-            let listItems = document.querySelectorAll('.leftslip-item');
-            let delBtns = document.querySelectorAll('.delbtn .trans');
-            // console.log(delBtns);
+            let listItems = document.querySelectorAll('.nut-leftslip-item');
+            
             // 复位
             for (let i = 0; i < listItems.length; i++) {
                 listItems[i].style = 'transform:translateX(0' + 'px)';
+                listItems[i].dataset.type = 0;//是否展开标志位默认0，左滑展开为1，右滑隐藏为0
             }
-            for (let j = 0; j < delBtns.length; j++) {
-                delBtns[j].style = '';
+            if(this.onlyDel){
+                let delBtns = document.querySelectorAll('.delbtn .trans');
+                for (let j = 0; j < delBtns.length; j++) {
+                    delBtns[j].style = '';
+                }
             }
-
-            // this.delBtnStyle = '';
+            
         }
     }
 };