field组件

packages/components/ItemOption/OptionButton.vue

 <template>
-  <div :class="type" class="function" @touchstart="itemClick">{{ text }}</div>
+  <div :class="type" class="function" @click="itemClick">{{ text }}</div>
 </template>
 
 <script>
@@ -23,7 +23,6 @@ export default {
   },
   methods: {
     itemClick (e) {
-      e.preventDefault()
       this.$parent && this.$parent.reset()
     },
   },

packages/components/ItemOption/index.vue

@@ -13,107 +13,107 @@
 </template>
 
 <script>
-  import optionButton from './OptionButton'
+import optionButton from './OptionButton'
 
-  export default {
-    name: 'ItemOption',
-    components: {optionButton},
-    props: {
-      deleteText: {
-        type: String,
-        default: '删除',
-      },
-      editText: {
-        type: String,
-        default: '编辑',
-      },
-      buttonWidth: {
-        type: Number,
-        default: 70,
-      },
-      cusClass: {
-        type: String,
-        default: '',
-      },
-      hasBorder: {
-        type: Boolean,
-        default: true,
-      },
+export default {
+  name: 'ItemOption',
+  components: {optionButton},
+  props: {
+    deleteText: {
+      type: String,
+      default: '删除',
     },
-    data () {
-      return {
-        dis: 0,
-        buttons: 0,
-        startX: 0, // 触摸位置
-        endX: 0, // 结束位置
-        optionItem: [],
-      }
+    editText: {
+      type: String,
+      default: '编辑',
     },
-    computed: {
-      bottomBorder () {
-        return this.hasBorder ? 'vux-1px-b' : ''
-      },
+    buttonWidth: {
+      type: Number,
+      default: 70,
     },
-    mounted () {
-      this.init()
+    cusClass: {
+      type: String,
+      default: '',
     },
-    updated () {
-      this.init()
+    hasBorder: {
+      type: Boolean,
+      default: true,
     },
-    methods: {
-      touchStart (ev) {
-        this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)'
-        this.reset()
-        ev = ev || event
-        // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
-        if (ev.touches.length === 1) {
-          // 记录开始位置
-          this.startX = ev.touches[0].clientX
-        }
-      },
-      touchEnd (e) {
-        let parentElement = e.currentTarget.parentElement
-        this.endX = e.changedTouches[0].clientX
-        // console.log(this.endX)
-        if (parentElement.dataset.type === '0' && this.startX - this.endX > 30) {
-          parentElement.dataset.type = '1'
-          parentElement.style.transform = 'translate3d(-' + this.dis + 'px,0px,0px)'
-        }
-        if (parentElement.dataset.type === '1' && this.startX - this.endX < -30) {
-          parentElement.style.transform = 'translate3d(0px,0px,0px)'
-          parentElement.dataset.type = '0'
-        }
-        this.startX = 0
-        this.endX = 0
-      },
-      // 判断当前是否有滑块处于滑动状态
-      checkSlide () {
-        let listItems = this.$refs.optionItem
-        for (let i = 0; i < listItems.length; i++) {
-          if (listItems[i].dataset.type === '1') {
-            return true
-          }
-        }
-        return false
-      },
-      // 初始化
-      init () {
-        let vm = this
-        let childerLength = vm.optionItem.length
-        vm.dis = vm.buttonWidth * (childerLength)
-        vm.optionItem.forEach((option, index) => {
-          option.$el.style.right = '-' + (vm.buttonWidth * (index + 1)) + 'px'
-        })
-      },
-      reset () {
-        let l = document.getElementsByClassName('option-item').length
-        for (let i = 0; i < l; i++) {
-          document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
-          document.getElementsByClassName('option-item')[i].dataset.type = '0'
+  },
+  data () {
+    return {
+      dis: 0,
+      buttons: 0,
+      startX: 0, // 触摸位置
+      endX: 0, // 结束位置
+      optionItem: [],
+    }
+  },
+  computed: {
+    bottomBorder () {
+      return this.hasBorder ? 'vux-1px-b' : ''
+    },
+  },
+  mounted () {
+    this.init()
+  },
+  updated () {
+    this.init()
+  },
+  methods: {
+    touchStart (ev) {
+      this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)'
+      this.reset()
+      ev = ev || event
+      // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
+      if (ev.touches.length === 1) {
+        // 记录开始位置
+        this.startX = ev.touches[0].clientX
+      }
+    },
+    touchEnd (e) {
+      let parentElement = e.currentTarget.parentElement
+      this.endX = e.changedTouches[0].clientX
+      // console.log(this.endX)
+      if (parentElement.dataset.type === '0' && this.startX - this.endX > 30) {
+        parentElement.dataset.type = '1'
+        parentElement.style.transform = 'translate3d(-' + this.dis + 'px,0px,0px)'
+      }
+      if (parentElement.dataset.type === '1' && this.startX - this.endX < -30) {
+        parentElement.style.transform = 'translate3d(0px,0px,0px)'
+        parentElement.dataset.type = '0'
+      }
+      this.startX = 0
+      this.endX = 0
+    },
+    // 判断当前是否有滑块处于滑动状态
+    checkSlide () {
+      let listItems = this.$refs.optionItem
+      for (let i = 0; i < listItems.length; i++) {
+        if (listItems[i].dataset.type === '1') {
+          return true
         }
-      },
+      }
+      return false
     },
-  }
+    // 初始化
+    init () {
+      let vm = this
+      let childerLength = vm.optionItem.length
+      vm.dis = vm.buttonWidth * (childerLength)
+      vm.optionItem.forEach((option, index) => {
+        option.$el.style.right = '-' + (vm.buttonWidth * (index + 1)) + 'px'
+      })
+    },
+    reset () {
+      let l = document.getElementsByClassName('option-item').length
+      for (let i = 0; i < l; i++) {
+        document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
+        document.getElementsByClassName('option-item')[i].dataset.type = '0'
+      }
+    },
+  },
+}
 </script>
 
 <style lang="less" scoped type="text/less">

src/pages/ItemOption/demo.vue

@@ -45,7 +45,6 @@ export default {
   methods: {
     deleteFun (index) {
       this.colors.remove(index)
-     // this.$refs.option[index].reset()
       this.colors.sort()
     },
   },