From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/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/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue b/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue
index e69de29..1fab304 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue
+++ b/minipro_standard/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 鏍囪瘑绗︼紝濡傛灉鏄痸-for锛屽彲鐢╥ndex绱㈠紩
+ * @property {Boolean} disabled 鏄惁绂佺敤锛堥粯璁� false 锛�
+ * @property {Boolean} autoClose 鏄惁鑷姩鍏抽棴鍏朵粬swipe鎸夐挳缁勶紙榛樿 true 锛�
+ * @property {Number} threshold 婊戝姩璺濈闃堝�硷紝鍙湁澶т簬姝ゅ�硷紝鎵嶈璁や负鏄鎵撳紑鑿滃崟锛堥粯璁� 30 锛�
+ * @property {Array} options 鍙充晶鎸夐挳鍐呭
+ * @property {String | Number} duration 鍔ㄧ敾杩囨浮鏃堕棿锛屽崟浣峬s锛堥粯璁� 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: {},
+ // 鐖剁粍浠秛-swipe-action鐨勫弬鏁�
+ parentData: {
+ autoClose: true,
+ },
+ // 褰撳墠鐘舵�侊紝open-鎵撳紑锛宑lose-鍏抽棴
+ 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.9.3