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

参照Element UI，笔者发现为了提供组件的自定义能力，咱们须要定义一套高可用的数据结构，这样能力实现因组件需要更变而带来的维护性的劣势。 不同的组件都对应不同的组件属性.咱们须要设计一套对立的规范的配置来约定它, 这样前期扩大十分不便, 只须要往组件增加属性即可。

以Button为例,我依照上面的属性表实现组件，性能间互不影响。

罕用控件的实现--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

  • marked转换.md的文件
  1. 引入
$ npm add marked
  1. 配置 vite.config.ts ，倡议独自放到一个md.ts文件中调用
// vite.config.ts// @ts-nocheckimport 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
  1. 应用

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

<template><pre class="language-html" v-html="html" /></template><script>const Prism = require('prismjs');import 'prismjs/themes/prism-okaidia.css'export default{setup(){    const code = '<p>hello World</p>';    const html = Prism.highlight(code,'html');    return {html}    }}<script>

利用Custom Block(自定义块)和vite实现代码渲染器

待实现。。。

最初贴上源码链接 和 我的项目预览。