From 9441d295475f1e9a1dc7ffbaaeb3f364d7ba79e1 Mon Sep 17 00:00:00 2001
From: yewenwen <yewenwen1@jd.com>
Date: Tue, 25 Jun 2019 17:43:27 +0800
Subject: [PATCH 01/21] update checkboxGroup

---
 src/packages/checkboxgroup/checkboxgroup.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/packages/checkboxgroup/checkboxgroup.vue b/src/packages/checkboxgroup/checkboxgroup.vue
index 9dfd0105d5..6a2abffc1a 100644
--- a/src/packages/checkboxgroup/checkboxgroup.vue
+++ b/src/packages/checkboxgroup/checkboxgroup.vue
@@ -78,6 +78,7 @@ export default {
     data() {
         return {
             ignoreChange: false,
+            initData:[],
         	checkboxValues: [],
             initialValue: JSON.parse(JSON.stringify(this.value))
         };
@@ -85,6 +86,13 @@ export default {
     components: {
 	    [nutcheckbox.name]: nutcheckbox
 	},
+    watch: {
+        checkBoxData(val){
+            if(val){
+                this.initData = val || [];
+            }
+        }
+    },
     methods: {
         isObject(obj) {
             return obj !== null && typeof obj === 'object';

From 63945fd0d4f57850c7813495fc0f16446b9f6572 Mon Sep 17 00:00:00 2001
From: yewenwen <yewenwen1@jd.com>
Date: Tue, 25 Jun 2019 17:51:14 +0800
Subject: [PATCH 02/21] update checkboxgroup

---
 src/packages/checkboxgroup/checkboxgroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/checkboxgroup/checkboxgroup.vue b/src/packages/checkboxgroup/checkboxgroup.vue
index 6a2abffc1a..769b4eaad3 100644
--- a/src/packages/checkboxgroup/checkboxgroup.vue
+++ b/src/packages/checkboxgroup/checkboxgroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="['nut-checkboxgroup',{'vertical':vertical},customClass]" >
-        <div class="checkbox-item" v-for="(item,index) in checkBoxData" :key="item[keys.id]">
+        <div class="checkbox-item" v-for="(item,index) in initData" :key="item[keys.id]">
             <nut-checkbox 
             :name="name||item[keys.name]" 
             :disabled=" disabled || item[keys.disabled]" 

From 6e53992aadbe9d4c608a7549d4ee7f306b166a97 Mon Sep 17 00:00:00 2001
From: yewenwen <yewenwen1@jd.com>
Date: Mon, 13 Jan 2020 10:09:42 +0800
Subject: [PATCH 03/21] =?UTF-8?q?v2=20=E5=86=B2=E7=AA=81=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/checkboxgroup/checkboxgroup.vue | 327 +++++++++----------
 1 file changed, 159 insertions(+), 168 deletions(-)

diff --git a/src/packages/checkboxgroup/checkboxgroup.vue b/src/packages/checkboxgroup/checkboxgroup.vue
index 21c9ed606c..d6374c9e42 100644
--- a/src/packages/checkboxgroup/checkboxgroup.vue
+++ b/src/packages/checkboxgroup/checkboxgroup.vue
@@ -1,193 +1,184 @@
 <template>
-    <div :class="['nut-checkboxgroup',{'vertical':vertical},customClass]" >
-        <div class="checkbox-item" v-for="(item,index) in initData" :key="item[keys.id]">
-            <nut-checkbox 
-            :name="name||item[keys.name]" 
-            :disabled=" disabled || item[keys.disabled]" 
-            :label="item[keys.label]"
-            :animation="animation"
-            :size="item.size ? item.size : size"
-            
-            :id="item[keys.id]"
-            :checked.sync="item.checked"
-            
-            
-            v-model="checkboxValues[index]"
-            @change="changeEvt(arguments,item)"
-
-            >{{ item[keys.label] || item[keys.value] || item}}
-            </nut-checkbox>
-        </div>
+  <div :class="['nut-checkboxgroup', { vertical: vertical }, customClass]">
+    <div
+      class="checkbox-item"
+      v-for="(item, index) in initData"
+      :key="item[keys.id]"
+    >
+      <nut-checkbox
+        :name="name || item[keys.name]"
+        :disabled="disabled || item[keys.disabled]"
+        :label="item[keys.label]"
+        :animation="animation"
+        :size="item.size ? item.size : size"
+        :id="item[keys.id]"
+        :checked.sync="item.checked"
+        v-model="checkboxValues[index]"
+        @change="changeEvt(arguments, item)"
+        >{{ item[keys.label] || item[keys.value] || item }}
+      </nut-checkbox>
     </div>
+  </div>
 </template>
 <script>
 import nutcheckbox from "../checkbox/checkbox.vue";
-import "../checkbox/checkbox.scss";	
+import "../checkbox/checkbox.scss";
 export default {
-    name:'nut-checkboxgroup',
-    props: {
-        name: String,
-    	checkBoxData:{
-    		type:Array,
-            required:true,
-            
-    	},
+  name: "nut-checkboxgroup",
+  props: {
+    name: String,
+    checkBoxData: {
+      type: Array,
+      required: true
+    },
 
-        value: {
-            type: Array,
-            required: true
-        },
-        keys: {
-            type: Object,
-            default() {
-                return {
-                    id: 'id',
-                    name: 'name',
-                    class: 'class',
-                    label: 'label',
-                    value: 'value',
-                    disabled: 'disabled'
-                };
-            }
-        },
-        customClass:{
-            type: String,
-            default: ''
-        },
-        label:{
-            type: [String, Number, Boolean],
-            default: ''
-        },
-        size: {
-            type: [String, Number],
-            default: 'base'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        animation: {
-            type: Boolean,
-            default: true
-        },
-        vertical:{
-            type: Boolean,
-            default: false
-        }
+    value: {
+      type: Array,
+      required: true
     },
-    data() {
+    keys: {
+      type: Object,
+      default() {
         return {
-            ignoreChange: false,
-            initData:[],
-        	checkboxValues: [],
-            initialValue: []
+          id: "id",
+          name: "name",
+          class: "class",
+          label: "label",
+          value: "value",
+          disabled: "disabled"
         };
+      }
     },
-    components: {
-	    [nutcheckbox.name]: nutcheckbox
-<<<<<<< HEAD
-	},
-    watch: {
-        checkBoxData(val){
-            if(val){
-                this.initData = val || [];
-            }
-        }
+    customClass: {
+      type: String,
+      default: ""
     },
-=======
+    label: {
+      type: [String, Number, Boolean],
+      default: ""
     },
-    watch:{
-        value(){
-            this.init();
+    size: {
+      type: [String, Number],
+      default: "base"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      ignoreChange: false,
+      initData: [],
+      checkboxValues: [],
+      initialValue: []
+    };
+  },
+  components: {
+    [nutcheckbox.name]: nutcheckbox
+  },
+  watch: {
+    value() {
+      this.init();
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.initialValue = this.value;
+      this.checkBoxData.map(item => {
+        if (typeof item === "object") {
+          item.checked = this.isOptionCheckedByDefault(item);
         }
+      });
     },
-    mounted(){
-        this.init()
+    isObject(obj) {
+      return obj !== null && typeof obj === "object";
     },
->>>>>>> bdc43e45aac0759a451aae314da010a87bbc8ae6
-    methods: {
-        init(){
-            this.initialValue = this.value;
-            this.checkBoxData.map(item=>{
-                if(typeof item ==="object"){
-                    item.checked = this.isOptionCheckedByDefault(item)
-                }
-            })
-        },
-        isObject(obj) {
-            return obj !== null && typeof obj === 'object';
-        },
-        looseIndexOf(arr, val) {
-            for (let i = 0; i < arr.length; i++) {
-                if (this.looseEqual(arr[i], val)) {
-                    return i;
-                }
-            }
-
-            return -1;
-        },
-        isOptionCheckedByDefault(item) {
-            return this.looseIndexOf(this.initialValue, item[this.keys.value] || item) > -1;
-        },
-        looseEqual(a, b) {
-            return a == b || (
-               this.isObject(a) && this.isObject(b) ? JSON.stringify(a) === JSON.stringify(b) : false
-            );
-        },
-        changeEvt(args,item) {
-            if (this.ignoreChange) {
-                return;
-            }
+    looseIndexOf(arr, val) {
+      for (let i = 0; i < arr.length; i++) {
+        if (this.looseEqual(arr[i], val)) {
+          return i;
+        }
+      }
 
-            const checked = args[0];
-            const label = args[1];
-            const e = args[2];
+      return -1;
+    },
+    isOptionCheckedByDefault(item) {
+      return (
+        this.looseIndexOf(this.initialValue, item[this.keys.value] || item) > -1
+      );
+    },
+    looseEqual(a, b) {
+      return (
+        a == b ||
+        (this.isObject(a) && this.isObject(b)
+          ? JSON.stringify(a) === JSON.stringify(b)
+          : false)
+      );
+    },
+    changeEvt(args, item) {
+      if (this.ignoreChange) {
+        return;
+      }
 
-            let value = [];
-            const itemValue = item[this.keys.value] || item;
-            const i = this.looseIndexOf(this.value, itemValue);
+      const checked = args[0];
+      const label = args[1];
+      const e = args[2];
 
-            if (checked && i < 0) {
-                value = this.value.concat(itemValue);
-            }
+      let value = [];
+      const itemValue = item[this.keys.value] || item;
+      const i = this.looseIndexOf(this.value, itemValue);
 
-            if (!checked && i > -1) {
-                value = this.value.slice(0, i).concat(this.value.slice(i + 1));
-            }
+      if (checked && i < 0) {
+        value = this.value.concat(itemValue);
+      }
 
-            this.$emit('input', value);
-            this.$emit('change', value,label, e);
+      if (!checked && i > -1) {
+        value = this.value.slice(0, i).concat(this.value.slice(i + 1));
+      }
 
-           
-        },
-        toggleAll(checked) {
-            if (checked === false) {
-                this.$emit("input", []);
-                return;
-            }
-            if(checked === true){
-                this.checkBoxData.map(item => {
-                    item.checked = true;
-                });
-            }
-            if (!checked) {
-                this.checkBoxData.map(item => {
-                    item.checked = !item.checked;
-                });
-            }
+      this.$emit("input", value);
+      this.$emit("change", value, label, e);
+    },
+    toggleAll(checked) {
+      if (checked === false) {
+        this.$emit("input", []);
+        return;
+      }
+      if (checked === true) {
+        this.checkBoxData.map(item => {
+          item.checked = true;
+        });
+      }
+      if (!checked) {
+        this.checkBoxData.map(item => {
+          item.checked = !item.checked;
+        });
+      }
 
-            let value = [],
-                label = [];
-            let resData = this.checkBoxData.filter(item => {
-                if (item.checked) {
-                value.push(item.value);
-                label.push(item.label);
-                }
-                return item.checked;
-            });
-            this.$emit("input",value);
-            this.$emit("change", value, label, null);
+      let value = [],
+        label = [];
+      let resData = this.checkBoxData.filter(item => {
+        if (item.checked) {
+          value.push(item.value);
+          label.push(item.label);
         }
+        return item.checked;
+      });
+      this.$emit("input", value);
+      this.$emit("change", value, label, null);
     }
-}
-</script>
\ No newline at end of file
+  }
+};
+</script>

From 19b1a06a5a3cd28373abfd838d0bfa041b118bf5 Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Mon, 13 Jan 2020 10:49:08 +0800
Subject: [PATCH 04/21] =?UTF-8?q?doc:=20v2.1.9=20=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a581f0ecca..3089fbd427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## 2.1.9
+
+`2020-01-09`
+
+* :sparkles: feat(CheckboxGroup)：增加全选、反选功能 @richard1015
+* :sparkles: feat(uploader)：上传组件支持withCredentials参数 #190 @richard1015
+* :sparkles: feat：新增popup组件 @yangkaixuan
+* :sparkles: feat：新增Elevator电梯楼层组件 @zhenyulei
+* :sparkles: feat：新增textbox文本域组件 @guoxiao158
+* :bug: fix(calendar)：修复日历组件 当某个月的1号是周日时，月份下方会空出来一行 @irisSong
+* :bug: fix(menu)：修复组件多实例bug #182 @Ymm0008
+* :bug: fix(col)：修复组件中文字超出时样式问题 @richard1015
+* :bug: fix(imagepicker)：imgList双向绑定问题 #187 @richard1015
+* :bug: fix(toast)：修复toast多实例关闭事件冲突 #181 @guoxiao158
+* :zap: doc：修改（picker自定义数据demo；cdn按需加载；VueCLI3按需加载）； @richard1015
+
 ## 2.1.8
 
 `2019-12-11`

From bbd4c9d76e2d6c27c357ebe4c98f25f794913331 Mon Sep 17 00:00:00 2001
From: songchenglin3 <songchenglin1@jd.com>
Date: Mon, 13 Jan 2020 17:08:03 +0800
Subject: [PATCH 05/21] =?UTF-8?q?feat:=20Scroller=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=BB=9A=E5=8A=A8=E5=88=B0=E6=8C=87=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/__test__/calendar.spec.js        | 18 ++++++-------
 src/packages/scroller/demo.vue                | 26 +++++++++++++++++--
 src/packages/scroller/doc.md                  |  4 ++-
 src/packages/scroller/horizontal-scroll.vue   | 12 +++++++++
 src/packages/scroller/scroller.vue            | 17 +++++++++++-
 src/packages/scroller/vertical-scroll.vue     | 10 +++++++
 6 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/src/packages/calendar/__test__/calendar.spec.js b/src/packages/calendar/__test__/calendar.spec.js
index 56ada3042a..e92bd5ea26 100644
--- a/src/packages/calendar/__test__/calendar.spec.js
+++ b/src/packages/calendar/__test__/calendar.spec.js
@@ -6,7 +6,7 @@ import Vue from 'vue';
 describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
-            defaultValue: '2020-01-12'
+            defaultValue: '2022-01-12'
         }
     });
 
@@ -19,7 +19,7 @@ describe('Calendar.vue', () => {
 
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年01月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2021年01月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
         })
     });
@@ -27,7 +27,7 @@ describe('Calendar.vue', () => {
     it('选择日期', () => {
         wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('8');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('6');
 
         })
     });
@@ -36,9 +36,9 @@ describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
             type: 'range',
-            defaultValue: ['2020-02-22', '2020-02-25'],
-            startDate: '2020-02-01',
-            endDate:'2020-04-11'
+            defaultValue: ['2022-02-22', '2022-02-25'],
+            startDate: '2022-02-01',
+            endDate:'2022-04-11'
         }
     });
 
@@ -55,7 +55,7 @@ describe('Calendar.vue', () => {
     });
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年02月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22 开始');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25 结束');
         })
@@ -65,8 +65,8 @@ describe('Calendar.vue', () => {
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('15 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('17 结束');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13 开始');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15 结束');
         })
     });
    
diff --git a/src/packages/scroller/demo.vue b/src/packages/scroller/demo.vue
index 3546c7d525..7eddf93a6e 100644
--- a/src/packages/scroller/demo.vue
+++ b/src/packages/scroller/demo.vue
@@ -6,8 +6,9 @@
         >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
         <h4>横向滑动</h4>
         <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPosHor()">返回第一个</nut-button></p>
         <div class="hor-panel">
