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

news2024/11/13 23:32:33

目录

前言

diglog组件

准备工作：

在diglog.vue中模仿element-ui搭建diglog框架

该组件需要完成的任务：

title

diglog.vue代码：

App.vue代码：

效果：

自定义dialog的宽度和距离顶部的

 App.vue代码：

diglog代码：

效果：

自定义body内容

diglog.vue代码：

App.vue代码：

效果： 

自定义footer内容

diglog.vue代码：

App.vue

效果： 

dialog的显示与隐藏

.sync

定义与原理

使用场景

使用方法

注意事项

实操

第一步：

第二步：

第三步：

效果

结语

前言

    🎈🎈🎈Hello，Hello。这里是Blue，本篇文章我们将在前一篇文章http://t.csdnimg.cn/6atDj的基础上，继续封装组件。该组件为经常用的diglog，让我们来尝试去封装一下吧。希望各位在学习途中可以对组件有更多的理解。🎈🎈🎈

视频推荐：http://【VUE进阶-从0到1搭建UI组件库（1-3）】https://www.bilibili.com/video/BV1nJ411V75n?p=13&vd_source=bb412cc25ca27e171f8e17085daad038 

diglog组件

准备工作：

第一步：

我们先创建一个diglog.vue组件，再在App.vue中进行对diglog的使用 

 第二步：在main.js中去将diglog.vue组件声明为全局

import Diglog from './components/diglog.vue'
Vue.component(Diglog.name, Diglog)

在diglog.vue中模仿element-ui搭建diglog框架

<template>
 <div class="one-dialog_wrapper">
   <div class="one-dialog">
     <div class="one-dialog_header">
       <span class="one-dialog_title">提示</span>
       <button class="one-dialog_headerbtn">
         <i class="one-icon-close"></i>
       </button>
     </div>
     <div class="one-dialog_body">
       <span>这是一段信息</span>
     </div>
     <div class="one-dialog_footer">
       <one-button>取消</one-button>
       <one-button type="primary">确定</one-button>
     </div>
   </div>
 </div>
</template>

<style lang="scss" scoped>
.one-dialog_wrapper{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 2001;
  background-color: rgba(0,0,0,0.5);
  .one-dialog{
    position: relative;
    margin: 15vh auto 50px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-sizing: border-box;
    width: 30%;
    &_header{
      padding: 20px 20px 10px;
      .one-dialog_title{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
      }
      .one-dialog_headerbtn{
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;
        .one-icon-close{
          color:909399
        }
      }
    }
    &_body{
      padding: 30px 20px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
    }
    &_footer{
      padding: 10px 20px 20px;
      text-align: right;
      box-sizing: border-box;
      ::v-deep .one-button:first-child{
        margin-right: 20px;
      }
    }
  }
}
</style>

效果如下：

该组件需要完成的任务：

参数名参数描述参数类型默认值
title对话框标题string提示
width宽度string50%
marginTop与顶部的距离string15vh
visible是否显示dialog（支持sync修饰符）booleanfalse
事件名事件描述
close模态框关闭事件

title

  • 父子组件传值以及props验证

  • 利用{{}}将传入内容渲染上去

diglog.vue代码：
<template>
  <transition name="ss">
    <div class="one-dialog_wrapper" v-show="visible" @click.self="close">
    <div class="one-dialog" :style="{width , marginTop}" >
      <div class="one-dialog_header">
        <span class="one-dialog_title">{{ title }}</span>
        <button class="one-dialog_headerbtn" @click="close">
          <i class="iconfont icon-cuowu"></i>
        </button>
      </div>
      <div class="one-dialog_body">
        <span>这是一段信息</span>
      </div>
      <div class="one-dialog_footer" >
      <WsButton @click="visible=false">取消</WsButton>
      <WsButton type="primary" @click="visible=false">确定</WsButton>
      </div>
    </div>
  </div>
  </transition>
 </template>
 export default {
  name: 'WsDiglog',
  props: {
    title: {
      type: String,
      default: '提示'
    }
}
</script>
App.vue代码：
<WsDiglog title="温馨提示"></WsDiglog>
效果：

自定义dialog的宽度和距离顶部的

 App.vue代码：
<WsDiglog title="温馨提示" width="320px" marginTop="100px"></WsDiglog>
diglog代码：
<template>
 <div class="one-dialog_wrapper">
   <div class="one-dialog" :style="{width:width,marginTop:top}">
     ···
   </div>
 </div>
</template>
<script>
export default {
  name: 'WsDiglog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '200px'
    },
    marginTop: {
      type: String,
      default: '30px'
    },
  }
}
</script>
效果：

