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

- 日理万妓 2022-05-14 20:11 386阅读 0赞

*   *   *  场景
         *  用法
         *  引用
         *  源码

### 场景 ###

*  模态框 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 : '', // 左侧按钮跳转的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>