你也想做一个Element-ui吧！！！——Blueの前端路（一） ...

目录
前言：
 父子组件
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
   父子组件

父组件：为你所写的页面，该页面必要引入其他组件所以为父组件
子组件：你所写的能够被引用到其他页面的东东

button组件

 使用vue脚手架初始化一个项目

使用vue created one-ui，创建一个名为one-ui的项目。
按照自己的风俗设置脚手架风格，这里不多做介绍。
脚手架搭建完毕后，将App.vue文件下的自带内容清理一下，为后续开发做准备。
怎样封装，注册和使用一个组件

在componet下创建一个button.vue的文件，放置button组件代码。创建一个组建的button组件，，并且指定name为WssButton（按照自己想法来取名）。  

1. <template>
2.   <button class="wss-button">
3.    按钮组件
4.   </button>
5. </template>
7. <script>
9. export default {
10.   name: 'WsButton'
11. }
12. </script>
14. <style lang="scss">
16. </style>

复制代码

 
main.js中将组件设置为全局

1. import Button from './components/button.vue'
2. Vue.component(Button.name, Button)//用此组件命名为我们取的名字

复制代码

使用

1. <template>
2.   <div>
3.     <WsButton></one-button>
4.   </div>
5. </template>

复制代码

此组件我们所需实现的内容

 

type

让按钮支持type属性，使得按钮支持差别样式
父组件组件通报type属性

App.vue:

1. <template>
2. <div class="app">
3.   <div class="row">
4.     <WsButton type="primary" @click="ww(123)">按钮</WsButton>
5.     <WsButton type="success">按钮</WsButton>
6.     <WsButton type="info">按钮</WsButton>
7.     <WsButton type="warning">按钮</WsButton>
8.     <WsButton type="danger">按钮</WsButton>
9.   </div>
10. </div>
11. </template>

复制代码

子组件吸收负组件通报的数据

button.vue代码：

1. export default {
2.   name: 'oneButton',
3.   // 此时对props进行校验，值接收string类型的type值
4.   props: {
5.     type:{
6.       type: String，
7.       // 设置默认值：如果不传值，那么使用default
8.       default: 'default'
9.     }
10.   },
11.   created () {
12.     console.log(this.type)//defalut primary success info danger warning
13.   }
14. }

复制代码

通过绑定类名的方法动态控制样式

button.vue代码：

1. <template>
2.   <button class="wss-button" :class="`wss-button-${type}`">
3.    <span><slot></slot></span>
4.   </button>
5. </template>

复制代码

设置差别类型的样式

button.vue代码：

1. .wss-button
2. {
3.     display: inline-block;
4.     line-height: 1;
5.     white-space: nowrap;
6.     cursor: pointer;
7.     background: #ffffff;
8.     border: 1px solid #dcdfe6;
9.     color: #606266;
10.     -webkit-appearance: none;
11.     text-align: center;
12.     box-sizing: border-box;
13.     outline: none;
14.     margin: 0;
15.     transition: 0.1s;
16.     font-weight: 500;
17.     //禁止元素的文字被选中
18.     -moz-user-select: none;
19.     -webkit-user-select: none;
20.     -moz-user-select: none;
21.     -ms-user-select: none;
22.     padding: 12px 20px;
23.     font-size: 14px;
24.     border-radius: 4px;
25.     &:hover,
26.     &:hover{
27.       color: #409eff;
28.       border-color: #c6e2ff;
29.       background-color: #ecf5ff;
30.     }
31.   }
32.   .wss-button-primary{
33.   color:#fff;
34.   background-color: #409eff;
35.   border-color: #409eff;
36.   &:hover,
37.   &:focus{
38.     background: #66b1ff;
39.     background-color: #66b1ff;
40.     color: #fff;
41.     }
42.   }
43.   .wss-button-success{
44.   color:#fff;
45.   background-color: #67c23a;
46.   border-color: #67c23a;
47.   &:hover,
48.   &:focus{
49.     background: #85ce61;
50.     background-color: #85ce61;
51.     color: #fff;
52.     }
53.   }
54.   .wss-button-info{
55.   color:#fff;
56.   background-color: #909399;
57.   border-color: #909399;
58.   &:hover,
59.   &:focus{
60.     background: #a6a9ad;
61.     background-color: #a6a9ad;
62.     color: #fff;
63.     }
64.   }
65.   .wss-button-warning{
66.   color:#fff;
67.   background-color: #e6a23c;
68.   border-color: #e6a23c;
69.   &:hover,
70.   &:focus{
71.     background: #ebb563;
72.     background-color: #ebb563;
73.     color: #fff;
74.     }
75.   }
76.   .wss-button-danger{
77.   color:#fff;
78.   background-color: #f56c6c;
79.   border-color: #f56c6c;
80.   &:hover,
81.   &:focus{
82.     background: #f78989;
83.     background-color: #f78989;
84.     color: #fff;
85.     }
86.   }

