vue常用组件之confirm用法及说明
原文链接：https://www.jb51.net/article/263587.htm
目录
vue组件之confirm
一些自带的方法，比如alert，confirm等，往往由于浏览器不同而展现出不同的样式，为了统一，我们可以自己实现简单封装，下面代码是vue的一个组件，它简单实现了confirm功能。
代码如下：
?| 12345678910111213141516171819202122232425262728293031323334 | <!-- * * 确认对话框 * * 使用方法： * <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> |
| 12345678910111213141516171819 | <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> |
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 | <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组件，自定义弹窗的样式。
?| 12345678910 | <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> |
| 1234567891011121314151617 | <script>export default { name: "mmtoast", data() { return { visible: false, message:'' }; }, methods: { leftClick() { }, rightClick() { }, },};</script> |
接下来创建index.js文件编写原生的JS代码进行动态自定义弹窗的插入
?| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 | import MmToast from './mmtoast.vue' let instancelet showToast = falseconst 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中进行全局组件的注册
?| 12 | import mmToast from '../src/components/mmtoast/index.js'Vue.use(mmToast) |
接下来在自己的组件中进行引入
?| 123456789 | this.$mmToast("此操作将永久删除该文件, 是否继续?") .then(() => { this.historyList = []; localStorage.setItem("placeHistory", null); console.log("删除成功啦！"); }) .catch(() => { console.log("取消删除啦"); }); |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
标签：vue,confirm,instance,dialog,组件,div,class From： https://www.cnblogs.com/sunny3158/p/17326801.html