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

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

结尾

一起加油吧！！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

北汽蓝谷：预期能否兑现

北汽蓝谷：预期能否兑现

天天提热搜&#xff0c;公司却一路亏损&#xff0c;股价却一路走高&#xff0c;今天说说——北汽蓝谷 问最近车圈谁最热&#xff0c;北汽蓝谷少不了。先是享界S9上市定档&#xff0c;华为余承东“在线带货”。 后有百度无人驾驶萝卜快跑引发全网热议&#xff0c;所用车型便来自…
阅读更多...
TF/SD卡开发驱动（SPI）

TF/SD卡开发驱动（SPI）

TF与SD卡本质上来说都是flash类型的存储器 可以理解为TF卡是SD卡的升级版&#xff0c;体积小功能强大&#xff0c;SD卡是传统意义上的存储卡&#xff0c;适用范围比较广&#xff0c;而SD卡的驱动方式有两种 SDIO 和 SPI&#xff0c;同理TF卡也是一样 &#xff08;在资源足够…
阅读更多...
2024黑马AI+若依框架项目开发 个人心得、踩坑和bug记录 全网最快最全 基础功能认识篇

2024黑马AI+若依框架项目开发 个人心得、踩坑和bug记录 全网最快最全 基础功能认识篇

2024黑马AI若依框架项目开发 个人心得、踩坑和bug记录 全网最快最全 基础功能认识篇 你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner &#x1f339; 如果本篇文章帮到…
阅读更多...
[web]-图片上传、文件包含-图片上传

[web]-图片上传、文件包含-图片上传

题目内容提示&#xff1a;上传图片试试吧&#xff0c;注意统一时区问题 打开页面如图&#xff0c;源码没有过滤&#xff0c;随便输入&#xff0c;进入上传目录 根据链接可以看到是文件包含&#xff0c;可以利用编码读取源码&#xff0c;这里只列出有用页面的编码&#xff08;?…
阅读更多...
初识C++|类和对象（中）——类的默认成员函数

初识C++|类和对象（中）——类的默认成员函数

&#x1f36c; mooridy-CSDN博客 &#x1f9c1;C专栏&#xff08;更新中&#xff01;&#xff09; &#x1f379;初始C|类与对象&#xff08;上&#xff09;-CSDN博客 4. 类的默认成员函数 默认成员函数就是⽤⼾没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成…
阅读更多...
测试开发面经总结（三）

测试开发面经总结（三）

TCP三次握手 TCP 是面向连接的协议&#xff0c;所以使用 TCP 前必须先建立连接&#xff0c;而建立连接是通过三次握手来进行的。 一开始&#xff0c;客户端和服务端都处于 CLOSE 状态。先是服务端主动监听某个端口&#xff0c;处于 LISTEN 状态 客户端会随机初始化序号&…
阅读更多...
简单了解线程池

简单了解线程池

线程池 线程池的概念线程池的优势 线程池属性介绍线程池的使用简单实现线程池总结 线程池的概念 线程池(ThreadPoolExecutor) 顾名思义&#xff0c;在一个“池”中存放多个线程。 与常量池、数据库连接池等思想是一样的&#xff0c;为的都是提高效率。 我们已经领教了多线程的…
阅读更多...
python关于excel常用函数(pandas篇)

python关于excel常用函数(pandas篇)

iterrows函数&#xff1a; Pandas的基础数据结构可以分为两种&#xff1a;DataFrame和Series。不同于Series的是&#xff0c;Dataframe不仅有行索引还有列索引 。df.iterrows( )函数&#xff1a;可以返回所有的行索引&#xff0c;以及该行的所有内容。 pd.read_excel&#xf…
阅读更多...
印尼语翻译通：AI驱动的智能翻译与语言学习助手

印尼语翻译通：AI驱动的智能翻译与语言学习助手

在这个多元文化交织的世界中&#xff0c;语言是连接我们的桥梁。印尼语翻译通&#xff0c;一款专为打破语言障碍而生的智能翻译软件&#xff0c;让您与印尼语的世界轻松接轨。无论是商务出差、学术研究&#xff0c;还是探索印尼丰富的文化遗产&#xff0c;印尼语翻译通都是您的…
阅读更多...
材料学本科毕业6年自学Python转行AI行业，真的值得吗？

材料学本科毕业6年自学Python转行AI行业，真的值得吗？

一转眼&#xff0c;步入中年。回头看看&#xff0c;这六年多的时间变化实在是太大了。换专业&#xff0c;换赛道&#xff0c;从基层做到总监&#xff0c;最终放弃管理岗位投身技术&#xff0c;这一切都与学生时代的规划相去甚远。 从大学入学到2018年转行之前&#xff0c;我的…
阅读更多...
springboot老年慢性病药物管理系统-计算机毕业设计源码70568

