场景
- 模态框 emm…
下面是自定义的一个满足基本需求的模态框(自定义范围)
- 两个按钮样式
- 两个按钮提示
- 两个按钮跳转的url
- 模态框title
- 模态框body
- 另外操作也是极其简单的
用法
- 作为一个公用的组件, 引用之后 (假设你设置的ref=’prompt_modal’)
- this.$refs.prompt_modal.open({
title : ‘权限分配提示’,
body : ‘权限分配成功’,
}); title : '' // 标题,
body : '' // 提示主体,
btn_name_left : '取消', // 左侧按钮的显示的文字,
btn_name_right : '确定', // 左侧按钮的显示的文字,
btn_class_left : 'btn btn-secondary', // 左侧按钮的类
btn_class_right : 'btn btn-secondary btn-primary', // 右侧按钮的类
btn_url_left : '', // 左侧按钮跳转的url
btn_url_right : '', // 右侧按钮跳转的url
引用
<template>
<div class="panel panel-default">
<div class="panel-heading">
<h4>{{ role_name }}的权限分配</h4>
</div>
<div class="panel-body">
<prompt-modal ref="prompt_modal"></prompt-modal>
<div class="tree-block">
<v-select-tree :data='treeData3' :searchable="searchable" :draggable="draggable" :dragAfterExpanded="dragAfterExpanded"
:multiple="multiple" :searchtext="searchtext"
:pleasechoosetext="pleasechoosetext"
v-model.lazy='initSelected'/>
</div>
</div>
<div class="panel-footer">
<button @click.prevent="updatePermission" class="btn btn-primary btn-sm">更新配置</button>
</div>
</div>
</template>
源码
<template>
<div class="modal fade" id="modal-prompt" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center" v-if="title">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title font-bold">
{{ title }}
</h4>
</div>
<div class="modal-body text-center">
<p class="p_white_space font-bold">
{{ body }}
</p>
</div>
<div class="modal-footer">
<button type="button" :class="btn_class_left" @click.prevent="redirectUrl('left')" data-dismiss="modal"> {{ btn_name_left }}</button>
<button type="button" :class="btn_class_right" @click.prevent="redirectUrl('right')" data-dismiss="modal">{{ btn_name_right }}</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "PromptModal",
data : function(){
return {
modal_show : false,
title : '',
body : '',
btn_name_left : '取消',
btn_name_right : '确定',
btn_class_left : 'btn btn-secondary',
btn_class_right : 'btn btn-secondary btn-primary',
btn_url_left : '',
btn_url_right : '',
}
},
methods : {
open: function(params){
this.title = !! params.title ? params.title : this.title;
this.body = !! params.body ? params.body : this.body;
this.btn_name_left = !!params.btn_name_left ? params.btn_name_left : this.btn_name_left;
this.btn_name_right = !!params.btn_name_right ? params.btn_name_right : this.btn_name_right;
this.btn_class_left = !!params.btn_class_left ? params.btn_class_left : this.btn_class_left;
this.btn_class_right = !!params.btn_class_right ? params.btn_class_right : this.btn_class_right;
this.btn_url_left = !!params.btn_url_left ? params.btn_url_left : this.btn_url_left;
this.btn_url_right = !!params.btn_url_right ? params.btn_url_right : this.btn_url_right;
$('#modal-prompt').modal('toggle');
},
redirectUrl : function(source){
switch (source) {
case 'left':
if (!!this.btn_url_left) {
window.location.href = this.btn_url_left;
}
break;
case 'right':
if (!!this.btn_url_right) {
window.location.href = this.btn_url_right;
}
break;
}
}
}
}
</script>
<style>
.font-bold {
font-weight: bold;
}
</style>