vue3自制UI框架技术总结

## 常用控件的实现--vue3的新特性

实现各个控件的时候利用Vue3的一些新特性。

* 属性和事件继承

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

```
// 子组件
inheritAttr=false
```

* v-model

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

  v-model:

  ```
  // 父
  <Component v-model:value="xxx"/>
  // 子
  this.emit('update:xxx',yyy)
  ```

  手动：

  ```
  // 父
  <Component :value="xxx" v-on:update:xxx="(yyy)=>xxx=yyy"  />
  // 子
  this.emit('update:xxx',yyy)
  ```

* 新的模板语法--class的绑定

  绑定对象

  ```
  <div :class="{ active: isActive }"></div>
  ```

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

* Teleport

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

```
<Teleport to="body"><Teleport>
```

## component元组件和context

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

```
<Tabs v-model:selected="selected">
      <Tab title="三国演义">“汝死后，汝妻子我养之，汝勿虑也。”</Tab>
      <Tab title="西游记">“大师兄，师傅被妖精抓走了。”</Tab>
      <Tab title="水浒传">“大郎，该吃药了。”</Tab>
      <Tab title="红楼梦">“这个妹妹我曾见过的。”</Tab>
</Tabs>
```

第一步：需要检查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组件

```
<component class="friday-tabs-content-item" :is="current" :key="selected"/>
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

* marke-d转换.md的文件

1. 引入

```
$ npm add --dev 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. 使用

```
<template>
<pre class="language-html" v-html="html" />
</template>

<script>
const Prism = require('prismjs');
export default{
setup(){
    const code = '<p>hello World</p>';
    const html = Prism.highlight(code,'html');
    return {html}
    }
}
<script>
```