cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
hupeng
2023-10-11 11:27:47 +08:00
commit d0b337c596
659 changed files with 67106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
uni_modules/uv-modal/changelog.md Normal file
View File

@ -0,0 +1,16 @@
## 1.0.6（2023-08-23）
1. 修复异步loading时，确认回调还会一直触发
## 1.0.5（2023-07-03）
去除插槽判断，避免某些平台不显示的BUG
## 1.0.4（2023-07-02）
uv-modal 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/modal.html
## 1.0.3（2023-06-29）
1. 增加closeLoading方法，方便异步加载手动取消
2. 更新文档
## 1.0.2（2023-06-11）
1. 新增zIndex参数
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-modal 模态框

80
uni_modules/uv-modal/components/uv-modal/props.js Normal file
View File

@ -0,0 +1,80 @@
export default {
props: {
// 标题
title: {
type: [String],
default: ''
},
// 弹窗内容
content: {
type: String,
default: ''
},
// 确认文案
confirmText: {
type: String,
default: '确认'
},
// 取消文案
cancelText: {
type: String,
default: '取消'
},
// 是否显示确认按钮
showConfirmButton: {
type: Boolean,
default: true
},
// 是否显示取消按钮
showCancelButton: {
type: Boolean,
default: false
},
// 确认按钮颜色
confirmColor: {
type: String,
default: '#2979ff'
},
// 取消文字颜色
cancelColor: {
type: String,
default: '#606266'
},
// 对调确认和取消的位置
buttonReverse: {
type: Boolean,
default: false
},
// 是否开启缩放效果
zoom: {
type: Boolean,
default: true
},
// 层级
zIndex: {
type: [String, Number],
default: 10075
},
// 是否异步关闭，只对确定按钮有效
asyncClose: {
type: Boolean,
default: false
},
// 是否允许点击遮罩关闭modal
closeOnClickOverlay: {
type: Boolean,
default: true
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
negativeTop: {
type: [String, Number],
default: 0
},
// modal宽度，不支持百分比，可以数值，px，rpx单位
width: {
type: [String, Number],
default: '650rpx'
},
...uni.$uv?.props?.modal
}
}

224
uni_modules/uv-modal/components/uv-modal/uv-modal.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<uv-popup
ref="modalPopup"
mode="center"
:zoom="zoom"
:zIndex="zIndex"
:customStyle="{
borderRadius: '6px',
overflow: 'hidden',
marginTop: `-${$uv.addUnit(negativeTop)}`
}"
:closeOnClickOverlay="closeOnClickOverlay"
:safeAreaInsetBottom="false"
:duration="400"
@change="popupChange"
>
<view
class="uv-modal"
:style="{
width: $uv.addUnit(width),
}"
>
<text
class="uv-modal__title"
v-if="title"
>{{ title }}</text>
<view
class="uv-modal__content"
:style="{
paddingTop: `${title ? 12 : 25}px`
}"
>
<slot>
<text class="uv-modal__content__text">{{ content }}</text>
</slot>
</view>
<slot name="confirmButton">
<uv-line></uv-line>
<view
class="uv-modal__button-group"
:style="{
flexDirection: buttonReverse ? 'row-reverse' : 'row'
}"
>
<view
class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--cancel"
:hover-stay-time="150"
hover-class="uv-modal__button-group__wrapper--hover"
:class="[showCancelButton && !showConfirmButton && 'uv-modal__button-group__wrapper--only-cancel']"
v-if="showCancelButton"
@tap="cancelHandler"
>
<text
class="uv-modal__button-group__wrapper__text"
:style="{
color: cancelColor
}"
>{{ cancelText }}</text>
</view>
<uv-line
direction="column"
v-if="showConfirmButton && showCancelButton"
></uv-line>
<view
class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--confirm"
:hover-stay-time="150"
hover-class="uv-modal__button-group__wrapper--hover"
:class="[!showCancelButton && showConfirmButton && 'uv-modal__button-group__wrapper--only-confirm']"
v-if="showConfirmButton"
@tap="confirmHandler"
>
<uv-loading-icon v-if="loading"></uv-loading-icon>
<text
v-else
class="uv-modal__button-group__wrapper__text"
:style="{
color: confirmColor
}"
>{{ confirmText }}</text>
</view>
</view>
</slot>
</view>
</uv-popup>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Modal 模态框
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
* @tutorial https://www.uvui.cn/components/modul.html
* @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 是否允许点击遮罩关闭该组件 （默认 true ）
* @property {String | Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
* @event {Function} confirm 点击确认按钮时触发
* @event {Function} cancel 点击取消按钮时触发
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效
* @example <uv-modal ref="modalPopup" title="title" content="content"></uv-modal>
*/
export default {
name: 'uv-modal',
mixins: [mpMixin, mixin, props],
data() {
return {
loading: false
}
},
methods: {
open() {
this.$refs.modalPopup.open();
if (this.loading) this.loading = false;
},
close() {
this.$refs.modalPopup.close();
},
popupChange(e) {
if(!e.show) this.$emit('close');
},
// 点击确定按钮
confirmHandler() {
if(!this.loading) {
this.$emit('confirm');
}
// 如果配置了异步关闭，将按钮值为loading状态
if (this.asyncClose) {
this.loading = true;
} else {
this.close();
}
},
// 点击取消按钮
cancelHandler() {
this.$emit('cancel');
this.close();
},
closeLoading() {
this.loading = false;
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-modal-border-radius: 6px;
.uv-modal {
width: 650rpx;
border-radius: $uv-modal-border-radius;
overflow: hidden;
&__title {
font-size: 16px;
font-weight: bold;
color: $uv-content-color;
text-align: center;
padding-top: 25px;
}
&__content {
padding: 12px 25px 25px 25px;
@include flex;
justify-content: center;
&__text {
font-size: 15px;
color: $uv-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: $uv-modal-border-radius;
}
&--cancel,
&--only-confirm {
border-bottom-left-radius: $uv-modal-border-radius;
}
&--hover {
background-color: $uv-bg-color;
}
&__text {
color: $uv-content-color;
font-size: 16px;
text-align: center;
}
}
}
}
</style>

90
uni_modules/uv-modal/package.json Normal file
View File

@ -0,0 +1,90 @@
{
"id": "uv-modal",
"displayName": "uv-modal 模态框 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.6",
"description": "支持自定义内容，与uniapp提供的API uni.showModal类似，但是功能更强大，更加灵活",
"keywords": [
"uv-modal",
"uvui",
"uv-ui",
"modal",
"模态框"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-popup",
"uv-line",
"uv-loading-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

23
uni_modules/uv-modal/readme.md Normal file
View File

@ -0,0 +1,23 @@
## Modal 模态框
> **组件名：uv-modal**
弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
特性：支持自定义内容，与uniapp提供的API `uni.showModal` 类似，但是功能更强大，更加灵活。
运用场景：弹窗验证码输入等场景
# <a href="https://www.uvui.cn/components/modal.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>