自定义body内容

body内容可能是除span以外的其他内容，比如列表等，所以在这里使用插，并且在这里使用匿名插槽，使用匿名插槽的好处就是在使用时不需要使用template标签指定内容，直接在组件标签下编写内容即可。  

diglog.vue代码：
 <div class="one-dialog_body">
        <slot></slot>
</div>
App.vue代码：
<WsDiglog title="温馨提示" width="320px" marginTop="100px" @close="close" :visible.sync="visible">
  <ui>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ui>
  <template v-slot:footerslot>
    <WsButton @click="visible=false">取消</WsButton>
    <WsButton type="primary" @click="visible=false">确定</WsButton>
  </template>
</WsDiglog>
效果： 

自定义footer内容

footer中使用slot插槽，使其能够根据用户选择来进行是否需要其他东西  

diglog.vue代码：

设置footer插槽，如果没有指定footer插槽，则不显示

     <div class="one-dialog_footer" v-if="$slots.footerslot">
       <slot name="footerslot"></slot>
      </div>
App.vue
<template>
 <div class="app">
<WsDiglog title="温馨提示" width="320px" marginTop="100px">
  <ui>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ui>
  <template v-slot:footerslot>
    <WsButton>取消</WsButton>
    <WsButton type="primary">确定</WsButton>
  </template>
</WsDiglog>
</div>
</template>
效果： 

dialog的显示与隐藏

dialog组件的显示与隐藏，需要使用到sync语法糖

在前端开发中，特别是在使用Vue.js框架时，.sync修饰符是一个非常重要的概念，它主要用于简化父子组件之间数据的双向绑定过程。以下是对.sync修饰符的详细解释：

.sync
定义与原理

.sync修饰符是Vue.js提供的一种语法糖，用于实现父子组件之间的双向数据绑定。在Vue 2.3.0+版本中引入，用于替代之前版本的.sync修饰符（在Vue 2.0.0中作为组件的一个特殊选项存在，但在Vue 2.3.0+中被移除并重新作为修饰符引入）。

在Vue 3中，.sync修饰符继续存在，但需要注意的是，Vue 3推荐使用v-model的多个参数形式来实现类似的功能，因为v-model在Vue 3中被重新设计以支持自定义组件的双向绑定。不过，.sync修饰符仍然可以作为一种替代方案使用。

使用场景

.sync修饰符通常用于以下场景：

  • 当父组件需要向子组件传递一个或多个prop，并希望子组件能够修改这些prop的值时。

  • 子组件在修改prop的值后，需要通知父组件进行更新，以保持数据的一致性。

使用方法

在父组件中，使用.sync修饰符绑定prop时，Vue会自动监听子组件触发的update:propName事件，并将接收到的新值赋给绑定的数据项。

<!-- 父组件 -->
<template>
  <div>
    <child-component :some-prop.sync="parentProp"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentProp: 'Initial Value'
    };
  }
}
</script>

在子组件中，当需要修改someProp的值时，通过$emit触发update:someProp事件，并传递新的值。

<!-- 子组件 -->
<template>
  <div>
    <input v-model="localProp" @input="updateProp" />
  </div>
</template>

