目录
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 设置按钮类型，可选值为 primary danger 或者不设 |
String | default |
| size | 设置按钮大小，可选值为 small large 或者不设 |
String | default |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 按钮点击事件 | (event) => void |
组件有很多的功能，但是这些功能都是由一个最原始的组件逐渐扩展而来的，所以我们先完成一个最基础的button组件，然后逐渐往上添加功能
编写Button组件
目的：完成基础结构 + 基础样式
components/Button/index.vue，
<template>
<button class="h-btn">
<slot></slot>
</button>
</template>
<style scoped lang="less">
// 默认背景色 默认大小 基础样式 不管传什么参数这个样式都在
.h-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border: 1px solid #d9d9d9;
}
.h-btn:focus {
outline: 0;
}
</style>由于button中的文字是动态的，完全是由用户使用时决定，所以我们需要设计一个插槽，用来渲染传入的自定义文字
测试基础Button--在App.vue里
App.vue，
<template>
<div>
<h-button>Default</h-button>
<h-button>Danger</h-button>
<h-button>Primary</h-button>
</div>
</template>
<script>
import HButton from '@/components/Button'
export default {
components:{
HButton
}
}
</script>
进过测试，我们编写的button组件可以进行正常使用，并且插槽功能是生效的
核心思路：通过prop传入的值的不同切换需要渲染的类名，达到显示不一样背景色的目的
1. 准备对应class类
components/Button/index.vue，
<style scoped lang="less">
// primary类
.h-btn-primary {
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
// danger类
.h-btn-danger {
color: #fff;
background-color: #ff4d4f;
border-color: #ff4d4f;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
</style>2. 编写props并根据不同的prop切换class
因为要添加的类名是根据prop的不同计算得来的，所以我们可以使用计算属性来完成匹配计算，然后我们找到匹配规则，类名为
h-btn-danger，prop值为danger，所以计算公式为：h-btn-prop
components/Button/index.vue，
<template>
<!-- <button class="h-btn" :class="typeClass"> 或 -->
<!-- 动态class的数组语法可以同时支持多个动态class的绑定 -->
<button class="h-btn" :class="[typeClass]">
<slot></slot>
</button>
</template>
<script>
export default {
// 在子类里通过 props 进行接收
// 根据不同的 type 值，给 button 绑定不同的类名
// default --> h-btn-default
// primary --> h-btn-primary
// danger --> h-btn-danger
// 通用计算公式：type -> h-btn-type
props: {
type: {
type: String,
// 默认值
default() {
return 'default'
}
}
},
computed: {
typeClass() {
return `h-btn-${this.type}`
}
}
}
</script>3. 测试type属性
App.vue
<template>
<div>
<!-- 将 type 属性传递给子类 -->
<h-button>Default</h-button>
<h-button type="danger">Danger</h-button>
<h-button type="primary">Primary</h-button>
</div>
</template>
<script>
import HButton from '@/components/Button'
export default {
components:{
HButton
}
}
</script>
1. 准备对应class类
components/Button/index.vue，
<style scoped lang="less">
// size:small
.h-btn-small {
padding: 4px 8px;
font-size: 12px;
}
// size:large
.h-btn-large {
padding: 6px 12px;
font-size: 16px;
}
</style>2. 编写props并根据不同的prop切换class
components/Button/index.vue，
<template>
<button class="h-btn" :class="[typeClass, sizeClass]">
<slot></slot>
</button>
</template>
<script>
export default {
// 在子类里通过 props 进行接收
props: {
size: {
type: String,
default(){
return 'default'
},
}
},
computed: {
sizeClass(){
return `h-btn-${this.size}`
}
}
}
</script>4. 测试size属性
App.vue，
<template>
<div>
测试size属性:
<h-button>Default</h-button>
<!-- 将 type 属性传递给子类 -->
<h-button size="small">Small</h-button>
<h-button size="large">Large</h-button>
</div>
</template>
<script>
import HButton from '@/components/Button'
export default {
components:{
HButton
}
}
</script>
5.实现参数的校验
有时候用户并不会按照要求来，比如我们这里只有 type="danger" 以及 type="primary" 但是用户非要将其改成其他值 type="big"
因此就需要用到参数校验
components/Button/index.vue，
props: {
type: {
type: String,
default: 'default' // props 的默认配置，如果不传以默认为主
},
size: {
type: String,
default: 'default',
// 参数校验
// value 表示当前传递过来的值
validator: function (value) {
// 对传入的参数值做校验，满足返回true，否则返回false
// 如果传入的参数不在可选参数中，给出用户提示，告知哪个参数传错了
const sizeList = ['small', 'large', 'default']
return sizeList.includes(value)
}
}1.组件直接绑定click事件
App.vue，
<template>
<div>
<h-button size="large" @click="clickHandler">Large</h-button>
</div>
</template>
<script>
import HButton from '@/components/Button'
export default {
components:{
HButton
},
methods:{
clickHandler(){
console.log('按钮点击了')
}
}
}
</script>测试发现，点击事件并没有绑定成功，接下来我们说一下，vue系统中的事件系统
浏览器原生事件 （在浏览器支持的原生标签上绑定的事件）
<button @click="handler"></button>
组件事件 （在组件身上绑定的事件）
<h-button @click="handler"></h-button>
组件绑定的事件默认是不会被浏览器识别的，我们需要做额外的处理让事件生效，有俩种方案：
添加 .native 修饰符
添加修饰符之后，事件会被绑定到组件的根元素身上
把click当成自定义事件通过 $emit 执行（推荐）
2. 使用$emit方法触发事件
用户的本意是想在点击button按钮的时候，触发组件身上绑定的click回调函数
App.vue，
<h-button @click="clickHandler">Defualt</h-button>
methods: {
clickHandler(e){
console.log('按钮点击了', e);
}
} components/Button/index.vue，
<template>
<button @click="clickHandler">
<slot></slot>
</button>
</template>
<script>
export default {
methods: {
clickHandler(e) {
// 触发自定义事件click,并传递事件对象e
this.$emit('click', e)
}
}
}
</script>完整代码：
components/Button/index.vue，
<template>
<!-- <button class="h-btn" :class="typeClass"> 或 -->
<!-- 动态class的数组语法可以同时支持多个动态class的绑定 -->
<button class="h-btn" :class="[typeClass, sizeClass]" @click="clickHandler">
<slot />
</button>
</template>
<script>
export default {
// 在子类里通过 props 进行接收
// 根据不同的 type 值，给 button 绑定不同的类名
// default --> h-btn-default
// primary --> h-btn-primary
// danger --> h-btn-danger
// 通用计算公式：type -> h-btn-type
props: {
type: {
type: String,
default: 'default' // props 的默认配置，如果不传以默认为主
},
size: {
type: String,
default: 'default',
// 参数校验
// value 表示当前传递过来的值
validator: function (value) {
// 对传入的参数值做校验，满足返回true，否则返回false
// 如果传入的参数不在可选参数中，给出用户提示，告知哪个参数传错了
const sizeList = ['small', 'large', 'default']
return sizeList.includes(value)
}
}
},
computed: {
typeClass(){
return `h-btn-${this.type}`
},
sizeClass(){
return `h-btn-${this.size}`
}
},
methods: {
clickHandler(e){
// 触发父组件传下来的自定义事件 click
this.$emit('click', e)
}
}
}
</script>
<style scoped lang="less">
// 默认背景色 默认大小 基础样式 不管传什么参数这个样式都在
.h-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border: 1px solid #d9d9d9;
}
.h-btn-default:focus {
outline: 0;
}
// primary 确定样式
.h-btn-primary {
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
// danger 危险样式
.h-btn-danger {
color: #fff;
background-color: #ff4d4f;
border-color: #ff4d4f;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
// size:small
.h-btn-small {
padding: 4px 8px;
font-size: 12px;
}
// size:large
.h-btn-large {
padding: 6px 12px;
font-size: 16px;
}
</style>App.vue，
<template>
<div id="app">
测试 type 属性：
<h-button>Defualt</h-button>
<!-- 将 type 属性传递给子类 -->
<h-button type="primary">Primary</h-button>
<h-button type="danger">Danger</h-button>
<br>
<br>
测试 size 属性：
<h-button>Defualt</h-button>
<!-- 将 type 属性传递给子类 -->
<h-button size="small">Primary</h-button>
<h-button size="large">Danger</h-button>
<br>
<br>
事件测试：
<h-button @click="clickHandler">Defualt</h-button>
</div>
</template>
<script>
import HButton from './components/Button'
export default {
name: 'App',
components: {
HButton
},
methods: {
clickHandler(e){
console.log('按钮点击了', e);
}
}
}
</script>
Button组件的编写，我们是从零开始的，接下来我们借助一些开源的三方基础插件，完成我们自己编辑器组件的编写
组件依赖：wangEditor
安装依赖： npm i wangeditor --save
指令
| 指令名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 提供编辑器数据的双向绑定 | String | 无 |
编写Editor组件
components/Editor/index.vue
<template>
<div class="editorContainer" ref="editor"></div>
</template>
<script>
import E from 'wangeditor'
export default {
methods: {
initEditor(){
// 编辑器初始化操作
const editor = new E(this.$refs.editor)
// 或者 const editor = new E( document.getElementById('editorContainer') )
editor.create()
}
},
mounted(){
// 在这里初始化保证dom是存在的
this.initEditor()
}
}
</script>测试组件
App.vue
<template>
<div>
<Editor/>
</div>
</template>
<script>
import Editor from '@/components/Editor'
export default {
components:{
Editor
}
}
</script>
前置知识
当我们在一个组件身上通过v-model绑定一个响应式数据时，记住，他是一个语法糖，实际上相当于完成了俩件事情
value 的自定义属性input的自定义事件1. 接受数据传入
App.vue，
<template>
<div>
<Editor v-model="content"/>
</div>
</template>
<script>
import Editor from '@/components/Editor'
export default {
components:{
Editor
},
data(){
return {
content:'我是编辑器'
}
}
}
</script>Editor/index.vue，
<template>
<div class="editorContainer" ref="editor"></div>
</template>
<script>
import E from 'wangeditor'
export default {
props: {
// 接收数据传入
value: {
type: String
}
},
methods: {
initEditor() {
const editor = new E(this.$refs.editor)
editor.create()
}
},
mounted() {
console.log('传过来的数据为', this.value)
this.initEditor()
}
}
</script>2. 实现数据回显
数据我们拿到了，然后就可以把它渲染到编辑器内部了，编辑器有一个方法是专门用来设置内容的，我们找到它，
editor.txt.html('富文本内容')
Editor/index.vue，
initEditor() {
const editor = new E(this.$refs.editor)
// 监听编辑器改动事件,把最新内容传出去
editor.config.onchange = (newHtml) => {
console.log('change 之后最新的 html', newHtml)
this.$emit('input', newHtml)
}
editor.create()
editor.txt.html(this.value)
}
4. Bug修复
看起来我们实现了数据的传入回显和修改时的内容传出，接下来我们在 App.vue 中动态的修改一下传入的
content，看看编辑器有没有实时响应得到显示
我们通过调试工具，修改content属性的值，发现编辑器并没有得到显示，然后再查看props数据，发现最新的数据已经传进去了
之所以没有显示到编辑器中，是因为编辑器类似一个独立的个体，它并不知道props已经变成新内容了，所以我们的思路是: 监听props的变化，然后把props的值设置到编辑器里
如何监听 - watch
如何设置 - editor.txt.html()
Editor/index.vue，
initEditor() {
const editor = new E(this.$refs.editor)
editor.config.onchange = (newHtml) => {
console.log('change 之后最新的 html', newHtml)
this.$emit('input', newHtml)
}
editor.create()
editor.txt.html(this.value)
// 为了能使用editor对象,我们采取一个更加灵活的命令式监听写法
this.$watch('value', () => {
editor.txt.html(this.value)
})
}再次测试，发现双向绑定已经完全正常，nice~
通过这一节的学习，我们应该掌握以下知识点
v-model 等同于做了什么完整代码：
Editor/index.vue，
<template>
<div ref="editorRef"></div>
</template>
<script>
import E from 'wangeditor'
export default {
methods: {
initEditor(){
// 编辑器初始化操作
const editor = new E(this.$refs.editorRef)
// 配置 onchange 回调函数
// 目的是为了能够知道什么时候内容发生了变化
editor.config.onchange = (newHtml) => {
// newHtml 拿到的就是编辑器中最新的内容
// 我们需要把这个内容抛出去交给父组件
this.$emit('input', newHtml);
console.log("change 之后最新的 html", newHtml);
};
editor.create()
// 重新设置编辑器内容
editor.txt.html(this.value)
/**
* bug 修复：
* 当传入的数据发生变化的时候，props中的value已经拿到了最新的值
* 但是并没有及时的同步到编辑器中
* 实现思路：
* 每一次content发生变化，props中都能拿到新值
* 我们可以利用 watch 进行监控 props 中的 value ，一旦 value
* 发生变化，就重新执行一下设置编辑器内容的方法即可
*/
// 命令式监听，灵活，可以在任何位置使用
// 参数一：要监听的属性
// 参数二：监听的属性发生变化之后的回调函数
/**
* $watch 和 watch 配置项内部实现的核心原理是一致的，但是 $watch 更加
* 灵活，它并不是组件一进行初始化就立刻监听的而是在任意时刻也就是你想要
* 监听的时候才监听的
*/
this.$watch('value', () => {
console.log('value发生了变化');
editor.txt.html(this.value)
})
}
},
mounted(){
// 在这里初始化保证dom是存在的
this.initEditor()
},
props: {
value: {
type: String
}
}
}
</script>
<style>
</style>App.vue，
<template>
<div id="app">
<!--
1. 编辑器组件可以接收我传入的数据，并且可以显示到编辑器内部，实现数据的回显
2. 一旦编辑器中进行内容编辑之后，绑定的 content 字段也可以得到修改，变成编辑器中最新的值
体现出来的就是双向绑定的特性
-->
<!--
实现步骤：
1. 实现回显
v-model 一旦写到一个组件上，默认情况下相当于传入了名为 value 的自定义属性，以及名为 input 的自定义事件
2. 编辑器一旦编辑内容就把绑定的 content 属性修改掉
难点1：如何知道内容已经编辑了 第三方插件提供了方法
难点2：如何拿到最新的编辑器内容，然后传出来交给 content（子传父）
-->
<Editor v-model="content"></Editor>
</div>
</template>
<script>
import Editor from './components/Editor'
export default {
name: 'App',
data(){
return {
content: '我是编辑器'
}
},
components: {
Editor
},
methods: {
}
}
</script>