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-action-sheet/u-action-sheet.vue | 190 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 190 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-action-sheet/u-action-sheet.vue b/uview-ui/components/u-action-sheet/u-action-sheet.vue
new file mode 100644
index 0000000..722b668
--- /dev/null
+++ b/uview-ui/components/u-action-sheet/u-action-sheet.vue
@@ -0,0 +1,190 @@
+<template>
+ <u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
+ length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
+ <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+ {{tips.text}}
+ </view>
+ <block v-for="(item, index) in list" :key="index">
+ <view
+ @touchmove.stop.prevent
+ @tap="itemClick(index)"
+ :style="[itemStyle(index)]"
+ class="u-action-sheet-item u-line-1"
+ :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+ :hover-stay-time="150"
+ >
+ <text>{{item.text}}</text>
+ <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
+ </view>
+ </block>
+ <view class="u-gab" v-if="cancelBtn">
+ </view>
+ <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
+ :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
+ </u-popup>
+</template>
+
+<script>
+ /**
+ * actionSheet 鎿嶄綔鑿滃崟
+ * @description 鏈粍浠剁敤浜庝粠搴曢儴寮瑰嚭涓�涓搷浣滆彍鍗曪紝渚涚敤鎴烽�夋嫨骞惰繑鍥炵粨鏋溿�傛湰缁勪欢鍔熻兘绫讳技浜巙ni鐨剈ni.showActionSheetAPI锛岄厤缃洿鍔犵伒娲伙紝鎵�鏈夊钩鍙伴兘琛ㄧ幇涓�鑷淬��
+ * @tutorial https://www.uviewui.com/components/actionSheet.html
+ * @property {Array<Object>} list 鎸夐挳鐨勬枃瀛楁暟缁勶紝瑙佸畼鏂规枃妗ｇず渚�
+ * @property {Object} tips 椤堕儴鐨勬彁绀烘枃瀛楋紝瑙佸畼鏂规枃妗ｇず渚�
+ * @property {String} cancel-text 鍙栨秷鎸夐挳鐨勬彁绀烘枃瀛�
+ * @property {Boolean} cancel-btn 鏄惁鏄剧ず搴曢儴鐨勫彇娑堟寜閽紙榛樿true锛�
+ * @property {Number String} border-radius 寮瑰嚭閮ㄥ垎椤堕儴宸﹀彸鐨勫渾瑙掑�硷紝鍗曚綅rpx锛堥粯璁�0锛�
+ * @property {Boolean} mask-close-able 鐐瑰嚮閬僵鏄惁鍙互鍏抽棴锛堥粯璁rue锛�
+ * @property {Boolean} safe-area-inset-bottom 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯閫傞厤锛堥粯璁alse锛�
+ * @property {Number String} z-index z-index鍊硷紙榛樿1075锛�
+ * @property {String} cancel-text 鍙栨秷鎸夐挳鐨勬彁绀烘枃瀛�
+ * @event {Function} click 鐐瑰嚮ActionSheet鍒楄〃椤规椂瑙﹀彂
+ * @event {Function} close 鐐瑰嚮鍙栨秷鎸夐挳鏃惰Е鍙�
+ * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+ */
+ export default {
+ name: "u-action-sheet",
+ props: {
+ // 鐐瑰嚮閬僵鏄惁鍙互鍏抽棴actionsheet
+ maskCloseAble: {
+ type: Boolean,
+ default: true
+ },
+ // 鎸夐挳鐨勬枃瀛楁暟缁勶紝鍙互鑷畾涔夐鑹插拰瀛椾綋澶у皬锛屽瓧浣撳崟浣嶄负rpx
+ list: {
+ type: Array,
+ default () {
+ // 濡備笅
+ // return [{
+ // text: '纭畾',
+ // color: '',
+ // fontSize: ''
+ // }]
+ return [];
+ }
+ },
+ // 椤堕儴鐨勬彁绀烘枃瀛�
+ tips: {
+ type: Object,
+ default () {
+ return {
+ text: '',
+ color: '',
+ fontSize: '26'
+ }
+ }
+ },
+ // 搴曢儴鐨勫彇娑堟寜閽�
+ cancelBtn: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯閫傞厤锛屽紑鍚殑璇濓紝浼氬湪iPhoneX鏈哄瀷搴曢儴娣诲姞涓�瀹氱殑鍐呰竟璺�
+ safeAreaInsetBottom: {
+ type: Boolean,
+ default: false
+ },
+ // 閫氳繃鍙屽悜缁戝畾鎺у埗缁勪欢鐨勫脊鍑轰笌鏀惰捣
+ value: {
+ type: Boolean,
+ default: false
+ },
+ // 寮瑰嚭鐨勯《閮ㄥ渾瑙掑��
+ borderRadius: {
+ type: [String, Number],
+ default: 0
+ },
+ // 寮瑰嚭鐨剒-index鍊�
+ zIndex: {
+ type: [String, Number],
+ default: 0
+ },
+ // 鍙栨秷鎸夐挳鐨勬枃瀛楁彁绀�
+ cancelText: {
+ type: String,
+ default: '鍙栨秷'
+ }
+ },
+ computed: {
+ // 椤堕儴鎻愮ず鐨勬牱寮�
+ tipsStyle() {
+ let style = {};
+ if (this.tips.color) style.color = this.tips.color;
+ if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
+ return style;
+ },
+ // 鎿嶄綔椤圭洰鐨勬牱寮�
+ itemStyle() {
+ return (index) => {
+ let style = {};
+ if (this.list[index].color) style.color = this.list[index].color;
+ if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
+ // 閫夐」琚鐢ㄧ殑鏍峰紡
+ if (this.list[index].disabled) style.color = '#c0c4cc';
+ return style;
+ }
+ },
+ uZIndex() {
+ // 濡傛灉鐢ㄦ埛鏈変紶閫抸-index鍊硷紝浼樺厛浣跨敤
+ return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+ }
+ },
+ methods: {
+ // 鐐瑰嚮鍙栨秷鎸夐挳
+ close() {
+ // 鍙戦�乮nput浜嬩欢锛屽苟涓嶄細浣滅敤浜庣埗缁勪欢锛岃�屾槸瑕佽缃粍浠跺唴閮ㄩ�氳繃props浼犻�掔殑value鍙傛暟
+ // 杩欐槸涓�涓獀ue鍙戦�佷簨浠剁殑鐗规畩鐢ㄦ硶
+ this.popupClose();
+ this.$emit('close');
+ },
+ // 寮圭獥鍏抽棴
+ popupClose() {
+ this.$emit('input', false);
+ },
+ // 鐐瑰嚮鏌愪竴涓猧tem
+ itemClick(index) {
+ // disabled鐨勯」绂佹鐐瑰嚮
+ if(this.list[index].disabled) return;
+ this.$emit('click', index);
+ this.$emit('input', false);
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-tips {
+ font-size: 26rpx;
+ text-align: center;
+ padding: 34rpx 0;
+ line-height: 1;
+ color: $u-tips-color;
+ }
+
+ .u-action-sheet-item {
+ @include vue-flex;;
+ line-height: 1;
+ justify-content: center;
+ align-items: center;
+ font-size: 32rpx;
+ padding: 34rpx 0;
+ flex-direction: column;
+ }
+
+ .u-action-sheet-item__subtext {
+ font-size: 24rpx;
+ color: $u-tips-color;
+ margin-top: 20rpx;
+ }
+
+ .u-gab {
+ height: 12rpx;
+ background-color: rgb(234, 234, 236);
+ }
+
+ .u-actionsheet-cancel {
+ color: $u-main-color;
+ }
+</style>
--
Gitblit v1.9.3