uv-swipe-action-item.vue
6.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<template>
<view class="uv-swipe-action-item" ref="uv-swipe-action-item">
<view class="uv-swipe-action-item__right">
<slot name="button">
<view v-for="(item,index) in options" :key="index" class="uv-swipe-action-item__right__button"
:ref="`uv-swipe-action-item__right__button-${index}`" :style="[{
alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
}]" @tap="buttonClickHandler(item, index)">
<view class="uv-swipe-action-item__right__button__wrapper" :style="[{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
padding: item.style && item.style.borderRadius ? '0' : '0 15px',
}, item.style]">
<uv-icon v-if="item.icon" :name="item.icon"
:color="item.style && item.style.color ? item.style.color : '#ffffff'"
:size="item.iconSize ? $uv.addUnit(item.iconSize) : item.style && item.style.fontSize ? $uv.getPx(item.style.fontSize) * 1.2 : 17"
:customStyle="{
marginRight: item.text ? '2px' : 0
}"></uv-icon>
<text v-if="item.text" class="uv-swipe-action-item__right__button__wrapper__text uv-line-1"
:style="[{
color: item.style && item.style.color ? item.style.color : '#ffffff',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
}]">{{ item.text }}</text>
</view>
</view>
</slot>
</view>
<!-- #ifndef APP-NVUE -->
<view class="uv-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
:change:size="wxs.sizeChange">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="uv-swipe-action-item__content" ref="uv-swipe-action-item__content" @panstart="onTouchstart"
@tap="clickHandler">
<!-- #endif -->
<slot />
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
import touch from '@/uni_modules/uv-ui-tools/libs/mixin/touch.js'
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
// #ifdef APP-NVUE
import nvue from './nvue.js';
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
import wxs from './wxs.js';
// #endif
/**
* SwipeActionItem 滑动单元格子组件
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
* @tutorial https://www.uvui.cn/components/swipeAction.html
* @property {Boolean} show 控制打开或者关闭（默认 false ）
* @property {String | Number} index 标识符，如果是v-for，可用index索引
* @property {Boolean} disabled 是否禁用（默认 false ）
* @property {Boolean} autoClose 是否自动关闭其他swipe按钮组（默认 true ）
* @property {Number} threshold 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
* @property {Array} options 右侧按钮内容
* @property {String | Number} duration 动画过渡时间，单位ms（默认 350 ）
* @event {Function(index)} open 组件打开时触发
* @event {Function(index)} close 组件关闭时触发
* @example <uv-swipe-action><uv-swipe-action-item :options="options1" ></uv-swipe-action-item></uv-swipe-action>
*/
export default {
name: 'uv-swipe-action-item',
emits: ['click'],
// #ifndef APP-NVUE
mixins: [mpMixin, mixin, props, touch],
// #endif
// #ifdef APP-NVUE
mixins: [mpMixin, mixin, props, nvue , touch],
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
mixins: [mpMixin, mixin, props, touch, wxs],
// #endif
data() {
return {
// 按钮的尺寸信息
size: {},
// 父组件uv-swipe-action的参数
parentData: {
autoClose: true,
},
// 当前状态，open-打开，close-关闭
status: 'close',
}
},
watch: {
// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
wxsInit(newValue, oldValue) {
this.queryRect()
}
},
computed: {
wxsInit() {
return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
}
},
mounted() {
// #ifdef MP-TOUTIAO
this.$uv.error('抖音小程序暂不支持wxs，故该组件暂不支持抖音小程序');
// #endif
this.init()
},
methods: {
init() {
// 初始化父组件数据
this.updateParentData()
// #ifndef APP-NVUE
this.$uv.sleep().then(() => {
this.queryRect()
})
// #endif
},
updateParentData() {
// 此方法在mixin中
this.getParentData('uv-swipe-action')
},
// #ifndef APP-NVUE
// 查询节点
queryRect() {
this.$uvGetRect('.uv-swipe-action-item__right__button', true).then(buttons => {
this.size = {
buttons,
show: this.show,
disabled: this.disabled,
threshold: this.threshold,
duration: this.duration
}
})
},
// #endif
// 按钮被点击
buttonClickHandler(item, index) {
this.$emit('click', {
index,
name: this.name
})
}
},
}
</script>
<style lang="scss" scoped>
$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-swipe-action-item {
position: relative;
overflow: hidden;
/* #ifndef APP-NVUE || MP-WEIXIN */
touch-action: pan-y;
/* #endif */
&__content {
background-color: #FFFFFF;
z-index: 10;
}
&__right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
@include flex;
&__button {
@include flex;
justify-content: center;
overflow: hidden;
align-items: center;
&__wrapper {
@include flex;
align-items: center;
justify-content: center;
padding: 0 15px;
&__text {
@include flex;
align-items: center;
color: #FFFFFF;
font-size: 15px;
text-align: center;
justify-content: center;
}
}
}
}
}
</style>