复制代码

plain属性

和type类型相同，我们只要将样式先设置好，然后通过父组件通报过来的值进行判断，就可以设置plain属性了。
父组件组件通报plain值

App.vue的代码：

1. <div class="row">
2.     <WsButton type="primary" plain>按钮</WsButton>
3.     <WsButton type="success" plain>按钮</WsButton>
4.     <WsButton type="info"   plain>按钮</WsButton>
5.     <WsButton type="warning" plain>按钮</WsButton>
6.     <WsButton type="danger" plain>按钮</WsButton>
7.   </div>

复制代码

子组件吸收负组件通报的数据，同样进行props校验，并且设置默认值为false

button.vue代码：

1.   props: {
2.     plain: {
3.       type: Boolean,
4.       default: false
5.     }
6.   }

复制代码

通过绑定类名的方法动态控制样式，由于plain类型是布尔值，所以在类型中我们使用对象的形式来控制样式

App.vue的代码：

1. <template>
2.   <button class="wss-button" :class="[`wss-button-${type}`,{
3.     'is-plain':plain
4.   }]">
5.    <span><slot></slot></span>
6.   </button>
7. </template>

复制代码

设置差别类型的样式，由于plain类型是以对象的形式在类中定义的，所以使用获取属性的方法定义样式

button.vue代码:

1. // 朴素按钮样式
2. .wss-button.is-plain{
3.   &:hover,
4.   &:focus{
5.     background: #fff;
6.     border-color: #489eff;
7.     color: #409eff;
8.   }
9. }
10. .wss-button-primary.is-plain{
11.   color: #409eff;
12.   background: #ecf5ff;
13.   &:hover,
14.   &:focus{
15.     background: #409eff;
16.     border-color: #409eff;
17.     color: #fff;
18.   }
19. }
20. .wss-button-success.is-plain{
21.   color: #67c23a;
22.   background: #c2e7b0;
23.   &:hover,
24.   &:focus{
25.     background: #67c23a;
26.     border-color: #67c23a;
27.     color: #fff;
28.   }
29. }
30. .wss-button-info.is-plain{
31.   color: #909399;
32.   background: #d3d4d6;
33.   &:hover,
34.   &:focus{
35.     background: #909399;
36.     border-color: #909399;
37.     color: #fff;
38.   }
39. }
40. .wss-button-warning.is-plain{
41.   color: #e6a23c;
42.   background: #f5dab1;
43.   &:hover,
44.   &:focus{
45.     background: #e6a23c;
46.     border-color: #e6a23c;
47.     color: #fff;
48.   }
49. }
50. .wss-button-danger.is-plain{
51.   color: #f56c6c;
52.   background: #fbc4c4;
53.   &:hover,
54.   &:focus{
55.     background: #f56c6c;
56.     border-color: #f56c6c;
57.     color: #fff;
58.   }
59. }

复制代码

round

设置round属性和之前的相似，只要在组件中定义好了样式，动态获取属性值即可
父组件通报round值

App.vue代码：

