Vue2-Simplert作为Vue.js插件

vue2-simplert-plugin (vue2-simplert-plugin)

When we using vue2-simplert, we will need to import the library in every place we need. This is very bored because we do same task in many place. In vue2-simplert we need to access method inside using $refs which is not recommended. For solving those problems I reborn vue2-simplert as Vue.js Plugins and using EventBus for open/close.

当我们使用vue2-simplert时，我们将需要在每个需要的地方导入库。 这很无聊，因为我们在很多地方都执行相同的任务。 在vue2-simplert中，我们需要使用不推荐使用$ refs访问内部方法。 为了解决这些问题，我将vue2-simplert重生为Vue.js插件，并使用EventBus进行打开/关闭。

View Demo 查看演示 Download Source 下载源

安装 (Install)

纱 (Yarn)

yarn add vue2-simplert-plugin

NPM (NPM)

npm i vue2-simplert-plugin --save

如何使用 (How to use)

导入您的根项目 (Import in your root project)

Usually main.js or index.js

通常是main.js或index.js

import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')

Vue.use(Simplert)

from v0.4.0 you need to add vue2-simplert-plugin.css

从v0.4.0开始，您需要添加vue2-simplert-plugin.css

Or, with customize default config which still can be overrided.

或者，使用仍可以覆盖的自定义默认配置。

import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert, {
  title: 'test', //string -- title alert
  message: 'message', //string -- message alert
  type: 'success', //string -- type : info (default), success, warning, error
  customClass: '', //string -- custom class in simplert div
  customIconUrl: '', //string -- custom url custom image icon
  customCloseBtnText: '', //string -- close button text
  customCloseBtnClass: '', //string -- custom class for close button
  onClose: this.onClose, //function -- when close triggered
  useConfirmBtn: false, //boolean -- using confirm button
  customConfirmBtnText: '', //string -- confirm button text
  customConfirmBtnClass: '', //string -- custom class for confirm button
  onConfirm: this.onConfirm, //function -- when confirm button triggered
  disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
  hideAllButton: false, //boolean -- set to true if you want hide all button
  onOpen: null, //function -- when simplert open will fire this method if available
  showXclose: true //boolean -- show x close button
})

for more Methods and Props

有关更多方法和道具

在根Vue中添加模板 (Add template in your root Vue)

Usually App.vue

通常App.vue

<simplert></simplert>

打开/关闭弹出窗口 (Open/Close Popup)

For open popup :

对于打开的弹出窗口：

this.$Simplert.open(obj)

Object that pass is same with vue2-simplert, please read wiki.

通过的对象与vue2-simplert相同，请阅读wiki 。

For close popup :

对于关闭弹出窗口：

this.$Simplert.close()

从vue2-simplert迁移 (Migration from vue2-simplert)

If you already use vue2-simplert in your project, please follow this below guide :

如果您已经在项目中使用vue2-simplert ，请遵循以下指南：

• Make sure you add dependency npm i vue2-simplert-plugin --save

  确保您添加依赖项npm i vue2-simplert-plugin --save

• Import and use this plugin in your main app, ex : main.js

  在您的主应用程序中导入并使用此插件，例如： main.js

import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')

Vue.use(Simplert)

• Remove all import vue2-simplert in your components and/or pages, because as Plugin you dont need to import in all components

  删除组件和/或页面中的所有导入vue2-simplert ，因为作为插件，您不需要导入所有组件

import Simplert from 'vue2-simplert'

• Remove all adding component vue2-simplert in your components and/or pages, because you dont need set components again

  删除组件和/或页面中所有添加的组件vue2-simplert ，因为您不需要再次设置组件

components: {Simplert}

• Remove all template html snippet in each components

  删除每个组件中的所有模板HTML代码段

<simplert :useRadius="true"
          :useIcon="true"
          ref="simplert">
</simplert>

• Add new html snippet in root application, ex : App.vue

  在根应用程序中添加新的html代码段，例如： App.vue

<simplert>
</simplert>

• Change all call method open with new plugin method, you dont need to change all configuration

  更改使用新的插件方法打开的所有调用方法，无需更改所有配置

// change this call
this.$refs.simplert.openSimplert(obj)
// to this way
this.$Simplert.open(obj)

• And DONE :+1: !!!

  和完成 ：+1：!!!

翻译自: https://vuejsexamples.com/vue2-simplert-as-vue-js-plugins/