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

最新推荐文章于 2024-09-11 11:28:25 发布
最新推荐文章于 2024-09-11 11:28:25 发布
阅读量2.6k 收藏 39
点赞数 43
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75148088/article/details/140385846
版权

目录

前言：

 父子组件

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（按照自己想法来取名）。  

<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>

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

 

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目录，存放我们下载到的字体图标。

第一步： 在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 [class*=one-icon-]+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">
  <i  v-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>

结尾

一起加油吧！！！

Blue(l'mAlex的迷弟)
关注
使用element-ui开发的前端报表页面
02-08
1.使用建议：适合对前端布局不擅长的同学，对v-charts嵌入 element-ui开发不熟悉的同学使用 2.资源内容：使用element-ui开发的前端报表页面
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
vue-element-admin项目
zhzijun的博客
05-21 2790
vue-element-adminvue-element-admin介绍功能前序准备目录结构项目运行机制和代码注释main.jsApp.vuepermission.jsVuex结构scssicons安装ContributionVue 生态圈Vue 全家桶vuex基础vuex基础-介绍vuex有哪几种属性？vuex基础-初始化功能vuex基础-statevuex基础-mutationsvuex基础-actionsvuex基础-gettersVuex中的模块化-Module为什么会有模块化？模块化的简单应用模块
你也想做一个Elemen-ui吧！！！——Blueの前端路
Blue的博客
07-15 8156
这里是Blue，本篇文章我们将在前一篇文章的基础上，继续封装组件。该组件为经常用的diglog，让我们来尝试去封装一下吧。希望各位在学习途中可以对组件有更多的理解。🎈🎈🎈视频推荐http://【VUE进阶-从0到1搭建UI组件库（1-3）】https://www.bilibili.com/video/BV1nJ411V75n?<WsDiglog title="温馨提示" width="320px" marginTop="100px"></WsDiglog>
前端基础（CSS）——css介绍 & 常用样式 & 案例—进化到Bootstrap——进化到Element-UI
Arya的博客，专注后端领域
06-05 1511
css简介入门，bootstrap使用，element-ui在后面
2024前端面试题！（附答案及解析）（2024.8月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 15万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.8月最新版）感谢支持，你们的鼓励是我的动力！
如何修改 Element-UI input 标签的高度
weixin_45716754的博客
11-01 8363
现在前端开发在写样式的时候比以前省心多了，这无疑得益于 UI 框架的普及，但是缺点就是使用它的东西不能完全自定义。这次就遇到 element-UI input 输入框高度自定义的问题。 先测试下简单的按钮修改： 一、先放一个按钮 <template> <div> <el-button type="warning">按我</el-button> </div> </template> <script&
使用shadcn-ui组件构建数据应用——Streamlit中的现代化UI解决方案
gitblog_00373的博客
09-08 856
使用shadcn-ui组件构建数据应用——Streamlit中的现代化UI解决方案 streamlit-shadcn-uiUsing shadcn-ui components in streamlit项目地址:https://gitcode.com/gh_mirrors/st/streamlit-shadcn-ui 项目介绍 Streamlit-shadcn-ui 是一个专为Streamlit设...
【Edu-Web开发日志一——首页制作一】
m0_73214160的博客
03-22 1979
以上就把最基础的首页头部的UI做出来了，后续还会继续改进。
vue vuex vue-rouert后台项目——权限路由（适合初学）
11-30
此外，normalize.css 用于统一不同浏览器的默认样式，Element-UI 是一个基于 Vue 的组件库，提供了丰富的 UI 元素。 项目初始化后，`npm install` 命令用于安装所有必要的依赖，`npm run dev` 启动开发服务器。项目...
element——table使用表格形式给员工排班
xiaoququ的博客
06-14 807
1
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)
weixin_52819925的博客
08-27 969
(一) 模块化相关规范 1. 模块化概述 传统开发模式的主要问题 命名冲突：多个js文件中的同名变量会冲突 文件依赖：js文件之间无法相互引用问题 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Se
练习篇：完整实践——实现一个简易日记本应用
持续学习中
09-22 723
经过前面三大部分内容知识点的讲解，相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了一定的了解了。到这里，我们基本上关于 Flutter 的开发课程的内容就说的差不多了。那么接下来我们就用前面学习的一些知识来进行一个完整的实践：实现一个简易日记本应用。通过这个实例我们可以复习巩固我们之前学过的知识，也算是一个总结与检验。本节作为练习篇，主要用到组件、自定义组件、常用布局、插件等知识点来完成...
一些热门的前端UI组件库(附用例)
weixin_46703850的博客
11-02 7929
一些热门的前端UI组件库
easyexcel模板导出并且公式自动计算的方法
最新发布
weixin_47615289的博客
09-11 315
【代码】easyexcel模板导出并且公式自动计算的方法。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 658
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 940
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值