1. <div class="row">
2.     <WsButton type="primary"  round>按钮</WsButton>
3.     <WsButton type="success"  round>按钮</WsButton>
4.     <WsButton type="info"    round>按钮</WsButton>
5.     <WsButton type="warning"  round>按钮</WsButton>
6.     <WsButton type="danger"  round>按钮</WsButton>
7.   </div>

复制代码

子组件获取属性值:

button.vue代码

1. round: {
2.       type: Boolean,
3.       default: false
4.     }

复制代码

round样式

button.vue代码

1. .wss-button.is-round{
2.   border-radius: 20px;
3.   padding: 12px 23px;
4. }

复制代码

子组件设置该选择器

button.vue代码

1. <button class="wss-button" :class="[`wss-button-${type}`, {'is-plain': plain ,'is-round': round}>
2. <span>
3. <slot></slot>
4. </span>
5. </button>

复制代码

circle

自己动手看看吧！！！！
button组件中使用字体图标

在项目中使用字体图标，起首必要有字体图标，我们可以去阿里巴巴矢量图标库下载。
下载完成后，在asset目录下新建一个fonts目录，存放我们下载到的字体图标。

第一步： 在main.js中引入字体图标

1. import './assets/iconf/iconfont.css'

复制代码

第二步：父组件通报图标名，子组件吸收并且放到图标中

父组件传值：

App.vue代码：

1. <div class="row">
2.       <WsButton icon="dingbudaohang_xiaoxi" circle></WsButton>
3.       <WsButton type="primary" icon="cedaohang_shouye" circle></WsButton>
4.       <WsButton type="success" icon="cuowu" circle></WsButton>
5.       <WsButton type="warning" icon="touxiangxiala_shuaxin" circle></WsButton>
6.       <WsButton type="danger" icon="dingbudaohang_weizhigongneng" circle></WsButton>
7.     </div>

复制代码

子组件吸收：

button.vue

1.     icon: {
2.       type: String,
3.       default: ''
4.     }

复制代码

使用吸收到的字体图标。在没有传入icon时隐蔽<i>标签，在slot插槽没有传入值时，不显示<span>标签

button.vue

1. <template>
2.   <button class="wss-button" :class="[`wss-button-${type}`,{
3.     'is-plain':plain,
4.     'is-round':round,
5.     'is-circle':circle,
6.   }]">
7.   <i v-if="icon" :class="`icon-${icon}`"></i>
8.   <!-- 如果没传入文本插槽，则不显示span内容 -->
9.    <span v-if="$slots.default"><slot></slot></span>
10.   </button>
11. </template>

复制代码

设置icon配套样式，使图标和笔墨之间有一定隔断

button.vue代码

1. .wss-button [class*=one-icon-]+span{
2.   margin-left: 5px;
3. }

复制代码

button组件中的点击变乱

我们在使用组件时，直接给组件定义变乱是不会被触发的。我们必要在组件中定义一个点击变乱，这个点击变乱不进行其他操作，只出发父组件中的点击变乱。
组件中的定义点击变乱：

1. <template>
2. <button class="wss-button" :class="[`wss-button-${type}`, {'is-plain': plain ,'is-round': round,'is-circle': circle}]" @click="clickthing">
3.   <i  v-if="icon" class="iconfont" :class="`icon-${icon}`"></i>
4.   <span v-if="$slots.default"><slot></slot>
5.   </span>
6.   </button>
7. </template>

复制代码

定义一个点击变乱，这个点击变乱的作用是调用父组件中的点击变乱，并且回调

1. methods: {
2.     clickthing (e) {
3.       this.$emit('click', e)
4.     }
5.   }

复制代码

父组件在使用时定义自己的点击变乱，其本质是子组件中的点击变乱触发父组件中的点击变乱。

1. <WsButton type="primary" @click="ww(123)">按钮</WsButton>

复制代码

1. <script>
2. export default {
3.   methods: {
4.     ww (a) {
5.       console.log(a)
6.     }
7.   }
8. }
9. </script>

复制代码

结尾

   一起加油吧！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。