<template> <div :class="cusClass" class="swipeout-list"> <div ref="item" :class="bottomBorder" class="item" data-type="0"> <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd"> <slot/> </div> <slot name="buttons"/> <!--<div class="function edit" @click="myEdit" v-if="showEdit">{{editText}}</div> <div class="function delete" @click="myDelete" v-if="showDelete">{{deleteText}}</div>--> </div> </div> </template> <script> import optionButton from './OptionButton' export default { name: 'ItemOption', components: {optionButton}, props: { showDelete: Boolean, showEdit: Boolean, deleteText: { type: String, default: '删除', }, editText: { type: String, default: '编辑', }, buttonWidth: { type: Number, default: 70, }, cusClass: { type: String, default: '', }, hasBorder: { type: Boolean, default: true, }, }, 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: { myDelete () { this.$emit('deleteFun') this.$refs.item.style.transform = 'translate3d(0px,0px,0px)' }, myEdit () { this.$emit('editFun') this.$refs.item.style.transform = 'translate3d(0px,0px,0px)' }, touchStart (ev) { this.$refs.item.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.item 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('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' } }, }, } </script> <style lang="less" scoped type="text/less"> @listHeight: 45px; @buttonWidth: 70px; .swipeout-list { height: @listHeight; overflow: visible; padding: 0 0 0 15px; width: 100%; .item[data-type="0"] { transform: translate3d(0px, 0px, 0px); transition: all 0.4s; } .item[data-type="1"] { transition: all 1s; } .item { overflow: visible; position: relative; height: 100%; -webkit-transition: all 0.2s; border-right: none; width: 101%; padding: 0; .list-box { width: 100%; height: 100%; } .function { width: @buttonWidth; /*no*/ height: 100%; color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; } .warn { background: @swipeout-button-warn-bg-color; } .primary { background: @swipeout-button-primary-bg-color; } .default { background: @swipeout-button-default-bg-color; } } } </style>