你也想做一个Element-ui吧！！！——Blueの前端路（一）
https://i-blog.csdnimg.cn/direct/2003c35e7b3d4bbf9371d13e5aba0697.jpeg目录
前言：
父子组件
button组件
使用vue脚手架初始化一个项目
怎样封装，注册和使用一个组件
main.js中将组件设置为全局
使用
此组件我们所需实现的内容
type
父组件组件通报type属性
子组件吸收负组件通报的数据
通过绑定类名的方法动态控制样式
设置差别类型的样式
plain属性
父组件组件通报plain值
子组件吸收负组件通报的数据，同样进行props校验，并且设置默认值为false
通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式
设置差别类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式
round
父组件通报round值
子组件获取属性值:
round样式
子组件设置该选择器
circle
button组件中使用字体图标
第一步： 在main.js中引入字体图标
第二步：父组件通报图标名，子组件吸收并且放到图标中
父组件传值：
子组件吸收：
使用吸收到的字体图标。在没有传入icon时隐蔽标签，在slot插槽没有传入值时，不显示标签
设置icon配套样式，使图标和笔墨之间有一定隔断
button组件中的点击变乱
组件中的定义点击变乱：
定义一个点击变乱，这个点击变乱的作用是调用父组件中的点击变乱，并且回调
父组件在使用时定义自己的点击变乱，其本质是子组件中的点击变乱触发父组件中的点击变乱。
结尾
前言：
又到了暑假了，俺近来想做一个属于自己的组件库雷同Element-ui这样的东东，怎样本人也是一名新手，没有那么强的前端功力，所俺就边学边记载自己的学习过程，将自己的笔记和所碰到的题目写成csdn的文章，一是为了分享笔记，让更多朋友们能够轻松学习，二是在写笔记的途中，也可以总结进步。以下是我所观看的视频：
http://【VUE进阶-从0到1搭建UI组件库（1-3）】https://www.bilibili.com/video/BV1nJ411V75n?p=7&vd_source=bb412cc25ca27e171f8e17085daad038
父子组件
父组件：为你所写的页面，该页面必要引入其他组件所以为父组件
子组件：你所写的能够被引用到其他页面的东东
https://i-blog.csdnimg.cn/direct/088f837e1bb2435c90ab6ad9b46e32e0.png
button组件
使用vue脚手架初始化一个项目
使用vue created one-ui，创建一个名为one-ui的项目。
按照自己的风俗设置脚手架风格，这里不多做介绍。
脚手架搭建完毕后，将App.vue文件下的自带内容清理一下，为后续开发做准备。
怎样封装，注册和使用一个组件
在componet下创建一个button.vue的文件，放置button组件代码。创建一个组建的button组件，，并且指定name为WssButton（按照自己想法来取名）。
<template>
<button class="wss-button">
按钮组件
</button>
</template>
<script>
export default {
name: 'WsButton'
}
</script>
<style lang="scss">
</style>
main.js中将组件设置为全局
import Button from './components/button.vue'
Vue.component(Button.name, Button)//用此组件命名为我们取的名字 使用
<template>
<div>
<WsButton></one-button>
</div>
</template> 此组件我们所需实现的内容
https://i-blog.csdnimg.cn/direct/2ff9610b10b74035a605342eac519dd3.png
https://i-blog.csdnimg.cn/direct/2f4844a409a04c848a9b4ad417b64e01.png
type
让按钮支持type属性，使得按钮支持差别样式
父组件组件通报type属性
App.vue:
<template>
<div class="app">
<div class="row">
<WsButton type="primary" @click="ww(123)">按钮</WsButton>
<WsButton type="success">按钮</WsButton>
<WsButton type="info">按钮</WsButton>
<WsButton type="warning">按钮</WsButton>
<WsButton type="danger">按钮</WsButton>
</div>
</div>
</template> 子组件吸收负组件通报的数据
button.vue代码：
export default {
name: 'oneButton',
// 此时对props进行校验，值接收string类型的type值
props: {
type:{
type: String，
// 设置默认值：如果不传值，那么使用default
default: 'default'
}
},
created () {
console.log(this.type)//defalut primary success info danger warning
}
} 通过绑定类名的方法动态控制样式
button.vue代码：
<template>
<button class="wss-button" :class="`wss-button-${type}`">
<span><slot></slot></span>
</button>
</template> 设置差别类型的样式
button.vue代码：
.wss-button
{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #ffffff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 500;
//禁止元素的文字被选中
-moz-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
&:hover,
&:hover{
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
}
.wss-button-primary{
color:#fff;
background-color: #409eff;
border-color: #409eff;
&:hover,
&:focus{
background: #66b1ff;
background-color: #66b1ff;
color: #fff;
}
}
.wss-button-success{
color:#fff;
background-color: #67c23a;
border-color: #67c23a;
&:hover,
&:focus{
background: #85ce61;
background-color: #85ce61;
color: #fff;
}
}
.wss-button-info{
color:#fff;
background-color: #909399;
border-color: #909399;
&:hover,
&:focus{
background: #a6a9ad;
background-color: #a6a9ad;
color: #fff;
}
}
.wss-button-warning{
color:#fff;
background-color: #e6a23c;
border-color: #e6a23c;
&:hover,
&:focus{
background: #ebb563;
background-color: #ebb563;
color: #fff;
}
}
.wss-button-danger{
color:#fff;
background-color: #f56c6c;
border-color: #f56c6c;
&:hover,
&:focus{
background: #f78989;
background-color: #f78989;
color: #fff;
}
} plain属性
和type类型相同，我们只要将样式先设置好，然后通过父组件通报过来的值进行判断，就可以设置plain属性了。
父组件组件通报plain值
App.vue的代码：
<div class="row">
<WsButton type="primary" plain>按钮</WsButton>
<WsButton type="success" plain>按钮</WsButton>
<WsButton type="info" plain>按钮</WsButton>
<WsButton type="warning" plain>按钮</WsButton>
<WsButton type="danger" plain>按钮</WsButton>
</div> 子组件吸收负组件通报的数据，同样进行props校验，并且设置默认值为false
button.vue代码：
props: {
plain: {
type: Boolean,
default: false
}
} 通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式
App.vue的代码：
<template>
<button class="wss-button" :class="[`wss-button-${type}`,{
'is-plain':plain
}]">
<span><slot></slot></span>
</button>
</template> 设置差别类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式
button.vue代码:
// 朴素按钮样式
.wss-button.is-plain{
&:hover,
&:focus{
background: #fff;
border-color: #489eff;
color: #409eff;
}
}
.wss-button-primary.is-plain{
color: #409eff;
background: #ecf5ff;
&:hover,
&:focus{
background: #409eff;
border-color: #409eff;
color: #fff;
}
}
.wss-button-success.is-plain{
color: #67c23a;
background: #c2e7b0;
&:hover,
&:focus{
background: #67c23a;
border-color: #67c23a;
color: #fff;
}
}
.wss-button-info.is-plain{
color: #909399;
background: #d3d4d6;
&:hover,
&:focus{
background: #909399;
border-color: #909399;
color: #fff;
}
}
.wss-button-warning.is-plain{
color: #e6a23c;
background: #f5dab1;
&:hover,
&:focus{
background: #e6a23c;
border-color: #e6a23c;
color: #fff;
}
}
.wss-button-danger.is-plain{
color: #f56c6c;
background: #fbc4c4;
&:hover,
&:focus{
background: #f56c6c;
border-color: #f56c6c;
color: #fff;
}
} round
设置round属性和之前的相似，只要在组件中定义好了样式，动态获取属性值即可
父组件通报round值
App.vue代码：
<div class="row">
<WsButton type="primary"round>按钮</WsButton>
<WsButton type="success"round>按钮</WsButton>
<WsButton type="info" round>按钮</WsButton>
<WsButton type="warning"round>按钮</WsButton>
<WsButton type="danger"round>按钮</WsButton>
</div> 子组件获取属性值:
button.vue代码
round: {
type: Boolean,
default: false
} round样式
button.vue代码
.wss-button.is-round{
border-radius: 20px;
padding: 12px 23px;
} 子组件设置该选择器
button.vue代码
<button class="wss-button" :class="[`wss-button-${type}`, {'is-plain': plain ,'is-round': round}>
<span>
<slot></slot>
</span>
</button> circle
自己动手看看吧！！！！
button组件中使用字体图标
在项目中使用字体图标，起首必要有字体图标，我们可以去阿里巴巴矢量图标库下载。
下载完成后，在asset目录下新建一个fonts目录，存放我们下载到的字体图标。
https://i-blog.csdnimg.cn/direct/bd4a8bc2ab744e7e9e223878715f4884.png
第一步： 在main.js中引入字体图标
import './assets/iconf/iconfont.css' 第二步：父组件通报图标名，子组件吸收并且放到图标中
父组件传值：
App.vue代码：
<div class="row">
<WsButton icon="dingbudaohang_xiaoxi" circle></WsButton>
<WsButton type="primary" icon="cedaohang_shouye" circle></WsButton>
<WsButton type="success" icon="cuowu" circle></WsButton>
<WsButton type="warning" icon="touxiangxiala_shuaxin" circle></WsButton>
<WsButton type="danger" icon="dingbudaohang_weizhigongneng" circle></WsButton>
</div> 子组件吸收：
button.vue
icon: {
type: String,
default: ''
} 使用吸收到的字体图标。在没有传入icon时隐蔽<i>标签，在slot插槽没有传入值时，不显示<span>标签
button.vue
<template>
<button class="wss-button" :class="[`wss-button-${type}`,{
'is-plain':plain,
'is-round':round,
'is-circle':circle,
}]">
<i v-if="icon" :class="`icon-${icon}`"></i>
<!-- 如果没传入文本插槽，则不显示span内容 -->
<span v-if="$slots.default"><slot></slot></span>
</button>
</template> 设置icon配套样式，使图标和笔墨之间有一定隔断
button.vue代码
.wss-button +span{
margin-left: 5px;
} button组件中的点击变乱
我们在使用组件时，直接给组件定义变乱是不会被触发的。我们必要在组件中定义一个点击变乱，这个点击变乱不进行其他操作，只出发父组件中的点击变乱。
组件中的定义点击变乱：
<template>
<button class="wss-button" :class="[`wss-button-${type}`, {'is-plain': plain ,'is-round': round,'is-circle': circle}]" @click="clickthing">
<iv-if="icon" class="iconfont" :class="`icon-${icon}`"></i>
<span v-if="$slots.default"><slot></slot>
</span>
</button>
</template> 定义一个点击变乱，这个点击变乱的作用是调用父组件中的点击变乱，并且回调
methods: {
clickthing (e) {
this.$emit('click', e)
}
} 父组件在使用时定义自己的点击变乱，其本质是子组件中的点击变乱触发父组件中的点击变乱。
<WsButton type="primary" @click="ww(123)">按钮</WsButton> <script>
export default {
methods: {
ww (a) {
console.log(a)
}
}
}
</script> 结尾
一起加油吧！！！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]