vue 公用组件开发 确认框confirm
生活随笔
收集整理的這篇文章主要介紹了
vue 公用组件开发 确认框confirm
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
文件目錄:
?
github地址:https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components
最終的效果:
?
?組件的源碼解析:
confirm :? confirm的框架
./index.js
import confirmBox from './src/index'; export default {install(Vue) {Vue.prototype.$confirm = confirmBox;},};?
使用transition來實現動畫效果
<template> <transition name="mei-modal-fade"><div v-show="show" class="mei-modal" tabindex="-1" role="dialog" aria-labelledby="bombConfirmLabel" aria-hidden="false"><div class="mei-modal-mask"></div><div class="mei-modal-wrap"><div class="mei-modal-content"><i class="mei-icon-close" @click="onClosed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1515657730389" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="2915" width="40" height="40"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2916"/></svg></i><div class="mei-modal-header"><p>{{title}}</p></div><div class="mei-modal-body"><div class="mei-status-icon-box"></div><p v-if="!dangerouslyUseHTMLString">{{ text }}</p><p v-else v-html="text"></p></div><div class="mei-modal-footer"><button type="button" class="mei-btn mei-btn-primary" id="confirmButtons1" @click="button[0].ontap">{{button[0].text}}</button><button type="button" class="mei-btn mei-btn-text" id="confirmButtons1" @click="button[1].ontap">{{button[1].text}}</button></div></div></div></div> </transition> </template><script>export default {data() {return {show: true,title: '1212',text: '12121111112',button: [],dangerouslyUseHTMLString:false}},methods:{onClosed(){this.close();}}} </script><style lang="scss" rel="stylesheet">@import "./../../../css/component.scss";.mei-modal-fade-enter,.mei-modal-fade-leave-to{transform: scale(0);}.mei-modal-fade-enter-active{animation: bounce-in 2s;}.mei-modal-fade-leave-active{animation: bounce-in 2s reverse;} @keyframes bounce-in {0% {opacity: 0;}100% {opacity: 1;} } </style>?
?./src/index.jsimport Vue from 'vue';
import confirmVue from './confirm.vue';//參數配置 const defaults = {show:false,title:'',text:'',button:[]}; let confirmVueLoading; const confirmVueConstructor = Vue.extend(confirmVue);
//這里關閉的時候返回promise confirmVueConstructor.prototype.close = function() {var vm=this;confirmVueLoading=null;var promise=new Promise(function(resolve,reject){if (vm.$el && vm.$el.parentNode) {vm.$el.parentNode.removeChild(vm.$el);}resolve();vm.$destroy();vm.show = false;})return promise }; const confirmBox = (options = {}) => {if (Vue.prototype.$isServer) return;console.log(options);options = Object.assign({}, defaults, options);
let parent = document.body ;
//沒有關閉不允許新開if(confirmVueLoading){return confirmVueLoading}let instance = new confirmVueConstructor({el: document.createElement('div'),data: options});parent.appendChild(instance.$el);Vue.nextTick(() => {instance.show = true;});confirmVueLoading=instancereturn instance;};export default confirmBox;
?
引入全局 使用:
import VueConfirm from './components/confirm' Vue.use(VueConfirm) methods:{confirm () {var content = ` <div class="title">11111</div>`var vm=thisconst confirm = this.$confirm({title:'23232',text:content,dangerouslyUseHTMLString:true,button:[{text: '確定',ontap: function () {confirm.close().then(function(res){console.log(111233233231)});}},{text: '取消',ontap: function () {confirm.close().then(function(res){console.log('close')});}}]});}, }?
配置項:title :標題
? ? ? ? text:內容,
dangerouslyUseHTMLString:內容是否是html;button:按鈕
text:按鈕名稱
ontap:點擊后的函數
轉載于:https://www.cnblogs.com/heyinwangchuan/p/8269278.html
總結
以上是生活随笔為你收集整理的vue 公用组件开发 确认框confirm的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java redirect 跨域_如何解
- 下一篇: Unity3D 游戏资源提取工具