-            <nut-scroller @jump="jump()">
+            <nut-scroller @jump="jump()" @scrollToCbk="scrollToCbkHor" :scrollTo="scrollToHor">
                 <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
                     <dl class="nut-scroller-item-info">
                         <dt>防水升级版 蓝 迷你小音</dt>
@@ -26,19 +27,21 @@
                         <dd>2018-02-25</dd>
                     </dl>
                 </div>
-                <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
             </nut-scroller>
         </div>
         <h4>纵向滑动</h4>
         <p>支持下拉刷新、上拉加载更多。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPos()">返回列表顶部</nut-button></p>
         <div class="vert-panel">
             <nut-scroller
                 :is-un-more="isUnMore1" 
                 :is-loading="isLoading1"
                 :type="'vertical'"
                 :propsTime="0"
+                :scrollTo="scrollTo"
                 @loadMore="loadMoreVert"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             > 
                 <div slot="list" class="nut-vert-list-panel">
                     <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
@@ -90,6 +93,8 @@ export default {
             isLoading2: false,
             page2: 2,
             timers: null,
+            scrollTo: 1,
+            scrollToHor: 1
         };
     },
 
@@ -98,6 +103,23 @@ export default {
             location.href = 'http://www.jd.com';
         },
 
+        scrollToCbk() {
+            this.scrollTo = 1;
+        },
+
+        scrollToCbkHor() {
+            this.scrollToHor = 1;
+        },
+
+        scrollToPosHor() {
+            this.scrollToHor = 0;
+            
+        },
+
+        scrollToPos() {
+            this.scrollTo = 0;
+        },
+
         loadMoreVert() {
             this.isLoading1 = true;
             if (this.page1 > this.maxPages) {
diff --git a/src/packages/scroller/doc.md b/src/packages/scroller/doc.md
index 34a8dea912..f6e03fc828 100644
--- a/src/packages/scroller/doc.md
+++ b/src/packages/scroller/doc.md
@@ -174,6 +174,7 @@ export default {
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
+| scrollTo | 滚动到指定位置，只能设置复数，需要配合scrollToCbk使用 | Number | 1
 
 ## Event
 
@@ -181,4 +182,5 @@ export default {
 |----- | ----- | ----- 
 | pulldown | 下拉刷新回调 | -
 | loadMore | 上拉加载回调 | -
-| jump | 查看更多跳转回调 | -
\ No newline at end of file
+| jump | 查看更多跳转回调 | -
+| scrollToCbk | 滚动到指定位置之后，scrollTo参数设置成默认值 | -
\ No newline at end of file
diff --git a/src/packages/scroller/horizontal-scroll.vue b/src/packages/scroller/horizontal-scroll.vue
index db2244a166..b79dce49be 100644
--- a/src/packages/scroller/horizontal-scroll.vue
+++ b/src/packages/scroller/horizontal-scroll.vue
@@ -16,6 +16,18 @@ export default {
         stretch: {
             type: Number,
             default: 40
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
+        }
+    },
+    watch: {
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {
diff --git a/src/packages/scroller/scroller.vue b/src/packages/scroller/scroller.vue
index 28e5332fdb..de12647561 100644
--- a/src/packages/scroller/scroller.vue
+++ b/src/packages/scroller/scroller.vue
@@ -10,15 +10,22 @@
                 :load-more-txt="loadMoreTxt"
                 :unload-more-txt="unloadMoreTxt"
                 :props-time="propsTime"
+                :scroll-to="scrollTo"
                 @loadMore="loadMore"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             >
                 <slot name="list"  slot="list"></slot>
 
             </nut-vert-scroll>
         </template>
         <template v-else-if="type === 'horizontal'">
-            <nut-hor-scroll :stretch="stretch" @jump="jump">
+            <nut-hor-scroll 
+            :stretch="stretch" 
+            :scroll-to="scrollTo"
+            @jump="jump" 
+            @scrollToCbk="scrollToCbk"
+        >
                 <slot name="list"  slot="list"></slot>
                 <slot name="more"  slot="more"></slot>
                 <slot name="arrow" slot="arrow"></slot>
@@ -67,6 +74,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     data() {
@@ -87,6 +98,10 @@ export default {
 
         pulldown() {
             this.$emit('pulldown');
+        },
+
+        scrollToCbk() {
+            this.$emit('scrollToCbk');
         }
     }
 }
diff --git a/src/packages/scroller/vertical-scroll.vue b/src/packages/scroller/vertical-scroll.vue
index 7afb7bdd02..84a1e4ec4b 100644
--- a/src/packages/scroller/vertical-scroll.vue
+++ b/src/packages/scroller/vertical-scroll.vue
@@ -59,6 +59,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     watch: {
@@ -72,6 +76,12 @@ export default {
         },
         'isUnMore': function() {
             this.isShow();
+        },
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {

From 587246c0dd21116d52e2a3a84610ce82c0af8363 Mon Sep 17 00:00:00 2001
From: yangkaixuan <439721838@qq.com>
Date: Wed, 15 Jan 2020 11:02:07 +0800
Subject: [PATCH 06/21] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9popup=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/nutui.js                  |  1 +
 src/packages/popup/index.js   |  1 +
 src/packages/popup/popup.scss | 95 +++++++++++++++++++++++++++++++++++
 src/packages/popup/popup.vue  | 95 -----------------------------------
 4 files changed, 97 insertions(+), 95 deletions(-)
 create mode 100644 src/packages/popup/popup.scss

diff --git a/src/nutui.js b/src/nutui.js
index beee84fe9f..69e4dcb235 100644
--- a/src/nutui.js
+++ b/src/nutui.js
@@ -95,6 +95,7 @@ import TextBox from "./packages/textbox/index.js";
 import Elevator from "./packages/elevator/index.js";
 import "./packages/elevator/elevator.scss";
 import Popup from "./packages/popup/index.js";
+import "./packages/popup/popup.scss";
 const packages = {
   Cell,
   Dialog,
diff --git a/src/packages/popup/index.js b/src/packages/popup/index.js
index 66d5b3df66..67d82a5bbd 100644
--- a/src/packages/popup/index.js
+++ b/src/packages/popup/index.js
@@ -1,4 +1,5 @@
 import Popup from "./popup.vue";
+import "./popup.scss";
 
 Popup.install = function(Vue) {
   Vue.component(Popup.name, Popup);
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
new file mode 100644
index 0000000000..8e2e95e1fd
--- /dev/null
+++ b/src/packages/popup/popup.scss
@@ -0,0 +1,95 @@
+.popup-fade-enter-active {
+    animation: 0.2s nut-fade-in;
+  }
+  .popup-fade-leave-active {
+    animation: 0.2s nut-fade-out;
+  }
+  
+  .popup-slide {
+    &-top-enter,
+    &-top-leave-active {
+      transform: translate(0, -100%);
+    }
+    &-right-enter,
+    &-right-leave-active {
+      transform: translate(100%, 0);
+    }
+  
+    &-bottom-enter,
+    &-bottom-leave-active {
+      transform: translate(0, 100%);
+    }
+  
+    &-left-enter,
+    &-left-leave-active {
+      transform: translate(-100%, 0);
+    }
+  }
+  
+  .popup-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .popup-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 25px 25px 0 0;
+    }
+  }
+  .popup-right {
+    top: 0;
+    right: 0;
+    &.round {
+      border-radius: 25px 0 0 25px;
+    }
+  }
+  
+  .popup-left {
+    top: 0;
+    left: 0;
+    &.round {
+      border-radius: 0 25px 25px 0;
+    }
+  }
+  .popup-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 0 0 25px 25px;
+    }
+  }
+  .popup-box {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #fff;
+    transition: transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    z-index: 2028;
+  }
+  @keyframes nut-fade-in {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes nut-fade-out {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }
+ 
+  
\ No newline at end of file
diff --git a/src/packages/popup/popup.vue b/src/packages/popup/popup.vue
index 6620d5c9fb..dc7c351e15 100644
--- a/src/packages/popup/popup.vue
+++ b/src/packages/popup/popup.vue
@@ -99,98 +99,3 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-.popup-fade-enter-active {
-  animation: 0.2s van-fade-in;
-}
-.popup-fade-leave-active {
-  animation: 0.2s van-fade-out;
-}
-
-.popup-slide {
-  &-top-enter,
-  &-top-leave-active {
-    transform: translate(0, -100%);
-  }
-  &-right-enter,
-  &-right-leave-active {
-    transform: translate(100%, 0);
-  }
-
-  &-bottom-enter,
-  &-bottom-leave-active {
-    transform: translate(0, 100%);
-  }
-
-  &-left-enter,
-  &-left-leave-active {
-    transform: translate(-100%, 0);
-  }
-}
-
-.popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 25px 25px 0 0;
-  }
-}
-.popup-right {
-  top: 0;
-  right: 0;
-  &.round {
-    border-radius: 25px 0 0 25px;
-  }
-}
-
-.popup-left {
-  top: 0;
-  left: 0;
-  &.round {
-    border-radius: 0 25px 25px 0;
-  }
-}
-.popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 0 0 25px 25px;
-  }
-}
-.popup-box {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: #fff;
-  transition: transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  z-index: 2028;
-}
-@keyframes van-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes van-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-</style>

From d5ff810d6dd88df439959977bff51c2ac456e2c7 Mon Sep 17 00:00:00 2001
From: unknown <zhenyulei@360buyad.local>
Date: Wed, 15 Jan 2020 16:36:02 +0800
Subject: [PATCH 07/21] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=B5=E6=A2=AF?=
 =?UTF-8?q?=E6=A5=BC=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/elevator/elevator.scss | 3 +++
 src/packages/elevator/elevator.vue  | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
index c38cf2cbb1..67bffc0d0a 100644
--- a/src/packages/elevator/elevator.scss
+++ b/src/packages/elevator/elevator.scss
@@ -1,6 +1,9 @@
 .nut-elevator{
     overflow: scroll;
     background:#FFF; 
+    &::-webkit-scrollbar{
+        display:none; 
+    }
 }
 .nut-elevator-ul{
     width: 100%;
diff --git a/src/packages/elevator/elevator.vue b/src/packages/elevator/elevator.vue
index bd0b2290df..7fbf40f6e9 100644
--- a/src/packages/elevator/elevator.vue
+++ b/src/packages/elevator/elevator.vue
@@ -107,6 +107,7 @@ export default {
         },
         clickNav(title,index){
             this.currBox =true;
+            this.currTitle = title;
             setTimeout(()=>{
                 this.currBox =false;
             },this.hiddenTime);
@@ -118,6 +119,7 @@ export default {
         moveFun(title,index){
             let titleBox = document.getElementById(title);
             titleBox.scrollIntoView();
+            
         },
         onPointerEnd(e){
             let fontSize = this.getFontSize();

From 3b270c8f2e74aecd19d98cb59b467e424bd23171 Mon Sep 17 00:00:00 2001
From: unknown <zhenyulei@360buyad.local>
Date: Wed, 15 Jan 2020 16:53:52 +0800
Subject: [PATCH 08/21] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=94=B5=E6=A2=AF=E6=A5=BC=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/elevator/elevator.scss |  5 ++
 src/packages/elevator/elevator.vue  | 77 +++++++++++++++--------------
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
index 67bffc0d0a..7bcc278b54 100644
--- a/src/packages/elevator/elevator.scss
+++ b/src/packages/elevator/elevator.scss
@@ -1,4 +1,9 @@
 .nut-elevator{
+    position: fixed;
+    top:40px;
+    width: 100%;
+}
+.nut-main{
     overflow: scroll;
     background:#FFF; 
     &::-webkit-scrollbar{
diff --git a/src/packages/elevator/elevator.vue b/src/packages/elevator/elevator.vue
index 7fbf40f6e9..0531efc086 100644
--- a/src/packages/elevator/elevator.vue
+++ b/src/packages/elevator/elevator.vue
@@ -1,44 +1,45 @@
 <template>
-    <div class="nut-elevator" id="nut-elevator" :style="{height:wrapHeight+'px'}">
-        <ul class="nut-elevator-ul" 
-            id="nut-elevator-ul"
-            >
-            <li 
-            v-for="item in dataArray" 
-            v-bind:key="item.title"
-            class="nut-list-title" 
-            >
-                <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
-                <ul class="nut-people-list">
-                    <li v-for="(list,idx) in item.list" 
-                    v-bind:key="idx"
-                    class="nut-list-name" 
-                    :id="list.id?list.id:'list'+item.title+idx"
-                    @click="clickList(list,item)"
-                    >{{list.name}}</li>
+        <div class="nut-elevator"  :style="{height:wrapHeight+'px'}">
+            <div class="nut-main" :style="{height:wrapHeight+'px'}">
+                <ul class="nut-elevator-ul" 
+                    id="nut-elevator-ul"
+                    >
+                    <li 
+                    v-for="item in dataArray" 
+                    v-bind:key="item.title"
+                    class="nut-list-title" 
+                    >
+                        <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
+                        <ul class="nut-people-list">
+                            <li v-for="(list,idx) in item.list" 
+                            v-bind:key="idx"
+                            class="nut-list-name" 
+                            :id="list.id?list.id:'list'+item.title+idx"
+                            @click="clickList(list,item)"
+                            >{{list.name}}</li>
+                        </ul>
+                    </li>
                 </ul>
-            </li>
-        </ul>
-        <ul class="nut-elevator-nav" id="nut-elevator-nav" 
-            @touchmove="onPointerMove($event)"
-            @touchstart="onPointerMove($event)"
-            @touchend="onPointerEnd($event)"
-            >
-            <li v-for="(item,index) in dataArray"
-            v-bind:key="index" 
-            :id="'nav'+index"
-            class="nut-nav-list" 
-            :class="{'nut-nav-curr':item.title==currTitle}"
-            :style="{height:navListHeight+'px'}"
-            @click="clickNav(item.title,index)"
-            >{{item.title}}</li>
-        </ul>
-        <template v-if="showIndicator">
-            <div class="nut-big-box" v-show="currBox">
-                {{currTitle}}
+                <ul class="nut-elevator-nav" id="nut-elevator-nav" 
+                    @touchmove="onPointerMove($event)"
+                    @touchstart="onPointerMove($event)"
+                    @touchend="onPointerEnd($event)"
+                    >
+                    <li v-for="(item,index) in dataArray"
+                    v-bind:key="index" 
+                    :id="'nav'+index"
+                    class="nut-nav-list" 
+                    :style="{height:navListHeight+'px'}"
+                    @click="clickNav(item.title,index)"
+                    >{{item.title}}</li>
+                </ul>
+                <template v-if="showIndicator">
+                    <div class="nut-big-box" v-show="currBox">
+                        {{currTitle}}
+                    </div>
+                </template>
             </div>
-        </template>
-    </div>
+        </div>  
 </template>
 <script>
 export default {

From f2ca1ae5c7ff25bf339fdf7c5853bef5cbadbcc3 Mon Sep 17 00:00:00 2001
From: yewenwen <yewenwen1@jd.com>
Date: Thu, 16 Jan 2020 15:26:48 +0800
Subject: [PATCH 09/21] =?UTF-8?q?add=20leftslip=20=E5=B7=A6=E6=BB=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                     |  10 ++
 src/nutui.js                        |   6 +-
 src/packages/leftslip/demo.vue      | 137 ++++++++++++++++++
 src/packages/leftslip/doc.md        |  62 +++++++++
 src/packages/leftslip/index.js      |   8 ++
 src/packages/leftslip/leftslip.scss |  60 ++++++++
 src/packages/leftslip/leftslip.vue  | 206 ++++++++++++++++++++++++++++
 types/nutui.d.ts                    |   1 +
 8 files changed, 489 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/leftslip/demo.vue
 create mode 100644 src/packages/leftslip/doc.md
 create mode 100644 src/packages/leftslip/index.js
 create mode 100644 src/packages/leftslip/leftslip.scss
 create mode 100644 src/packages/leftslip/leftslip.vue

diff --git a/src/config.json b/src/config.json
index 5a55a550a5..9169ced462 100644
--- a/src/config.json
+++ b/src/config.json
@@ -502,6 +502,16 @@
       "sort": "5",
       "showDemo": true,
       "author": "杨凯旋"
+    },
+    {
+      "version": "1.0.0",
+      "name": "LeftSlip",
+      "chnName": "侧滑删除",
+      "desc": "手势侧滑删除元素",
+      "type": "component",
+      "sort": "2",
+      "showDemo": true,
+      "author": "vickyYE"
     }
   ]
 }
diff --git a/src/nutui.js b/src/nutui.js
index beee84fe9f..4053a0ed1a 100644
--- a/src/nutui.js
+++ b/src/nutui.js
@@ -95,6 +95,9 @@ import TextBox from "./packages/textbox/index.js";
 import Elevator from "./packages/elevator/index.js";
 import "./packages/elevator/elevator.scss";
 import Popup from "./packages/popup/index.js";
+import LeftSlip from "./packages/leftslip/index.js";
+import "./packages/leftslip/leftslip.scss";
+
 const packages = {
   Cell,
   Dialog,
@@ -142,7 +145,8 @@ const packages = {
   TextBox,
   Avatar,
   Elevator,
-  Popup
+  Popup,
+  LeftSlip
 };
 
 const components = {};
diff --git a/src/packages/leftslip/demo.vue b/src/packages/leftslip/demo.vue
new file mode 100644
index 0000000000..0b47511531
--- /dev/null
+++ b/src/packages/leftslip/demo.vue
@@ -0,0 +1,137 @@
+<template>
+    <div>
+        <h4>基本用法</h4>
+        <div>
+            <nut-leftslip>
+                <div slot="slip-main" class="slip-main">向左滑动我</div>
+                <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
+            </nut-leftslip>
+        </div>
+        <p>单个按钮</p>
+        <div>
+            <nut-leftslip>
+                <div slot="slip-main" class="slip-main">单一按钮</div>
+                <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+            </nut-leftslip>
+            <nut-leftslip onlyDel @oneDelete="oneDel($event)">
+                <div slot="slip-main" class="slip-main">向左滑一键删除</div>
+                <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+            </nut-leftslip>
+        </div>
+        <p>多个按钮</p>
+        <div>
+            <nut-leftslip>
+                <div slot="slip-main" class="slip-main">
+                    {{ 111 }}
+                </div>
+                <div slot="slipbtns" class="slipbtns"
+                    ><a href="javascript:;">删除</a>
+                    <a href="javascript:;" class="favorite">收藏</a>
+                    <a href="javascript:;" class="favorite">收藏</a>
+                    <a href="javascript:;" class="favorite">收藏</a>
+                    <a href="javascript:;" class="favorite">收藏</a>
+                    <a href="javascript:;" class="favorite">收藏1</a>
+                    <a href="javascript:;" class="favorite">收藏2</a>
+                    <a href="javascript:;" class="favorite">收藏3</a>
+                    <a href="javascript:;" class="favorite">收藏4</a>
+                </div>
+            </nut-leftslip>
+        </div>
+        <p>列表</p>
+        <div>
+            <nut-leftslip v-for="(item, index) in list" :key="index">
+                <div slot="slip-main" class="slip-main">
+                    <div class="addr">
+                        <p class="name-mobile">{{ item.tel }}</p>
+                        <p class="full-addr">{{ item.addr }}</p>
+                    </div>
+                    <a class="addr-edit" href="javascript:void(0)"></a>
+                </div>
+                <div slot="slipbtns" class="slipbtns"
+                    ><a href="javascript:;" @click="delItem(index)">删除</a><a href="javascript:;" class="favorite">收藏</a></div
+                >
+            </nut-leftslip>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {
+            list: [
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
+                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
+            ]
+        };
+    },
+    methods: {
+        delItem(index) {
+            console.log(1);
+            this.list.splice(index, 1);
+        },
+        oneDel(ev) {
+            console.log(ev.target);
+            alert('是否删除？');
+            ev.target.remove();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.slip-main {
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 200%;
+        height: 0;
+        box-sizing: border-box;
+        transform: scale(0.5);
+        transform-origin: left bottom;
+        border-bottom: 1px solid #ececee;
+    }
+    .addr-wrap {
+        display: flex;
+        position: relative;
+        width: 100%;
+    }
+    .addr {
+        flex: 1;
+    }
+    .addr-edit {
+        display: flex;
+        width: 36px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAAGXLeQ2AAAAAXNSR0IArs4c6QAAAdFJREFUSA2tVTFuAjEQtNF1KBIvoEEiD+CkVHRX0CaPgG9Aly9ADwVFaO8LkeABeUVOAWqys7k5+Xw+zkixdF7v7ux4vWuDMe5Yr9c3jOPxeOvRMZlMuDRGEEtDCKTFBP9ms9HpBwYOECmZGJ7IcjqdDEghe9baAx21nWhsyMvlQnqVSFpBrpUnqTloBBCOKndFlZMkZHt5nrs2c71eVbdyyrFEf9W8pTKfz3WFc+GTsULB3Lxqa1QGfkgMRCSY/EFGFIi7aL0FGAwAsK2aVWP9Xdr0ZLFYoCofkuJrG0j8Z/nSNn/QLodfoqTfwjwIIRqHBZDGUACrAszdg7pAELWCfWArOASErcFc3o2qk+45Gt38t0420nC39dcK5qX3ndTxSKTlh0Sm591uh0tcPXKCKAGUprxZGKQsYxHv8mX3goDlCHWd76LErHCX9JYOh0MznU5Nv99nfLT0SPUdpWlqE8lUr/9sNosmIzBE6j7QRt8ZeE92kTL2IfIYUl51bBBFXhSF2e/3TEhr6h6/cniLKHL5+VTC0WhkBoPg74hH+6dGkWdZFgzuMj703LrIfD/+Nc8wdj1RPzCkk4OcKEsqyud2u40vZoi5tAlXIcsXqL8z/jqozhCfMwAAAABJRU5ErkJggg==)
+            no-repeat center center;
+        background-size: 23px 23px;
+    }
+    .name-mobile {
+        font-size: 15px;
+        color: #333;
+    }
+    .full-addr {
+        font-size: 14px;
+        color: #666;
+        margin-top: 10px;
+        line-height: 22px;
+        // height: 40px;
+    }
+}
+.slipbtns {
+    a {
+        &.favorite {
+            background: #ccc;
+        }
+    }
+}
+</style>
diff --git a/src/packages/leftslip/doc.md b/src/packages/leftslip/doc.md
new file mode 100644
index 0000000000..d35c11e617
--- /dev/null
+++ b/src/packages/leftslip/doc.md
@@ -0,0 +1,62 @@
+# LeftSlip 左滑删除
+
+列表元素向左滑出现删除等按钮
+
+## 基本用法
+
+```html
+<div>
+    <nut-leftslip>
+        <div slot="slip-main" class="slip-main">向左滑动我</div>
+        <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
+    </nut-leftslip>
+</div>
+```
+
+### 单个按钮
+
+```html
+<div>
+    <nut-leftslip>
+        <div slot="slip-main" class="slip-main">
+            {{ 222 }}
+        </div>
+        <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+    </nut-leftslip>
+</div>
+```
+
+### 列表
+
+```html
+<nut-leftslip @slide-left="slideLeft" @slide-right="slideRight" @slide-no="slideNo" during="0.2">
+    <div slot="slip-main" class="slip-main">
+        <div class="addr">
+            <p class="name-mobile">159****8888</p>
+            <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
+        </div>
+        <a class="addr-edit" href="javascript:void(0)"></a>
+    </div>
+    <div slot="slipbtns" class="slipbtns"> <a href="javascript:;">删除</a><a href="javascript:;">收藏</a> </div>
+</nut-leftslip>
+```
+
+```javascript
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    methods: {
+        slideLeft() {
+            console.log('左划了');
+        },
+        slideRight() {
+            console.log('右划了');
+        },
+        slideNo() {
+            console.log('没有划动');
+        }
+    }
+};
+```
diff --git a/src/packages/leftslip/index.js b/src/packages/leftslip/index.js
new file mode 100644
index 0000000000..9b2fc6e10a
--- /dev/null
+++ b/src/packages/leftslip/index.js
@@ -0,0 +1,8 @@
+import LeftSlip from "./leftslip.vue";
+import "./leftslip.scss";
+
+LeftSlip.install = function(Vue) {
+  Vue.component(LeftSlip.name, LeftSlip);
+};
+
+export default LeftSlip;
diff --git a/src/packages/leftslip/leftslip.scss b/src/packages/leftslip/leftslip.scss
new file mode 100644
index 0000000000..f10aeb7fae
--- /dev/null
+++ b/src/packages/leftslip/leftslip.scss
@@ -0,0 +1,60 @@
+.nut-leftslip {
+    position: relative;
+    overflow: hidden;
+    &:first-child .slip-main {
+        border-top: 1px solid #d8d8d8;
+    }
+    .slip-main {
+        padding: 10px;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        border-bottom: 1px solid #d8d8d8;
+        background: #fff;
+    }
+    .leftslip-item {
+        transition: all 0.6s ease;
+    }
+    .delbtn{
+        position: absolute;
+        right: -80px;
+        top: 0;
+        width: 40px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // transform: translateX(100%);
+        background: #ff4949;
+        color: #fff;
+        padding: 0 5px;
+        font-size: 14px;
+        span{
+            // width: 40px;
+            display: block;
+        }
+    }
+    .slipbtns {
+        position: absolute;
+        right: -0px;
+        top: 0;
+        // width: 80px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: translateX(100%);
+        
+        a {
+            display: flex;
+            width: 40px;
+            background: #ff4949;
+            color: #fff;
+            height: 100%;
+            padding: 0 5px;
+            font-size: 14px;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
diff --git a/src/packages/leftslip/leftslip.vue b/src/packages/leftslip/leftslip.vue
new file mode 100644
index 0000000000..81db088acd
--- /dev/null
+++ b/src/packages/leftslip/leftslip.vue
@@ -0,0 +1,206 @@
+<template>
+    <div class="nut-leftslip">
+        <div class="leftslip-item" ref="slipItem" :style="deleteSlider">
+            <div @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
+                <slot name="slip-main"></slot>
+            </div>
+            <div>
+                <!-- <div>删除</div> -->
+                <div v-if="onlyDel" :style="delBtnStyle" @click="handleClick" class="delbtn" ref="delBtn"><span>删除</span></div>
+                <slot name="slipbtns" v-else @click="handleClick"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'nut-leftslip',
+    props: {
+        during: {
+            type: [Number, String],
+            default: 1
+        },
+        isClickRestore: {
+            type: [Boolean],
+            default: true
+        },
+        customClass: {
+            type: String,
+            default: ''
+        },
+        onlyDel: {
+            type: [Boolean],
+            default: false
+        }
+    },
+    data() {
+        return {
+            startX: 0,
+            startY: 0,
+            moveX: 0,
+            moveY: 0,
+            left: 0,
+            buttonWidth: 0,
+            disX: 0, //移动距离
+            deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
+            delBtnStyle: '' //单个删除键拖拽删除效果
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.onlyDel) {
+                return;
+            }
+            for (var slot of this.$slots.slipbtns) {
+                this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
+            }
+        });
+        window.addEventListener('scroll', this.handleScroll, true);
+    },
+    beforeDestroy() {
+        // 移除监听
+        window.removeEventListener('scroll', this.handleScroll, true);
+    },
+    methods: {
+        handleScroll() {
+            if (this.disX) {
+                this.restSlide();
+            }
+            // this.restSlide();
+        },
+        handleClick(v) {
+            this.restSlide();
+        },
+        touchStart(e) {
+            this.restSlide();
+            // console.log('rest', e.touches.length);
+            e = e || event;
+
+            //tounches类数组，等于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 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;
+                this.moveX = e.touches[0].clientX;
+                if (Math.abs(this.moveY - this.startY) < 40) {
+                    //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
+                    this.disX = this.startX - this.moveX;
+                    // console.log(this.disX);
+                    if (this.onlyDel) {
+                        //一键删除
+                        this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                        this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
+                        if (this.disX < wd || this.disX == 0) {
+                            this.deleteSlider = 'transform:translateX(0px)';
+                            this.delBtnStyle = 'width:40px;right:-0px';
+                        } else {
+                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                            this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
+                            if (this.disX > itemWd - 20) {
+                                this.deleteSlider = 'transform:translateX(-' + itemWd + 'px)';
+                                this.delBtnStyle = 'width:' + itemWd + 'px;right:-' + itemWd + 'px';
+                                // alert(111);
+                            }
+                        }
+                    } else {
+                        // 如果是向右滑动或者不滑动，不改变滑块的位置
+                        if (this.disX < wd / 3 || this.disX == 0) {
+                            this.deleteSlider = 'transform:translateX(0px)';
+                            // parentElement.dataset.type = 0;
+                            // 大于0，表示左滑了，此时滑块开始滑动
+                        } else if (this.disX > wd / 3) {
+                            //具体滑动距离我取的是 手指偏移距离*5。
+                            // parentElement.dataset.type = 1;
+                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+
+                            // 最大也只能等于删除按钮宽度
+                            if (this.disX * 1.5 >= wd) {
+                                // parentElement.dataset.type = 1;
+                                if (wd >= itemWd) {
+                                    this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                                } else {
+                                    this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        touchEnd(e) {
+            e = e || event;
+            // let parentElement = e.currentTarget.parentElement;
+            let itemWd = this.$refs.slipItem.offsetWidth;
+            let wd = this.onlyDel ? 40 : this.buttonWidth;
+            if (e.changedTouches.length == 1) {
+                let endY = e.changedTouches[0].clientY;
+                if (Math.abs(this.startY - endY) < 40) {
+                    let endX = e.changedTouches[0].clientX;
+                    this.disX = this.startX - endX;
+                    console.log('touchEndthis.disX:', this.disX);
+                    if (this.onlyDel) {
+                        // this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                        // this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
+                        if (this.disX < wd) {
+                            // parentElement.dataset.type = 0;
+                            this.deleteSlider = 'transform:translateX(0px)';
+                            this.delBtnStyle = 'width:40px;right:-0px';
+                        } else {
+                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                            this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
+                            if (this.disX > itemWd - 20) {
+                                this.deleteSlider = 'transform:translateX(-' + itemWd + 'px)';
+                                this.delBtnStyle = 'width:' + itemWd + 'px;right:-' + itemWd + 'px';
+                                this.$emit('oneDelete', e);
+                            }
+                        }
+                    } else {
+                        //如果距离小于删除按钮一半,强行回到起点
+
+                        if (this.disX < wd / 3) {
+                            // parentElement.dataset.type = 0;
+                            this.deleteSlider = 'transform:translateX(0px)';
+                        } else {
+                            //大于一半 滑动到最大值
+                            // parentElement.dataset.type = 1;
+                            if (wd >= itemWd) {
+                                //按钮数不可超出整行宽度
+                                this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                            } else {
+                                this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                            }
+                        }
+                    }
+
+                    // console.log('touchEnd:dataset', parentElement.dataset.type);
+                }
+            }
+        },
+        restSlide() {
+            let listItems = document.querySelectorAll('.leftslip-item');
+            let delBtns = document.querySelectorAll('.delbtn');
+            console.log(delBtns);
+            // 复位
+            for (let i = 0; i < listItems.length; i++) {
+                listItems[i].style = 'transform:translateX(0' + 'px)';
+            }
+            for (let j = 0; j < delBtns.length; j++) {
+                delBtns[j].style = '';
+            }
+            // this.delBtnStyle = '';
+        }
+    }
+};
+</script>
diff --git a/types/nutui.d.ts b/types/nutui.d.ts
index 69fbba1c5d..88f6a3aaa1 100644
--- a/types/nutui.d.ts
+++ b/types/nutui.d.ts
@@ -64,3 +64,4 @@ export declare class Avatar extends UIComponent {}
 export declare class Infiniteloading extends UIComponent {}
 export declare class Lazyload extends UIComponent {}
 export declare class Elevator extends UIComponent {}
+export declare class SlipesideBotdeslip[Cefttonutton extends UIComponent {}

From 17e5613db673e0f4c903e7cdcc92d46c50338930 Mon Sep 17 00:00:00 2001
From: songchenglin3 <songchenglin1@jd.com>
Date: Thu, 16 Jan 2020 17:27:21 +0800
Subject: [PATCH 10/21] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8DInfiniteLoa?=
 =?UTF-8?q?ding=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=94=A8keep-alive=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E6=97=B6=E5=80=99=E6=B2=A1=E7=A7=BB=E9=99=A4=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E4=BA=8B=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/calendar/__test__/calendar.spec.js  | 8 +++++---
 src/packages/infiniteloading/infiniteloading.vue | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/packages/calendar/__test__/calendar.spec.js b/src/packages/calendar/__test__/calendar.spec.js
index e92bd5ea26..d52f0c9e90 100644
--- a/src/packages/calendar/__test__/calendar.spec.js
+++ b/src/packages/calendar/__test__/calendar.spec.js
@@ -6,7 +6,9 @@ import Vue from 'vue';
 describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
-            defaultValue: '2022-01-12'
+            defaultValue: '2022-01-12',
+            startDate: '2020-02-01',
+            endDate:'2028-04-11'
         }
     });
 
@@ -19,7 +21,7 @@ describe('Calendar.vue', () => {
 
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2021年01月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年01月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
         })
     });
@@ -27,7 +29,7 @@ describe('Calendar.vue', () => {
     it('选择日期', () => {
         wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('6');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('5');
 
         })
     });
diff --git a/src/packages/infiniteloading/infiniteloading.vue b/src/packages/infiniteloading/infiniteloading.vue
index a8453ee99b..608dec9c96 100644
--- a/src/packages/infiniteloading/infiniteloading.vue
+++ b/src/packages/infiniteloading/infiniteloading.vue
@@ -136,6 +136,11 @@ export default {
         }
     },
 
+    deactivated() {
+        window.removeEventListener('scroll', this.handleScroll, false);
+        window.removeEventListener('resize', this.handleScroll, false);
+    },
+
     destroyed() {
         window.removeEventListener('scroll', this.handleScroll, false);
         window.removeEventListener('resize', this.handleScroll, false);

From c05a9cb7598a4cf0e1c7a3759e1ba027d40ed5fd Mon Sep 17 00:00:00 2001
From: songchenglin3 <songchenglin1@jd.com>
Date: Thu, 16 Jan 2020 17:37:07 +0800
Subject: [PATCH 11/21] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8DInfiniteLoa?=
 =?UTF-8?q?ding=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=94=A8keep-alive=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E6=97=B6=E5=80=99=E6=B2=A1=E7=A7=BB=E9=99=A4=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E4=BA=8B=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/infiniteloading/infiniteloading.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/packages/infiniteloading/infiniteloading.vue b/src/packages/infiniteloading/infiniteloading.vue
index 608dec9c96..93a58833ba 100644
--- a/src/packages/infiniteloading/infiniteloading.vue
+++ b/src/packages/infiniteloading/infiniteloading.vue
@@ -136,6 +136,10 @@ export default {
         }
     },
 
+    activated() {
+        this.scrollListener();
+    },
+
     deactivated() {
         window.removeEventListener('scroll', this.handleScroll, false);
         window.removeEventListener('resize', this.handleScroll, false);

From d77f6187dbb3af70d2742b906e71f4fa82ef9669 Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Thu, 16 Jan 2020 18:02:49 +0800
Subject: [PATCH 12/21] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8DInfiniteLoa?=
 =?UTF-8?q?ding=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=94=A8keep-alive=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E6=97=B6=E9=A6=96=E6=AC=A1=E7=9B=91=E5=90=AC2?=
 =?UTF-8?q?=E6=AC=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/infiniteloading/infiniteloading.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/packages/infiniteloading/infiniteloading.vue b/src/packages/infiniteloading/infiniteloading.vue
index 93a58833ba..440e738406 100644
--- a/src/packages/infiniteloading/infiniteloading.vue
+++ b/src/packages/infiniteloading/infiniteloading.vue
@@ -137,10 +137,14 @@ export default {
     },
 
     activated() {
-        this.scrollListener();
+        if(this.keepAlive){
+            this.keepAlive = false;
+            this.scrollListener();
+        }
     },
 
     deactivated() {
+        this.keepAlive = true;
         window.removeEventListener('scroll', this.handleScroll, false);
         window.removeEventListener('resize', this.handleScroll, false);
     },

From 9b22c39f01196d2026c72eab1200dffa0fb27a63 Mon Sep 17 00:00:00 2001
From: songchenglin3 <songchenglin1@jd.com>
Date: Thu, 16 Jan 2020 18:24:22 +0800
Subject: [PATCH 13/21] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8Ddatepicker?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=83=A8=E5=88=86=E6=89=8B=E6=9C=BA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8D=E5=85=BC=E5=AE=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/picker/picker.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/packages/picker/picker.scss b/src/packages/picker/picker.scss
index 8af758c788..7c65aa6590 100644
--- a/src/packages/picker/picker.scss
+++ b/src/packages/picker/picker.scss
@@ -71,6 +71,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        height: 36px;
         line-height: 36px;
         color: $title-color;
         font-size: $font-size-base;

From 71fa7b3fa59dc2ba6bb40d10f2af674a7e463fb3 Mon Sep 17 00:00:00 2001
From: yewenwen <yewenwen1@jd.com>
Date: Fri, 17 Jan 2020 18:33:19 +0800
Subject: [PATCH 14/21] =?UTF-8?q?fix:=E5=B7=A6=E6=BB=91=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                     | 1023 +++++++++++++--------------
 src/packages/leftslip/demo.vue      |   63 +-
 src/packages/leftslip/doc.md        |   99 ++-
 src/packages/leftslip/leftslip.scss |   14 +-
 src/packages/leftslip/leftslip.vue  |   94 ++-
 5 files changed, 678 insertions(+), 615 deletions(-)

diff --git a/src/config.json b/src/config.json
index 9169ced462..5d886de72e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1,517 +1,510 @@
 {
-  "sorts": [
-    "数据展示",
-    "数据录入",
-    "操作反馈",
-    "导航组件",
-    "布局组件",
-    "基础组件"
-  ],
-  "packages": [
-    {
-      "name": "Cell",
-      "version": "1.0.0",
-      "sort": "4",
-      "chnName": "列表项",
-      "type": "component",
-      "showDemo": true,
-      "desc": "列表项，可组合成列表",
-      "author": "Frans"
-    },
-    {
-      "name": "Dialog",
-      "version": "1.0.0",
-      "sort": "2",
-      "chnName": "对话框",
-      "type": "method",
-      "showDemo": true,
-      "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
-      "star": 5,
-      "author": "Frans"
-    },
-    {
-      "name": "Icon",
-      "version": "1.0.0",
-      "sort": "5",
-      "chnName": "图标",
-      "type": "component",
-      "showDemo": true,
-      "desc": "网页小图标。",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Toast",
-      "sort": "2",
-      "chnName": "吐司",
-      "desc": "轻提示。",
-      "type": "method",
-      "showDemo": true,
-      "star": 4,
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ActionSheet",
-      "sort": "2",
-      "chnName": "动作面板",
-      "desc": "从底部弹出的动作菜单面板。",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Tab",
-      "sort": "3",
-      "chnName": "选项卡",
-      "desc": "常用于平级区域大块内容的的收纳和展现。",
-      "type": "component",
-      "showDemo": true,
-      "star": 3,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TabPanel",
-      "sort": "3",
-      "chnName": "选项卡",
-      "desc": "标签栏 选项卡组件",
-      "type": "component",
-      "showDemo": false,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TabBar",
-      "sort": "3",
-      "chnName": "标签栏",
-      "desc": "用于不同模块以之间的切换",
-      "type": "component",
-      "showDemo": true,
-      "star": 3,
-      "author": "甄玉磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Calendar",
-      "sort": "1",
-      "chnName": "日历",
-      "desc": "日历",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "DatePicker",
-      "sort": "1",
-      "chnName": "日期选择",
-      "desc": "日期选择",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "NavBar",
-      "sort": "3",
-      "chnName": "导航栏",
-      "desc": "移动端头部导航栏",
-      "type": "component",
-      "showDemo": true,
-      "author": "lishaoqi"
-    },
-    {
-      "version": "1.0.0",
-      "name": "NoticeBar",
-      "sort": "3",
-      "chnName": "公告栏",
-      "desc": "移动端公告栏",
-      "type": "component",
-      "showDemo": true,
-      "author": "wangyue"
-    },
-    {
-      "name": "Switch",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "开关",
-      "type": "component",
-      "showDemo": true,
-      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Slider",
-      "sort": "1",
-      "chnName": "滑块",
-      "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。",
-      "type": "component",
-      "showDemo": true,
-      "star": 4,
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Range",
-      "sort": "1",
-      "chnName": "区间选择器",
-      "desc": "区间选择器组件",
-      "type": "component",
-      "showDemo": true,
-      "star": 4,
-      "author": "famanoder"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Picker",
-      "sort": "1",
-      "chnName": "拾取器",
-      "desc": "提供多个选项集合供用户选择其中一项。",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Progress",
-      "sort": "2",
-      "chnName": "进度条",
-      "desc": "展示操作或任务的当前进度，比如上传文件。",
-      "type": "component",
-      "showDemo": true,
-      "author": "张毓飞"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Price",
-      "sort": "0",
-      "chnName": "商品价格",
-      "desc": "商品价格组件，支持小数点前后应用不同样式、千位分隔、人民币符号等功能",
-      "type": "component",
-      "showDemo": true,
-      "author": "liaoyanli5"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Flex",
-      "sort": "4",
-      "chnName": "Flex布局",
-      "desc": "Flex布局速简便地创建布局",
-      "type": "component",
-      "showDemo": true,
-      "author": "秦伟伟"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Col",
-      "sort": "4",
-      "chnName": "Flex布局",
-      "desc": "Flex布局速简便地创建布局",
-      "type": "component",
-      "showDemo": false,
-      "author": "秦伟伟"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Row",
-      "sort": "4",
-      "chnName": "Flex布局",
-      "desc": "Flex布局速简便地创建布局",
-      "type": "component",
-      "showDemo": false,
-      "author": "秦伟伟"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Steps",
-      "sort": "0",
-      "chnName": "步骤条",
-      "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。",
-      "type": "component",
-      "showDemo": true,
-      "author": "宋其斌"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Button",
-      "sort": "5",
-      "chnName": "按钮",
-      "desc": "各式各样的按钮",
-      "type": "component",
-      "showDemo": true,
-      "author": "杨磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Badge",
-      "sort": "0",
-      "chnName": "徽标",
-      "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息",
-      "type": "component",
-      "showDemo": true,
-      "author": "杨磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Rate",
-      "sort": "1",
-      "chnName": "评分",
-      "desc": "用于快速的评级操作，或对评价进行展示。",
-      "type": "component",
-      "showDemo": true,
-      "star": 4,
-      "author": "永无止晋"
-    },
-    {
-      "version": "1.0.1",
-      "name": "Swiper",
-      "chnName": "滑动切换",
-      "sort": "0",
-      "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
-      "type": "component",
-      "showDemo": true,
-      "star": 5,
-      "author": "wangnan31"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Menu",
-      "sort": "3",
-      "chnName": "菜单",
-      "desc": "菜单",
-      "type": "component",
-      "showDemo": true,
-      "author": "苏子刚"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Stepper",
-      "chnName": "步进器",
-      "desc": "通过点击按钮控制数字加减",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "star": 3,
-      "author": "famanoder"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ButtonGroup",
-      "chnName": "按钮组",
-      "desc": "用于页面底部的按钮组",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "杨磊"
-    },
-    {
-      "version": "1.0.0",
-      "name": "SearchBar",
-      "chnName": "搜索栏",
-      "desc": "搜索栏",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "lemon"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ImagePicker",
-      "sort": "1",
-      "chnName": "图片选择器",
-      "desc": "图片选择器",
-      "type": "component",
-      "showDemo": true,
-      "author": "苏子刚"
-    },
-    {
-      "name": "Radio",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "单选按钮",
-      "type": "component",
-      "showDemo": true,
-      "desc": "单选按钮，可组合成单选按钮组",
-      "author": "Frans"
-    },
-    {
-      "name": "RadioGroup",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "单选按钮组",
-      "type": "component",
-      "showDemo": false,
-      "desc": "单选按钮组",
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "CheckBox",
-      "sort": "1",
-      "chnName": "复选按钮",
-      "desc": "复选多个选项",
-      "type": "component",
-      "showDemo": true,
-      "author": "Vicky.Ye"
-    },
-    {
-      "version": "1.0.0",
-      "name": "CheckBoxGroup",
-      "sort": "1",
-      "chnName": "复选按钮组",
-      "desc": "成组出现的复选按钮组件",
-      "type": "component",
-      "showDemo": true,
-      "author": "Vicky.Ye"
-    },
-    {
-      "version": "1.0.0",
-      "name": "ShortPassword",
-      "chnName": "短密码",
-      "des": "短密码",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "wangnan31"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Skeleton",
-      "chnName": "骨架屏",
-      "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "wangnan31"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Scroller",
-      "chnName": "滚动",
-      "desc": "滚动组件",
-      "type": "component",
-      "sort": "0",
-      "star": 5,
-      "showDemo": true,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "BackTop",
-      "chnName": "回到顶部",
-      "desc": "用于页面内容高度过长，快捷回到顶部使用。",
-      "type": "component",
-      "sort": "2",
-      "showDemo": true,
-      "author": "永无止晋"
-    },
-    {
-      "version": "1.0.0",
-      "name": "CountDown",
-      "chnName": "倒计时",
-      "desc": "倒计时组件",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "famanoder"
-    },
-    {
-      "version": "1.0.0",
-      "name": "InfiniteLoading",
-      "chnName": "无限加载",
-      "desc": "无限加载",
-      "type": "component",
-      "sort": "0",
-      "star": 4,
-      "showDemo": true,
-      "author": "iris"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Uploader",
-      "chnName": "上传",
-      "desc": "文件上传组件",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "林如风"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TextInput",
-      "chnName": "文本框",
-      "desc": "单行文本框",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "Frans"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Avatar",
-      "chnName": "头像",
-      "desc": "用来表示用户或事物，支持图片或字符展示。",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "zhenyulei"
-    },
-    {
-      "version": "1.0.0",
-      "name": "lazyload",
-      "chnName": "图片懒加载",
-      "desc": "图片懒加载",
-      "type": "component",
-      "sort": "0",
-      "showDemo": true,
-      "author": "zhuzhida"
-    },
-    {
-      "version": "1.0.0",
-      "name": "TextBox",
-      "chnName": "文本域",
-      "desc": "文本域",
-      "type": "component",
-      "sort": "1",
-      "showDemo": true,
-      "author": "guoxiaoxiao"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Elevator",
-      "chnName": "电梯楼层",
-      "desc": "类似于电梯楼层，组件可以跟着右侧索引而滑动",
-      "type": "component",
-      "sort": "3",
-      "showDemo": true,
-      "author": "zhenyulei"
-    },
-    {
-      "version": "1.0.0",
-      "name": "Popup",
-      "chnName": "弹出层",
-      "desc": "弹出层",
-      "type": "component",
-      "sort": "5",
-      "showDemo": true,
-      "author": "杨凯旋"
-    },
-    {
-      "version": "1.0.0",
-      "name": "LeftSlip",
-      "chnName": "侧滑删除",
-      "desc": "手势侧滑删除元素",
-      "type": "component",
-      "sort": "2",
-      "showDemo": true,
-      "author": "vickyYE"
-    }
-  ]
+    "sorts": ["数据展示", "数据录入", "操作反馈", "导航组件", "布局组件", "基础组件"],
+    "packages": [
+        {
+            "name": "Cell",
+            "version": "1.0.0",
+            "sort": "4",
+            "chnName": "列表项",
+            "type": "component",
+            "showDemo": true,
+            "desc": "列表项，可组合成列表",
+            "author": "Frans"
+        },
+        {
+            "name": "Dialog",
+            "version": "1.0.0",
+            "sort": "2",
+            "chnName": "对话框",
+            "type": "method",
+            "showDemo": true,
+            "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
+            "star": 5,
+            "author": "Frans"
+        },
+        {
+            "name": "Icon",
+            "version": "1.0.0",
+            "sort": "5",
+            "chnName": "图标",
+            "type": "component",
+            "showDemo": true,
+            "desc": "网页小图标。",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Toast",
+            "sort": "2",
+            "chnName": "吐司",
+            "desc": "轻提示。",
+            "type": "method",
+            "showDemo": true,
+            "star": 4,
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ActionSheet",
+            "sort": "2",
+            "chnName": "动作面板",
+            "desc": "从底部弹出的动作菜单面板。",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Tab",
+            "sort": "3",
+            "chnName": "选项卡",
+            "desc": "常用于平级区域大块内容的的收纳和展现。",
+            "type": "component",
+            "showDemo": true,
+            "star": 3,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TabPanel",
+            "sort": "3",
+            "chnName": "选项卡",
+            "desc": "标签栏 选项卡组件",
+            "type": "component",
+            "showDemo": false,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TabBar",
+            "sort": "3",
+            "chnName": "标签栏",
+            "desc": "用于不同模块以之间的切换",
+            "type": "component",
+            "showDemo": true,
+            "star": 3,
+            "author": "甄玉磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Calendar",
+            "sort": "1",
+            "chnName": "日历",
+            "desc": "日历",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "DatePicker",
+            "sort": "1",
+            "chnName": "日期选择",
+            "desc": "日期选择",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "NavBar",
+            "sort": "3",
+            "chnName": "导航栏",
+            "desc": "移动端头部导航栏",
+            "type": "component",
+            "showDemo": true,
+            "author": "lishaoqi"
+        },
+        {
+            "version": "1.0.0",
+            "name": "NoticeBar",
+            "sort": "3",
+            "chnName": "公告栏",
+            "desc": "移动端公告栏",
+            "type": "component",
+            "showDemo": true,
+            "author": "wangyue"
+        },
+        {
+            "name": "Switch",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "开关",
+            "type": "component",
+            "showDemo": true,
+            "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Slider",
+            "sort": "1",
+            "chnName": "滑块",
+            "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。",
+            "type": "component",
+            "showDemo": true,
+            "star": 4,
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Range",
+            "sort": "1",
+            "chnName": "区间选择器",
+            "desc": "区间选择器组件",
+            "type": "component",
+            "showDemo": true,
+            "star": 4,
+            "author": "famanoder"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Picker",
+            "sort": "1",
+            "chnName": "拾取器",
+            "desc": "提供多个选项集合供用户选择其中一项。",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Progress",
+            "sort": "2",
+            "chnName": "进度条",
+            "desc": "展示操作或任务的当前进度，比如上传文件。",
+            "type": "component",
+            "showDemo": true,
+            "author": "张毓飞"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Price",
+            "sort": "0",
+            "chnName": "商品价格",
+            "desc": "商品价格组件，支持小数点前后应用不同样式、千位分隔、人民币符号等功能",
+            "type": "component",
+            "showDemo": true,
+            "author": "liaoyanli5"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Flex",
+            "sort": "4",
+            "chnName": "Flex布局",
+            "desc": "Flex布局速简便地创建布局",
+            "type": "component",
+            "showDemo": true,
+            "author": "秦伟伟"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Col",
+            "sort": "4",
+            "chnName": "Flex布局",
+            "desc": "Flex布局速简便地创建布局",
+            "type": "component",
+            "showDemo": false,
+            "author": "秦伟伟"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Row",
+            "sort": "4",
+            "chnName": "Flex布局",
+            "desc": "Flex布局速简便地创建布局",
+            "type": "component",
+            "showDemo": false,
+            "author": "秦伟伟"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Steps",
+            "sort": "0",
+            "chnName": "步骤条",
+            "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。",
+            "type": "component",
+            "showDemo": true,
+            "author": "宋其斌"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Button",
+            "sort": "5",
+            "chnName": "按钮",
+            "desc": "各式各样的按钮",
+            "type": "component",
+            "showDemo": true,
+            "author": "杨磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Badge",
+            "sort": "0",
+            "chnName": "徽标",
+            "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息",
+            "type": "component",
+            "showDemo": true,
+            "author": "杨磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Rate",
+            "sort": "1",
+            "chnName": "评分",
+            "desc": "用于快速的评级操作，或对评价进行展示。",
+            "type": "component",
+            "showDemo": true,
+            "star": 4,
+            "author": "永无止晋"
+        },
+        {
+            "version": "1.0.1",
+            "name": "Swiper",
+            "chnName": "滑动切换",
+            "sort": "0",
+            "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+            "type": "component",
+            "showDemo": true,
+            "star": 5,
+            "author": "wangnan31"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Menu",
+            "sort": "3",
+            "chnName": "菜单",
+            "desc": "菜单",
+            "type": "component",
+            "showDemo": true,
+            "author": "苏子刚"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Stepper",
+            "chnName": "步进器",
+            "desc": "通过点击按钮控制数字加减",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "star": 3,
+            "author": "famanoder"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ButtonGroup",
+            "chnName": "按钮组",
+            "desc": "用于页面底部的按钮组",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "杨磊"
+        },
+        {
+            "version": "1.0.0",
+            "name": "SearchBar",
+            "chnName": "搜索栏",
+            "desc": "搜索栏",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "lemon"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ImagePicker",
+            "sort": "1",
+            "chnName": "图片选择器",
+            "desc": "图片选择器",
+            "type": "component",
+            "showDemo": true,
+            "author": "苏子刚"
+        },
+        {
+            "name": "Radio",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "单选按钮",
+            "type": "component",
+            "showDemo": true,
+            "desc": "单选按钮，可组合成单选按钮组",
+            "author": "Frans"
+        },
+        {
+            "name": "RadioGroup",
+            "version": "1.0.0",
+            "sort": "1",
+            "chnName": "单选按钮组",
+            "type": "component",
+            "showDemo": false,
+            "desc": "单选按钮组",
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "CheckBox",
+            "sort": "1",
+            "chnName": "复选按钮",
+            "desc": "复选多个选项",
+            "type": "component",
+            "showDemo": true,
+            "author": "Vicky.Ye"
+        },
+        {
+            "version": "1.0.0",
+            "name": "CheckBoxGroup",
+            "sort": "1",
+            "chnName": "复选按钮组",
+            "desc": "成组出现的复选按钮组件",
+            "type": "component",
+            "showDemo": true,
+            "author": "Vicky.Ye"
+        },
+        {
+            "version": "1.0.0",
+            "name": "ShortPassword",
+            "chnName": "短密码",
+            "des": "短密码",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "wangnan31"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Skeleton",
+            "chnName": "骨架屏",
+            "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "wangnan31"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Scroller",
+            "chnName": "滚动",
+            "desc": "滚动组件",
+            "type": "component",
+            "sort": "0",
+            "star": 5,
+            "showDemo": true,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "BackTop",
+            "chnName": "回到顶部",
+            "desc": "用于页面内容高度过长，快捷回到顶部使用。",
+            "type": "component",
+            "sort": "2",
+            "showDemo": true,
+            "author": "永无止晋"
+        },
+        {
+            "version": "1.0.0",
+            "name": "CountDown",
+            "chnName": "倒计时",
+            "desc": "倒计时组件",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "famanoder"
+        },
+        {
+            "version": "1.0.0",
+            "name": "InfiniteLoading",
+            "chnName": "无限加载",
+            "desc": "无限加载",
+            "type": "component",
+            "sort": "0",
+            "star": 4,
+            "showDemo": true,
+            "author": "iris"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Uploader",
+            "chnName": "上传",
+            "desc": "文件上传组件",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "林如风"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TextInput",
+            "chnName": "文本框",
+            "desc": "单行文本框",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "Frans"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Avatar",
+            "chnName": "头像",
+            "desc": "用来表示用户或事物，支持图片或字符展示。",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "zhenyulei"
+        },
+        {
+            "version": "1.0.0",
+            "name": "lazyload",
+            "chnName": "图片懒加载",
+            "desc": "图片懒加载",
+            "type": "component",
+            "sort": "0",
+            "showDemo": true,
+            "author": "zhuzhida"
+        },
+        {
+            "version": "1.0.0",
+            "name": "TextBox",
+            "chnName": "文本域",
+            "desc": "文本域",
+            "type": "component",
+            "sort": "1",
+            "showDemo": true,
+            "author": "guoxiaoxiao"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Elevator",
+            "chnName": "电梯楼层",
+            "desc": "类似于电梯楼层，组件可以跟着右侧索引而滑动",
+            "type": "component",
+            "sort": "3",
+            "showDemo": true,
+            "author": "zhenyulei"
+        },
+        {
+            "version": "1.0.0",
+            "name": "Popup",
+            "chnName": "弹出层",
+            "desc": "弹出层",
+            "type": "component",
+            "sort": "5",
+            "showDemo": true,
+            "author": "杨凯旋"
+        },
+        {
+            "version": "1.0.0",
+            "name": "LeftSlip",
+            "chnName": "左滑删除",
+            "desc": "手势左滑删除元素",
+            "type": "component",
+            "sort": "2",
+            "showDemo": true,
+            "author": "vickyYE"
+        }
+    ]
 }
diff --git a/src/packages/leftslip/demo.vue b/src/packages/leftslip/demo.vue
index 0b47511531..db8b557e78 100644
--- a/src/packages/leftslip/demo.vue
+++ b/src/packages/leftslip/demo.vue
@@ -4,7 +4,9 @@
         <div>
             <nut-leftslip>
                 <div slot="slip-main" class="slip-main">向左滑动我</div>
-                <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
+                <div slot="slipbtns" class="slipbtns"
+                    ><a href="javascript:;" @click="delSlipItem">删除</a><a href="javascript:;" class="favorite">收藏</a></div
+                >
             </nut-leftslip>
         </div>
         <p>单个按钮</p>
@@ -13,33 +15,29 @@
                 <div slot="slip-main" class="slip-main">单一按钮</div>
                 <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
             </nut-leftslip>
-            <nut-leftslip onlyDel @oneDelete="oneDel($event)">
-                <div slot="slip-main" class="slip-main">向左滑一键删除</div>
-                <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+            <nut-leftslip onlyDel @oneDelete="oneDel" ref="leftslip1">
+                <div slot="slip-main" class="slip-main">向左滑滑滑~一键删除</div>
             </nut-leftslip>
         </div>
         <p>多个按钮</p>
         <div>
             <nut-leftslip>
-                <div slot="slip-main" class="slip-main">
-                    {{ 111 }}
-                </div>
+                <div slot="slip-main" class="slip-main">向左滑动，多个按钮有超出限制哦~</div>
                 <div slot="slipbtns" class="slipbtns"
                     ><a href="javascript:;">删除</a>
                     <a href="javascript:;" class="favorite">收藏</a>
-                    <a href="javascript:;" class="favorite">收藏</a>
-                    <a href="javascript:;" class="favorite">收藏</a>
-                    <a href="javascript:;" class="favorite">收藏</a>
-                    <a href="javascript:;" class="favorite">收藏1</a>
+                    <a href="javascript:;" class="favorite org1"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
+                    <a href="javascript:;" class="favorite org2"><nut-icon type="cross" size="15px" color="#fff"></nut-icon></a>
+                    <a href="javascript:;" class="favorite org3">确认</a>
+                    <a href="javascript:;" class="favorite org1">加购物车</a>
                     <a href="javascript:;" class="favorite">收藏2</a>
                     <a href="javascript:;" class="favorite">收藏3</a>
-                    <a href="javascript:;" class="favorite">收藏4</a>
                 </div>
             </nut-leftslip>
         </div>
         <p>列表</p>
         <div>
-            <nut-leftslip v-for="(item, index) in list" :key="index">
+            <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
                 <div slot="slip-main" class="slip-main">
                     <div class="addr">
                         <p class="name-mobile">{{ item.tel }}</p>
@@ -61,26 +59,30 @@ export default {
     data() {
         return {
             list: [
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
-                {addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
+                {id: 'add1', addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
+                {id: 'add2', addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
+                {id: 'add3', addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
+                {id: 'add4', addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
+                {id: 'add5', addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
+                {id: 'add6', addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
+                {id: 'add7', addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
+                {id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
             ]
         };
     },
     methods: {
+        delSlipItem(e) {
+            console.log(e.target);
+        },
         delItem(index) {
-            console.log(1);
             this.list.splice(index, 1);
         },
-        oneDel(ev) {
-            console.log(ev.target);
-            alert('是否删除？');
-            ev.target.remove();
+        onlyDelBtnClick(par) {
+            // console.log(par);
+            par.remove();
+        },
+        oneDel(par) {
+            par.remove();
         }
     }
 };
@@ -132,6 +134,15 @@ export default {
         &.favorite {
             background: #ccc;
         }
+        &.org1 {
+            background: #ff9800;
+        }
+        &.org2 {
+            background: #ffc107;
+        }
+        &.org3 {
+            background: #ff5722;
+        }
     }
 }
 </style>
diff --git a/src/packages/leftslip/doc.md b/src/packages/leftslip/doc.md
index d35c11e617..167032fd62 100644
--- a/src/packages/leftslip/doc.md
+++ b/src/packages/leftslip/doc.md
@@ -18,45 +18,102 @@
 ```html
 <div>
     <nut-leftslip>
-        <div slot="slip-main" class="slip-main">
-            {{ 222 }}
-        </div>
+        <div slot="slip-main" class="slip-main">单一按钮</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
     </nut-leftslip>
 </div>
 ```
 
+### 单个按钮左滑一键删除
+
+```html
+<nut-leftslip onlyDel @oneDelete="oneDel">
+    <div slot="slip-main" class="slip-main">向左滑滑滑~一键删除</div>
+</nut-leftslip>
+```
+
+```javascript
+export default {
+    oneDel(par) {
+        par.remove();
+    }
+};
+```
+
+### 多个按钮
+
+```html
+<div>
+    <nut-leftslip>
+        <div slot="slip-main" class="slip-main">向左滑动，多个按钮有超出限制哦~</div>
+        <div slot="slipbtns" class="slipbtns"
+            ><a href="javascript:;">删除</a>
+            <a href="javascript:;" class="favorite">收藏</a>
+            <a href="javascript:;" class="favorite org1"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
+            <a href="javascript:;" class="favorite org2"><nut-icon type="cross" size="15px" color="#fff"></nut-icon></a>
+            <a href="javascript:;" class="favorite org3">确认</a>
+            <a href="javascript:;" class="favorite org1">加购物车</a>
+            <a href="javascript:;" class="favorite">收藏2</a>
+            <a href="javascript:;" class="favorite">收藏3</a>
+        </div>
+    </nut-leftslip>
+</div>
+```
+
 ### 列表
 
 ```html
-<nut-leftslip @slide-left="slideLeft" @slide-right="slideRight" @slide-no="slideNo" during="0.2">
-    <div slot="slip-main" class="slip-main">
-        <div class="addr">
-            <p class="name-mobile">159****8888</p>
-            <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
+<div>
+    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
+        <div slot="slip-main" class="slip-main">
+            <div class="addr">
+                <p class="name-mobile">159****8888</p>
+                <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座1</p>
+            </div>
+            <a class="addr-edit" href="javascript:void(0)"></a>
         </div>
-        <a class="addr-edit" href="javascript:void(0)"></a>
-    </div>
-    <div slot="slipbtns" class="slipbtns"> <a href="javascript:;">删除</a><a href="javascript:;">收藏</a> </div>
-</nut-leftslip>
+        <div slot="slipbtns" class="slipbtns"
+            ><a href="javascript:;" @click="delItem(index)">删除</a><a href="javascript:;" class="favorite">收藏</a></div
+        >
+    </nut-leftslip>
+</div>
 ```
 
 ```javascript
 export default {
     components: {},
     data() {
-        return {};
+        return {
+            list: [
+                {id: 'add1', addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
+                {id: 'add2', addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
+                {id: 'add3', addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
+                {id: 'add4', addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
+                {id: 'add5', addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
+                {id: 'add6', addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
+                {id: 'add7', addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
+                {id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
+            ]
+        };
     },
     methods: {
-        slideLeft() {
-            console.log('左划了');
-        },
-        slideRight() {
-            console.log('右划了');
-        },
-        slideNo() {
-            console.log('没有划动');
+        delItem(index) {
+            this.list.splice(index, 1);
         }
     }
 };
 ```
+
+## Prop
+
+| 字段           | 说明                                           | 类型    | 默认值 |
+| -------------- | ---------------------------------------------- | ------- | ------ |
+| slot:slip-main | 列表主内容自定义区域                           | html    | -      |
+| slot:slipbtns  | 左滑按钮自定义区域                             | html    | -      |
+| onlyDel        | 显示只有一个删除按钮的列表样式（支持一键删除） | Boolean | false  |
+
+## Event
+
+| 字段      | 说明                       | 回调参数 |
+| --------- | -------------------------- | -------- |
+| oneDelete | 单一删除按钮模式下删除事件 | 无       |
diff --git a/src/packages/leftslip/leftslip.scss b/src/packages/leftslip/leftslip.scss
index f10aeb7fae..06b2431ade 100644
--- a/src/packages/leftslip/leftslip.scss
+++ b/src/packages/leftslip/leftslip.scss
@@ -17,9 +17,9 @@
     }
     .delbtn{
         position: absolute;
-        right: -80px;
+        right: -50px;
         top: 0;
-        width: 40px;
+        min-width: 40px;
         height: 100%;
         display: flex;
         align-items: center;
@@ -31,7 +31,13 @@
         font-size: 14px;
         span{
             // width: 40px;
-            display: block;
+            display: flex;
+            position: absolute;
+            right: 0;
+            width: 50px;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
         }
     }
     .slipbtns {
@@ -44,7 +50,6 @@
         align-items: center;
         justify-content: center;
         transform: translateX(100%);
-        
         a {
             display: flex;
             width: 40px;
@@ -55,6 +60,7 @@
             font-size: 14px;
             align-items: center;
             justify-content: center;
+            text-align: center;
         }
     }
 }
diff --git a/src/packages/leftslip/leftslip.vue b/src/packages/leftslip/leftslip.vue
index 81db088acd..89b94caffe 100644
--- a/src/packages/leftslip/leftslip.vue
+++ b/src/packages/leftslip/leftslip.vue
@@ -4,10 +4,13 @@
             <div @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
                 <slot name="slip-main"></slot>
             </div>
-            <div>
-                <!-- <div>删除</div> -->
-                <div v-if="onlyDel" :style="delBtnStyle" @click="handleClick" class="delbtn" ref="delBtn"><span>删除</span></div>
-                <slot name="slipbtns" v-else @click="handleClick"></slot>
+
+            <div v-if="onlyDel" class="delbtn" ref="delBtn"
+                ><div :style="delBtnStyle" class="trans"></div><span @click.prevent="onlyDelClick($event)">删除</span></div
+            >
+            <div v-else>
+                <!-- <a @click.prevent="onlyDelClick($event)">删除</a> -->
+                <slot name="slipbtns"></slot>
             </div>
         </div>
     </div>
@@ -16,18 +19,6 @@
 export default {
     name: 'nut-leftslip',
     props: {
-        during: {
-            type: [Number, String],
-            default: 1
-        },
-        isClickRestore: {
-            type: [Boolean],
-            default: true
-        },
-        customClass: {
-            type: String,
-            default: ''
-        },
         onlyDel: {
             type: [Boolean],
             default: false
@@ -55,6 +46,11 @@ export default {
                 this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
             }
         });
+        var that = this;
+        this.$on('bridge', () => {
+            that.restSlide();
+        }); //设置接收父组件的方法
+
         window.addEventListener('scroll', this.handleScroll, true);
     },
     beforeDestroy() {
@@ -68,7 +64,12 @@ export default {
             }
             // this.restSlide();
         },
-        handleClick(v) {
+        handleClick() {
+            this.restSlide();
+        },
+        onlyDelClick() {
+            // this.$emit('onlyDelBtnClick', this.$refs.slipItem);
+            this.$emit('oneDelete', this.$refs.slipItem);
             this.restSlide();
         },
         touchStart(e) {
@@ -99,28 +100,21 @@ export default {
                     this.disX = this.startX - this.moveX;
                     // console.log(this.disX);
                     if (this.onlyDel) {
-                        //一键删除
-                        this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                        this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
-                        if (this.disX < wd || this.disX == 0) {
+                        //单一删除，左滑一键删除
+                        if (this.disX < 0 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
-                            this.delBtnStyle = 'width:40px;right:-0px';
-                        } else {
-                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                            this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
-                            if (this.disX > itemWd - 20) {
-                                this.deleteSlider = 'transform:translateX(-' + itemWd + 'px)';
-                                this.delBtnStyle = 'width:' + itemWd + 'px;right:-' + itemWd + 'px';
-                                // alert(111);
-                            }
+                            // parentElement.dataset.type = 0;
+                            // 大于0，表示左滑了，此时滑块开始滑动
                         }
+                        this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                        this.delBtnStyle = 'width:' + this.disX + 'px';
                     } else {
                         // 如果是向右滑动或者不滑动，不改变滑块的位置
-                        if (this.disX < wd / 3 || this.disX == 0) {
+                        if (this.disX < wd / 4 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                             // parentElement.dataset.type = 0;
                             // 大于0，表示左滑了，此时滑块开始滑动
-                        } else if (this.disX > wd / 3) {
+                        } else if (this.disX > wd / 4) {
                             //具体滑动距离我取的是 手指偏移距离*5。
                             // parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
@@ -149,27 +143,28 @@ export default {
                 if (Math.abs(this.startY - endY) < 40) {
                     let endX = e.changedTouches[0].clientX;
                     this.disX = this.startX - endX;
-                    console.log('touchEndthis.disX:', this.disX);
+                    // console.log('touchEndthis.disX:', this.disX);
                     if (this.onlyDel) {
-                        // this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                        // this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
-                        if (this.disX < wd) {
-                            // parentElement.dataset.type = 0;
+                        //单一按钮，左滑一键删除
+                        if (this.disX < 0 || this.disX == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
-                            this.delBtnStyle = 'width:40px;right:-0px';
+                            // parentElement.dataset.type = 0;
+                            // 大于0，表示左滑了，此时滑块开始滑动
+                        } else if (this.disX < itemWd - 20) {
+                            // parentElement.dataset.type = 0;
+                            this.deleteSlider = 'transform:translateX(-50px);';
+                            this.delBtnStyle = ' width:0px;';
                         } else {
-                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                            this.delBtnStyle = 'width:' + this.disX + 'px;right:-' + this.disX + 'px';
-                            if (this.disX > itemWd - 20) {
-                                this.deleteSlider = 'transform:translateX(-' + itemWd + 'px)';
-                                this.delBtnStyle = 'width:' + itemWd + 'px;right:-' + itemWd + 'px';
-                                this.$emit('oneDelete', e);
-                            }
+                            this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
+                            this.delBtnStyle = ' width:' + itemWd + 'px;';
+                            // this.$emit('oneDelete', this.$refs.slipItem);
+                            // this.restSlide();
+                            this.onlyDelClick();
                         }
                     } else {
-                        //如果距离小于删除按钮一半,强行回到起点
+                        //如果距离小于删除按钮的四分之一,强行回到起点
 
-                        if (this.disX < wd / 3) {
+                        if (this.disX < wd / 4) {
                             // parentElement.dataset.type = 0;
                             this.deleteSlider = 'transform:translateX(0px)';
                         } else {
@@ -190,8 +185,8 @@ export default {
         },
         restSlide() {
             let listItems = document.querySelectorAll('.leftslip-item');
-            let delBtns = document.querySelectorAll('.delbtn');
-            console.log(delBtns);
+            let delBtns = document.querySelectorAll('.delbtn .trans');
+            // console.log(delBtns);
             // 复位
             for (let i = 0; i < listItems.length; i++) {
                 listItems[i].style = 'transform:translateX(0' + 'px)';
@@ -199,6 +194,7 @@ export default {
             for (let j = 0; j < delBtns.length; j++) {
                 delBtns[j].style = '';
             }
+
             // this.delBtnStyle = '';
         }
     }

From 43f99ee9c0d6cb253ea75cb293768798d43c3d3c Mon Sep 17 00:00:00 2001
From: yangkaixuan <439721838@qq.com>
Date: Tue, 4 Feb 2020 15:01:13 +0800
Subject: [PATCH 15/21] =?UTF-8?q?feat:popup=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/popup/demo.vue   | 48 ++++++++++++++++++++++++++++++++++-
 src/packages/popup/doc.md     | 12 +++++++++
 src/packages/popup/mask.vue   | 13 ++--------
 src/packages/popup/popup.scss | 47 +++++++++++++++++++++++++++++++---
 src/packages/popup/popup.vue  | 16 +++++++++++-
 5 files changed, 119 insertions(+), 17 deletions(-)

diff --git a/src/packages/popup/demo.vue b/src/packages/popup/demo.vue
index 4039d5792f..4b09f74af1 100644
--- a/src/packages/popup/demo.vue
+++ b/src/packages/popup/demo.vue
@@ -58,6 +58,49 @@
       v-model="showRight"
       :style="{ width: '20%', height: '100%' }"
     ></nut-popup>
+    <h2 class="title">关闭图标</h2>
+    <nut-cell
+      isLink
+      title="关闭图标"
+      :showIcon="true"
+      @click.native="showIcon = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      v-model="showIcon"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
+    <nut-cell
+      isLink
+      title="图标位置"
+      :showIcon="true"
+      @click.native="showIconPosition = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      close-icon-position="top-left"
+      v-model="showIconPosition"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
+
+    <nut-cell
+      isLink
+      title="自定义图标"
+      :showIcon="true"
+      @click.native="showCloseIcon = true">
+    </nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable 
+      close-icon="tick"
+      v-model="showCloseIcon"
+      :style="{ height: '20%' }"
+    ></nut-popup>
+
 
     <h2 class="title">圆角弹框</h2>
     <nut-cell
@@ -85,7 +128,10 @@ export default {
       showBottom: false,
       showLeft: false,
       showRight: false,
-      showRound: false
+      showIcon: false,
+      showRound: false,
+      showIconPosition: false,
+      showCloseIcon: false
     };
   },
   methods: {
diff --git a/src/packages/popup/doc.md b/src/packages/popup/doc.md
index 59cddf634a..1d932e2415 100644
--- a/src/packages/popup/doc.md
+++ b/src/packages/popup/doc.md
@@ -35,6 +35,14 @@ export default {
 <nut-popup v-model="show" position="top" :style="{ height: '20%' }" />
 ```
 
+## 关闭图标
+
+设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置
+
+```html
+<nut-popup position="bottom" closeable  close-icon="tick" v-model="showCloseIcon" :style="{ height: '20%' }" close-icon-position="top-left"></nut-popup>
+```
+
 ## 圆角弹窗
 
 设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式
@@ -53,3 +61,7 @@ export default {
 | duration   | 动画时长，单位秒                         | Number  | -      |
 | round      | 是否显示圆角                             | boolean | -      |
 | transition | 动画类名，等价于 transtion 的 name 属性  | string  | -      |
+| closeable  | 是否显示关闭图标                        | Boolean  | false     |
+| close-icon | 关闭图标名称                  | string  | cross     |
+| close-icon-position | 关闭图标位置，可选值为top-left bottom-left bottom-right | string  | top-right  |
+
diff --git a/src/packages/popup/mask.vue b/src/packages/popup/mask.vue
index 0b39782703..62d6139601 100644
--- a/src/packages/popup/mask.vue
+++ b/src/packages/popup/mask.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="popup-fade">
-    <div v-show="show" class="bg nut-mask" @click="onClick"></div>
+    <div v-show="show" class="bg nut-mask" ></div>
   </transition>
 </template>
 <script>
@@ -8,16 +8,7 @@ export default {
   name: "nut-popup-mask",
   props: {
     show: { type: Boolean, default: true }
-  },
-  data() {
-    return {};
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("input", false);
-    }
-  }
+  },    
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 8e2e95e1fd..de5d9311ed 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -1,8 +1,9 @@
+$popup-close-icon-margin: 16px; 
 .popup-fade-enter-active {
-    animation: 0.2s nut-fade-in;
+    animation: 0.3s nut-fade-in;
   }
   .popup-fade-leave-active {
-    animation: 0.2s nut-fade-out;
+    animation: 0.3s nut-fade-out;
   }
   
   .popup-slide {
@@ -68,7 +69,7 @@
     max-height: 100%;
     overflow-y: auto;
     background-color: #fff;
-    transition: transform 0.2s;
+    transition: transform 0.3s;
     -webkit-overflow-scrolling: touch;
     z-index: 2028;
   }
@@ -92,4 +93,42 @@
     }
   }
  
-  
\ No newline at end of file
+  
+ 
+
+.nutui-popup{
+    &__close-icon{
+        position: absolute;
+        z-index: 1;
+        color: #969799;
+        font-size: 18px;
+        cursor: pointer;
+       
+        &:active {
+            opacity: .7;
+        }
+
+        &--top-left {
+            top: $popup-close-icon-margin;
+            left: $popup-close-icon-margin;
+        }
+
+        &--top-right {
+            top: $popup-close-icon-margin;
+            right: $popup-close-icon-margin;
+        }
+
+        &--bottom-left {
+            bottom: $popup-close-icon-margin;
+            left: $popup-close-icon-margin;
+        }
+
+        &--bottom-right {
+            right: $popup-close-icon-margin;
+            bottom: $popup-close-icon-margin;
+        }
+    }
+}
+ 
+
+ 
\ No newline at end of file
diff --git a/src/packages/popup/popup.vue b/src/packages/popup/popup.vue
index dc7c351e15..7fa01f4eea 100644
--- a/src/packages/popup/popup.vue
+++ b/src/packages/popup/popup.vue
@@ -6,7 +6,9 @@
       class="popup-box"
       :class="[`popup-${position}`, { round }]"
     >
-      <slot></slot>
+        <slot></slot>
+        <nut-icon v-if='closeable' @click.native='$emit("input", false)' :type="closeIcon" size="12px"  class="nutui-popup__close-icon" :class="'nutui-popup__close-icon--'+closeIconPosition">
+        </nut-icon>
     </div>
   </transition>
 </template>
@@ -28,6 +30,18 @@ export default {
       type: Boolean,
       default: true
     },
+    closeable:{
+        type: Boolean,
+        default: false 
+    },
+    closeIconPosition: {
+      type: String,
+      default: 'top-right'
+    },
+    closeIcon:{
+        type: String,
+        default: 'cross'
+    },
     round: Boolean
   },
   created() {

From 202d1302ae098f1bb2c5c59ea9db2cc4655cd0d5 Mon Sep 17 00:00:00 2001
From: yewenwen3 <yewenwen1@jd.com>
Date: Tue, 4 Feb 2020 16:25:24 +0800
Subject: [PATCH 16/21] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96leftslip=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8D=95=E5=85=83=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  | 326 +++++++++---------
 .../leftslip/__test__/leftslip.spec.js        |  18 +
 src/packages/leftslip/leftslip.scss           |  14 +-
 src/packages/leftslip/leftslip.vue            |  61 ++--
 4 files changed, 213 insertions(+), 206 deletions(-)
 create mode 100644 src/packages/leftslip/__test__/leftslip.spec.js

diff --git a/package.json b/package.json
index bb6c360d9e..d2df8bcb98 100644
--- a/package.json
+++ b/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
+    }
+}
\ No newline at end of file
diff --git a/src/packages/leftslip/__test__/leftslip.spec.js b/src/packages/leftslip/__test__/leftslip.spec.js
new file mode 100644
index 0000000000..74bfeaa6cf
--- /dev/null
+++ b/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);
+        })
+    })
+
+
+});
\ No newline at end of file
diff --git a/src/packages/leftslip/leftslip.scss b/src/packages/leftslip/leftslip.scss
index 06b2431ade..17f3425001 100644
--- a/src/packages/leftslip/leftslip.scss
+++ b/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;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/packages/leftslip/leftslip.vue b/src/packages/leftslip/leftslip.vue
index 89b94caffe..df428dc90f 100644
--- a/src/packages/leftslip/leftslip.vue
+++ b/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 = '';
+            
         }
     }
 };

From 914aafe89ff72ac45e40f0b8d23589923d370c3a Mon Sep 17 00:00:00 2001
From: dushoujun <dushoujun@jd.com>
Date: Tue, 4 Feb 2020 16:25:24 +0800
Subject: [PATCH 17/21] =?UTF-8?q?add=EF=BC=9AtabSelect=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config.json                               |  12 +-
 src/nutui.js                                  |  13 +-
 .../tabselect/__test__/tabselect.spec.js      | 127 ++++++++++++
 src/packages/tabselect/demo.vue               | 132 ++++++++++++
 src/packages/tabselect/doc.md                 | 142 +++++++++++++
 src/packages/tabselect/index.js               |   8 +
 src/packages/tabselect/tabselect.scss         | 129 ++++++++++++
 src/packages/tabselect/tabselect.vue          | 193 ++++++++++++++++++
 types/nutui.d.ts                              |   1 +
 9 files changed, 751 insertions(+), 6 deletions(-)
 create mode 100644 src/packages/tabselect/__test__/tabselect.spec.js
 create mode 100644 src/packages/tabselect/demo.vue
 create mode 100644 src/packages/tabselect/doc.md
 create mode 100644 src/packages/tabselect/index.js
 create mode 100644 src/packages/tabselect/tabselect.scss
 create mode 100644 src/packages/tabselect/tabselect.vue

diff --git a/src/config.json b/src/config.json
index 5a55a550a5..ce09711ed3 100644
--- a/src/config.json
+++ b/src/config.json
@@ -502,6 +502,16 @@
       "sort": "5",
       "showDemo": true,
       "author": "杨凯旋"
+    },
+    {
+      "version": "1.0.0",
+      "name": "TabSelect",
+      "chnName": "分类选择",
+      "desc": "",
+      "type": "component",
+      "sort": "3",
+      "showDemo": true,
+      "author": "dsj"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/nutui.js b/src/nutui.js
index 69e4dcb235..297e5e539c 100644
--- a/src/nutui.js
+++ b/src/nutui.js
@@ -96,6 +96,9 @@ import Elevator from "./packages/elevator/index.js";
 import "./packages/elevator/elevator.scss";
 import Popup from "./packages/popup/index.js";
 import "./packages/popup/popup.scss";
+import TabSelect from "./packages/tabselect/index.js";
+import "./packages/tabselect/tabselect.scss";
+
 const packages = {
   Cell,
   Dialog,
@@ -143,7 +146,8 @@ const packages = {
   TextBox,
   Avatar,
   Elevator,
-  Popup
+  Popup,
+  TabSelect: TabSelect
 };
 
 const components = {};
@@ -171,7 +175,7 @@ pkgList.map(item => {
   }
 });
 
-const install = function(Vue, opts = {}) {
+const install = function (Vue, opts = {}) {
   if (install.installed) return;
 
   if (opts.locale) {
@@ -209,8 +213,7 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Lazyload, {
     lazyComponent: true,
-    loading:
-      "//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png"
+    loading: "//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png"
   });
 };
 
@@ -227,4 +230,4 @@ export default {
   ...filters,
   ...directives,
   ...methods
-};
+};
\ No newline at end of file
diff --git a/src/packages/tabselect/__test__/tabselect.spec.js b/src/packages/tabselect/__test__/tabselect.spec.js
new file mode 100644
index 0000000000..10cff9c161
--- /dev/null
+++ b/src/packages/tabselect/__test__/tabselect.spec.js
@@ -0,0 +1,127 @@
+import { shallowMount, mount } from "@vue/test-utils";
+import TabSelect from "../tabselect.vue";
+import Vue from "vue";
+
+describe("TabSelect.vue", () => {
+  const wrapper = mount(TabSelect);
+
+  it("mainTitle标题", () => {
+    wrapper.setProps({ mainTitle: "配送" });
+    return Vue.nextTick().then(function() {
+      expect(
+        wrapper
+          .findAll(".nut-tabselect-main-title")
+          .at(0)
+          .text()
+      ).toBe("配送");
+    });
+  });
+
+  it("subTitle标题", () => {
+    wrapper.setProps({ subTitle: "送达时间" });
+    return Vue.nextTick().then(function() {
+      setTimeout(() => {
+        expect(
+          wrapper
+            .findAll(".nut-tabselect-sub-title")
+            .at(0)
+            .text()
+        ).toBe("送达时间");
+      }, 200);
+    });
+  });
+
+  it("是否支持多选", () => {
+    wrapper.setProps({ multiple: true });
+    return Vue.nextTick().then(function() {
+      setTimeout(() => {
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(1)
+          .trigger("click");
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(2)
+          .trigger("click");
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(1)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(true);
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(2)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(true);
+      }, 200);
+    });
+  });
+
+  it("是否支持单选", () => {
+    wrapper.setProps({ multiple: false });
+    return Vue.nextTick().then(function() {
+      setTimeout(() => {
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(1)
+          .trigger("click");
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(2)
+          .trigger("click");
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(1)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(false);
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(2)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(true);
+      }, 200);
+    });
+  });
+
+  it("设置max", () => {
+    wrapper.setProps({ max: 2, multiple: true });
+    return Vue.nextTick().then(function() {
+      setTimeout(() => {
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(1)
+          .trigger("click");
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(2)
+          .trigger("click");
+        wrapper
+          .findAll(".nut-tab-panel-list")
+          .at(3)
+          .trigger("click");
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(1)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(true);
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(2)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(true);
+        expect(
+          wrapper
+            .findAll(".nut-tab-panel-list")
+            .at(3)
+            .is(".nut-tab-panel-list-active")
+        ).toBe(false);
+      }, 200);
+    });
+  });
+});
diff --git a/src/packages/tabselect/demo.vue b/src/packages/tabselect/demo.vue
new file mode 100644
index 0000000000..0921a2b26e
--- /dev/null
+++ b/src/packages/tabselect/demo.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <nut-cell
+      isLink
+      title="展示单选弹出层"
+      :showIcon="true"
+      @click.native="show = true"
+    >
+    </nut-cell>
+    <nut-tabselect
+      :mainTitle="mainTitle"
+      :subTitle="subTitle"
+      :defaultContent="defaultContent"
+      :tabList="tabList"
+      :show="show"
+      @close="show = false"
+      @choose="choose"
+      :multiple="false"
+    ></nut-tabselect>
+
+    <nut-cell
+      isLink
+      title="展示多选弹出层"
+      :showIcon="true"
+      @click.native="showMore = true"
+    >
+    </nut-cell>
+    <nut-tabselect
+      :mainTitle="mainTitle"
+      :subTitle="subTitle"
+      :defaultContent="defaultContent"
+      :tabList="tabList"
+      :show="showMore"
+      @close="showMore = false"
+      @choose="choose"
+      :multiple="true"
+      :max="3"
+    ></nut-tabselect>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      mainTitle: "配送",
+      subTitle: "送达时间",
+      defaultContent: [
+        "9:00——10:00",
+        "10:00——11:00",
+        "11:00——12:00",
+        "12:00——13:00",
+        "13:00——15:00",
+        "15:00——17:00",
+        "17:00——19:00"
+      ],
+      tabList: [
+        {
+          tabTitle: "京东快递",
+          children: [
+            {
+              tabTitle: "1月13日 (星期一)",
+              content: [
+                "11:00——12:00",
+                "12:00——13:00",
+                "13:00——15:00",
+                "15:00——17:00",
+                "17:00——19:00"
+              ]
+            },
+            {
+              tabTitle: "1月14日 (星期二)"
+            },
+            {
+              tabTitle: "1月15日 (星期三)"
+            },
+            {
+              tabTitle: "1月16日 (星期四)"
+            },
+            {
+              tabTitle: "1月17日 (星期五)"
+            },
+            {
+              tabTitle: "1月18日 (星期六)"
+            },
+            {
+              tabTitle: "1月19日 (星期天)"
+            }
+          ]
+        },
+        {
+          tabTitle: "上门自提",
+          children: [
+            {
+              tabTitle: "2月13日 (星期一)",
+              content: ["13:00——15:00", "15:00——17:00", "17:00——19:00"]
+            },
+            {
+              tabTitle: "2月14日 (星期二)"
+            },
+            {
+              tabTitle: "2月15日 (星期三)"
+            },
+            {
+              tabTitle: "2月16日 (星期四)"
+            },
+            {
+              tabTitle: "2月17日 (星期五)"
+            },
+            {
+              tabTitle: "2月18日 (星期六)"
+            },
+            {
+              tabTitle: "2月19日 (星期天)"
+            }
+          ]
+        }
+      ],
+      show: false,
+      showMore: false
+    };
+  },
+  methods: {
+    choose(title, item) {
+      console.log(title, item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/packages/tabselect/doc.md b/src/packages/tabselect/doc.md
new file mode 100644
index 0000000000..df6607c8ef
--- /dev/null
+++ b/src/packages/tabselect/doc.md
@@ -0,0 +1,142 @@
+# TabSelect 分类选择
+
+## 基本用法
+
+```html
+<nut-tabselect
+  :mainTitle="mainTitle"
+  :subTitle="subTitle"
+  :defaultContent="defaultContent"
+  :tabList="tabList"
+  :show="show"
+  @close="show = false"
+  @choose="choose"
+  :multiple="false"
+></nut-tabselect>
+```
+
+## 基本用法（多选模式）
+
+```html
+<nut-tabselect
+  :mainTitle="mainTitle"
+  :subTitle="subTitle"
+  :defaultContent="defaultContent"
+  :tabList="tabList"
+  :show="show"
+  @close="show = false"
+  @choose="choose"
+  :multiple="true"
+  :max="3"
+></nut-tabselect>
+```
+
+```javascript
+export default {
+  components: {},
+  data() {
+    return {
+      mainTitle: "配送",
+      subTitle: "送达时间",
+      defaultContent: [
+        "9:00——10:00",
+        "10:00——11:00",
+        "11:00——12:00",
+        "12:00——13:00",
+        "13:00——15:00",
+        "15:00——17:00",
+        "17:00——19:00"
+      ],
+      tabList: [
+        {
+          tabTitle: "京东快递", // 一级tab标题
+          children: [
+            // 一级tab内容
+            {
+              tabTitle: "1月13日 (星期一)", // 二级tab标题
+              content: [
+                // 二级tab内容，不传默认使用defaultContent字段
+                "11:00——12:00",
+                "12:00——13:00",
+                "13:00——15:00",
+                "15:00——17:00",
+                "17:00——19:00"
+              ]
+            },
+            {
+              tabTitle: "1月14日 (星期二)"
+            },
+            {
+              tabTitle: "1月15日 (星期三)"
+            },
+            {
+              tabTitle: "1月16日 (星期四)"
+            },
+            {
+              tabTitle: "1月17日 (星期五)"
+            },
+            {
+              tabTitle: "1月18日 (星期六)"
+            },
+            {
+              tabTitle: "1月19日 (星期天)"
+            }
+          ]
+        },
+        {
+          tabTitle: "上门自提",
+          children: [
+            {
+              tabTitle: "2月13日 (星期一)",
+              content: ["13:00——15:00", "15:00——17:00", "17:00——19:00"]
+            },
+            {
+              tabTitle: "2月14日 (星期二)"
+            },
+            {
+              tabTitle: "2月15日 (星期三)"
+            },
+            {
+              tabTitle: "2月16日 (星期四)"
+            },
+            {
+              tabTitle: "2月17日 (星期五)"
+            },
+            {
+              tabTitle: "2月18日 (星期六)"
+            },
+            {
+              tabTitle: "2月19日 (星期天)"
+            }
+          ]
+        }
+      ],
+      show: false
+    };
+  },
+  methods: {
+    choose(title, item) {
+      console.log(title, item);
+    }
+  }
+};
+```
+
+### Prop
+
+| 字段           | 说明                        | 类型    | 默认值   |
+| -------------- | --------------------------- | ------- | -------- |
+| mainTitle      | 一级 tab 标题               | String  | ''       |
+| subTitle       | 二级 tab 标题               | String  | ''       |
+| defaultContent | 二级 tab 下内容完全一致时传 | Array   | null     |
+| multiple       | 是否允许多选                | Boolean | false    |
+| tabList        | 整体数据                    | Array   | null     |
+| show           | 是否显示                    | Boolean | false    |
+| max            | 多选时最多可选个数          | Number  | Infinity |
+
+### Event
+
+| 事件名称 | 说明                 | 回调参数                               |
+| -------- | -------------------- | -------------------------------------- |
+| choose   | 切换页签或选中某一项 | 点击的一级 tab ，二级 tab ，选中项内容 |
+| close    | 组件隐藏时           | --                                     |
diff --git a/src/packages/tabselect/index.js b/src/packages/tabselect/index.js
new file mode 100644
index 0000000000..1a072151bd
--- /dev/null
+++ b/src/packages/tabselect/index.js
@@ -0,0 +1,8 @@
+import TabSelect from './tabselect.vue';
+import './tabselect.scss';
+
+TabSelect.install = function(Vue) {
+  Vue.component(TabSelect.name, TabSelect);
+};
+
+export default TabSelect
\ No newline at end of file
diff --git a/src/packages/tabselect/tabselect.scss b/src/packages/tabselect/tabselect.scss
new file mode 100644
index 0000000000..fb8d573392
--- /dev/null
+++ b/src/packages/tabselect/tabselect.scss
@@ -0,0 +1,129 @@
+.nut-tabselect {
+  .nut-tab {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+  .nav-bar {
+    display: none;
+  }
+  .nut-tab-item {
+    padding: 0;
+  }
+  .nut-tab-link {
+    font-size: 14px;
+  }
+  .nut-tab-title {
+    border: none;
+    height: auto;
+    line-height: auto;
+    padding-left: 18px;
+    .nut-title-nav-list {
+      flex: none;
+      padding: 0 13px;
+      height: 30px;
+      line-height: 30px;
+      border: 1px solid #333;
+      border-radius: 15px;
+      margin-right: 15px;
+      a {
+        color: #333;
+      }
+    }
+    .nut-tab-active {
+      border-color: #e2231a;
+      background: #fcedeb;
+      a {
+        color: #e2231a;
+      }
+    }
+  }
+  .nut-tab-inner {
+    .nut-tab-title-leftnav {
+      min-width: 158px;
+    }
+    .nut-title-nav {
+      height: 40px;
+      line-height: 40px;
+      background: #f4f4f4;
+      padding-left: 18px;
+    }
+    .nut-tab-active {
+      background: #fff;
+    }
+    .nut-tab-link {
+      line-height: inherit;
+      font-size: 14px;
+    }
+    .nut-tab-item {
+      padding: 0 10px 0 17px;
+    }
+    .nut-tab-panel {
+      max-height: 280px;
+      overflow-y: auto;
+    }
+  }
+  .nut-tab-title-leftnav {
+    border: none;
+    max-height: 280px;
+    overflow-y: auto;
+    .nut-title-nav {
+      border: none;
+    }
+  }
+  .nut-tabselect-main-title {
+    margin: 12px 0 8px 18px;
+    font-size: 18px;
+    line-height: 25px;
+    color: #000;
+    font-weight: bold;
+  }
+  .nut-tabselect-sub-title {
+    margin: 22px 0 11px 18px;
+    line-height: 20px;
+    color: #666;
+    font-size: 14px;
+  }
+
+  .nut-tab-panel li {
+    height: 29px;
+    line-height: 29px;
+    color: #333;
+    border: 1px solid #999999;
+    padding-left: 15px;
+    margin-bottom: 10px;
+    border-radius: 2px;
+    cursor: pointer;
+    &.nut-tab-panel-active {
+      color: #e2231a;
+      border: 1px solid #e2231a;
+      background: #fcedeb;
+    }
+  }
+  .popup-bottom.round {
+    border-radius: 12px 12px 0px 0px;
+  }
+  .nut-tabselect-btn {
+    display: flex;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 18px;
+    a {
+      flex: 1;
+      height: 30px;
+      line-height: 30px;
+      background: linear-gradient(
+        135deg,
+        rgba(242, 20, 12, 1) 0%,
+        rgba(242, 39, 12, 1) 70%,
+        rgba(242, 77, 12, 1) 100%
+      );
+      border-radius: 15px;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/packages/tabselect/tabselect.vue b/src/packages/tabselect/tabselect.vue
new file mode 100644
index 0000000000..2f0f54b09f
--- /dev/null
+++ b/src/packages/tabselect/tabselect.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="nut-tabselect">
+    <nut-popup
+      round
+      v-model="isShow"
+      position="bottom"
+      :style="{ height: '457px' }"
+    >
+      <div class="nut-tabselect-main-title" v-html="mainTitle"></div>
+      <nut-tab @tab-switch="tabSwitchOuter">
+        <nut-tab-panel
+          v-for="(value, idx) in tabList"
+          v-bind:key="value.tabTitle"
+          :tabTitle="value.tabTitle"
+        >
+          <div class="nut-tabselect-sub-title" v-html="subTitle"></div>
+          <nut-tab
+            @tab-switch="tabSwitchInner"
+            positionNav="left"
+            class="nut-tab-inner"
+          >
+            <nut-tab-panel
+              v-for="(item, index) in value.children"
+              v-bind:key="item.tabTitle"
+              :tabTitle="item.tabTitle"
+            >
+              <ul>
+                <template v-if="item.content">
+                  <li
+                    v-for="(sitem, sIndex) in item.content"
+                    v-bind:key="sitem"
+                    @click="choose(idx, index, sIndex, item, sitem)"
+                    class="nut-tab-panel-list"
+                    :class="{
+                      'nut-tab-panel-list-active': isActive(idx, index, sIndex)
+                    }"
+                  >
+                    {{ sitem }}
+                  </li>
+                </template>
+                <template v-else-if="defaultContent">
+                  <li
+                    v-for="(sitem, sIndex) in defaultContent"
+                    v-bind:key="sitem"
+                    @click="choose(idx, index, sIndex, item, sitem)"
+                    class="nut-tab-panel-list"
+                    :class="{
+                      'nut-tab-panel-list-active': isActive(idx, index, sIndex)
+                    }"
+                  >
+                    {{ sitem }}
+                  </li>
+                </template>
+              </ul>
+            </nut-tab-panel>
+          </nut-tab>
+        </nut-tab-panel>
+      </nut-tab>
+      <div class="nut-tabselect-btn">
+        <a href="javascript:;" @click="isShow = false">确定</a>
+      </div>
+    </nut-popup>
+  </div>
+</template>
+<script>
+import nuttab from "../tab/tab.vue";
+import "../tab/tab.scss";
+import nutpop from "../popup/popup.vue";
+import "../popup/popup.scss";
+export default {
+  name: "nut-tabselect",
+  props: {
+    mainTitle: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    },
+    defaultContent: {
+      type: Array,
+      default: () => []
+    },
+    tabList: {
+      type: Array,
+      default: () => []
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      level0: 0,
+      level1: new Set([0]),
+      level2: new Set(["0-0"]),
+      allChoose: new Set([this.getText(0, 0, 0)])
+    };
+  },
+  components: {
+    [nuttab.name]: nuttab,
+    [nutpop.name]: nutpop
+  },
+  watch: {
+    show(val) {
+      this.isShow = val;
+    },
+    isShow(val) {
+      if (!val) {
+        this.$emit("close");
+      }
+    }
+  },
+  mounted() {
+    this.emit();
+  },
+  methods: {
+    emit() {
+      this.$emit(
+        "choose",
+        (this.tabList[this.level0] && this.tabList[this.level0].tabTitle) || "",
+        [...this.allChoose]
+      );
+    },
+    getText(idx, index, sIndex) {
+      const tab =
+        (this.tabList[idx] && this.tabList[idx].children[index]) || {};
+      const subTit = tab.tabTitle;
+      const content =
+        (tab.content && tab.content[sIndex]) || this.defaultContent[sIndex];
+      return subTit + " " + content;
+    },
+    tabSwitchOuter: function(index, event) {
+      this.level0 = index;
+      this.level1 = new Set([0]);
+      this.level2 = new Set(["0-0"]);
+      this.allChoose = new Set([this.getText(index, 0, 0)]);
+      this.emit();
+    },
+    tabSwitchInner: function(index, event) {
+      if (!this.multiple) {
+        this.level1 = new Set([index]);
+      } else {
+        this.level1.add(index);
+      }
+    },
+    unChoose(index, sIndex) {
+      this.level2.delete(index + "-" + sIndex);
+      this.level2 = new Set(this.level2);
+    },
+    choose(idx, index, sIndex) {
+      if (this.multiple && this.isActive(idx, index, sIndex)) {
+        this.unChoose(index, sIndex);
+        this.allChoose.delete(this.getText(idx, index, sIndex));
+        this.emit();
+        return;
+      }
+      if (!this.multiple) {
+        this.level2 = new Set([index + "-" + sIndex]);
+        this.allChoose = new Set([this.getText(index, 0, 0)]);
+      } else {
+        if (this.max !== Infinity && this.max === this.level2.size) {
+          return;
+        }
+        this.level2 = new Set([...this.level2.add(index + "-" + sIndex)]);
+        this.allChoose.add(this.getText(idx, index, sIndex));
+      }
+      this.emit();
+    },
+    isActive(idx, index, sIndex) {
+      if (
+        idx === this.level0 &&
+        this.level1.has(index) &&
+        this.level2.has(index + "-" + sIndex)
+      ) {
+        return true;
+      }
+      return false;
+    }
+  }
+};
+</script>
diff --git a/types/nutui.d.ts b/types/nutui.d.ts
index 69fbba1c5d..7c09bbf0c4 100644
--- a/types/nutui.d.ts
+++ b/types/nutui.d.ts
@@ -64,3 +64,4 @@ export declare class Avatar extends UIComponent {}
 export declare class Infiniteloading extends UIComponent {}
 export declare class Lazyload extends UIComponent {}
 export declare class Elevator extends UIComponent {}
+export declare class TabSelect extends UIComponent {}

From 6f53db1d0d73925d67443aa10da2489f7f695439 Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Fri, 7 Feb 2020 17:58:08 +0800
Subject: [PATCH 18/21] =?UTF-8?q?doc:=20=20textInput=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/textinput/doc.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/textinput/doc.md b/src/packages/textinput/doc.md
index 73d1bccc30..2d1166854f 100644
--- a/src/packages/textinput/doc.md
+++ b/src/packages/textinput/doc.md
@@ -88,5 +88,5 @@ export default {
 | value | 当前input值，可使用 v-model 双向绑定数据 | String | ''
 | label | 文本框前面的标签 | String | ''
 | disabled | 是否禁用 | Boolean | false
-| clearBtn | 是否需要情况按钮 | Boolean | true
+| clearBtn | 是否需要清空按钮 | Boolean | true
 | hasBorder | 是否需要边框 | Boolean | true
\ No newline at end of file

From e0f998f632cb3b8496a367aa284b50c15b22708a Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Tue, 11 Feb 2020 15:25:42 +0800
Subject: [PATCH 19/21] feat:  add Popup type

---
 types/nutui.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/nutui.d.ts b/types/nutui.d.ts
index 206171267d..7f29dff9f8 100644
--- a/types/nutui.d.ts
+++ b/types/nutui.d.ts
@@ -64,6 +64,7 @@ export declare class Avatar extends UIComponent {}
 export declare class Infiniteloading extends UIComponent {}
 export declare class Lazyload extends UIComponent {}
 export declare class Elevator extends UIComponent {}
-export declare class SlipesideBotdeslip[Cefttonutton extends UIComponent {}
+export declare class SlipesideBotdeslip extends UIComponent {}
 export declare class TabSelect extends UIComponent {}
+export declare class Popup extends UIComponent {}
 

From 09d3eff3054e6e6044dbf82a2e3e34835ad5e9c8 Mon Sep 17 00:00:00 2001
From: yangkaixuan <439721838@qq.com>
Date: Tue, 11 Feb 2020 16:25:05 +0800
Subject: [PATCH 20/21] =?UTF-8?q?fix:=E6=9B=B4=E6=94=B9popup=E7=B1=BB?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/popup/doc.md   | 2 +-
 src/packages/popup/mask.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/packages/popup/doc.md b/src/packages/popup/doc.md
index 1d932e2415..c9750a378b 100644
--- a/src/packages/popup/doc.md
+++ b/src/packages/popup/doc.md
@@ -48,7 +48,7 @@ export default {
 设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式
 
 ```html
-<van-popup v-model="show" round position="bottom" :style="{ height: '20%' }" />
+<nut-popup v-model="show" round position="bottom" :style="{ height: '20%' }" />
 ```
 
 ## API
diff --git a/src/packages/popup/mask.vue b/src/packages/popup/mask.vue
index 62d6139601..971e5bd007 100644
--- a/src/packages/popup/mask.vue
+++ b/src/packages/popup/mask.vue
@@ -13,10 +13,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .popup-fade-enter-active {
-  animation: 0.3s van-fade-in;
+  animation: 0.3s nut-fade-in;
 }
 .popup-fade-leave-active {
-  animation: 0.3s van-fade-out;
+  animation: 0.3s nut-fade-out;
 }
 .bg {
   position: fixed;
@@ -28,7 +28,7 @@ export default {
   z-index: 99;
 }
 
-@keyframes van-fade-in {
+@keyframes nut-fade-in {
   from {
     opacity: 0;
   }
@@ -38,7 +38,7 @@ export default {
   }
 }
 
-@keyframes van-fade-out {
+@keyframes nut-fade-out {
   from {
     opacity: 1;
   }

From 044e329bd10024e403f6a562642a1c68f1948ba7 Mon Sep 17 00:00:00 2001
From: richard1015 <51844712@qq.com>
Date: Wed, 12 Feb 2020 11:24:29 +0800
Subject: [PATCH 21/21] =?UTF-8?q?upd:=20=20=E7=89=88=E6=9C=AC=E5=8F=B7?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d2df8bcb98..75d95854ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nutui/nutui",
-    "version": "2.1.9",
+    "version": "2.2.0",
     "description": "一套轻量级移动端Vue组件库",
     "typings": "dist/types/index.d.ts",
     "main": "dist/nutui.js",