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