From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-swipe-action/u-swipe-action.vue | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 257 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-swipe-action/u-swipe-action.vue b/uview-ui/components/u-swipe-action/u-swipe-action.vue
new file mode 100644
index 0000000..d10cf00
--- /dev/null
+++ b/uview-ui/components/u-swipe-action/u-swipe-action.vue
@@ -0,0 +1,257 @@
+<template>
+ <view class="">
+ <movable-area class="u-swipe-action" :style="{ backgroundColor: bgColor }">
+ <movable-view
+ class="u-swipe-view"
+ @change="change"
+ @touchend="touchend"
+ @touchstart="touchstart"
+ direction="horizontal"
+ :disabled="disabled"
+ :x="moveX"
+ :style="{
+ width: movableViewWidth ? movableViewWidth : '100%'
+ }"
+ >
+ <view
+ class="u-swipe-content"
+ @tap.stop="contentClick"
+ >
+ <slot></slot>
+ </view>
+ <view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
+ <view class="u-btn-text">{{ item.text }}</view>
+ </view>
+ </movable-view>
+ </movable-area>
+ </view>
+</template>
+
+<script>
+/**
+ * swipeAction 宸︽粦鍗曞厓鏍�
+ * @description 璇ョ粍浠朵竴鑸敤浜庡乏婊戝敜鍑烘搷浣滆彍鍗曠殑鍦烘櫙锛岀敤鐨勬渶澶氱殑鏄乏婊戝垹闄ゆ搷浣溿��
+ * @tutorial https://www.uviewui.com/components/swipeAction.html
+ * @property {String} bg-color 鏁翠釜缁勪欢鑳屾櫙棰滆壊锛堥粯璁�#ffffff锛�
+ * @property {Array} options 鏁扮粍褰㈠紡锛屽彲浠ラ厤缃儗鏅鑹插拰鏂囧瓧
+ * @property {String Number} index 鏍囪瘑绗︼紝鐐瑰嚮鏃跺�欑敤浜庡尯鍒嗙偣鍑讳簡鍝竴涓紝鐢╲-for寰幆鏃剁殑index鍗冲彲
+ * @property {String Number} btn-width 鎸夐挳瀹藉害锛屽崟浣峳px锛堥粯璁�180锛�
+ * @property {Boolean} disabled 鏄惁绂佹鏌愪釜swipeAction婊戝姩锛堥粯璁alse锛�
+ * @property {Boolean} show 鎵撳紑鎴栬�呭叧闂煇涓粍浠讹紙榛樿false锛�
+ * @event {Function} click 鐐瑰嚮缁勪欢鏃惰Е鍙�
+ * @event {Function} close 缁勪欢瑙﹀彂鍏抽棴鐘舵�佹椂
+ * @event {Function} content-click 鐐瑰嚮鍐呭鏃惰Е鍙�
+ * @event {Function} open 缁勪欢瑙﹀彂鎵撳紑鐘舵�佹椂
+ * @example <u-swipe-action btn-text="鏀惰棌">...</u-swipe-action>
+ */
+export default {
+ name: 'u-swipe-action',
+ props: {
+ // index鍊硷紝鐢ㄤ簬寰楃煡鐐瑰嚮鍒犻櫎鐨勬槸鍝釜鎸夐挳
+ index: {
+ type: [Number, String],
+ default: ''
+ },
+ // 婊戝姩鎸夐挳鐨勫搴︼紝鍗曚綅涓簉px
+ btnWidth: {
+ type: [String, Number],
+ default: 180
+ },
+ // 鏄惁绂佹鏌愪釜action婊戝姩
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // 鎵撳紑鎴栬�呭叧闂粍浠�
+ show: {
+ type: Boolean,
+ default: false
+ },
+ // 缁勪欢鑳屾櫙棰滆壊
+ bgColor: {
+ type: String,
+ default: '#ffffff'
+ },
+ // 鏄惁浣挎墜鏈哄彂鐢熺煭淇冮渿鍔紝鐩墠鍙湪iOS鐨勫井淇″皬绋嬪簭鏈夋晥(2020-05-06)
+ vibrateShort: {
+ type: Boolean,
+ default: false
+ },
+ // 鎸夐挳鎿嶄綔鍙傛暟
+ options: {
+ type: Array,
+ default() {
+ return [];
+ }
+ }
+ },
+ watch: {
+ show: {
+ immediate: true,
+ handler(nVal, oVal) {
+ if (nVal) {
+ this.open();
+ } else {
+ this.close();
+ }
+ }
+ }
+ },
+ data() {
+ return {
+ moveX: 0, // movable-view鍏冪礌鍦▁杞翠笂闇�瑕佺Щ鍔ㄧ殑鐩爣绉诲姩璺濈锛岀敤浜庡睍寮�鎴栨敹璧锋粦鍔ㄧ殑鎸夐挳
+ scrollX: 0, // movable-view绉诲姩杩囩▼涓骇鐢熺殑change浜嬩欢涓殑x杞寸Щ鍔ㄥ��
+ status: false, // 婊戝姩鐨勭姸鎬侊紝琛ㄧず褰撳墠鏄睍寮�杩樻槸鍏抽棴鎸夐挳鐨勭姸鎬�
+ movableAreaWidth: 0, // 婊戝姩鍖哄煙
+ elId: this.$u.guid(), // id锛岀敤浜庨�氱煡鍙﹀缁勪欢鍏抽棴鏃剁殑璇嗗埆
+ showBtn: false, // 鍒氬紑濮嬫覆鏌撹鍥炬椂涓嶆樉绀哄彸杈圭殑鎸夐挳锛岄伩鍏嶈鍥鹃棯鍔�
+ };
+ },
+ computed: {
+ movableViewWidth() {
+ return this.movableAreaWidth + this.allBtnWidth + 'px';
+ },
+ innerBtnWidth() {
+ return uni.upx2px(this.btnWidth);
+ },
+ allBtnWidth() {
+ return uni.upx2px(this.btnWidth) * this.options.length;
+ },
+ btnStyle() {
+ return style => {
+ let css = {};
+ style.width = this.btnWidth + 'rpx';
+ return style;
+ };
+ }
+ },
+ mounted() {
+ setTimeout(() => {
+ this.getActionRect();
+ }, 50);
+ },
+ methods: {
+ // 鐐瑰嚮鎸夐挳
+ btnClick(index) {
+ this.status = false;
+ // this.index涓虹偣鍑荤殑鍑犱釜缁勪欢锛宨ndex涓虹偣鍑绘煇涓粍浠剁殑绗嚑涓寜閽�(options鏁扮粍鐨勭储寮�)
+ this.$emit('click', this.index, index);
+ },
+ // movable-view鍏冪礌绉诲姩浜嬩欢
+ change(e) {
+ this.scrollX = e.detail.x;
+ },
+ // 鍏抽棴鎸夐挳鐘舵��
+ close() {
+ this.moveX = 0;
+ this.status = false;
+ },
+ // 鎵撳紑鎸夐挳鐨勭姸鎬�
+ open() {
+ if (this.disabled) return;
+ this.moveX = -this.allBtnWidth;
+ this.status = true;
+ },
+ // 鐢ㄦ埛鎵嬫寚绂诲紑movable-view鍏冪礌锛屽仠姝㈣Е鎽�
+ touchend() {
+ this.moveX = this.scrollX;
+ // 鍋滄瑙︽懜鏃跺�欙紝鍒ゆ柇褰撳墠鏄睍寮�杩樻槸鍏抽棴鐘舵��
+ // 鍏抽棴鐘舵��
+ // 杩欎竴姝ュ緢閲嶈锛岄渶瑕佸厛缁檛his.moveX涓�涓彉鍖栫殑闅忔満鍊硷紝鍚﹀垯鍥犱负鍓嶅悗璁剧疆鐨勪负鍚屼竴涓��
+ // props鍗曞悜鏁版嵁娴佺殑鍘熷洜锛屽鑷磎ovable-view鍏冪礌涓嶄細鍙戠敓鍙樺寲锛屽垏璁帮紝璇﹁鏂囨。锛�
+ // https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
+ this.$nextTick(function() {
+ if (this.status == false) {
+ // 鍏抽棴鐘舵�佸乏婊戯紝浜х敓鐨剎杞翠綅绉讳负璐熷�硷紝涔熷氨鏄婊戝姩鐨勮窛绂诲ぇ浜庢寜閽殑鍥涘垎涔嬩竴瀹藉害锛岃嚜鍔ㄥ睍寮�鎸夐挳
+ if (this.scrollX <= -this.allBtnWidth / 4) {
+ this.moveX = -this.allBtnWidth; // 鎸夐挳瀹藉害鐨勮礋鍊硷紝鍗充负灞曞紑鐘舵�乵ovable-view鍏冪礌宸︽粦鐨勮窛绂�
+ this.status = true; // 鏍囧織褰撳墠涓哄睍寮�鐘舵��
+ this.emitOpenEvent();
+ // 浜х敓闇囧姩鏁堟灉
+ if (this.vibrateShort) uni.vibrateShort();
+ } else {
+ this.moveX = 0; // 濡傛灉璺濈娌℃湁鎸夐挳瀹藉害鐨勫洓鍒嗕箣涓�锛岃嚜鍔ㄦ敹璧�
+ this.status = false;
+ this.emitCloseEvent();
+ }
+ } else {
+ // 濡傛灉鍦ㄦ墦寮�鐨勭姸鎬佷笅锛屽彸婊戝姩鐨勮窛绂籜杞村亸绉昏秴杩囨寜閽殑鍥涘垎涔嬩竴(璐熷�煎弽杩囨潵鐨勫洓鍒嗕箣涓�)锛岃嚜鍔ㄦ敹璧锋寜閽�
+ if (this.scrollX > (-this.allBtnWidth * 3) / 4) {
+ this.moveX = 0;
+ this.$nextTick(() => {
+ this.moveX = 101;
+ });
+ this.status = false;
+ this.emitCloseEvent();
+ } else {
+ this.moveX = -this.allBtnWidth;
+ this.status = true;
+ this.emitOpenEvent();
+ }
+ }
+ });
+ },
+ emitOpenEvent() {
+ this.$emit('open', this.index);
+ },
+ emitCloseEvent() {
+ this.$emit('close', this.index);
+ },
+ // 寮�濮嬭Е鎽�
+ touchstart() {},
+ getActionRect() {
+ this.$uGetRect('.u-swipe-action').then(res => {
+ this.movableAreaWidth = res.width;
+ // 绛夎鍥炬洿鏂板畬鍚庯紝鍐嶆樉绀哄彸杈圭殑鍙粦鍔ㄦ寜閽紝闃叉杩欎簺鎸夐挳浼�"闂竴涓�"
+ this.$nextTick(() => {
+ this.showBtn = true;
+ })
+ });
+ },
+ // 鐐瑰嚮鍐呭瑙﹀彂浜嬩欢
+ contentClick() {
+ // 鐐瑰嚮鍐呭鏃讹紝濡傛灉褰撳墠涓烘墦寮�鐘舵�侊紝鏀惰捣缁勪欢
+ if (this.status == true) {
+ this.status = 'close';
+ this.moveX = 0;
+ }
+ this.$emit('content-click', this.index);
+ }
+ }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-swipe-action {
+ width: auto;
+ height: initial;
+ position: relative;
+ overflow: hidden;
+}
+
+.u-swipe-view {
+ @include vue-flex;
+ height: initial;
+ position: relative;
+ /* 杩欎竴鍙ュ緢鍏抽敭锛岃鐩栭粯璁ょ殑缁濆瀹氫綅 */
+}
+
+.u-swipe-content {
+ flex: 1;
+}
+
+.u-swipe-del {
+ position: relative;
+ font-size: 30rpx;
+ color: #ffffff;
+}
+
+.u-btn-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+</style>
--
Gitblit v1.9.3