|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <view class="wl-modal" v-if="visible">
|
|
|
+ <view class="wl-modal-body" :class="{'modal-center-enter': visible}">
|
|
|
+ <view class="wl-modal-body-title" v-if="title">
|
|
|
+ {{title}}
|
|
|
+ </view>
|
|
|
+ <view class="wl-modal-body-content" v-if="content" :style="{textAlign: textAlign}">
|
|
|
+ {{content}}
|
|
|
+ </view>
|
|
|
+ <view class="wl-modal-body-button">
|
|
|
+ <button :open-type="cancelOpenType" class="wl-modal-body-button-item" @tap="cancel" :style="{color: cancelColor}" v-if="showCancel && cancelText">
|
|
|
+ {{cancelText}}
|
|
|
+ </button>
|
|
|
+ <button :open-type="confirmOpenType" class="wl-modal-body-button-item" @tap="confirm" :style="{color: confirmColor}" v-if="confirmText">
|
|
|
+ {{confirmText}}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'wl-modal',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ visible: false, // 是否显示
|
|
|
+ title: '提示', // 提示标题
|
|
|
+ content: '', // 提示内容
|
|
|
+ cancelText: '取消', // 取消按钮的文字
|
|
|
+ confirmText: '确定', // 确认按钮文字
|
|
|
+ showCancel: true, // 是否显示取消按钮,默认为 true
|
|
|
+ confirmColor: '#576B95', // 确定按钮颜色
|
|
|
+ cancelColor: '#666', // 取消按钮颜色
|
|
|
+ textAlign: 'center' ,// 对齐方式
|
|
|
+ confirmOpenType: '', // 确定按钮open-type
|
|
|
+ cancelOpenType: '', // 取消按钮open-type
|
|
|
+ success: () => {} // 回调方法
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化弹框并打开
|
|
|
+ showModal(data) {
|
|
|
+ if (data.title) {
|
|
|
+ this.title = data.title
|
|
|
+ } else {
|
|
|
+ this.title = '提示'
|
|
|
+ }
|
|
|
+ if (data.content) {
|
|
|
+ this.content = data.content
|
|
|
+ } else {
|
|
|
+ this.content = ''
|
|
|
+ }
|
|
|
+ if (data.cancelText) {
|
|
|
+ this.cancelText = data.cancelText
|
|
|
+ } else {
|
|
|
+ this.cancelText = '取消'
|
|
|
+ }
|
|
|
+ if (data.confirmText) {
|
|
|
+ this.confirmText = data.confirmText
|
|
|
+ } else {
|
|
|
+ this.confirmText = '确定'
|
|
|
+ }
|
|
|
+ if (data.showCancel === false || data.showCancel === true) {
|
|
|
+ this.showCancel = data.showCancel
|
|
|
+ } else {
|
|
|
+ this.showCancel = true
|
|
|
+ }
|
|
|
+ if (data.confirmColor) {
|
|
|
+ this.confirmColor = data.confirmColor
|
|
|
+ } else {
|
|
|
+ this.confirmColor = '#576B95'
|
|
|
+ }
|
|
|
+ if (data.cancelColor) {
|
|
|
+ this.cancelColor = data.cancelColor
|
|
|
+ } else {
|
|
|
+ this.cancelColor = '#666'
|
|
|
+ }
|
|
|
+ if (data.textAlign) {
|
|
|
+ this.textAlign = data.textAlign
|
|
|
+ } else {
|
|
|
+ this.textAlign = 'center'
|
|
|
+ }
|
|
|
+ if (data.confirmOpenType) {
|
|
|
+ this.confirmOpenType = data.confirmOpenType
|
|
|
+ } else {
|
|
|
+ this.confirmOpenType = ''
|
|
|
+ }
|
|
|
+ if (data.cancelOpenType) {
|
|
|
+ this.cancelOpenType = data.cancelOpenType
|
|
|
+ } else {
|
|
|
+ this.cancelOpenType = ''
|
|
|
+ }
|
|
|
+ if (data.success) {
|
|
|
+ this.success = data.success
|
|
|
+ } else {
|
|
|
+ this.success = () => {}
|
|
|
+ }
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ cancel() {
|
|
|
+ this.success({
|
|
|
+ cancel: true,
|
|
|
+ confirm: false,
|
|
|
+ errMsg: 'showModal:ok'
|
|
|
+ });
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ // 确定
|
|
|
+ confirm() {
|
|
|
+ this.success({
|
|
|
+ cancel: false,
|
|
|
+ confirm: true,
|
|
|
+ content: null,
|
|
|
+ errMsg: 'showModal:ok'
|
|
|
+ });
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// 显示和隐藏效果
|
|
|
+@keyframes modal-center-enter {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.wl-modal{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.6);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ .wl-modal-body{
|
|
|
+ width: 640rpx;
|
|
|
+ padding-top: 64rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+ &.modal-center-enter{
|
|
|
+ animation: modal-center-enter 0.2s ease-out forwards;
|
|
|
+ }
|
|
|
+ .wl-modal-body-title{
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ padding: 0 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .wl-modal-body-content{
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #666;
|
|
|
+ word-break:break-all;
|
|
|
+ word-wrap:break-word;
|
|
|
+ white-space:pre-wrap;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ padding: 0 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .wl-modal-body-button{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-top: #E5E5E5 1px solid;
|
|
|
+ .wl-modal-body-button-item{
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ border-right: #E5E5E5 1px solid;
|
|
|
+ background-color: initial;
|
|
|
+ font-size: 34rpx;
|
|
|
+ border-radius: 0;
|
|
|
+ flex: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx 16rpx;
|
|
|
+ font-weight: 900;
|
|
|
+ line-height: normal;
|
|
|
+ overflow: initial!important;
|
|
|
+ &:last-child{
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|