125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<template>
|
||
<view style="width:680rpx">
|
||
<view class="modal-box " :class="isVisibility?'show':''" @touchmove.stop.prevent="moveHandleStop">
|
||
<view class="dialog">
|
||
<view class="simple-bar justify-end has-borderb" v-if="title != '' ">
|
||
<view class='content'>{{title}}</view>
|
||
</view>
|
||
<view :class="contentClass" v-bind:style="'text-align:'+messageAlign">{{message}}</view>
|
||
<view class="simple-bar has-bordert">
|
||
<view class='action has-mg-0 flex-sub text-green' v-if="showCancelButton == true" @tap='handleClose'>{{cancelButtonText}}</view>
|
||
<view class='action has-mg-0 flex-sub has-borderl' v-if="showConfirmButton == true" @tap='handleConfirm'>{{confirmButtonText}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 弹窗插件
|
||
* 使用方法：
|
||
* 1.引入组件：import simpleDialog from '@/components/simple-pro/dialog.vue';
|
||
* 2.定义：components ，simpleDialog
|
||
* 3.页面使用：<simpleDialog ref="simpleDialog2"></simpleDialog>
|
||
* 4.指定方法 this.$refs.simpleDialog2.func();
|
||
*
|
||
* 自定义方法：
|
||
* 1. alert() ; 支持在方法中传入 object 更改内容 该方法仅弹出一个按钮 （如果传入了object参数 其中的参数值优先级最高）
|
||
* 2. confirm(); 同理 可传入object参数 该方法支持确定、取消 按钮 （如果传入了object参数 其中的参数值优先级最高）
|
||
*/
|
||
export default {
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
message: {
|
||
type: String,
|
||
default: '你怎么会看到我^_^'
|
||
},
|
||
contentClass:{
|
||
type :String,
|
||
default:'has-pd-50 has-bg-white',
|
||
},
|
||
// 内容对齐方式 center | left | right
|
||
messageAlign: {
|
||
type: String,
|
||
default: 'center'
|
||
},
|
||
// 是否显示确认按钮
|
||
showConfirmButton: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否显示取消按钮
|
||
showCancelButton: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 确定按钮的文案
|
||
confirmButtonText: {
|
||
type: String,
|
||
default: '确定'
|
||
},
|
||
// 取消按钮的文案
|
||
cancelButtonText: {
|
||
type: String,
|
||
default: '取消'
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isVisibility: false
|
||
};
|
||
},
|
||
methods: {
|
||
__show() {
|
||
this.isVisibility = true;
|
||
},
|
||
__close() {
|
||
this.isVisibility = false;
|
||
},
|
||
__setconfig(options){
|
||
if(options != undefined && (typeof options == "object") ){
|
||
if (options['title']!=undefined) this.title = options['title']
|
||
if (options['message']!=undefined) this.message = options['message']
|
||
if (options['contentClass']!=undefined) this.contentClass = options['contentClass']
|
||
if (options['messageAlign']!=undefined) this.messageAlign = options['messageAlign']
|
||
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']
|
||
}
|
||
},
|
||
alert(options) {
|
||
// <simpleDialog ref="simpleDialog"></simpleDialog>
|
||
// this.$refs.simpleDialog.alert();
|
||
this.__setconfig(options);
|
||
this.__show();
|
||
},
|
||
confirm(options) {
|
||
this.showCancelButton = true;
|
||
this.__setconfig(options);
|
||
this.__show();
|
||
},
|
||
handleClose() {
|
||
this.__close();
|
||
this.$emit('cancelButton');
|
||
},
|
||
handleConfirm() {
|
||
this.__close();
|
||
this.$emit('confirmButton');
|
||
},
|
||
moveHandleStop:function(){
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style>
|