Button 组件

项目需求

可以有不同的等级（level）
可以是链接，可以是文字
可以 click、focus、鼠标悬浮
可以改变 size：大中小
可以禁用（disabled）
可以加载中（loading）

创建Button 组件，使用插槽

让 Button 支持事件

@click 点击按钮触发
@focus 点击页面，按Tab键选中触发
@mouseover 鼠标浮到按钮上触发

使用slot插槽，插槽里面的触发事件，自动绑定到外面组件的template的根元素上
我们可以阻止他，并选择指定位置触发事件

• 让 div 不继承属性 （inheritAttrs : false）
• 让 div 里的button 绑定 $attrs（v-bind=”$attrs”）

• 当根元素就是我们要的button时，可以不用 inheritAttrs : false 和 v-bind=”$attrs”

让 button 支持 theme 属性（主题）

theme 的值为button / link / text
使用动态 theme

让 button 支持 size 属性

size 的值为big / normal / small

让 button 支持 level 属性

level 的值为main / normal / danger （操作同上）

让 button 支持 disabled

disabled 的值为 true / false

//推荐写法
//第一种 
<Button disabled>禁用按钮</Button>
//第二种
 <Button :disabled="true">禁用按钮</Button>

让 button 支持 loading

loading 值为true / false

props V.S. attrs 区别

props 要先声明才能取值，attrs 不用先声明
props 不包含事件，attrs 包含
props 没有声明的属性，会跑到attrs 里
props 支持string 以外的类型，attrs 只有string 类型

Vue 属性继承

默认属性传给根元素
inheritAttrs: false 禁用之
v-bind=”$attrs”或 context.attrs

UI 库的 CSS 注意事项

• 不能使用scoped

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

• 必须加前缀

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

• CSS最小影响原则

绝对不能影响使用者
先引入组件scss：[class^=”puzzle-“],[class=” puzzle-“]
再引入通用scss：