From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 10 Nov 2023 13:08:29 +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