Vue组件化实践:2. 实现自定义弹窗插件

这个实现过程呢,会涉及render、Vue.extend、Vue插件等知识

分析需求

弹窗的特点:

  1. 位置不相对某个元素,而是相对于整个视窗,通常挂载于body,也就是要在vue的根实例app之外的。这样,不会影响别的内容的布局,也方便我们调整弹窗的位置
  2. 通过js创建的,不需要在任何组件中声明,即开即用型
    大概是要这样的效果:
// 可定制弹窗的标题,内容,以及显示几秒,提示的类型,这个有点类似element的toast
this.$notice({
  title: "自定义弹窗标题",
  content: "弹窗内容",
  duration: 1000,
  type: "success" // 类似element组件,可选success, warning, error
})

实现过程

1. 先写要实现的组件Notice组件

<!-- Notice.vue -->
<template>
  <div ref="notice" class="notice-wrap">
    <h1 class="title">{{ title }}</h1>
    <p class="content">
      <span class="iconfont" :class="iconType"></span>
      <span class="text">{{ content }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "notice",
  components: {},
  props: {
    // 标题
    title: {
      type: String,
      default: "提示",
    },
    // 提示内容
    content: {
      type: String,
      default: "内容",
    },
    // 几秒后,关闭弹窗,默认1s
    duration: {
      type: Number,
      default: 1000,
    },
    // 要显示的图标的类型:success, warning ,error
    type: {
      type:String,
      default: 'success'
    }
  },
  data() {
    return  {
      isShow: false,
    }
  },
  computed: {
    // 这里的图标,我是用iconfont来实现,所以要先去官网把这个图下下来: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=22664
    // iconfont这里我就不详细介绍了,就是个图标,你不要这个,直接注释掉也不会影响你了解过程
    iconType() {
      if(this.type === 'success') {
        return 'icon-success-filling'
      }else if(this.type === 'warning'){
        return 'icon-prompt-filling'
      }else {
        return 'icon-delete-filling'
      }
    }
  },
  methods: {}
};
</script>

<style scoped>
.notice-wrap {
  /* height: 200px; */
  width: 400px;
  position: absolute;
  top: 10%;
  left: 30%;
  border: 1px solid rgba(58,58,58, 0.2);
  border-radius: 4px;
  box-shadow: 10px 10px 5px #888888;
  padding: 16px;
}
.title {
  margin: 0;
  font-size: 20px;
}
.content {
  font-size: 14px;
}
.icon-success-filling{
  color: green;
}
.icon-prompt-filling {
  color: orange;
}
.icon-delete-filling {
  color: red;
}
.text {
  display: inline-block;
  margin-left: 8px;
}
</style>

2. 将组件实例化,并转化成真实dom

组件的实例化

一说到实例化,学过面向对象的同学第一反应就是构造函数了。所以我们要先创建一个组件的构造函数,将我们的Notice.vue组件(配置对象)转化成一个虚拟节点。然后再将虚拟节点转化成真实dom,然后挂载到页面上。

构造函数的创建一般会有两种方法:

使用render渲染函数
使用render渲染函数,在我们可能还不知道怎么操作时,看看main.js文件中是怎么做的:

new Vue({
  render: h => h(App),
}).$mount('#app')

其实它做这几件事:

  • render函数中,h其实是createElement的意思,因其频繁使用,且在源码中被命名为h, 固我们也就都叫h。h的作用是将xxx.vue组件转化成了一个虚拟节点(VNode)。
  • $mount的作用,是将VNode转化为真实Dom,并挂载在指定的真实节点中,这里,也就是挂载到App.vue组件中的id为app的div上,相当于:
    js document.getElememntById("app").appendChild(this.$el)
  • 如果$mount的函数不写任何参数(注意不能直接写body,官方说了不允许!),那么它依然会将VNode转化为真实Dom,但是不进行挂载追加。生成的dom呢,我们可以在它的实例对象$el获取
// notice/index.js
import Vue from 'vue'
import Notice from './Notice.vue'

function create(props) {
  // 类似main.js中的用法
  const vm = new Vue({
    // props是传给Notice组件中的props属性
    render: h => h(Notice, {props})
  })
  // 将vm转化成真实dom
  vm.$mount()
  // 将真实dom,挂载到body上
  document.body.appendChild(vm.$el)
}
export default create;

使用Vue.extends
学习东西呢,老样子,官网先走一波,官网传送门: https://cn.vuejs.org/v2/api/index.html#Vue-extend

这里,白话解释一下,Vue.extend()其实就是用来创建组件的构造函数的,然后使用这个构造函数创建出Vue的虚拟节点Vnode

// notice/index.js
import Vue from 'vue'
import Notice from './Notice.vue'