<script>
export default {
  props: ['someProp'],
  data() {
    return {
      localProp: this.someProp
    };
  },
  watch: {
    someProp(newVal) {
      this.localProp = newVal;
    }
  },
  methods: {
    updateProp() {
      this.$emit('update:someProp', this.localProp);
    }
  }
}
</script>
注意事项

  • .sync修饰符实际上是v-bind的语法糖，它会被扩展为v-bind绑定和v-on监听器的组合。

  • 在Vue 3中，虽然.sync修饰符仍然可用，但推荐使用v-model的多个参数形式来实现双向绑定，因为它提供了更清晰的语义和更灵活的使用方式。

  • 使用.sync修饰符时，需要注意避免在子组件中直接修改prop的值，因为这可能会导致数据流的不清晰和难以追踪的问题。相反，应该通过触发事件来通知父组件进行更新。

综上所述，.sync修饰符是Vue.js中用于简化父子组件之间双向数据绑定的重要工具，但在使用时需要注意其原理和限制条件。

实操

根据上面对于sync语法糖的介绍，我们在dialog显示和隐藏中要进行两种处理

第一步：

控制dialog的显示和隐藏，我们首先在子组件中使用v-show对于组建的显示与隐藏进行控制。

diglog.vue代码：

<div class="one-dialog_wrapper" v-show="visible" @click.self="handleClose">
   ···
</div>
第二步：

在父组件中使用:visible.sync="visible"向子组件进行传值并且接收子组件回调。

App.vue的代码：

<template>
<WsDiglog title="温馨提示" width="320px" marginTop="100px" @close="close" :visible.sync="visible">
  <ui>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ui>
  <template v-slot:footerslot>
    <WsButton @click="visible=false">取消</WsButton>
    <WsButton type="primary" @click="visible=false">确定</WsButton>
  </template>
</WsDiglog>
</div>
</template>
<script>
export default {
  data () {
    return {
      visible: true
    }
  },
  methods: {
    close (value) {
      this.visible = value
    }
  }
}
</script>
第三步：

diglog.vue代码：

<template>
  <transition name="ss">
    <div class="one-dialog_wrapper" v-show="visible" @click.self="close">
    <div class="one-dialog" :style="{width , marginTop}" >
      <div class="one-dialog_header">
        <span class="one-dialog_title">{{ title }}</span>
        <button class="one-dialog_headerbtn" @click="close">
          <i class="iconfont icon-cuowu"></i>
        </button>
      </div>
      <div class="one-dialog_body">
        <slot></slot>
      </div>
      <div class="one-dialog_footer" v-if="$slots.footerslot">
       <slot name="footerslot"></slot>
      </div>
    </div>
  </div>
  </transition>
 </template>
<script>
export default {
  name: 'WsDiglog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '200px'
    },
    marginTop: {
      type: String,
      default: '30px'
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    fn () {
      this.$emit('unpdate:visible', false)
    },
    close () {
      this.$emit('close', false)
    }
  }
}
</script>
效果

结语

  🎈🎈🎈观众老爷们是否学到如何封装diglog组件了嘛？希望本篇文章对观众老爷能起帮助。🎈🎈🎈

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

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

相关文章

Windows 下 VMamba 安装教程（无需更改base环境中的cuda版本且可加速）

Windows 下 VMamba 安装教程（无需更改base环境中的cuda版本且可加速）

导航 Mamba 及 Vim 安装问题参看本人之前博客&#xff1a;Mamba 环境安装踩坑问题汇总及解决方法Windows 下 Mamba 的安装参看本人之前博客&#xff1a;Window 下Mamba 环境安装踩坑问题汇总及解决方法 &#xff08;无需绕过selective_scan_cuda&#xff09;Linux 下VMamba 安…
阅读更多...
前端面试题（JS篇三）

前端面试题（JS篇三）

一、|| 和 && 操作符的返回值&#xff1f; || 和 && 首先会对第一个操作数执行条件判断&#xff0c;如果其不是布尔值就先进行 ToBoolean 强制类型转换&#xff0c;然后再执行条件判断。 对于 || 来说&#xff0c;如果条件判断结果为 true 就返回第一个操作数的…
阅读更多...
磁环编码器原理

