vue常用组件之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("取消删除啦"); });
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)