|
|
@@ -1,19 +1,11 @@
|
|
|
<template>
|
|
|
<div class="nut-leftslip">
|
|
|
<div class="nut-leftslip-item" ref="slipItem" :style="deleteSlider">
|
|
|
- <div
|
|
|
- class="nut-leftslip-item-main"
|
|
|
- @touchstart="touchStart($event)"
|
|
|
- @touchmove="touchMove($event)"
|
|
|
- @touchend="touchEnd($event)"
|
|
|
- >
|
|
|
+ <div class="nut-leftslip-item-main" @touchstart="touchStart($event)" @touchmove="touchMove($event)"
|
|
|
+ @touchend="touchEnd($event)">
|
|
|
<slot name="slip-main"></slot>
|
|
|
</div>
|
|
|
|
|
|
- <!-- <div v-if="onlyDelBtn" class="delbtn" ref="delBtn">
|
|
|
- <div :style="delBtnStyle" class="trans"></div>
|
|
|
- <span @click.prevent="onlyDelClick($event)">删除</span></div
|
|
|
- > -->
|
|
|
<div class="nut-leftslip-item-btn">
|
|
|
<!-- <a @click.prevent="onlyDelClick($event)">删除</a> -->
|
|
|
<slot name="slipbtns">
|
|
|
@@ -24,179 +16,179 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: 'nut-leftslip',
|
|
|
- props: {
|
|
|
- onlyDelBtn: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- btnSlipDel: {
|
|
|
- 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.onlyDelBtn) {
|
|
|
- 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();
|
|
|
+ export default {
|
|
|
+ name: 'nut-leftslip',
|
|
|
+ props: {
|
|
|
+ onlyDelBtn: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ btnSlipDel: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
},
|
|
|
- handleClick() {
|
|
|
- this.restSlide();
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ moveX: 0,
|
|
|
+ moveY: 0,
|
|
|
+ left: 0,
|
|
|
+ buttonWidth: 0,
|
|
|
+ disX: 0, //移动距离
|
|
|
+ deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
|
|
|
+ delBtnStyle: '' //单个删除键拖拽删除效果
|
|
|
+ };
|
|
|
},
|
|
|
- onlyDelClick() {
|
|
|
- //一键删除模式点击删除
|
|
|
- this.$emit('oneDelete', this.$refs.slipItem);
|
|
|
- this.restSlide();
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.onlyDelBtn) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for (var slot of this.$slots.slipbtns) {
|
|
|
+ this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ window.addEventListener('scroll', this.handleScroll, true);
|
|
|
},
|
|
|
- touchStart(e) {
|
|
|
- this.restSlide();
|
|
|
- e = e || event;
|
|
|
- //等于1时表示此时有只有一只手指在触摸屏幕
|
|
|
- if (e.touches.length == 1) {
|
|
|
- this.startX = e.touches[0].clientX;
|
|
|
- this.startY = e.touches[0].clientY;
|
|
|
- }
|
|
|
+ beforeDestroy() {
|
|
|
+ // 移除监听
|
|
|
+ window.removeEventListener('scroll', this.handleScroll, true);
|
|
|
},
|
|
|
- touchMove(e) {
|
|
|
- e = e || event;
|
|
|
- //获取当前滑动对象
|
|
|
- let parentElement = e.currentTarget.parentElement;
|
|
|
- //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
|
|
|
- let itemWd = this.$refs.slipItem.offsetWidth;
|
|
|
- let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
|
|
|
+ methods: {
|
|
|
+ handleScroll() {
|
|
|
+ if (this.disX) {
|
|
|
+ this.restSlide();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ this.restSlide();
|
|
|
+ },
|
|
|
+ onlyDelClick() {
|
|
|
+ //一键删除模式点击删除
|
|
|
+ this.$emit('oneDelete', this.$refs.slipItem);
|
|
|
+ this.restSlide();
|
|
|
+ },
|
|
|
+ touchStart(e) {
|
|
|
+ this.restSlide();
|
|
|
+ e = e || event;
|
|
|
+ //等于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;
|
|
|
+ let wd = this.onlyDelBtn ? 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.onlyDelBtn) {
|
|
|
- //单一删除，左滑一键删除
|
|
|
- if (this.disX < 0 || this.disX == 0) {
|
|
|
- this.deleteSlider = 'transform:translateX(0px)';
|
|
|
- }
|
|
|
- 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;
|
|
|
- } else if (this.disX > wd / 4) {
|
|
|
- parentElement.dataset.type = 1;
|
|
|
+ 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.onlyDelBtn) {
|
|
|
+ //单一删除，左滑一键删除
|
|
|
+ if (this.disX < 0 || this.disX == 0) {
|
|
|
+ this.deleteSlider = 'transform:translateX(0px)';
|
|
|
+ }
|
|
|
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)';
|
|
|
+ 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;
|
|
|
+ } else if (this.disX > wd / 4) {
|
|
|
+ parentElement.dataset.type = 1;
|
|
|
+ this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
|
|
|
+ // 最大也只能等于删除按钮宽度
|
|
|
+ if (this.disX >= 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.onlyDelBtn ? 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.onlyDelBtn) {
|
|
|
- //单一按钮，左滑一键删除
|
|
|
- if (this.disX < 0 || this.disX == 0) {
|
|
|
- this.deleteSlider = 'transform:translateX(0px)';
|
|
|
- parentElement.dataset.type = 0;
|
|
|
- } else if (this.disX < itemWd - 20) {
|
|
|
- parentElement.dataset.type = 1;
|
|
|
- this.deleteSlider = 'transform:translateX(-50px);';
|
|
|
- this.delBtnStyle = ' width:0px;';
|
|
|
+ },
|
|
|
+ touchEnd(e) {
|
|
|
+ e = e || event;
|
|
|
+ let parentElement = e.currentTarget.parentElement;
|
|
|
+ let itemWd = this.$refs.slipItem.offsetWidth;
|
|
|
+ let wd = this.onlyDelBtn ? 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.onlyDelBtn) {
|
|
|
+ //单一按钮，左滑一键删除
|
|
|
+ if (this.disX < 0 || this.disX == 0) {
|
|
|
+ this.deleteSlider = 'transform:translateX(0px)';
|
|
|
+ parentElement.dataset.type = 0;
|
|
|
+ } else if (this.disX < itemWd - 20) {
|
|
|
+ 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;';
|
|
|
+ parentElement.dataset.type = 1;
|
|
|
+ this.onlyDelClick();
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
|
|
|
- this.delBtnStyle = ' width:' + itemWd + 'px;';
|
|
|
- parentElement.dataset.type = 1;
|
|
|
- this.onlyDelClick();
|
|
|
- }
|
|
|
- } else {
|
|
|
- //如果距离小于删除按钮的四分之一,强行回到起点
|
|
|
+ //如果距离小于删除按钮的四分之一,强行回到起点
|
|
|
|
|
|
- if (this.disX < wd / 4) {
|
|
|
- parentElement.dataset.type = 0;
|
|
|
- this.deleteSlider = 'transform:translateX(0px)';
|
|
|
- } else {
|
|
|
- //大于一半 滑动到最大值
|
|
|
- parentElement.dataset.type = 1;
|
|
|
- if (wd >= itemWd) {
|
|
|
- //按钮数不可超出整行宽度
|
|
|
- this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
|
|
|
+ if (this.disX < wd / 4) {
|
|
|
+ parentElement.dataset.type = 0;
|
|
|
+ this.deleteSlider = 'transform:translateX(0px)';
|
|
|
} else {
|
|
|
- this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
|
|
|
+ //大于一半 滑动到最大值
|
|
|
+ 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);
|
|
|
+ // console.log('touchEnd:dataset', parentElement.dataset.type);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- restSlide() {
|
|
|
- let listItems = document.querySelectorAll('.nut-leftslip-item');
|
|
|
+ },
|
|
|
+ restSlide() {
|
|
|
+ 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
|
|
|
- }
|
|
|
- if (this.onlyDelBtn) {
|
|
|
- let delBtns = document.querySelectorAll('.delbtn .trans');
|
|
|
- for (let j = 0; j < delBtns.length; j++) {
|
|
|
- delBtns[j].style = '';
|
|
|
+ // 复位
|
|
|
+ for (let i = 0; i < listItems.length; i++) {
|
|
|
+ listItems[i].style = 'transform:translateX(0' + 'px)';
|
|
|
+ listItems[i].dataset.type = 0; //是否展开标志位默认0，左滑展开为1，右滑隐藏为0
|
|
|
+ }
|
|
|
+ if (this.onlyDelBtn) {
|
|
|
+ let delBtns = document.querySelectorAll('.delbtn .trans');
|
|
|
+ for (let j = 0; j < delBtns.length; j++) {
|
|
|
+ delBtns[j].style = '';
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
+ };
|
|
|
+</script>
|
guoxiaoxiao8
