uv-swipe-action-item.vue 6.2 KB

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