117 lines
4.9 KiB
Vue
117 lines
4.9 KiB
Vue
|
<template>
|
|||
|
|
<view style="border-radius: 16upx">
|
|||
|
|
<view class="modal-box" style="padding-right: 16px;padding-left: 16px"
|
|||
|
|
:class="[isVisibility?'show':'', buttom?'bottom-modal':'' ]" @tap="ClickMaskClose"
|
|||
|
|
@touchmove.stop.prevent="moveHandleStop">
|
|||
|
|
<!-- 默认弹窗 -->
|
|||
|
|
<view class="dialog" v-if="!buttom" @tap.stop="contentClick">
|
|||
|
|
<view :class="contentClass">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<view class="simple-bar has-bordert" v-if="showConfirmButton == true || showCancelButton == true">
|
|||
|
|
<view class='action has-mg-0 flex-sub text-green' v-if="showCancelButton == true"
|
|||
|
|
@tap.stop='handleClose'>{{cancelButtonText}}
|
|||
|
|
</view>
|
|||
|
|
<view class='action has-mg-0 flex-sub has-borderl' v-if="showConfirmButton == true"
|
|||
|
|
@tap.stop='handleConfirm'>{{confirmButtonText}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部弹窗 -->
|
|||
|
|
<view class="dialog" v-if="buttom" @tap.stop="contentClick">
|
|||
|
|
<view class="simple-bar has-bordert" v-if="showConfirmButton == true || showCancelButton == true">
|
|||
|
|
<view class='action is-black' v-if="showCancelButton == true" @tap.stop='handleClose'>
|
|||
|
|
{{cancelButtonText}}
|
|||
|
|
</view>
|
|||
|
|
<view class='action is-blue' v-if="showConfirmButton == true" @tap.stop='handleConfirm'>
|
|||
|
|
{{confirmButtonText}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="contentClass">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 自定义弹窗内容组件
|
|||
|
|
* 使用方法：
|
|||
|
|
* 1.引入组件：import simpleModal from '@/components/simple-pro/customModal.vue';
|
|||
|
|
* 2.定义：components ，simpleModal
|
|||
|
|
* 3.页面使用：<simpleModal ref="simpleModal">这里面可以写你的自定义内容哟~</simpleModal>
|
|||
|
|
* 4.指定方法 this.$refs.simpleModal.func();
|
|||
|
|
*
|
|||
|
|
* 自定义方法：
|
|||
|
|
* 1. alert() ; 支持在方法中传入 object 更改内容 该方法仅弹出一个按钮 （如果传入了object参数 其中的参数值优先级最高）
|
|||
|
|
* 2. hide();
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
buttom: {
|
|||
|
|
// 是否底部弹出
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
contentClass: {
|
|||
|
|
// 弹窗默认样式
|
|||
|
|
type: String,
|
|||
|
|
default: "has-bg-white"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showConfirmButton: true, // 确认按钮
|
|||
|
|
showCancelButton: false, // 取消按钮
|
|||
|
|
confirmButtonText: "确定",// 确定按钮文字
|
|||
|
|
cancelButtonText: "取消",//取消按钮文字
|
|||
|
|
isVisibility: false, //是否显示
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
__setconfig: function (options) {
|
|||
|
|
if (options != undefined && (typeof options == "object")) {
|
|||
|
|
if (options['showConfirmButton'] != undefined) this.showConfirmButton = options['showConfirmButton'];
|
|||
|
|
if (options['showCancelButton'] != undefined) this.showCancelButton = options['showCancelButton'];
|
|||
|
|
if (options['confirmButtonText'] != undefined) this.confirmButtonText = options['confirmButtonText'];
|
|||
|
|
if (options['cancelButtonText'] != undefined) this.cancelButtonText = options['cancelButtonText'];
|
|||
|
|
if (options['isVisibility'] != undefined) this.isVisibility = options['isVisibility'];
|
|||
|
|
if (options['contentClass'] != undefined) this.contentClass = options['contentClass'];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
show: function (options) {
|
|||
|
|
// 传入 object 参数 动态修改
|
|||
|
|
this.__setconfig(options);
|
|||
|
|
this.isVisibility = true;
|
|||
|
|
},
|
|||
|
|
hide: function () {
|
|||
|
|
this.isVisibility = false;
|
|||
|
|
},
|
|||
|
|
handleClose: function () {
|
|||
|
|
this.isVisibility = false;
|
|||
|
|
this.$emit('cancelButton');
|
|||
|
|
},
|
|||
|
|
handleConfirm: function () {
|
|||
|
|
this.$emit('confirmButton');
|
|||
|
|
},
|
|||
|
|
ClickMaskClose: function () {
|
|||
|
|
// 点击背景 or 内容时执行关闭 有坑 点击内容的时候也会关闭，
|
|||
|
|
this.$emit('maskClose');
|
|||
|
|
},
|
|||
|
|
contentClick: function (e) {
|
|||
|
|
this.$emit('contentClick');
|
|||
|
|
},
|
|||
|
|
moveHandleStop: function () {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|