Vue 自定义一个可以高度自由化的模态框组件

场景

• 模态框 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">&times;</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>

                <!-- Modal Actions -->
                <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 : '', // 左侧按钮跳转的url
                btn_url_right : '', // 右侧按钮跳转的url
            }
        },
        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>