Question

我们正在使用一些更新的表格来改造成熟的网站。我们正在用SPA完全替换某些系统，而有些则不能保证。

但是，我们需要一些系统全局模式屏幕。其中一些已移植到Vue并在SPA中可以正常工作，我们希望在非SPA页面中获得增强的交互性的好处。

因此，在我们将事件绑定之前，就像这样：

$('a.newBooking').on('click', function(ev){
    // code to open bootstrap modal screen, download HTML, etc.
});

我们如何旋转组件？

我知道这里没有包含任何重要的代码，但是我们的模式基本上只是documented example modal component的修饰版本。区别在于我们没有按钮。我们希望能够从页面各处启动这些模式。

Answer 1

我的观点：

用于模态组件：

对模式使用单例模式（因为基本上我们只允许一个模式弹出窗口同时出现），这将使逻辑更简单。
自定义一个安装函数，将Modals的Vue实例添加到Vue.prototype，例如_Vue.prototype.$my = yourModals
然后按需注册您的插件，例如Vue.use(installFunc, {plugins: [SModal, AModal, BModal]})

在您的JQuery（或其他非Vue）应用程序上：

向Vue注册模型，然后创建Vue实例
显示或隐藏vueInstance.$my.SModal.show

下面是一个简单的演示：

Vue.config.productionTip = false

/*---Modal Plugin---*/
let vm = null // the instance for your Vue modal
let timeout = null //async/delay popup

const SModal = {
  isActive: false,

  show ({
    delay = 500,
    message = '',
    customClass = 'my-modal-class'
  } = {}) {
    if (this.isActive) {
      vm && vm.$forceUpdate()
      return
    }

    timeout = setTimeout(() => {
      timeout = null

      const node = document.createElement('div')
      document.body.appendChild(node)
      let staticClass = ''
      vm = new this.__Vue({
        name: 's-modal',
        el: node,
        render (h) { // uses render() which is a closer-to-the-compiler alternative to templates
          return h('div', {
            staticClass,
            'class': customClass,
            domProps: {
              innerHTML: message
            }
          })
        }
      })
    }, delay)

    this.isActive = true
  },
  hide () {
    if (!this.isActive) {
      return
    }

    if (timeout) {
      clearTimeout(timeout)
      timeout = null
    } else {
      vm.$destroy()
      document.body.removeChild(vm.$el)
      vm = null
    }

    this.isActive = false
  },

  __Vue: null,
  __installed: false,
  install ({ $my, Vue }) {
    if (this.__installed) { return }
    this.__installed = true
    $my.SModal = SModal // added your SModal object to $my
    this.__Vue = Vue //get the Vue constructor
  }
}

/*---Modal Plugin End---*/

/*---Custom Install Function in order to manage all modals---*/
let installFunc = function (_Vue, opts = {}) {
  if (this.__installed) {
    return
  }
  this.__installed = true
  const $my = {
    'memo': 'I am a plugin management.'
  }
  if (opts.plugins) {
    Object.keys(opts.plugins).forEach(key => {
      const p = opts.plugins[key]
      if (typeof p.install === 'function') {
        p.install({ $my, Vue: _Vue })
      }
    })
  }
  _Vue.prototype.$my = $my
}

/*---Install Plugins---*/
Vue.use(installFunc, {
  plugins: [SModal]
})

let globalVue = new Vue({
  el: '#vue-app'
})

$('#test').on('click', 'span', function () {
  globalVue.$my.SModal.isActive ? globalVue.$my.SModal.hide() :  globalVue.$my.SModal.show({'message':'test', 'delay':100})
})

span {
  cursor:pointer;
  color:red;
}

.my-modal-class {
  position:absolute;
  top:50px;
  left:150px;
  width:200px;
  height:200px;
  background-color:red;
  z-index:9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue-app">
</div>
<div id="test">
  <h3>One Example</h3>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I'm <span>good</span>.</p>
</div>

在SPA上下文之外启动Vue模态组件

1 个答案: