uniapp实现自定义弹窗组件，支持富文本传入内容

顾辰呀

已于 2024-08-13 14:25:22 修改

阅读量830

点赞数 5

CC 4.0 BY-SA版权

文章标签： uni-app

于 2024-08-13 12:21:39 首次发布

本文链接：https://blog.csdn.net/weixin_45776545/article/details/141160754

1.首先安装vuex
通过此命令安装 npm install vuex --save

创建initModal.js

import Vuex from 'vuex'
// 自定义弹窗
export default function initModal (v) {
  // 挂在store到全局Vue原型上
  v.prototype.$modalStore = new Vuex.Store({
    state: {
      show: false,
      title: '标题',
      content: '内容',
      isRichText: false,
      showCancel: true,
      cancelText: '取消',
      cancelColor: '#333333',
      cancelBackgroundColor: 'rgba(236, 236, 236, 0.39)',
      confirmText: '确定',
      confirmColor: '#333333',
      confirmBackgroundColor: '#FFBB24',
      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 &