vue dialog 弹窗组件
```javascript
<template>
<!-- <transition name='slide-fade'> -->
<view class="cu-modal show dialog" v-if="isShow">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end ">
<view class="content">{{text.title}}</view>
</view>
<view class="padding-xl">
{{text.message}}
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<view>
<button class="cu-btn line-green text-green" @tap="hideModal">{{text.btn.concel}}</button>
</view>
<view>
<button class="cu-btn bg-green margin-left" @tap="addModal">{{text.btn.confirm}}</button>
</view>
</view>
</view>
</view>
</view>
</transition>
</template>
<script>
export default {
data(){
return{
isShow:true,
text:{
title:"温馨提示",
message:"代码是写出来给人看的,附带能在机器上运行",
btn:{
concel:"取消",
confirm:"确定"
}
}
}
},
methods:{
hideModal(){
},
addModal(){
}
}
}
</script>
<style lang="less" scoped>
.slide-fade-enter-active {
transition: all 3s ease;
}
.slide-fade-leave-active {
transition: all 8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
// transform: translateX(10px);
opacity: 0;
}
.dialog{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
text-align: center;
backface-visibility: hidden;
perspective: 2000rpx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
opacity: 1;
transition-duration: 0.3s;
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
.cu-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 680rpx;
max-width: 100%;
background-color: #f8f8f8;
border-radius: 10rpx;
overflow: hidden;
top: 35%;
.cu-bar {
display: flex;
position: relative;
align-items: center;
min-height: 100rpx;
justify-content: space-between;
.content {
position: absolute;
text-align: center;
width: calc(100% - 340rpx);
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 60rpx;
font-size: 32rpx;
line-height: 60rpx;
cursor: none;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.action {
width: 100%;
display: flex;
align-items: center;
flex-direction: row !important;
max-width: 100%;
padding: 20rpx 0;
box-sizing: border-box;
view{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.cu-btn {
position: relative;
border: 0px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 30rpx;
font-size: 28rpx;
height: 64rpx;
}
.cu-btn[class*="line"] {
background-color: transparent;
}
.cu-btn:not([class*="bg-"]) { //not 排除 bg-
background-color: #f0f0f0;
}
.text-green, .line-green, .lines-green {
color: #3b69ee;
}
.bg-green {
background-color: #3b69ee;
color: #ffffff;
}
}
}
.cu-bar .action:last-child {
margin-right: 30px;
}
.cu-bar .action:first-child {
margin-left: 30rpx;
font-size: 30rpx;
}
}
.bg-white {
background-color: #ffffff;
color: #666666;
}
.justify-end {
justify-content: flex-end;
}
.padding-xl {
padding: 50rpx;
font-size: 26rpx;
}
}
}
// .dialog{
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-color: rgba(0,0,0,0.7);
// z-index: 999;
// .main{
// position: fixed;
// top: 45%;
// left: calc((100% - 640rpx) / 2);
// width: 640rpx;
// overflow: hidden;
// font-size: 16px;
// background-color: #fff;
// border-radius: 16px;
// .title{
// padding-top: 24rpx;
// // font-weight:bold;
// line-height: 48rpx;
// text-align: center;
// }
// .message{
// max-height: 60vh;
// padding:28rpx 48rpx 48rpx;
// overflow-y: auto;
// font-size: 28rpx;
// line-height: 40rpx;
// white-space: pre-wrap;
// text-align: center;
// color: #646566;
// }
// .footer{
// display: flex;
// overflow: hidden;
// user-select: none;
// view{
// flex: 1;
// width: 100%;
// height: 80rpx;
// line-height: 80rpx;
// color: #323233;
// box-sizing: border-box;
// font-size: 32rpx;
// text-align: center;
// border-radius: 4rpx;
// border-top: 1px solid #333333;
// }
// }
// }
// }
</style>