磁环编码器原理

目录 概述 1 编码器介绍 2 实现原理介绍 2.1 磁环功能分析 2.2 硬件实现方式 3 编码器参数 3.1 编码器精度 3.2 影响编码器精度的因素 4 角度计算方法 4.1 单对极编码器 4.2 磁游标编码器 4.2.1 游标方案实现原理 4.2.2 一个实例磁环分析 5 磁刻线编码器 概述 本…
阅读更多...
算法题-二叉树

算法题-二叉树

二叉树 二叉树的理论知识 二叉树的种类 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的节点和度为2的节点&#xff0c;并且度为0的节点在同一层&#xff0c;则此二叉树为满二叉树&#xff08;深度为k&#xff0c;有2^k-1个节点的二叉树&#xff09;。 完全二叉…
阅读更多...
PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题？

PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中如何解决因长事务阻塞导致的其他事务等待问题&#xff1f;一、了解长事务阻塞的原因&…
阅读更多...
降Compose十八掌之『利涉大川』| Canvas

降Compose十八掌之『利涉大川』| Canvas

公众号「稀有猿诉」 原文链接 降Compose十八掌之『利涉大川』| Canvas 任何一个GUI框架都会提供大量的预定义的UI部件&#xff0c;让开发者构建UI页面&#xff0c;但有些时候预定义的部件无法满足需求&#xff0c;这时就需要定制&#xff0c;甚至是自定义绘制的内容。对…
阅读更多...
快手ip地址为什么会乱跳城市

快手ip地址为什么会乱跳城市

在数字化时代&#xff0c;网络IP地址已成为我们数字身份的一部分&#xff0c;它既是网络空间中的“门牌号”&#xff0c;也是我们在网络世界中的“身份证”。然而&#xff0c;近期有不少快手用户反映&#xff0c;他们的IP地址在使用过程中出现了乱跳城市的现象&#xff0c;引发…
阅读更多...
用好六西格玛培训中的DOE工具，让产品和过程优化不再难——张驰咨询

用好六西格玛培训中的DOE工具，让产品和过程优化不再难——张驰咨询

在六西格玛培训中&#xff0c;试验设计&#xff08;Design of Experiments&#xff0c;简称DOE&#xff09;是一种至关重要的工具&#xff0c;它不仅有助于系统地规划和分析试验&#xff0c;还能显著提升产品和过程的改进效率。DOE通过最小化试验次数&#xff0c;同时最大化信息…
阅读更多...
大数据基础：Hadoop之Yarn重点架构原理

大数据基础：Hadoop之Yarn重点架构原理

