这是我参与「 第五届青训营 」伴学笔记创作活动的第 2 天
组件库：Button组件的开发
一、分析组件
1、创建一个组件之前，要先分析组件具备的样式效果和功能，根据功能制定开发流程，button组件一般需要具备：
样式：primary、sussese、text、danger...
尺寸：size
禁用：disabled
块级：block
图标：iconButton
形状：...
二、创建文件
1、组件文件：src -> button文件夹、index.ts
在src中，一个组件对应一个文件夹，方便修改管理
2、内部结构：button -> src -> button.tsx、button-types.ts
在button文件夹中创建一个src文件夹编写组件和一个index.ts文件导出组件、button-types.ts为button的类型定义文件
3、
三、编写组件
1、编写组件：button.tsx
数据写在setup函数中
要渲染的内容写在渲染函数中
import { defineComponent, toRefs } from 'vue'
import { buttonProps, ButtonProps } from './button-types'
export default defineComponent({
name: 'MlButton',
// 声明props的具体定义
props: buttonProps,
setup(props: ButtonProps, { slots }) {
// 保持响应
const { type } = toRefs(props)
// 数据写在setup函数中
return () => {
// 要渲染的内容写在渲染函数中
const defaultSlot = slots.default ? slots.default() : '按钮'
return (
<button class={`ml-btn, ml-btn--${type.value}`}>{defaultSlot}</button>
)
}
}
})
toRefs：用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。 常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
2、导出组件：index.ts
两种导出方式：具名导出、导出插件
import { App } from 'vue'
import Button from './src/button'
// 具名导出
export { Button }
// 导出插件
export default {
install(app: App) {
app.component(Button.name, Button)
}
}
3、类型定义：button-types.ts
import { ExtractPropTypes, PropType } from "vue";
export type IButtonType = 'primary' | 'secondary' | 'text'
export const buttonProps = {
type: {
type: String as PropType<IButtonType>,
// 类型是字符串且是三个type之一 静态类型约束
default: 'secondary'
}
} as const
export type buttonProps = ExtractPropTypes<typeof buttonProps>
// 从指定的范型类型当中抽出类型定义
四、编写样式
样式编写包括type、size等等
增加功能的ts代码
(button.tsx)
import { defineComponent, toRefs } from 'vue'
import { buttonProps, ButtonProps } from './button-types'
export default defineComponent({
name: 'MlButton',
// 声明props的具体定义
props: buttonProps,
setup(props: ButtonProps, { slots }) {
// 保持响应
const { type, size, disabled } = toRefs(props)
// 数据写在setup函数中
return () => {
// 要渲染的内容写在渲染函数中
const defaultSlot = slots.default ? slots.default() : '按钮'
return (
<button
disabled={disabled.value}
class={`ml-btn ml-btn--${type.value} ml-btn--${size.value}`}
>
{defaultSlot}
</button>
)
}
}
})
(button-types.ts)
import { ExtractPropTypes, PropType } from 'vue'
export type IButtonType = 'primary' | 'secondary' | 'text'
export type IButtonSize = 'small' | 'medium' | 'large'
export const buttonProps = {
type: {
type: String as PropType<IButtonType>,
// 类型是字符串且是三个type之一 静态类型约束
default: 'secondary'
},
size: {
type: String as PropType<IButtonSize>,
default: 'medium'
},
disabled: {
type: Boolean,
default: false
}
} as const
export type ButtonProps = ExtractPropTypes<typeof buttonProps>
// 从指定的范型类型当中抽出类型定义
// 用户要写对的校验
五、scss基本语法
变量
变量用于存储一些信息，它可以重复使用。
scss中的变量可以存储字符串、数字、颜色值、布尔值、列表、null 值
格式：$variablename: value;
嵌套
样式嵌套
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
嵌套属性
//css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
//scss
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
@import
@mixin 与 @include
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
@extend 与 继承
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
@each
@each 指令的格式是 var 可以是任何变量名，比如 name，而 是一连串的值，也就是值列表
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
// 结果
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
