Vue3造轮子笔记

一.Switch 组件

有什么问题？

最大的问题： 外界无法知道当前状态是开还是关

解决：添加 value 属性， 添加 input 事件

  <Switch :value="xxx" @input="x = $event"/>

如何让Switch 接受 value

用 props 即可

如何让Switch 发出 input 事件

用 context.emit('input',xxx)即可

目前不考虑，传入多个参数，防止自己晕, 后续在扩展了解

补充：

• 为什么事件名是 input 可以改成其他名字，用 input 是个人习惯
• $event 是个什么玩意
  • 是尤雨溪创造的一个变量，不喜欢你就去找尤雨溪
  • $event的值是emit的第二个参数
  • emit(事件名,事件参数)
  • 不喜欢你就去找尤雨溪理论，这是他规定的
• 总结
  • 编程这行很多的规矩都是人为规定的
  • 这些规定往往都是经过千锤百炼的好规定
  • 也就是人们所说的**「经验」**

Vue3 的 v-model

• 要求
  • 属性名任意，假设为x
  • 事件名必须为 update:x
• 效果 <Switch :value="y" @update:value="y = $event" />
• 可以简写为
• <Switch v-model:value="y" /> 文档 这是Vue2到Vue 3的一个大变动(breaking change)文档里面有详细的介绍

知识点总结

• value="true" 和 :value="true" 的区别
• 使用CSS transition 添加过渡动画
• 使用ref 创建内部数据
• 使用 :value 和 @input 让父子组件进行交流(组件通信)使用 $event
• 使用 v-model
• 框架就是把你框起来:不准改props

Vue2和 Vue 3的区别

• 新v-model代替以前的v-model和.sync
• 新增context.emit,与 this.$emit 作用相同

已上传到Gitee：https://gitee.com/boheweb/mint-ui

二.Button 组件

一.Vue3 属性绑定

• 默认所有属性都绑定到根元素
• 使用inheritAttrs: false可以取消默认绑定
• 使用$attrs或者context.attrs获取所有属性
• 使用v-bind="$attrs"批量绑定属性
• 使用const {size, level, ...xxx} = context.attrs将属性分开

二.UI库的CSS注意事项

1.不能使用 scoped

• 因为data-v-xxx中的xxx每次运行可能不同
• 必须输出稳定不变的class 选择器，方便使用者覆盖

2.必须加前缀

• .button不行，很容易被使用者覆盖
• .mint-button可以，不太容易被覆盖
• .theme-link不行，很容易被使用者覆盖
• .mint-theme-link可以，不太容易被覆盖

3.CSS最小影响原则

4.其他

• 如何做 loading 动画

三.API设计

Button组件怎么用

<Button
        @click=?
        @focus=?
        @mouseover=?
        theme="button or link or text"
        level="big or normal or minor"
        size="bif normal small"
        disabled
        loading
        ></Button>
</Button>

四.推荐 Wired Elements

• 目前是仿照 AntD，后面在改写

三.Dialog组件

一.Dialog需求分析与API设计

1. 参考一下别人的对话框

• AntD
• 还可以参考 Bulma、Element、iView、Vuetify等

2. 需求

• 点击后弹出
• 有遮罩层 overlay
• 有 close 按钮
• 有标题
• 有内容
• 有 yes / no 按钮

二.API设计

1.Dialog组件怎么用

<Dialog
        visible
        title="标题"
        @yes="fn1" @no="fn"
        ></Dialog>

三.写代码

• 步骤

  • 写HTML,CSS,JS
  • 测试
  • 改写代码
  • 再测试
  • 再改写
  • 在测试
  • ...

• 让 Dialog 支持 visible 属性

注意不能修改 props

• 让 Dialog 可以点击关闭

• 让 Dialog 支持自定义内容

  • 使用插槽slot
  • 使用具名插槽

• 把 Dialog 移到 body 下

  • 防止 Dialog 被遮挡
  • 新组件：Teleport

• 一句话打开 Dialog

  • 我不想声明 visible 变量，然后改变它的值

  技术点： 动态挂在组件

四.Tab组件

1. 参考一下别人的对话框

• AntD
• 还可以参考 Bulma、Element、iView、Vuetify等

2.需求

• 点击 Tab 切换内容
• 有一条横线在动

2.API设计

• Tabs组件怎么使用

<Tabs>
    <Tabs title="导航1">内容1</Tabs>
    <Tabs title="导航2"><Component1 /></Tabs>
    <Tabs title="导航1"><Component1 x="hi" /></Tabs>
</Tabs>
或
<Tabs :data="[
     {title:'导航1', content: '内容1'},
     {title:'导航2', content: Component1},
     {title:'导航3', content: h(Component1, {x: 'hi'})},
]"/>

3.如何在运行时确认子组件的类型

1.检查 context.slots.default()数组

• 学习 log 技巧，一层一层打印来分析结果，实用的编程技巧

console.log({...context});
console.log({...context.slots});
console.log({...context.slots.default});
console.log({...context.slots.default()});
console.log({...context.slots.default()[0]});

console.log({...context.slots.default()[0]});
console.log({ ...context.slots.default()[1]})

• 打印defaults[0]

 setup(props, context) {
    const defaults = context.slots.default()
    console.log(defaults[0])
    return {
      defaults
    }
  }

• 继续打印观察type

console.log(defaults[0].type === Tab)

若改成div观察

• 结论，通过观察可以发现，我们可以通过defaults[n].type === Tab来检测第n个是不是Tab的类型，同时在这里我们也深入的了解到了vue的原理，每一个Tab.vue它最终会导出一个对象，因为这个对象和defaults[n].type是全等的。

2.切换标签页

• 用selected标记被选中的标签页
• selected用index表示,不推荐
• selected 用name表示，不方便
• selected 用title表示，有漏洞

设计就是妥协的艺术

3.总结

1.用 JS 获取插槽内容

const defaults = context.slolts.default()

2.使用 Vue3 遇到的 bug

• 确定白桑自己代码的问题
• 用一个例子复现 bug
• 把 例子链接 和 bug 的复现步骤提交给 Vue 团队

3.钩子

• onMounted / onUpdated / watchEffect

4.TypeScript泛型

const indicator = ref<HTMLDivElement>(null)

5.获取宽高和位置

const { width, left } = el.getBoundingClientRect()

const { width, left, top, bottom } = el.getBoundingClientRect(); 都可以获取

6.ES6 析构赋值的重命名语法

• `const { left: left1 } = x.getBoundingClientRect()
• const { left: left2 } = y.getBoundingClientRect()

五.装修首页

一.知识点总结

1.添加 icon

• 使用iconfont.cn 的 symbol 模式

2.添加圆弧

• 使用border-raduis: 100px 40px
• 使用 clip-path: ellipse(80% 60% at 50% 40%)

3.Gird布局

• 参考菜鸟教程等相关教程实现布局效果

4.响应式页面

• 手机样式 + @media(min-width: 600px) + @media(min-width: 800px) + (min-width: 1200px)