江西小程序管理端
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.

190 lines
5.8 KiB

1 year ago
  1. <template>
  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. <style lang="scss" scoped>
  144. @import "../../libs/css/components.scss";
  145. .u-swipe-action-item {
  146. position: relative;
  147. overflow: hidden;
  148. /* #ifndef APP-NVUE || MP-WEIXIN */
  149. touch-action: pan-y;
  150. /* #endif */
  151. &__content {
  152. background-color: #FFFFFF;
  153. z-index: 10;
  154. }
  155. &__right {
  156. position: absolute;
  157. top: 0;
  158. bottom: 0;
  159. right: 0;
  160. @include flex;
  161. &__button {
  162. @include flex;
  163. justify-content: center;
  164. overflow: hidden;
  165. align-items: center;
  166. &__wrapper {
  167. @include flex;
  168. align-items: center;
  169. justify-content: center;
  170. padding: 0 15px;
  171. &__text {
  172. @include flex;
  173. align-items: center;
  174. color: #FFFFFF;
  175. font-size: 15px;
  176. text-align: center;
  177. justify-content: center;
  178. }
  179. }
  180. }
  181. }
  182. }
  183. </style>