Skip to content

U
uview-ui
Commit 28bd752f authored by 王博文's avatar 王博文
Browse files
Options

加入modal

parent bf7ef4b7
Show whitespace changes
Inline Side-by-side
Showing with 270 additions and 4 deletions
pages.json
View file @ 28bd752f
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
"navigationBarTitleText": "模板" "navigationBarTitleText": "模板"
} }
} }
,{
"path" : "pages/componentsC/model/index",
"style" : {}
}
], ],
"subPackages": [{ "subPackages": [{
"root": "pages/componentsC", "root": "pages/componentsC",
......
pages/componentsC/model/index.vue 0 → 100644
View file @ 28bd752f
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
<u-modal @ :show="show" @close="show = false" @confirm="show = false" :show-title="showTitle" :zoom="zoom" :duration="duration">
<!-- <view class="warp" v-if="content"><view class="rect" @tap.stop></view></view> -->
</u-modal>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示标题</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">动画时长(ms)</view>
<u-subsection vibrateShort current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
zoom: false,
duration: 300,
content: false,
showTitle:false
};
},
computed: {
current() {
return this.show ? 0 : 1;
}
},
methods: {
showChange(index) {
this.show = index == 0 ? true : false;
},
titleChange(index) {
this.showTitle = index == 0 ? true : false;
this.show = true;
},
durationChange(index) {
this.duration = index == 0 ? 100 : index == 1 ? 300 : 800;
this.show = true;
},
contentChange(index) {
this.content = index == 0 ? true : false;
this.show = true;
}
}
};
</script>
<style scoped lang="scss">
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
</style>
pages/example/components.config.js
View file @ 28bd752f
...@@ -138,6 +138,10 @@ export default [{ ...@@ -138,6 +138,10 @@ export default [{
icon: 'mask', icon: 'mask',
title: 'Mask 遮罩层', title: 'Mask 遮罩层',
}, { }, {
path: '/pages/componentsC/model/index',
icon: 'model',
title: 'Model 弹窗',
},{
path: '/pages/componentsA/noNetwork/index', path: '/pages/componentsA/noNetwork/index',
icon: 'noNetwork', icon: 'noNetwork',
title: 'NoNetwork 无网络提示', title: 'NoNetwork 无网络提示',
......
uview/components/u-modal/u-modal.vue 0 → 100644
View file @ 28bd752f
<template>
<view>
<view class="u-mask" :style="[maskStyle]" :class="[show ? 'u-mask-show' : '']" @touchmove.stop.prevent>
<view class="u-model" :style="[modalStyle]">
<view v-if="showTitle" class="u-model-title hairline-bottom">{{title}}</view>
<view class="u-model-content">
<slot >
<view class="u-model-content-meeeage">
弹窗内容
</view>
</slot>
</view>
<view class="u-model-footer hairline-top">
<view class="u-model-footer-button" type="default" @click="confirm">取消</view>
<view class="u-model-footer-button hairline-left" @tap="close">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 是否显示遮罩
show: {
type: Boolean,
default: true
},
// 层级z-index
zIndex: {
type: [Number, String],
default: ''
},
// 用户自定义样式
customStyle: {
type: Object,
default() {
return {};
}
},
duration: {
type: [Number, String],
default: 300
},
title:{
type:[String],
default:'提醒'
},
width :{
type:[Number,String],
default:600
},
showTitle:{
type:Boolean,
default:true
}
},
computed: {
maskStyle(){
let style = {};
style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.modal;
style.transition = `all ${this.duration / 1000}s ease-in-out`;
// 判断用户传递的对象是否为空
if (Object.keys(this.customStyle).length) style = { ...style, ...this.customStyle };
return style;
},
modalStyle() {
let style = {};
// style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
// style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.modal;
// style.transition = `all ${this.duration / 1000}s ease-in-out`;
style.width=this.width+'rpx'
// 缩放
// if (this.zoom == true) style.transform = 'scale(1.2, 1.2)';
// 判断用户传递的对象是否为空
// if (Object.keys(this.customStyle).length) style = { ...style, ...this.customStyle };
// 合并自定义的样式
//Object.assign(style, customStyle);
return style;
}
},
methods: {
confirm(){
this.$emit('confirm')
},
close(){
this.$emit('close')
}
}
};
</script>
<style lang="scss" scoped>
.u-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
}
.u-mask-show {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.u-model {
position: absolute;
height: auto;
top: 45% !important;
left: 50%;
overflow: hidden;
font-size: 16px;
border-radius: 16px;
border-radius: 16px;
background-color: #fff;
transform: translate3d(-50%, -50%, 0);
&-title {
padding-top: 48rpx;
font-weight: 500;
line-height: 24rpx;
text-align: center;
}
&-content {
&-meeeage{
padding: 48rpx;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
}
}
&-footer {
display: flex;
&-button {
flex: 1;
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
box-sizing: border-box;
cursor: pointer;
text-align: center;
border-radius: 4rpx;
}
}
[class*='hairline']::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
transform: scale(0.5);
}
.hairline-left,
.hairline-bottom,
.hairline-top {
position: relative;
}
.hairline-top::after {
border-top-width: 1rpx;
}
.hairline-left::after {
border-left-width: 1rpx;
}
.hairline-bottom::after {
// border-bottom-width: 1rpx;
}
}
</style>
uview/libs/config/zIndex.js
View file @ 28bd752f
...@@ -16,4 +16,5 @@ export default { ...@@ -16,4 +16,5 @@ export default {
topTips: 975, topTips: 975,
sticky: 970, sticky: 970,
indexListSticky: 965, indexListSticky: 965,
modal:960
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment