ToB企服应用市场:ToB评测及商务社交产业平台

标题: 你也想做一个Element-ui吧！！！——Blueの前端路（一） [打印本页]
作者: 民工心事    时间: 2024-7-15 01:50
标题: 你也想做一个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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4