You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

255 lines
6.9 KiB

3 years ago
  1. <template>
  2. <view class="">
  3. <movable-area class="u-swipe-action" :style="{ backgroundColor: bgColor }">
  4. <movable-view
  5. class="u-swipe-view"
  6. @change="change"
  7. @touchend="touchend"
  8. @touchstart="touchstart"
  9. direction="horizontal"
  10. :disabled="disabled"
  11. :x="moveX"
  12. :style="{
  13. width: movableViewWidth ? movableViewWidth : '100%'
  14. }"
  15. >
  16. <view
  17. class="u-swipe-content"
  18. @tap.stop="contentClick"
  19. >
  20. <slot></slot>
  21. </view>
  22. <view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
  23. <view class="u-btn-text">{{ item.text }}</view>
  24. </view>
  25. </movable-view>
  26. </movable-area>
  27. </view>
  28. </template>
  29. <script>
  30. /**
  31. * swipeAction 左滑单元格
  32. * @description 该组件一般用于左滑唤出操作菜单的场景用的最多的是左滑删除操作
  33. * @tutorial https://www.uviewui.com/components/swipeAction.html
  34. * @property {String} bg-color 整个组件背景颜色默认#ffffff
  35. * @property {Array} options 数组形式可以配置背景颜色和文字
  36. * @property {String Number} index 标识符点击时候用于区分点击了哪一个用v-for循环时的index即可
  37. * @property {String Number} btn-width 按钮宽度单位rpx默认180
  38. * @property {Boolean} disabled 是否禁止某个swipeAction滑动默认false
  39. * @property {Boolean} show 打开或者关闭某个组件默认false
  40. * @event {Function} click 点击组件时触发
  41. * @event {Function} close 组件触发关闭状态时
  42. * @event {Function} content-click 点击内容时触发
  43. * @event {Function} open 组件触发打开状态时
  44. * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
  45. */
  46. export default {
  47. name: 'u-swipe-action',
  48. props: {
  49. // index值,用于得知点击删除的是哪个按钮
  50. index: {
  51. type: [Number, String],
  52. default: ''
  53. },
  54. // 滑动按钮的宽度,单位为rpx
  55. btnWidth: {
  56. type: [String, Number],
  57. default: 180
  58. },
  59. // 是否禁止某个action滑动
  60. disabled: {
  61. type: Boolean,
  62. default: false
  63. },
  64. // 打开或者关闭组件
  65. show: {
  66. type: Boolean,
  67. default: false
  68. },
  69. // 组件背景颜色
  70. bgColor: {
  71. type: String,
  72. default: '#ffffff'
  73. },
  74. // 是否使手机发生短促震动,目前只在iOS的微信小程序有效(2020-05-06)
  75. vibrateShort: {
  76. type: Boolean,
  77. default: false
  78. },
  79. // 按钮操作参数
  80. options: {
  81. type: Array,
  82. default() {
  83. return [];
  84. }
  85. }
  86. },
  87. watch: {
  88. show: {
  89. immediate: true,
  90. handler(nVal, oVal) {
  91. if (nVal) {
  92. this.open();
  93. } else {
  94. this.close();
  95. }
  96. }
  97. }
  98. },
  99. data() {
  100. return {
  101. moveX: 0, // movable-view元素在x轴上需要移动的目标移动距离,用于展开或收起滑动的按钮
  102. scrollX: 0, // movable-view移动过程中产生的change事件中的x轴移动值
  103. status: false, // 滑动的状态,表示当前是展开还是关闭按钮的状态
  104. movableAreaWidth: 0, // 滑动区域
  105. elId: this.$u.guid(), // id,用于通知另外组件关闭时的识别
  106. showBtn: false, // 刚开始渲染视图时不显示右边的按钮,避免视图闪动
  107. };
  108. },
  109. computed: {
  110. movableViewWidth() {
  111. return this.movableAreaWidth + this.allBtnWidth + 'px';
  112. },
  113. innerBtnWidth() {
  114. return uni.upx2px(this.btnWidth);
  115. },
  116. allBtnWidth() {
  117. return uni.upx2px(this.btnWidth) * this.options.length;
  118. },
  119. btnStyle() {
  120. return style => {
  121. let css = {};
  122. style.width = this.btnWidth + 'rpx';
  123. return style;
  124. };
  125. }
  126. },
  127. mounted() {
  128. this.getActionRect();
  129. },
  130. methods: {
  131. // 点击按钮
  132. btnClick(index) {
  133. this.status = false;
  134. // this.index为点击的几个组件,index为点击某个组件的第几个按钮(options数组的索引)
  135. this.$emit('click', this.index, index);
  136. },
  137. // movable-view元素移动事件
  138. change(e) {
  139. this.scrollX = e.detail.x;
  140. },
  141. // 关闭按钮状态
  142. close() {
  143. this.moveX = 0;
  144. this.status = false;
  145. },
  146. // 打开按钮的状态
  147. open() {
  148. if (this.disabled) return;
  149. this.moveX = -this.allBtnWidth;
  150. this.status = true;
  151. },
  152. // 用户手指离开movable-view元素,停止触摸
  153. touchend() {
  154. this.moveX = this.scrollX;
  155. // 停止触摸时候,判断当前是展开还是关闭状态
  156. // 关闭状态
  157. // 这一步很重要,需要先给this.moveX一个变化的随机值,否则因为前后设置的为同一个值
  158. // props单向数据流的原因,导致movable-view元素不会发生变化,切记,详见文档:
  159. // https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
  160. this.$nextTick(function() {
  161. if (this.status == false) {
  162. // 关闭状态左滑,产生的x轴位移为负值,也就是说滑动的距离大于按钮的四分之一宽度,自动展开按钮
  163. if (this.scrollX <= -this.allBtnWidth / 4) {
  164. this.moveX = -this.allBtnWidth; // 按钮宽度的负值,即为展开状态movable-view元素左滑的距离
  165. this.status = true; // 标志当前为展开状态
  166. this.emitOpenEvent();
  167. // 产生震动效果
  168. if (this.vibrateShort) uni.vibrateShort();
  169. } else {
  170. this.moveX = 0; // 如果距离没有按钮宽度的四分之一,自动收起
  171. this.status = false;
  172. this.emitCloseEvent();
  173. }
  174. } else {
  175. // 如果在打开的状态下,右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三),自动收起按钮
  176. if (this.scrollX > (-this.allBtnWidth * 3) / 4) {
  177. this.moveX = 0;
  178. this.$nextTick(() => {
  179. this.moveX = 101;
  180. });
  181. this.status = false;
  182. this.emitCloseEvent();
  183. } else {
  184. this.moveX = -this.allBtnWidth;
  185. this.status = true;
  186. this.emitOpenEvent();
  187. }
  188. }
  189. });
  190. },
  191. emitOpenEvent() {
  192. this.$emit('open', this.index);
  193. },
  194. emitCloseEvent() {
  195. this.$emit('close', this.index);
  196. },
  197. // 开始触摸
  198. touchstart() {},
  199. getActionRect() {
  200. this.$uGetRect('.u-swipe-action').then(res => {
  201. this.movableAreaWidth = res.width;
  202. // 等视图更新完后,再显示右边的可滑动按钮,防止这些按钮会"闪一下"
  203. this.$nextTick(() => {
  204. this.showBtn = true;
  205. })
  206. });
  207. },
  208. // 点击内容触发事件
  209. contentClick() {
  210. // 点击内容时,如果当前为打开状态,收起组件
  211. if (this.status == true) {
  212. this.status = 'close';
  213. this.moveX = 0;
  214. }
  215. this.$emit('content-click', this.index);
  216. }
  217. }
  218. };
  219. </script>
  220. <style scoped lang="scss">
  221. @import "../../libs/css/style.components.scss";
  222. .u-swipe-action {
  223. width: auto;
  224. height: initial;
  225. position: relative;
  226. overflow: hidden;
  227. }
  228. .u-swipe-view {
  229. @include vue-flex;
  230. height: initial;
  231. position: relative;
  232. /* 这一句很关键,覆盖默认的绝对定位 */
  233. }
  234. .u-swipe-content {
  235. flex: 1;
  236. }
  237. .u-swipe-del {
  238. position: relative;
  239. font-size: 30rpx;
  240. color: #ffffff;
  241. }
  242. .u-btn-text {
  243. position: absolute;
  244. top: 50%;
  245. left: 50%;
  246. transform: translate(-50%, -50%);
  247. }
  248. </style>