Vue中confirm组件如何使用及具体说明？

本文共计1188个文字，预计阅读时间需要5分钟。

目录 + Vue组件之Confirm + Vue自定义Confirm弹窗（全局组件） + 全局组件方式 + Vue组件之Confirm + 一些自带的方法，例如alert，confirm等，往往因为浏览器不同而显示不同样式，为了统一，我们可自定义

目录

• vue组件之confirm
• vue自定义confirm弹窗（全局组件）
• 全局组件方式

vue组件之confirm

一些自带的方法，比如alert，confirm等，往往由于浏览器不同而展现出不同的样式，为了统一，我们可以自己实现简单封装，下面代码是vue的一个组件，它简单实现了confirm功能。

代码如下：

<!-- * * 确认对话框 * * 使用方法： * <dialogConfirm :show-dialog="showDialog" :ok-text="'删除'" :cancel-text="'取消'" :content="'content'" v-on:confirm="confirmFn" v-on:cancel="cancelFn" :hide-confirm="false"></dialogConfirm> * * show-dialog: 是否显示对话框，布尔值 * ok-text: 确认按钮文字，默认为‘好' * cancel-text: 取消按钮文字，默认为‘取消' * hideConfirm: 是否隐藏删除按钮 * hideCancle 是否隐藏取消按钮 * content: 对话框文字 * confirmFn: 确定按钮回调 * cancelFn: 取消按钮回调 --> <template> <div class="dialog" v-if="showDialog"> <transition name="dialog-fade"> <div class="dialog-bg" v-if="showDialog" @click="confirmHide"></div> </transition> <transition name="dialog-show"> <div class="dialog-box" v-if="showDialog"> <div class="dialog-main" v-html="content"></div> <div class="dialog-button"> <div class="dialog-confirm-cancel" @click="clickCancel" v-if="!hideCancle">{{cancelText || '取消'}}</div> <div class="dialog-confirm-button" @click="clickConfirm" v-if="!hideConfirm">{{okText || '好'}}</div> </div> </div> </transition> </div> </template>

<script>     export default{         data(){             return{}         },         props: ['showDialog','content','okText','cancelText','hideConfirm','hideCancle'],         methods: {             clickCancel() {                 this.$emit('cancel');             },             clickConfirm() {                 this.$emit('confirm');             },             confirmHide(){                 this.$emit('confirmhide')             }         }     } </script>

<style lang="sass" rel="stylesheet/scss">   .dialog {     position: fixed;     top: 0; left: 0;     width: 100%;     height: 100%;     z-index: 100;          &-bg {         position: absolute;         top: 0; left: 0;         width: 100%;         height: 100%;         background-color: rgba(0,0,0,.4);     }       &-box {         width: 5.6rem;         position: absolute;         top: 40%;         left: 50%;         -webkit-transform: translate3d(-50%,-50%,0);         transform: translate3d(-50%,-50%,0);         background-color: #fff;         border-radius: .1rem;         line-height: 1.5;         text-align: center;     }     &-main {         padding: .42rem .38rem .4rem;         text-align: left;         font-size: .28rem;         color:#333;     }     &-button {          overflow: hidden;         border-top: 1px solid #EEE;         font-size: .32rem;         line-height: .88rem;         display: flex;     }       &-confirm {         &-cancel {             color: #3ba3f2;             flex:1;             border-right: 1px solid #EEE;             margin-right: -1px;         }         &-button {             flex:1;             color: #3ba3f2;         }     }       .dialog-show-enter-active, .dialog-fade-enter-active {         transition: all .3s ease;     }     .dialog-show-leave-active, .dialog-fade-leave-active {         transition: all .3s ease;     }     .dialog-show-enter, .dialog-show-leave-active {         top: -35%;     }     .dialog-fade-enter, .dialog-fade-leave-active {         opacity: 0;     } }       </style>

vue自定义confirm弹窗（全局组件）

全局组件方式

全局组件方式采用在main.js文件中进行全局注册的方式

首先创建mmtoast.vue组件，自定义弹窗的样式。

<template>   <div class="quit_box" v-show="visible">     <div class="topBox">       <span class="tip">提示</span>     </div>     <div class="quit_title">{{message}}</div>     <button class="cancel_btn" @click="leftClick">取消</button>     <button class="confirm_btn" @click="rightClick">确认</button>   </div> </template>

<script> export default {   name: "mmtoast",   data() {     return {       visible: false,       message:''     };   },   methods: {     leftClick() {     },     rightClick() {     },   }, }; </script>

接下来创建index.js文件编写原生的JS代码进行动态自定义弹窗的插入

import MmToast from './mmtoast.vue'   let instance let showToast = false const mmToast = {     install(Vue, options = {}) {         let opt = MmToast.data() // 获取组件中的默认配置         Object.assign(opt, options) // 合并配置,最终返回opt以一个对象的形式         Vue.prototype.$mmToast = (message) => {             return new Promise((resolve, reject) => {                 if (message) {                     opt.message = message // 如果有传message，则使用所传的message                 }                 /*                      解决如何把toast里面的template放到body里面，这个时候就可以用到el这个属性，                     但是如果直接把toast组件里面的el这个属性，再安装插件的时候赋给body是没有用的，这个时候toast还没有渲染出来，那么如何解决呢                     就是install方法里面来手动挂载组件,创建一个构造器，然后new那个构造器，                     创建出一个组件对象，然后把这个对象挂载到一个div那里，然后才把内容赋给body，做好把这个构造出来的对象付给原型                  */                 let TempToastConstructor = Vue.extend(MmToast) // 创建一个TempToastConstructor组件                   instance = new TempToastConstructor({                     data: opt                 })                 instance.vm = instance.$mount()                 //没有挂载到任何文档中，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。该方法返回实例自身。                 // console.log(instance.vm === instance)  // 输出为true                 document.body.appendChild(instance.vm.$el)//el对应的就是组件的dom元素                 instance.vm.visible = showToast = true                     instance.rightClick = function () {                     resolve()                     instance.vm.visible = showToast = false                 }                   instance.leftClick = function () {                     reject()                     instance.vm.visible = showToast = false                 }               })         }     } } export default mmToast

在mian.js中进行全局组件的注册

import mmToast from '../src/components/mmtoast/index.js' Vue.use(mmToast)

接下来在自己的组件中进行引入

   this.$mmToast("此操作将永久删除该文件, 是否继续?")         .then(() => {           this.historyList = [];           localStorage.setItem("placeHistory", null);           console.log("删除成功啦！");         })         .catch(() => {           console.log("取消删除啦");         });

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。