From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-modal/u-modal.vue | 227 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 227 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-modal/u-modal.vue b/uni_modules/uview-ui/components/u-modal/u-modal.vue
new file mode 100644
index 0000000..4c37ae2
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-modal/u-modal.vue
@@ -0,0 +1,227 @@
+<template>
+ <u-popup
+ mode="center"
+ :zoom="zoom"
+ :show="show"
+ :customStyle="{
+ borderRadius: '6px',
+ overflow: 'hidden',
+ marginTop: `-${$u.addUnit(negativeTop)}`
+ }"
+ :closeOnClickOverlay="closeOnClickOverlay"
+ :safeAreaInsetBottom="false"
+ :duration="400"
+ @click="clickHandler"
+ >
+ <view
+ class="u-modal"
+ :style="{
+ width: $u.addUnit(width),
+ }"
+ >
+ <text
+ class="u-modal__title"
+ v-if="title"
+ >{{ title }}</text>
+ <view
+ class="u-modal__content"
+ :style="{
+ paddingTop: `${title ? 12 : 25}px`
+ }"
+ >
+ <slot>
+ <text class="u-modal__content__text">{{ content }}</text>
+ </slot>
+ </view>
+ <view
+ class="u-modal__button-group--confirm-button"
+ v-if="$slots.confirmButton"
+ >
+ <slot name="confirmButton"></slot>
+ </view>
+ <template v-else>
+ <u-line></u-line>
+ <view
+ class="u-modal__button-group"
+ :style="{
+ flexDirection: buttonReverse ? 'row-reverse' : 'row'
+ }"
+ >
+ <view
+ class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+ :hover-stay-time="150"
+ hover-class="u-modal__button-group__wrapper--hover"
+ :class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
+ v-if="showCancelButton"
+ @tap="cancelHandler"
+ >
+ <text
+ class="u-modal__button-group__wrapper__text"
+ :style="{
+ color: cancelColor
+ }"
+ >{{ cancelText }}</text>
+ </view>
+ <u-line
+ direction="column"
+ v-if="showConfirmButton && showCancelButton"
+ ></u-line>
+ <view
+ class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+ :hover-stay-time="150"
+ hover-class="u-modal__button-group__wrapper--hover"
+ :class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
+ v-if="showConfirmButton"
+ @tap="confirmHandler"
+ >
+ <u-loading-icon v-if="loading"></u-loading-icon>
+ <text
+ v-else
+ class="u-modal__button-group__wrapper__text"
+ :style="{
+ color: confirmColor
+ }"
+ >{{ confirmText }}</text>
+ </view>
+ </view>
+ </template>
+ </view>
+ </u-popup>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * Modal 妯℃�佹
+ * @description 寮瑰嚭妯℃�佹锛屽父鐢ㄤ簬娑堟伅鎻愮ず銆佹秷鎭‘璁ゃ�佸湪褰撳墠椤甸潰鍐呭畬鎴愮壒瀹氱殑浜や簰鎿嶄綔銆�
+ * @tutorial https://www.uviewui.com/components/modul.html
+ * @property {Boolean} show 鏄惁鏄剧ず妯℃�佹锛岃璧嬪�肩粰show 锛堥粯璁� false 锛�
+ * @property {String} title 鏍囬鍐呭
+ * @property {String} content 妯℃�佹鍐呭锛屽浼犲叆slot鍐呭锛屽垯姝ゅ弬鏁版棤鏁�
+ * @property {String} confirmText 纭鎸夐挳鐨勬枃瀛� 锛堥粯璁� '纭' 锛�
+ * @property {String} cancelText 鍙栨秷鎸夐挳鐨勬枃瀛� 锛堥粯璁� '鍙栨秷' 锛�
+ * @property {Boolean} showConfirmButton 鏄惁鏄剧ず纭鎸夐挳 锛堥粯璁� true 锛�
+ * @property {Boolean} showCancelButton 鏄惁鏄剧ず鍙栨秷鎸夐挳 锛堥粯璁� false 锛�
+ * @property {String} confirmColor 纭鎸夐挳鐨勯鑹� 锛堥粯璁� '#2979ff' 锛�
+ * @property {String} cancelColor 鍙栨秷鎸夐挳鐨勯鑹� 锛堥粯璁� '#606266' 锛�
+ * @property {Boolean} buttonReverse 瀵硅皟纭鍜屽彇娑堢殑浣嶇疆 锛堥粯璁� false 锛�
+ * @property {Boolean} zoom 鏄惁寮�鍚缉鏀炬ā寮� 锛堥粯璁� true 锛�
+ * @property {Boolean} asyncClose 鏄惁寮傛鍏抽棴锛屽彧瀵圭‘瀹氭寜閽湁鏁堬紝瑙佷笂鏂硅鏄� 锛堥粯璁� false 锛�
+ * @property {Boolean} closeOnClickOverlay 鏄惁鍏佽鐐瑰嚮閬僵鍏抽棴Modal 锛堥粯璁� false 锛�
+ * @property {String | Number} negativeTop 寰�涓婂亸绉荤殑鍊硷紝缁欎竴涓礋鐨刴argin-top锛屽線涓婂亸绉伙紝閬垮厤鍜岄敭鐩橀噸鍚堢殑鎯呭喌锛屽崟浣嶄换鎰忥紝鏁板�煎垯榛樿涓簆x鍗曚綅 锛堥粯璁� 0 锛�
+ * @property {String | Number} width modal瀹藉害锛屼笉鏀寔鐧惧垎姣旓紝鍙互鏁板�硷紝px锛宺px鍗曚綅 锛堥粯璁� '650rpx' 锛�
+ * @property {String} confirmButtonShape 纭鎸夐挳鐨勬牱寮�,濡傝缃紝灏嗕笉浼氭樉绀哄彇娑堟寜閽�
+ * @event {Function} confirm 鐐瑰嚮纭鎸夐挳鏃惰Е鍙�
+ * @event {Function} cancel 鐐瑰嚮鍙栨秷鎸夐挳鏃惰Е鍙�
+ * @event {Function} close 鐐瑰嚮閬僵鍏抽棴鍑哄彂锛宑loseOnClickOverlay涓簍rue鏈夋晥
+ * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+ */
+ export default {
+ name: 'u-modal',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ loading: false
+ }
+ },
+ watch: {
+ show(n) {
+ // 涓轰簡閬垮厤绗竴娆℃墦寮�modal锛屽張浣跨敤浜嗗紓姝ュ叧闂殑loading
+ // 绗簩娆℃墦寮�modal鏃讹紝loading渚濈劧瀛樺湪鐨勬儏鍐�
+ if (n && this.loading) this.loading = false
+ }
+ },
+ methods: {
+ // 鐐瑰嚮纭畾鎸夐挳
+ confirmHandler() {
+ // 濡傛灉閰嶇疆浜嗗紓姝ュ叧闂紝灏嗘寜閽�间负loading鐘舵��
+ if (this.asyncClose) {
+ this.loading = true;
+ }
+ this.$emit('confirm')
+ },
+ // 鐐瑰嚮鍙栨秷鎸夐挳
+ cancelHandler() {
+ this.$emit('cancel')
+ },
+ // 鐐瑰嚮閬僵
+ // 浠庡師鐞嗕笂鏉ヨ锛宮odal鐨勯伄缃╃偣鍑伙紝骞朵笉鏄湡鐨勭偣鍑诲埌浜嗛伄缃�
+ // 鍥犱负modal渚濊禆浜巔opup鐨勪腑閮ㄥ脊绐楃被鍨嬶紝涓儴寮圭獥姣旇緝鐗规畩锛岃櫧鏈夌劧閬僵锛屼絾鏄负浜嗚寮圭獥鍐呭鑳絝lex灞呬腑
+ // 澶氫簡涓�涓�忔槑鐨勯伄缃╋紝姝ら�忔槑鐨勯伄缃╀細瑕嗙洊鍦ㄧ伆鑹茬殑閬僵涓婏紝鎵�浠ュ疄闄呬笂鏄偣鍑讳笉鍒扮伆鑹查伄缃╃殑锛宲opup鍐呴儴鍦�
+ // 閫忔槑閬僵鐨勫瓙鍏冪礌鍋氫簡.stop澶勭悊锛屾墍浠ョ偣鍑诲唴瀹瑰尯锛屼篃涓嶄細瀵艰嚧璇Е鍙�
+ clickHandler() {
+ if (this.closeOnClickOverlay) {
+ this.$emit('close')
+ }
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+ $u-modal-border-radius: 6px;
+
+ .u-modal {
+ width: 650rpx;
+ border-radius: $u-modal-border-radius;
+ overflow: hidden;
+
+ &__title {
+ font-size: 16px;
+ font-weight: bold;
+ color: $u-content-color;
+ text-align: center;
+ padding-top: 25px;
+ }
+
+ &__content {
+ padding: 12px 25px 25px 25px;
+ @include flex;
+ justify-content: center;
+
+ &__text {
+ font-size: 15px;
+ color: $u-content-color;
+ flex: 1;
+ }
+ }
+
+ &__button-group {
+ @include flex;
+
+ &--confirm-button {
+ flex-direction: column;
+ padding: 0px 25px 15px 25px;
+ }
+
+ &__wrapper {
+ flex: 1;
+ @include flex;
+ justify-content: center;
+ align-items: center;
+ height: 48px;
+
+ &--confirm,
+ &--only-cancel {
+ border-bottom-right-radius: $u-modal-border-radius;
+ }
+
+ &--cancel,
+ &--only-confirm {
+ border-bottom-left-radius: $u-modal-border-radius;
+ }
+
+ &--hover {
+ background-color: $u-bg-color;
+ }
+
+ &__text {
+ color: $u-content-color;
+ font-size: 16px;
+ text-align: center;
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3