Skip to content

Commit 5c73581

Browse files
richard1015richard1015
committed
fix: reset leftslip
1 parent d122b56 commit 5c73581

File tree

6 files changed

+68
-56
lines changed

6 files changed

+68
-56
lines changed

‎src/packages/leftslip/__test__/leftslip.spec.js

100644100755
File mode changed.

‎src/packages/leftslip/demo.vue

100644100755
Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@
1515
<div slot="slip-main" class="slip-main">自定义单一按钮</div>
1616
<div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
1717
</nut-leftslip>
18-
18+
<nut-leftslip onlyDelBtn @oneDelete="oneDel">
19+
<div slot="slip-main" class="slip-main">单一按钮点击一键删除</div>
20+
</nut-leftslip>
21+
<!-- <nut-leftslip onlyDelBtn @oneDelete="oneDel" ref="leftslip1">
22+
<div slot="slip-main" class="slip-main">向左滑滑滑~一键删除</div>
23+
</nut-leftslip> -->
1924
</div>
2025
<p>多个按钮</p>
2126
<div>
@@ -68,16 +73,16 @@ export default {
6873
]
6974
};
7075
},
71-
mounted(){
72-
// alert(123)
73-
},
7476
methods: {
7577
delSlipItem(e) {
7678
console.log(e.target);
7779
},
7880
delItem(index) {
7981
this.list.splice(index, 1);
8082
},
83+
oneDel(par) {
84+
par.remove();
85+
}
8186
}
8287
};
8388
</script>
@@ -94,7 +99,7 @@ export default {
9499
box-sizing: border-box;
95100
transform: scale(0.5);
96101
transform-origin: left bottom;
97-
// border-bottom: 1px solid #ececee;
102+
border-bottom: 1px solid #ececee;
98103
}
99104
.addr-wrap {
100105
display: flex;

‎src/packages/leftslip/doc.md

100644100755
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,21 @@
2424
</div>
2525
```
2626

27+
### 单个按钮一键删除
28+
29+
```html
30+
<nut-leftslip onlyDelBtn @oneDelete="oneDel">
31+
<div slot="slip-main" class="slip-main">单一按钮点击一键删除</div>
32+
</nut-leftslip>
33+
```
34+
35+
```javascript
36+
export default {
37+
oneDel(par) {
38+
par.remove();
39+
}
40+
};
41+
```
2742

2843
### 多个按钮
2944

@@ -95,4 +110,10 @@ export default {
95110
| -------------- | -------------------- | ------- | ------ |
96111
| slot:slip-main | 列表主内容自定义区域 | html | - |
97112
| slot:slipbtns | 左滑按钮自定义区域 | html | - |
113+
| onlyDelBtn | 设置单一删除按钮 | Boolean | false |
114+
115+
## Event
98116

117+
| 字段 | 说明 | 回调参数 |
118+
| --------- | -------------------------- | -------- |
119+
| oneDelete | 单一删除按钮模式下删除事件 | 无 |

‎src/packages/leftslip/index.js

100644100755
File mode changed.

‎src/packages/leftslip/leftslip.scss

100644100755
Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,14 @@
22
position: relative;
33
overflow: hidden;
44
&:first-child .nut-slip-main {
5-
border-top: 1px solid #efefef;
5+
border-top: 1px solid #d8d8d8;
66
}
77
.slip-main {
88
padding: 10px;
9-
min-height: 40px;
10-
line-height: 40px;
119
position: relative;
1210
overflow: hidden;
1311
display: flex;
14-
border-bottom: 1px solid #efefef;
12+
border-bottom: 1px solid #d8d8d8;
1513
background: #fff;
1614
}
1715
.nut-leftslip-item {
@@ -42,7 +40,7 @@
4240
height: 100%;
4341
}
4442
}
45-
.nut-delet-btn {
43+
.nut-delet-btn{
4644
position: absolute;
4745
right: -50px;
4846
top: 0;

‎src/packages/leftslip/leftslip.vue

100644100755
Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<span @click.prevent="onlyDelClick($event)">删除</span></div
1616
> -->
1717
<div class="nut-leftslip-item-btn">
18+
<!-- <a @click.prevent="onlyDelClick($event)">删除</a> -->
1819
<slot name="slipbtns">
1920
<a class="nut-delet-btn" @click.prevent="onlyDelClick($event)" v-if="onlyDelBtn">删除</a>
2021
</slot>
@@ -33,10 +34,6 @@ export default {
3334
btnSlipDel: {
3435
type: Boolean,
3536
default: false
36-
},
37-
customBtnWidth: {
38-
type: Number,
39-
default: 40
4037
}
4138
},
4239
data() {
@@ -47,10 +44,9 @@ export default {
4744
moveY: 0,
4845
left: 0,
4946
buttonWidth: 0,
50-
offset: 0, //移动距离
51-
deleteSlider: '', //滑动时的效果
52-
delBtnStyle: '', //单个删除键拖拽删除效果
53-
openState: false
47+
disX: 0, //移动距离
48+
deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
49+
delBtnStyle: '' //单个删除键拖拽删除效果
5450
};
5551
},
5652
mounted() {
@@ -63,15 +59,15 @@ export default {
6359
}
6460
});
6561
66-
// window.addEventListener('scroll', this.handleScroll, true);
62+
window.addEventListener('scroll', this.handleScroll, true);
6763
},
6864
beforeDestroy() {
6965
// 移除监听
70-
// window.removeEventListener('scroll', this.handleScroll, true);
66+
window.removeEventListener('scroll', this.handleScroll, true);
7167
},
7268
methods: {
7369
handleScroll() {
74-
if (this.offset) {
70+
if (this.disX) {
7571
this.restSlide();
7672
}
7773
},
@@ -84,12 +80,8 @@ export default {
8480
this.restSlide();
8581
},
8682
touchStart(e) {
87-
// if(this.openState){
88-
// return
89-
// }
9083
this.restSlide();
9184
e = e || event;
92-
// e.preventDefault();
9385
//等于1时表示此时有只有一只手指在触摸屏幕
9486
if (e.touches.length == 1) {
9587
this.startX = e.touches[0].clientX;
@@ -98,47 +90,45 @@ export default {
9890
},
9991
touchMove(e) {
10092
e = e || event;
101-
// e.preventDefault();
10293
//获取当前滑动对象
10394
let parentElement = e.currentTarget.parentElement;
104-
95+
//获取删除按钮的宽度，此宽度为滑块左滑的最大距离
10596
let itemWd = this.$refs.slipItem.offsetWidth;
106-
let wd = this.onlyDelBtn ? this.customBtnWidth : this.buttonWidth;
97+
let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
10798
10899
if (e.touches.length == 1) {
100+
// 滑动时距离浏览器左侧实时距离
109101
this.moveY = e.touches[0].clientY;
110102
this.moveX = e.touches[0].clientX;
111-
112103
if (Math.abs(this.moveY - this.startY) < 40) {
113-
this.offset = this.startX - this.moveX;
114-
104+
//起始位置减去 实时的滑动的距离，得到手指实时偏移距离
105+
this.disX = this.startX - this.moveX;
106+
// console.log(this.disX);
115107
if (this.onlyDelBtn) {
116108
//单一删除，左滑一键删除
117-
if (this.offset < 0 || this.offset == 0) {
109+
if (this.disX < 0 || this.disX == 0) {
118110
this.deleteSlider = 'transform:translateX(0px)';
119-
this.openState = false;
120111
}
121-
this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
122-
this.delBtnStyle = 'width:' + this.offset + 'px';
112+
this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
113+
this.delBtnStyle = 'width:' + this.disX + 'px';
123114
parentElement.dataset.type = 1; //设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
124-
this.openState = true;
125115
} else {
126-
if (this.offset < wd / 4 || this.offset == 0) {
116+
// 如果是向右滑动或者不滑动，不改变滑块的位置
117+
if (this.disX < wd / 4 || this.disX == 0) {
127118
this.deleteSlider = 'transform:translateX(0px)';
128119
parentElement.dataset.type = 0;
129-
this.openState = false;
130-
} else if (this.offset > wd / 4) {
120+
} else if (this.disX > wd / 4) {
131121
parentElement.dataset.type = 1;
132-
this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
122+
this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
133123
// 最大也只能等于删除按钮宽度
134-
if (this.offset >= wd) {
124+
if (this.disX * 1.5 >= wd) {
125+
// parentElement.dataset.type = 1;
135126
if (wd >= itemWd) {
136-
this.deleteSlider = 'transform:translateX(-' + (itemWd - this.customBtnWidth) + 'px)';
127+
this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
137128
} else {
138129
this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
139130
}
140131
}
141-
this.openState = true;
142132
}
143133
}
144134
}
@@ -148,49 +138,47 @@ export default {
148138
e = e || event;
149139
let parentElement = e.currentTarget.parentElement;
150140
let itemWd = this.$refs.slipItem.offsetWidth;
151-
let wd = this.onlyDelBtn ? this.customBtnWidth : this.buttonWidth;
152-
141+
let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
153142
if (e.changedTouches.length == 1) {
154143
let endY = e.changedTouches[0].clientY;
155144
if (Math.abs(this.startY - endY) < 40) {
156145
let endX = e.changedTouches[0].clientX;
157-
this.offset = this.startX - endX;
158-
146+
this.disX = this.startX - endX;
147+
// console.log('touchEndthis.disX:', this.disX);
159148
if (this.onlyDelBtn) {
160149
//单一按钮，左滑一键删除
161-
if (this.offset < 0 || this.offset == 0) {
150+
if (this.disX < 0 || this.disX == 0) {
162151
this.deleteSlider = 'transform:translateX(0px)';
163152
parentElement.dataset.type = 0;
164-
this.openState = false;
165-
} else if (this.offset < itemWd - 20) {
153+
} else if (this.disX < itemWd - 20) {
166154
parentElement.dataset.type = 1;
167155
this.deleteSlider = 'transform:translateX(-50px);';
168156
this.delBtnStyle = ' width:0px;';
169-
this.openState = true;
170157
} else {
171158
this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
172159
this.delBtnStyle = ' width:' + itemWd + 'px;';
173160
parentElement.dataset.type = 1;
174-
this.openState = true;
175161
this.onlyDelClick();
176162
}
177163
} else {
178-
if (this.offset < wd / 4) {
164+
//如果距离小于删除按钮的四分之一,强行回到起点
165+
166+
if (this.disX < wd / 4) {
179167
parentElement.dataset.type = 0;
180168
this.deleteSlider = 'transform:translateX(0px)';
181-
this.openState = false;
182169
} else {
183170
//大于一半 滑动到最大值
184171
parentElement.dataset.type = 1;
185172
if (wd >= itemWd) {
186173
//按钮数不可超出整行宽度
187-
this.deleteSlider = 'transform:translateX(-' + (itemWd - this.customBtnWidth) + 'px)';
174+
this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
188175
} else {
189176
this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
190177
}
191-
this.openState = true;
192178
}
193179
}
180+
181+
// console.log('touchEnd:dataset', parentElement.dataset.type);
194182
}
195183
}
196184
},

0 commit comments

Comments
 (0)