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

news2024/9/22 7:40:20

目录

前言：

 父子组件

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>

结尾

一起加油吧！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1921666.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python如何结束程序运行

python如何结束程序运行

方法1&#xff1a;采用sys.exit(0)&#xff0c;正常终止程序&#xff0c;从图中可以看到&#xff0c;程序终止后shell运行不受影响。 方法2&#xff1a;采用os._exit(0)关闭整个shell&#xff0c;从图中看到&#xff0c;调用sys._exit(0)后整个shell都重启了&#xff08;RESTAR…
阅读更多...
关键路径-matlab

关键路径-matlab

路径上边的数目称为路径长度 图的基本知识 求最短路径&#xff08;Dijkstra算法&#xff09; 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]
阅读更多...
OpenCV solvePnP位姿估计

OpenCV solvePnP位姿估计

目录 一、概述 二、实现代码 2.1solvePnP函数 2.1.1输入参数 2.1.2输出参数 2.2完整代码 三、实现效果 3.1标定板位姿 3.2标定板到相机的变换矩阵 一、概述 完成相机标定后&#xff0c;可以通过检测标定板在图像中的位置来计算标定板在相机坐标系下的位姿&#xff08;…
阅读更多...
Python基础知识——（004）

Python基础知识——（004）

文章目录 P16——15. 布尔类型 P17——16. 类型转换函数 P18——17. eval函数 P19——18. 算数运算符 P20——19. 赋值运算符 P16——15. 布尔类型 布尔类型 用来表示 “真” 值或 “假” 值的数据类型在Python中使用标识符 True 或 False 表示布尔类型的值True表示整数1&…
阅读更多...
python的集合

python的集合

定义 集合&#xff08;是一个无序的、不包含重复元素的集合。集合对象支持数学上的标准集合操作&#xff0c;如并集、交集、差集等。&#xff09; 创建集合 添加元素 删除元素 遍历 其他 union() 或 |&#xff1a;返回两个集合的 并集intersection() 或 &&#xff1a;返回…
阅读更多...
关于共享盘（文件夹）

关于共享盘（文件夹）

1、创建共享文件夹或共享盘 对应文件或盘-》右键-》属性-》共享或高级共享 2、设置权限来针对不同的用户进行访问 2.1 关于用户的添加 电脑->计算机管理->添加用户和组 2.2 本地用户 在属性的安全之中&#xff0c;可针对不同的用户和组进行权限设置&#xff0c;例如某…
阅读更多...
MYSQL--第七次作业

MYSQL--第七次作业

MYSQL–第七次作业 在product表上创建三个触发器。每次激活触发器后&#xff0c;都会更新operate表。product表和表的内容如下 Product表内容 字段名 字段描述 数据类型 主键 外键 非空 唯一 自增 Id 产品编号 Int(10) 是 否 是 是 否 Name …
阅读更多...
iPad锁屏密码忘记怎么办？有什么方法可以解锁？

iPad锁屏密码忘记怎么办？有什么方法可以解锁？

当我们在日常使用iPad时&#xff0c;偶尔可能会遇到忘记锁屏密码的尴尬情况。这时&#xff0c;不必过于担心&#xff0c;因为有多种方法可以帮助您解锁iPad。接下来&#xff0c;小编将为您详细介绍这些解决方案。 一、使用iCloud的“查找我的iPhone”功能 如果你曾经启用了“查…
阅读更多...
Nginx：关于实现跨域代理

Nginx：关于实现跨域代理

运维专题 Nginx&#xff1a;关于实现跨域代理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.ne…
阅读更多...
openWrt(3) - ubus (下)

openWrt(3) - ubus (下)

参考自: [OpenWrt Wiki] ubus&#xff08;OpenWrt微总线架构&#xff09; --- [OpenWrt Wiki] ubus (OpenWrt micro bus architecture) ubus补充 查看注册到 ubusd 的所有服务的所有方法&#xff1a; ubus -v list system 调用远程方法并接收回复。回复可以是简单的整数返回…
阅读更多...
超声波清洗机哪个牌子好？耐用的超声波眼镜清洗机推荐

超声波清洗机哪个牌子好？耐用的超声波眼镜清洗机推荐

