yuantao/template-MP-ts
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Initial commit

Browse Source
This commit is contained in:
yuantao
2025-09-29 14:05:25 +08:00
commit 6f0bb2f949
579 changed files with 99061 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
uview-plus/components/u-modal/modal.js Normal file
View File

@@ -0,0 +1,31 @@
/*
* @Author : LQ
* @Description :
* @version : 1.0
* @Date : 2021-08-20 16:44:21
* @LastAuthor : LQ
* @lastTime : 2021-08-20 17:15:59
* @FilePath : /u-view2.0/uview-ui/libs/config/props/modal.js
*/
export default {
// modal 组件
modal: {
show: false,
title: '',
content: '',
confirmText: '确认',
cancelText: '取消',
showConfirmButton: true,
showCancelButton: false,
confirmColor: '#2979ff',
cancelColor: '#606266',
buttonReverse: false,
zoom: true,
asyncClose: false,
closeOnClickOverlay: false,
negativeTop: 0,
width: '650rpx',
confirmButtonShape: '',
contentTextAlign: 'left'
}
}

91
uview-plus/components/u-modal/props.js Normal file
View File

@@ -0,0 +1,91 @@
import { defineMixin } from '../../libs/vue'
import defProps from '../../libs/config/props.js'
export const props = defineMixin({
props: {
// 是否展示modal
show: {
type: Boolean,
default: () => defProps.modal.show
},
// 标题
title: {
type: [String],
default: () => defProps.modal.title
},
// 弹窗内容
content: {
type: String,
default: () => defProps.modal.content
},
// 确认文案
confirmText: {
type: String,
default: () => defProps.modal.confirmText
},
// 取消文案
cancelText: {
type: String,
default: () => defProps.modal.cancelText
},
// 是否显示确认按钮
showConfirmButton: {
type: Boolean,
default: () => defProps.modal.showConfirmButton
},
// 是否显示取消按钮
showCancelButton: {
type: Boolean,
default: () => defProps.modal.showCancelButton
},
// 确认按钮颜色
confirmColor: {
type: String,
default: () => defProps.modal.confirmColor
},
// 取消文字颜色
cancelColor: {
type: String,
default: () => defProps.modal.cancelColor
},
// 对调确认和取消的位置
buttonReverse: {
type: Boolean,
default: () => defProps.modal.buttonReverse
},
// 是否开启缩放效果
zoom: {
type: Boolean,
default: () => defProps.modal.zoom
},
// 是否异步关闭，只对确定按钮有效
asyncClose: {
type: Boolean,
default: () => defProps.modal.asyncClose
},
// 是否允许点击遮罩关闭modal
closeOnClickOverlay: {
type: Boolean,
default: () => defProps.modal.closeOnClickOverlay
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
negativeTop: {
type: [String, Number],
default: () => defProps.modal.negativeTop
},
// modal宽度，不支持百分比，可以数值，px，rpx单位
width: {
type: [String, Number],
default: () => defProps.modal.width
},
// 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
confirmButtonShape: {
type: String,
default: () => defProps.modal.confirmButtonShape
},
// 文案对齐方式
contentTextAlign: {
type: String,
default: () => defProps.modal.contentTextAlign
},
}
})

243
uview-plus/components/u-modal/u-modal.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<u-popup
mode="center"
:zoom="zoom"
:show="show"
:class="[customClass]"
:customStyle="{
borderRadius: '6px',
overflow: 'hidden',
marginTop: `-${addUnit(negativeTop)}`
}"
:closeOnClickOverlay="closeOnClickOverlay"
:safeAreaInsetBottom="false"
:duration="400"
@click="clickHandler"
>
<view
class="u-modal"
:style="{
width: addUnit(width),
}"
>
<view
class="u-modal__title"
v-if="title"
>{{ title }}</view>
<view
class="u-modal__content"
:style="{
paddingTop: `${title ? 12 : 25}px`
}"
>
<slot>
<text class="u-modal__content__text" :style="{textAlign: contentTextAlign}">
{{ 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';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addUnit } from '../../libs/function/index';
/**
* Modal 模态框
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
* @tutorial https://ijry.github.io/uview-plus/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 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
* @property {String} confirmButtonShape 确认按钮的样式,如设置，将不会显示取消按钮
* @event {Function} confirm 点击确认按钮时触发
* @event {Function} cancel 点击取消按钮时触发
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效
* @example <u-modal :show="show" />
*/
export default {
name: 'u-modal',
mixins: [mpMixin, mixin, props],
data() {
return {
loading: false
}
},
watch: {
show(n) {
// 为了避免第一次打开modal，又使用了异步关闭的loading
// 第二次打开modal时，loading依然存在的情况
if (n && this.loading) this.loading = false
}
},
emits: ["confirm", "cancel", "close", "update:show"],
methods: {
addUnit,
// 点击确定按钮
confirmHandler() {
// 如果配置了异步关闭，将按钮值为loading状态
if (this.asyncClose) {
this.loading = true;
} else {
this.$emit('update:show', false)
}
this.$emit('confirm')
},
// 点击取消按钮
cancelHandler() {
this.$emit('update:show', false)
this.$emit('cancel')
},
// 点击遮罩
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
clickHandler() {
if (this.closeOnClickOverlay) {
this.$emit('update:show', false)
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 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
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>