springboot老年慢性病药物管理系统-计算机毕业设计源码70568

目录 摘要 Abstract 第一章 绪论 1.1 选题背景及意义 1.2 国内外研究现状 1.3 研究方法 第二章 相关技术介绍 2.1 MySQL简介 2.2 Java编程语言 2.3 B/S模式 2.4 springboot框架 第三章 老年慢性病药物管理系统 系统分析 3.1 系统目标 3.2 系统可行性分析 3.2.1 技…
阅读更多...
SIP消息结构详解

SIP消息结构详解

SIP协议的消息由三部分构成&#xff0c;分别是起始行&#xff08;请求行状态行)、消息头和消息体&#xff08;正文&#xff09; 一&#xff0e;起始行 1. 请求消息起始行 起始行&#xff1a;由方法名、请求URI和协议版本组成&#xff0c;自身内部用逗号分割&#xff0c;三者之…
阅读更多...
小试牛刀-Telebot区块链游戏机器人

小试牛刀-Telebot区块链游戏机器人

目录 1.编写目的 2.实现功能 2.1 Wallet功能 2.2 游戏功能 2.3 提出功能 2.4 辅助功能 3.功能实现详解 3.1 wallet功能 3.2 游戏功能 3.3 提出功能 3.4 辅助功能 4.测试视频 Welcome to Code Blocks blog 本篇文章主要介绍了 [Telebot区块链游戏机器人] ❤博主…
阅读更多...
Vue3 前置知识

Vue3 前置知识

1. Vue3 简介 2020年9月18日&#xff0c;Vue.js发布版3.8版本&#xff0c;代号&#xff1a;one Piece(海贼王)经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者官方发版地址&#xff1a;Release v3.0.0 One Piecevuejs/,core截止2023年10月&#xff0c;最新的公开版…
阅读更多...
nginx基本概念和安装

nginx基本概念和安装

一. 简介 1.1 是什么 nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;是一款轻量级的Web服务器/反向代理服务器/电子邮件(IMAP/POP3)代理服务器&#xff0c;在BSD-like协议下发行&#xff0c;特点是占有内存少&#xff0c;并发能力强。ngnix专为性能优化而开发&#…
阅读更多...
【TES807】 基于XCKU115 FPGA的双FMC接口万兆光纤传输信号处理平台

【TES807】 基于XCKU115 FPGA的双FMC接口万兆光纤传输信号处理平台

板卡概述 TES807是一款基于千兆或者万兆以太网传输的双FMC接口信号处理平台。该平台采用XILINX的Kintex UltraSacle系列FPGA&#xff1a;XCKU115-2FLVF1924I作为主处理器&#xff0c;FPGA外挂两组72位DDR4 SDRAM&#xff0c;用来实现超大容量数据缓存&#xff0c;DDR4的最高数据…
阅读更多...
【软件测试】编写测试用例篇

【软件测试】编写测试用例篇

前面部分主要是编写测试用例的方法和方向&#xff0c;后面一部分是编写出具体的测试用例 目录 什么是测试用例 1.设计测试用例的万能公式 1.1.从思维出发 1.2.万能公式 1.3.弱网测试 1.4.安装与卸载测试 2.设计测试用例的方法 2.1.基于需求的设计方法 2.2.等价类 2.3…
阅读更多...
【Git分支管理】分支合并冲突及其解决

【Git分支管理】分支合并冲突及其解决

目录 0.合并冲突 1.创建和切换dev1 ​2.dev1 bbb on dev branch ​3.master ccc on dev branch 4.dev1和master合并冲突 5.合并冲突解决 ​6.git log查看合并流程图 先提交再合并 0.合并冲突 在使用git进行合并操作的时候&#xff0c;在合并两个分支的时候就有可能出…
阅读更多...
【EXCELL技巧篇】使用Excel公式，获取当前 Excel的Sheet页的名字

【EXCELL技巧篇】使用Excel公式，获取当前 Excel的Sheet页的名字

【通知】&#xff1a; 正式跟大家说个难过的消息&#xff0c;本来在「中国朝代史」结束后&#xff0c;开启的下一个专栏「中国近代史」前面几期做的还好好的&#xff0c;可是今天起正式通知审核不过&#xff0c;因为一些原因。 其实我对于历史这一块我还是很感兴趣的&#xff0…
阅读更多...
13、Shell自动化运维编程基础

13、Shell自动化运维编程基础

弋.目录 RHCE板块一、为什么学习和使用Shell编程二、Shell是什么1、shell起源2、查看当前系统支持的shell3、查看当前系统默认shell4、Shell 概念 三、Shell 程序设计语言1、Shell 也是一种脚本语言2、用途 四、如何学好shell1、熟练掌握shell编程基础知识2、建议 五、Shell脚本…
阅读更多...
最新文章

Copyright @ 2022~2023