function create(props) {
  // 使用Vue.extend创建构造函数,MyComponent是自定义的vue组件(MyComponent.vue)
  const NoticeConstrutor = Vue.extend(Notice)
  // 构造函数的参数,propsData相当于我们组件MyComponent.vue里需要的props,这里为了和vue文件中的props冲突,所以官方取了个别名 
  // 然后实例化后,会生成一个vue组件对应的虚拟节点
  const notice = new NoticeConstrutor({propsData:props})
  // 有了实例后,最后和render一样,使用$mount进行挂载
  notice.$mount()
  // 将真实dom,挂载到body上,注意,这里的实例变成notice
  document.body.appendChild(notice.$el)
}

export default create;

到了这一步,我们就可以实现一个弹窗的功能了,新建一个组件测试:

<!-- notice/test.vue -->
<script>
import create from '@/notice/index.js'

export default {
  name: "Test",
  mounted() {
    create({
      title: "测试弹窗",
      content: "测试弹窗内容",
      duration: 2000,
      type: "error",
    });
  },
}
</script>

3. 销毁操作

我们弹窗设计,肯定某个动作后会触发,比如提交表单之类的,那么这个动作肯定也会不只一次触发,如果触发多次后,就会多次调用create方法后,如果不做销毁操作,就会一直往body上追加弹窗节点,这不是我们想看到的,所以做一下收尾工作了:

  • 将弹窗的dom从body上销毁
  • 将弹窗的实例对象销毁,释放内存
import Vue from 'vue'
import Notice from './Notice.vue'

function create(props) {
  // 2. 使用Vue.extend的方法创建
  const NoticeCons = Vue.extend(Notice)
  const notice = new NoticeCons({propsData: props})
  notice.$mount()
  document.body.appendChild(notice.$el)

  // 添加销毁操作
  function remove() {
    // 将真实dom节点干掉
    document.body.removeChild(vm.$el)
    // 将虚拟节点占的内存也释放掉
    vm.$destroy()
  }
  // 在几秒后,进行销毁操作
  if(props.duration) {
    setTimeout(() => {
      remove()
    }, props.duration)
  }
}
export default create;

这时候,再进行测试,就会发现弹窗2s后自动消失了


Q11.png

4. 使用插件的方式,将弹窗注入Vue原型上

弹窗肯定是不只一个地方会用到的,想想,如果我们在多个文件里要用到弹窗,是不是每次都得:

import create from '@/notice/index.js'
create({ //...
});
  • 很麻烦,我们就想像element的弹窗一样,只使用this.$message就可以创建调用,这时候插件就派上用场了:
// notice/index
import Vue from 'vue'
import Notice from './Notice.vue'

function create(props) {
  // 1. 使用render
  // 类似main.js中的用法
  // const vm = new Vue({
  //   render: h => h(Notice, {props})
  // })
  // // 将vm转化成真实dom
  // vm.$mount()
  // // 将真实dom,挂载到body上
  // document.body.appendChild(vm.$el)
  // console.log('vm.$el:', vm.$el);
  // function remove() {
  //   // 将真实dom节点干掉
  //   document.body.removeChild(vm.$el)
  //   // 将虚拟节点占的内存也释放掉
  //   vm.$destroy()
  // }

  // 2. 使用Vue.extend
  const NoticeCons = Vue.extend(Notice)
  const notice = new NoticeCons({propsData: props})
  notice.$mount()
  document.body.appendChild(notice.$el)

  // 将remove挂载到实例上,这样组件里,以后可以调用this.remove()来执行这个方法
  notice.remove = function() {
    // 将真实dom节点干掉
    document.body.removeChild(notice.$el)
    // 将虚拟节点占的内存也释放掉
    notice.$destroy()
  }
  if(props.duration) {
    setTimeout(() => {
      notice.remove()
    }, props.duration)
  }
  return notice;
}

// 插件走一波
const noticePlugin = {
  install: function(Vue, options) {
    // 将这个方法挂载到Vue.prototype.$notice上,就可以使用this.$notice来调用了
    Vue.prototype.$notice = create
  }
}
export default noticePlugin;
  • 在入口文件main.js中调用插件:
// main.js
import Vue from 'vue'
// 导入插件
import noticePlugin from '@/notice/index'
// 使用插件
Vue.use(noticePlugin)

new Vue({
  router, // 注意key是小写
  store,
  render: h => h(App),
}).$mount('#app')
  • 这样,调用时就可以省了导入操作,直接使用this.$notice来调用
<!-- notice/test.vue -->
<script>
export default {
  name: "Test",
  mounted() {
    this.$notice({
      title: "测试弹窗",
      content: "测试弹窗内容",
      duration: 2000,
      type: "error",
    });
  },
  methods: {},
};
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。