Message组件
首先是组件内容：
// lp-message.vue <template> <div class="message_container" :class="[ {'show': isShow}, {'hide': !isShow}, {'enter': isEnter}, {'leave': isLeave}, type ]" :style="{ 'top': `${seed * 70}px` }"> <div class="content"> <i :class="[ `lp-message-${type}`, 'icon', 'fa', {'fa-info-circle': type == 'info'}, {'fa-check-circle': type == 'success'}, {'fa-times-circle': type == 'err'}, {'fa-exclamation-triangle': type == 'warning'}, ]"/> <div class="txt" :class="[`txt_${type}`]"> {{content}} </div> </div> </div> </template> <script> export default { name: "lp-message", props: { type: { type: String, default: 'info' }, lastTime: { type: Number, default: 2500 }, content: { type: String, default: '这是一条提示信息' }, isShow: { type: Boolean, default: false }, isLeave: { type: Boolean, default: false }, isEnter: { type: Boolean, default: false }, seed: { type: Number, default: 0 } } } </script> <style scoped> /* 样式见源码，此处省略 */ </style>
然后是组件的处理代码：
// lp-message.js import lp_message from "./lp-message.vue" import { defineComponent, createVNode, render } from 'vue' let MessageConstructor = defineComponent(lp_message) let instance; const instances = [] export const createMessage = (options) => { if(!Object.prototype.toString.call(options) === '[object Object]') { console.error('Please enter an object as a parameter') } options = options ? options : {} instance = createVNode( MessageConstructor, options ) //挂载 const container = document.createElement('div') render(instance, container) document.querySelector('#app').appendChild(instance.el) const cpn = instance.component const el = instance.el const props = cpn.props props.seed = instances.length // 初始化参数 Object.keys(options).forEach(key => { props[key] = options[key] }) // 加入到instances中管理 instances.push(instance) // 消息框出现 setTimeout(() => { props.isShow = true props.isEnter = true }, 200) // 消息框离开 setTimeout(() => { props.isEnter = false props.isShow = false props.isLeave = true }, props.lastTime) // 移除消息框 setTimeout(() => { close(el) }, props.lastTime + 200) } // 关闭某个弹框 const close = (el) => { instances.shift() instances.forEach((v) => { v.component.props.seed -= 1 }) document.querySelector('#app').removeChild(el) }
这里模仿了 element-ui 的思想，把所有的 message 实例管理在一个数组中
然后我们要把其作为一个方法注册到全局中，这个我就把它放在了 App.vue 文件中，通过 Vue3 的 provide 方法暴露在全局
<template> <div id="app"></div> </template> <script> import { provide } from 'vue' import createMessage from './components/public/lp-message/lp-message.js' export default { setup() { // 全局暴露创建 message 组件的方法 provide('message', createMessage) } } </script>
使用 message 组件，通过 inject 方法获取即可
<template> <div class="main"></div> </template> <script> import { inject } from 'vue' export default { setup() { // 接收创建 message 组件的方法 let $message = inject('message') // 调用方法 $message({ type: 'success', // 消息框的类型，可选：info | success | err | warning content: '这是一条成功的消息', // 消息内容 lastTime: 5000 // 消息框持续的时间 }) } } </script>
Popover组件
这个组件我没有模仿 element-ui ，因为我不太喜欢它的那种调用方式，所以我就根据自己的奇思妙想设计了一下这个组件：既然这个组件是一个气泡框，那么必然需要一个元素来确定这个气泡框的出现位置，因此我想把这个组件做成通过自定义指令 v-popover 来调用
接下来看下我的设计过程哈
首先是组件的内容：
// lp-popover.vue <template> <div ref="popover" :class="['lp-popover-container', position]" :style="{ 'top': `${top}px`, 'left': `${left}px`, }"> <div class="container-proxy"> <div class="lp-popover-title" v-html="title"></div> <div class="lp-popover-content" v-html="content"></div> </div> </div> </template> <script> import {ref, onMounted, reactive, toRefs} from 'vue' export default { props: { title: { type: String, default: '我是标题' }, content: { type: String, default: '我是一段内容' }, position: { // 出现的位置, top | bottom | left | right type: String, default: 'bottom' }, type: { // 触发方式, hover | click type: String, default: 'hover' } }, setup({ position, type }) { const popover = ref(null) const site = reactive({ top: 0, left: 0, }) onMounted(() => { const el = popover.value let { top, left, height: pHeight, widht: pWidth } = el.parentNode.getBoundingClientRect() // 获取目标元素的页面位置信息与尺寸大小 let { height: cHeight, width: cWidth } = el.getBoundingClientRect() // 获取气泡框的宽高 // 设置气泡框的位置 switch(position) { case 'top': site['left'] = left site['top'] = top - cHeight - 25 break; case 'bottom': site['left'] = left site['top'] = top + pHeight + 25 break; case 'left': site['top'] = top site['left'] = left - cWidth - 25 break; case 'right': site['top'] = top site['left'] = left + pWidth + 25 break; } // 为气泡框设置触发方式 switch(type) { case 'hover': el.parentNode.addEventListener('mouseover', function() { el.style.visibility = 'visible' el.style.opacity = '1' }) el.parentNode.addEventListener('mouseout', function() { el.style.visibility = 'hidden' el.style.opacity = '0' }) break; case 'click': el.parentNode.addEventListener('click', function() { if(el.style.visibility == 'hidden' || el.style.visibility == '') { el.style.visibility = 'visible' el.style.opacity = '1' } else { el.style.visibility = 'hidden' el.style.opacity = '2' } }) break; } }) return { ...toRefs(site), popover } } } </script> <style scoped> /* 组件样式省略，详情见源码 */ </style>
主要思路就是根据 position 定位好气泡框相对于其父元素的位置，支持的位置一共有四种，即 top | bottom | left | right ，同时根据 type 处理触发展示气泡框的方法，一共有两种触发方式，即 hover | click
然后再来看一下自定义指令是如何写的
// lp-popover.js import lpPopover from './lp-popover.vue' import {defineComponent, createVNode, render, toRaw} from 'vue' // 定义组件 const popoverConstructor = defineComponent(lpPopover) export default function createPopover(app) { // 在全局上注册自定义指令v-popover app.directive('popover', { // 在元素挂载后调用 mounted (el, binding) { // 获取外界传入的指令的值，例如v-popover="data"，value获取的就是data对应的值 let { value } = binding let options = toRaw(value) // 判断传入的参数是否为对象 if(!Object.prototype.toString.call(options) === '[Object Object]') { console.error('Please enter an object as a parameter'); } options = options ? options : {} const popoverInstance = createVNode( popoverConstructor, options ) const container = document.createElement('div') render(popoverInstance, container) el.appendChild(popoverInstance.el) const props = popoverInstance.component.props // 通过我们传入的参数对组件进行数据的初始化 Object.keys(options).forEach(v => { props[v] = options[v] }) } }) }
然后我们再在 main.js 文件中注册一下自定义指令
import { createApp } from 'vue'; import App from './App.vue' import vuex from './store/index' import vPopover from './components/public/lp-popover/lp-popover' const app = createApp(App) // 注册自定义指令 v-popver vPopover(app) app.use(vuex).mount('#app')
再来看一下使用方式
<template> <div id="app" v-popover="infos"> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const infos = reactive({ title: '提醒', content: '这是一条提醒内容', position: 'left', type: 'click' }) return { infos } } } </script> <style scoped> </style>
这样就简单地实现了气泡框组件的调用，当然其中 content 也是支持 html 的
但总的来说，这个组件的性能可能没 element-ui 好，因为我是直接对DOM进行了操作，也许后期还需要进行改善
还有下文~
