From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue | 190 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 190 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue b/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue new file mode 100644 index 0000000..1fab304 --- /dev/null +++ b/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue @@ -0,0 +1,190 @@ +<template> + <view class="u-swipe-action-item" ref="u-swipe-action-item"> + <view class="u-swipe-action-item__right"> + <slot name="button"> + <view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button" + :ref="`u-swipe-action-item__right__button-${index}`" :style="[{ + alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch' + }]" @tap="buttonClickHandler(item, index)"> + <view class="u-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]"> + <u-icon v-if="item.icon" :name="item.icon" + :color="item.style && item.style.color ? item.style.color : '#ffffff'" + :size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17" + :customStyle="{ + marginRight: item.text ? '2px' : 0 + }"></u-icon> + <text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-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> + <!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ --> + <view class="u-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="u-swipe-action-item__content" ref="u-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 '../../libs/mixin/touch.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.uviewui.com/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 <u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action> + */ + export default { + name: 'u-swipe-action-item', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch], + // #ifdef APP-NVUE + mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch], + // #endif + // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ + mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs], + // #endif + data() { + return { + // ��������������������� + size: {}, + // ���������u-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() { + this.init() + }, + methods: { + init() { + // ������������������������ + this.updateParentData() + // #ifndef APP-NVUE + uni.$u.sleep().then(() => { + this.queryRect() + }) + // #endif + }, + updateParentData() { + // ������������mixin��� + this.getParentData('u-swipe-action') + }, + // #ifndef APP-NVUE + // ������������ + queryRect() { + this.$uGetRect('.u-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> + @import "../../libs/css/components.scss"; + + .u-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> -- Gitblit v1.8.0