超声波清洗机大家也一定不陌生了&#xff0c;提起超声波清洗机啊&#xff0c;大家对他的印象一定是清洗眼镜&#xff0c;这话没毛病&#xff0c;但是&#xff0c;这仅仅只是清洗机的基本功&#xff0c;清洗机的功能远远比咱们想象中的强大&#xff0c;但是目前市面上的小型超声…
阅读更多...
基于RHCE基础搭建简单服务

基于RHCE基础搭建简单服务

目录 项目标题与需求一 配置IP地址server机node02机 二 配置web服务三 搭建dns服务器四 开启防火墙server firewalld 五 配置nfs服务器node02 nfsserver autofs 六 开启SELinux七 验证是否能访问www.rhce.com 项目标题与需求 项目标题&#xff1a; 项目需求&#xff1a; 现有…
阅读更多...
眼镜清洗机哪款好用？眼镜党必备四款高性价比热门清洗机

眼镜清洗机哪款好用？眼镜党必备四款高性价比热门清洗机

戴眼镜的朋友应该深有体会&#xff0c;每次去眼镜店给眼镜“洗个澡”&#xff0c;重新戴上眼镜那一刻是不是觉得眼前的事物特别清晰&#xff0c;镜片也变得清澈透明。但是每次都得跑眼镜店&#xff0c;不仅耗时还费精力。这个时候&#xff0c;家用眼镜清洗机就显得特别有用了。…
阅读更多...
MongoDB教程（四）：mongoDB索引

MongoDB教程（四）：mongoDB索引

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…
阅读更多...
软文推广小白进阶高手之路，这几招让你事半功倍

软文推广小白进阶高手之路，这几招让你事半功倍

在数字营销的大潮中&#xff0c;软文推广作为一种润物细无声的营销手段&#xff0c;越来越受到企业和个人的青睐。对于初入此道的小白而言&#xff0c;想要从懵懂探索到游刃有余&#xff0c;其实并不遥远。今日投媒网就来与您分享掌握以下几招&#xff0c;让你的软文推广之路便…
阅读更多...
Vxe UI vxe-table column 根据内容的长度来自适应列的宽度

Vxe UI vxe-table column 根据内容的长度来自适应列的宽度

Vxe UI vue vxe-table 根据内容的长度来自适应列的宽度 列的 width 宽度支持多种格式&#xff08;默认情况下是等比例分配&#xff09;&#xff1a; 固定像素&#xff1a;100 或者 ‘100px’ 百分比&#xff1a;‘20%’ 自适应内容&#xff1a;‘auto’ 代码 <template&g…
阅读更多...
如何检测代理IP是否有效？检查因素与方法全解

如何检测代理IP是否有效？检查因素与方法全解

代理IP是一种网络代理技术&#xff0c;它是通过中间服务器来转发网络请求的IP地址。当我们使用代理IP时&#xff0c;我们的真实IP地址会被隐藏起来&#xff0c;而代理服务器的IP地址会被用作我们的身份标识。使用代理IP的步骤如下&#xff1a; 1.选择合适的代理服务器 考虑服务…
阅读更多...
2024年最新PyCharm保姆级安装教程

2024年最新PyCharm保姆级安装教程

PyCharm是一款专为Python开发者设计的集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在帮助用户在使用Python语言开发时提高效率。 PyCharm作为一款强大的Python IDE&#xff0c;其主要作用在于提供了一整套可以帮助Python开发者提高开发效率的工具。这些工具包括但不…
阅读更多...
Python转换PDF为PowerPoint演示文件

Python转换PDF为PowerPoint演示文件

PDF文件以其跨平台兼容性和版面固定性成为了分享和存储文档资料的首选格式。然而&#xff0c;在需要进行生动、互动性强的演示时&#xff0c;PDF的静态特性便难以满足个性化演示需求。将PDF文件转换为PowerPoint演示文稿可以解决这一问题。PowerPoint不仅提供了丰富的动画和过渡…
阅读更多...
时间管理的6张清单：做个时间清单控，提高时间颗粒度！

时间管理的6张清单：做个时间清单控，提高时间颗粒度！

时间管理管理的到底是什么&#xff1f;我觉得其根本就是时间的颗粒度。这与大多数行业精英的时间管理不谋而合&#xff0c;也就是身段越高&#xff0c;时间管理的颗粒度越高。比尔盖茨的颗粒度是5分钟&#xff0c;精确到与人握手&#xff0c;按秒来安排&#xff01;接下来&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023