vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

　　这次封装基于vuecli3 + typescript实现，javascript也是同理，没有区别；

　　自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在 .vue文件。

1、实现toast插件封装（类似简易版的elementUi的message）

　　先书写一个toast组件

.toastMessageBox {
  position: fixed;
  min-width: 380px;
  left: 50%;
  z-index: 999;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #fff;
  padding: 15px 15px 15px 20px;
  font-size: 16px;
  border-radius: 4px;
  opacity: 0;
  top: -100px;
  transition: opacity 0.3s, top 0.4s;
  color: #909399;
  background-color: #edf2fc;
  border: 1px solid #ebeef5;
}

然后书写对应的toast.ts

import Vue from 'vue';
// toast组件
import toastComponent from '@/components/toast/index.vue'

// 返回一个 扩展实例构造器
const ToastConstructor = Vue.extend(toastComponent)

// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(data: { message: any, type: string, duration?: number }) {

  // 实例化一个 toast.vue
  const toastDom: any = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
 message: data.message,
 type: data.type,
      }
    }
  });

  // 把 实例化的 toast.vue 添加到 body 里
  document.body.appendChild(toastDom.$el);
  setTimeout(() => { toastDom.showToast(); })

  // 过了 duration 时间后隐藏
  let duration = data.duration ? data.duration : 2000
  setTimeout(() => {
    toastDom.hideToast();
    setTimeout(() => {
      document.body.removeChild(toastDom.$el)
    }, 500)
  }, duration)
}
// 注册为全局组件的函数
function registryToast() {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$toast()
  Vue.prototype.$toast = showToast
}
export default registryToast;

然后在main.ts中注册

// 自定义toast插件
import toastMessage from '@/utils/toast.ts';
Vue.use(toastMessage)

然后就可以在全局地方使用

this.$toast({message:"成功",type:'success'})

效果如下：

2、实现$/confirm/i插件封装（类似简易版的elementUi的messageBox）

　　主要用于操作的二次确定

还是一样，首先书写/confirm/i组件

这里按钮点击事件我设置了一个callback回调，用于方便后面的操作交互

./confirm/i-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  ./confirm/i-box {
    width: 420px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    font-size: 18px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
    overflow: hidden;
    backface-visibility: hidden;
    ./confirm/i-title {
      padding: 15px 15px 10px;
      font-size: 18px;
    }
    .content-text {
      padding: 10px 15px;
      color: #606266;
      font-size: 14px;
    }
    .footer-button {
      padding-top: 24px;
      display: flex;
      justify-content: flex-end;
      padding-right: 24px;
      .define-button {
 margin-left: 16px;
      }
    }
  }
}

对应的书写/confirm/i.ts

这里使用Promise来为用户点击确定或者取消做对应的交互触发

import Vue from 'vue';
import confirm from '@/components//confirm/i/index.vue';
const confirmConstructor = Vue.extend(/confirm/i);

const showConfirm = (contentText: string) => {
  return new Promise((reslove, reject) => {
    const /confirm/iDom: any = new confirmConstructor({
      el: document.createElement('template'),
      data() {
 return {
   contentText,
 }
      },
    })
    /confirm/iDom.callback = (action: string) => {
      if (action === '/confirm/i') {
 reslove()
      } else if (action === 'cancel') {
 reject()
      }
    }
    document.body.appendChild(/confirm/iDom.$el);
  })
}

function registryConfirm() {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$toast()
  Vue.prototype.$confirm = showConfirm
}
export default registry/confirm/i;

接下来在main.ts中

import registryConfirm from '@/utils//confirm/i.ts';
Vue.use(registry/confirm/i)

然后就可以在全局使用

this.$confirm('是否确认删除')
  .then(() => {
    this.$toast({
      message: '删除成功',
      type: 'success',
    });
  })
  .catch(() => {});

效果如下

这时，点击确定按钮就会触发 .then里的事件，点击取消则触发 .catch里的事件

typescript对应的声明文件

  typescript书写自定义插件对应的声明文件，避免编辑报错

import Vue from "vue";
declare module "vue/types/vue" {
  interface Vue {
    $toast: any,
    $/confirm/i: any
  }
}

以上就是vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例的详细内容，更多关于vue自定义插件封装的资料请关注考高分网其它相关文章！