Vue3自制UI框架的技术总结前端vue.js

常用控件的实现--数据结构设计参照Element UI，笔者发现为了提供组件的自定义能力，我们需要定义一套高可用的数据结构，这样才能实现因组件需求更变而带来的维护性的优势。不同的组件都对应不同的组件属性.我们需要设计一套统一的标准的配置来约定它, 这样后期扩展非常方便, 只需要往组件添加属性即可。
以Button为例,我按照下面的属性表实现组件，功能间互不影响。

文章图片

常用控件的实现--vue3的新特性笔者制作框架中学习认识了Vue3的新特性。

属性和事件继承

和Vue2相比Vue3默认为子组件继承了属性和事件，你可以选择关闭它，而且props所声明的属性也不再帮你继承：

// 子组件 inheritAttr=false

v-model
Vue3摒弃了.sycn修饰符,如果符合要求就使用v-model，否则就手动通信吧。
v-model:

// 父 // 子 this.emit('update:xxx',yyy)

手动：

// 父 // 子 this.emit('update:xxx',yyy)
新的模板语法--class的绑定
绑定对象

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
Teleport

文章图片

Dialog对话框组件当被打开是应该覆盖整个页面，使用Teleport就可以脱离当前的层叠上下文去你想去的地方。

component元组件和context

文章图片

制作Tabs和Tab时，构想用户可以这样使用：

“汝死后，汝妻子我养之，汝勿虑也。” “大师兄，师傅被妖精抓走了。” “大郎，该吃药了。” “这个妹妹我曾见过的。”

第一步：需要检查Tabs子组件的类型,如果不是tab直接报错

setup(props,context){ const defaults = context.slots.default() defaults.forEach((tag) => { if (tag.type !== Tab) { throw new Error('Tabs 子标签必须是 Tab') } }

第二步：导航条遍历所有Tab的title

const titles = defaults.map((tab) => { return tab.props.title })

第三步：展示选中的Tab组件

const current =computed(()=>{ return defaults.find(tab=>tab.props.title===props.selected) })

可以发现深入认识context和component元组件可以灵活的实现功能。
好用的API--Element.getBoundingClientRect() 【Vue3自制UI框架的技术总结】Element.getBoundingClientRect()返回一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。
其他插件--引入marked和prismjs

marked转换.md的文件

引入

$ npm add marked

配置 vite.config.ts ，建议单独放到一个md.ts文件中调用

// vite.config.ts // @ts-nocheck import path from 'path' import fs from 'fs' import marked from 'marked'const mdToJs = str => { const content = JSON.stringify(marked(str)) return `export default ${content}` }export default { plugins: [ { configureServer: [ // 用于开发 async ({ app }) => { app.use(async (ctx, next) => { // koa if (ctx.path.endsWith('.md')) { ctx.type = 'js' const filePath = path.join(process.cwd(), ctx.path) ctx.body = mdToJs(fs.readFileSync(filePath).toString()) } else { await next() } }) }, ], transforms: [{// 用于 rollup // 插件 test: context => context.path.endsWith('.md'), transform: ({ code }) => mdToJs(code) }] } ], };

prismjs

文章图片

形成一个代码块并且带有语法高亮

引入

$ npm install prismjs

使用

prismjs默认提供了多个主题，可以去node_modules\prismjs\themes下找一下

const Prism = require('prismjs'); import 'prismjs/themes/prism-okaidia.css' export default{ setup(){ const code = 'hello World '; const html = Prism.highlight(code,'html'); return {html} } }

利用Custom Block(自定义块)和vite实现代码渲染器待完成。。。
最后贴上源码链接和项目预览。