发布于2022-03-18 22:12 阅读(3996) 评论(0) 点赞(7) 收藏(5)
<show-modal></show-modal>
this.$showModal({
title: '',
content: '当',
cancelText:"取消",
confirmText:"生成赛果",
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
import initModal from "@/components/show-modal/initModal.js"
import showModal from "@/components/show-modal/show-modal.vue"
initModal(Vue);
Vue.component('show-modal',showModal);
<template> <view class="_showModal" v-show="show"> <view class="_shade"></view> <view class="_modalBox"> <view class="_modal"> <slot name="title"> <view class="title" v-show="title">{{title}}</view> </slot> <slot name="content"> <view class="content">{{content}}</view> </slot> <slot name="btn"> <view class="btnbox"> <view class="btn" :style="{color:cancelColor,background:cancelBackgroundColor}" @click.stop="clickBtn('cancel')">{{cancelText}}</view> <view class="btn" :style="{color:confirmColor,background:confirmBackgroundColor}" @click.stop="clickBtn('confirm')">{{confirmText}}</view> </view> </slot> </view> </view> </view> </template> <script> export default { name:"show-modal", computed: { show(){ return this.$modalStore.state.show; }, title(){ return this.$modalStore.state.title; }, content(){ return this.$modalStore.state.content; }, showCancel(){ return this.$modalStore.state.showCancel; }, cancelText(){ return this.$modalStore.state.cancelText; }, cancelColor(){ return this.$modalStore.state.cancelColor; }, cancelBackgroundColor(){ return this.$modalStore.state.cancelBackgroundColor; }, confirmText(){ return this.$modalStore.state.confirmText; }, confirmColor(){ return this.$modalStore.state.confirmColor; }, confirmBackgroundColor(){ return this.$modalStore.state.confirmBackgroundColor; } }, methods:{ closeModal(){ this.$modalStore.commit('hideModal') }, clickBtn(res){ this.$modalStore.commit('hideModal') this.$modalStore.commit('success',res) } }, beforeDestroy(){ this.$modalStore.commit('hideModal') }, data() { return { }; } } </script> <style lang="scss" scoped> ._showModal{ position: fixed; top: 0; left:0; width: 100%; height: 100%; z-index:10000; ._shade{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: .6; z-index:11000; } ._modalBox{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:12000; display: flex; justify-content: center; align-items: center; ._modal{ flex: none; width:250px; min-height:170px; background: #fff; border-radius: 16px; .title{ text-align: center; font-size: 16px; font-family: Source Han Sans CN; font-weight: bold; color: #333333; margin-top: 20px; } .content{ min-height: 80px; width: 86%; margin:20px auto; font-size: 20px; font-family: Source Han Sans CN; font-weight: 500; color: #333333; display: flex; justify-content: center; align-items: center; text-align: center; } .btnbox{ display: flex; width: 88%; margin: auto; margin-bottom: 20px; flex-direction: row; justify-content: space-between; .btn{ width: 100px; height: 32px; border-radius: 16px; display: flex; justify-content: center; align-items: center; font-family: Source Han Sans CN; font-weight: 400; } } } } } </style>
import Vuex from 'vuex' export default function initModal(v) { // 挂在store到全局Vue原型上 v.prototype.$modalStore = new Vuex.Store({ state: { show:false, title:"标题", content:'内容', showCancel:true, cancelText:"取消", cancelColor:"#ED4F4E", cancelBackgroundColor:"#FFE5E5", confirmText:"确定", confirmColor:"#FFFEFA", confirmBackgroundColor:"linear-gradient(0deg, #F65555 0%, #E54848 100%)", success:null, }, mutations: { hideModal(state) { // 小程序导航条页面控制 // #ifndef H5 if(state.hideTabBar){ wx.showTabBar(); } // #endif state.show = false }, showModal(state,data) { state = Object.assign(state,data) console.log(state); state.show = true }, success(state,res) { let cb = state.success let resObj={ cancel:false, confirm:false } res=="confirm"?resObj.confirm=true:resObj.cancel=true cb && cb(resObj) } } }) v.prototype.$showModal = function (option) { if (typeof option === 'object') { // #ifndef H5 if(option.hideTabBar){ wx.hideTabBar(); } // #endif v.prototype.$modalStore.commit('showModal', option) }else{ throw "配置项必须为对象传入的值为:"+typeof option; } } }
原文链接:https://blog.csdn.net/qq_37117408/article/details/119032839
作者:爱出汗
链接:http://www.qianduanheidong.com/blog/article/318303/1915ead4fb39dde470f3/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!