文章目录 Hadoop之Yarn重点架构原理 一、Yarn介绍 二、Yarn架构 三、Yarn任务运行流程 四、Yarn三种资源调度器特点及使用场景 Hadoop之Yarn重点架构原理 一、Yarn介绍 Apache Hadoop Yarn(Yet Another Reasource Negotiator&#xff0c;另一种资源协调者)是Hadoop2.x版…
阅读更多...
Windows安装PostgreSQL

Windows安装PostgreSQL

PostgreSQL是一种功能齐全的对象-关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;它以加州大学伯克利分校计算机系开发的POSTGRES项目为基础&#xff0c;经过多年的发展&#xff0c;已成为一个高度可扩展、支持多种数据类型、具备复杂查询能力的数据库系统。在…
阅读更多...
MoonBit 全新语法：级联运算符

MoonBit 全新语法：级联运算符

✨MoonBit 引入了 “..” 操作符&#xff0c;能够优雅地对可变 API 进行链式调用&#xff0c;同时保持可变 API 签名的整洁&#xff08;依然返回 Unit&#xff09;
阅读更多...
昇思25天学习打卡营第19天|sea_fish

昇思25天学习打卡营第19天|sea_fish

打卡第19天。本次学习的内容为生成式中的Diffusion扩散模型。记录学习的过程。 模型简介 什么是Diffusion Model&#xff1f; 如果将Diffusion与其他生成模型&#xff08;如Normalizing Flows、GAN或VAE&#xff09;进行比较&#xff0c;它并没有那么复杂&#xff0c;它们都…
阅读更多...
PHP转Go系列 | ThinkPHP与Gin框架之OpenApi授权设计实践

PHP转Go系列 | ThinkPHP与Gin框架之OpenApi授权设计实践

大家好&#xff0c;我是码农先森。 我之前待过一个做 ToB 业务的公司&#xff0c;主要是研发以会员为中心的 SaaS 平台&#xff0c;其中涉及的子系统有会员系统、积分系统、营销系统等。在这个 SaaS 平台中有一个重要的角色「租户」&#xff0c;这个租户可以拥有一个或多个子系…
阅读更多...
Text Control 控件教程：文本和表格相互转换

Text Control 控件教程：文本和表格相互转换

文档布局中的一项典型任务是将使用制表位创建的纯文本表格转换为完全格式化的表格。在本文中&#xff0c;我们将向您展示如何通过检测制表位并将其转换为包含位置的表格单元格&#xff0c;将纯文本表格转换为表格。 TX Text Control 是一款功能类似于 MS Word 的文字处理控件&…
阅读更多...
统计HTML 标签CSS 属性 和 JS 关键字

统计HTML 标签CSS 属性 和 JS 关键字

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>统计HTML 标签、CSS 属性 和 JS 关键字</title> </head> <style>#container {display: flex;}li {list-style: none;} </styl…
阅读更多...
【青书学堂】2024年第一学期 平面设计(高起专) 作业

【青书学堂】2024年第一学期 平面设计(高起专) 作业

【青书学堂】2024年第一学期 平面设计(高起专) 作业 为了方便日后复习&#xff0c;青书学堂成人大专试题整理。 若有未整理的课程&#xff0c;请私信我补充&#xff0c;欢迎爱学习的同学们收藏点赞关注&#xff01;文章内容仅限学习使用&#xff01;&#xff01;&#xff01; 第…
阅读更多...
MacCleaner Pro Mac系统综合清理工具包 释放磁盘空间，提高整体性能

MacCleaner Pro Mac系统综合清理工具包 释放磁盘空间，提高整体性能

MacCleaner Pro 是一款专为 Mac 用户设计的软件工具&#xff0c;用于优化和清理他们的系统。它提供了一系列功能来帮助用户加速他们的 Mac&#xff0c;释放磁盘空间&#xff0c;并提高整体性能。 MacCleaner Pro 的一些主要功能包括&#xff1a; 系统清理&#xff1a;此功能有…
阅读更多...
捷配笔记-如何确保PCB信号完整性？

捷配笔记-如何确保PCB信号完整性？

三十年的电子设计历程&#xff0c;是一段从微米到纳米的跨越之旅。1987年&#xff0c;0.5微米工艺曾被视为技术的极限&#xff0c;而如今22纳米工艺已成为行业的新标准。本文将回顾这段技术革新的历程&#xff0c;并探讨在这一过程中我们所面临的挑战与应对策略。 技术演进的里…
阅读更多...
python自动化flask库-从数据库里取出数据

python自动化flask库-从数据库里取出数据

实现效果&#xff1a;写一个接口&#xff0c;从mysql数据库读到user表的数据&#xff08;用户名和密码&#xff09;&#xff0c;把数据作为回参 用到的库&#xff1a;flask&#xff0c;pymysql 代码&#xff1a; from flask import Flask, jsonify import pymysql# 连接数据…
阅读更多...
python-箭形图案（赛氪OJ）

python-箭形图案（赛氪OJ）

[题目描述] 小理学习了循环&#xff0c;老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“ ∗ ”组成的箭形图案。输入格式&#xff1a; 一行一个整数 n。输出格式&#xff1a; 针对输入的 n &#xff0c;输出用“ ∗ ”组成的箭形。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023