option-item

packages/components/ItemOption/OptionButton.vue

 <template>
-  <div :class="type" class="function">{{ text }}</div>
+  <div :class="type" class="function" @touchstart.capture="touchStart">{{ text }}</div>
 </template>
 
 <script>
@@ -22,8 +22,8 @@ export default {
     this.$parent && this.$parent.optionItem.splice(this.$parent.optionItem.indexOf(this), 1)
   },
   methods: {
-    buttonClick (e) {
-      this.$emit('press', this.type)
+    touchStart (ev) {
+      this.$parent.reset()
     },
   },
 }

packages/components/ItemOption/index.vue

 <template>
   <div :class="cusClass" class="swipeout-list">
-    <div ref="item" :class="bottomBorder" class="item" data-type="0">
+    <div ref="item" :class="bottomBorder" class="option-item" data-type="0">
       <div
         class="list-box"
         @touchstart.capture="touchStart"
@@ -57,9 +57,9 @@ export default {
   mounted () {
     this.init()
   },
-  updated () {
+  /* updated () {
     this.init()
-  },
+  }, */
   methods: {
     touchStart (ev) {
       this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
@@ -86,16 +86,6 @@ export default {
       this.startX = 0
       this.endX = 0
     },
-    // 判断当前是否有滑块处于滑动状态
-    checkSlide () {
-      let listItems = this.$refs.item
-      for (let i = 0; i < listItems.length; i++) {
-        if (listItems[i].dataset.type === '1') {
-          return true
-        }
-      }
-      return false
-    },
     // 初始化
     init () {
       let vm = this
@@ -106,10 +96,10 @@ export default {
       })
     },
     reset () {
-      let l = document.getElementsByClassName('item').length
+      let l = document.getElementsByClassName('option-item').length
       for (let i = 0; i < l; i++) {
-        document.getElementsByClassName('item')[i].style.transform = 'translate3d(0px,0px,0px)'
-        document.getElementsByClassName('item')[i].dataset.type = '0'
+        document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
+        document.getElementsByClassName('option-item')[i].dataset.type = '0'
       }
     },
   },
@@ -124,14 +114,14 @@ export default {
     overflow: visible;
     padding: 0 0 0 15px;
     width: 100%;
-    .item[data-type="0"] {
+    .option-item[data-type="0"] {
       transform: translate3d(0px, 0px, 0px);
       transition: all 0.4s;
     }
-    .item[data-type="1"] {
+    .option-item[data-type="1"] {
       transition: all 1s;
     }
-    .item {
+    .option-item {
       overflow: visible;
       position: relative;
       height: 100%;

src/pages/hlsPopup.vue

@@ -171,14 +171,15 @@
 
       <div class="list">
         <item-option
-          v-for="(color,index) in colors" :key="index"
+          v-for="(color,index) in colors"
+          ref="itemOption" :key="index"
           class="mySlider">
           <div>{{ color.name }}</div>
           <div>{{ color.hex }}</div>
           <div slot="buttons">
-            <option-button type="default" text="默认" @click.native="deleteFun"/>
-            <option-button type="primary" text="编辑" @click.native="deleteFun"/>
-            <option-button type="warn" text="删除" @click.native="deleteFun"/>
+            <option-button type="default" text="默认" @click.native="deleteFun(index)"/>
+            <option-button type="primary" text="编辑" @click.native="deleteFun(index)"/>
+            <option-button type="warn" text="删除" @click.native="deleteFun(index)"/>
           </div>
         </item-option>
       </div>
@@ -418,9 +419,10 @@ export default {
         },
       })
     },
+
     showTime (format) {
       this.hlsPopup.showTime({
-        nowDate: '2017-08-12',
+        nowDate: (new Date()).format('yyyy-MM-dd'),
         format: format,
         callback: (date) => {
           alert(date)
@@ -429,7 +431,7 @@ export default {
     },
     showBigPicture () {
       this.hlsPopup.showBigPicture({
-        imgUrl: 'http://hlsapp.hand-china.com/file/20190411/1554983248278.png',
+        imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD',
       })
     },
 
@@ -591,7 +593,11 @@ export default {
     },
     // e为该元素在数组的下标
     deleteFun (e) {
-      console.log(e)
+      let vm = this
+      vm.colors.remove(e)
+      vm.colors.sort()
+      debugger
+      vm.$refs.itemOption[0].reset()
     },
     // e为该元素在数组的下标
     editFun (e) {