Vue3自制UI框架的技术总结

常用控件的实现--数据结构设计

参照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()

Element.getBoundingClientRect()返回一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。

其他插件--引入marked和prismjs

• marked转换.md的文件

1. 引入

$ npm add marked

2. 配置 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

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

1. 引入

$ npm install prismjs

2. 使用

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