当前位置: 首页 > news >正文

《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线

前言

使用 el-divider 背景为白色是没问题的。

在这里插入图片描述
但当背景换成其它颜色,问题就出现了!!

在这里插入图片描述
仔细看原来是两层,默认背景色是白色


想着把背景色改为透明应该能用,结果发现背面是一条实线,难怪要用白色遮挡…不符合我的需求…

在这里插入图片描述

实战

那就仿一个吧( Vue 组件)~ 。先看效果,上为 el-divider 组件,下为自定义组件。当背景为白色时差异不大(字体和线条颜色可自定义的):。
换成其它背景色就很明显:
在这里插入图片描述
以下是全部代码

<template><div class="my-divider" ><div class="line" :style="{width: leftWidth}" ></div><span class="label">{{label}}</span><div class="line" :style="{width: rightWidth}"></div></div>
</template><script>
export default {name: 'MyDivider',props: {// 文字label: {type: String,default: ''},// 文字位置,左 left,右 right,中 centercontentPosition: {type: String,default: 'center'},},watch: {contentPosition() {this.setLineWidth();}},data() {return {leftWidth: '50%',rightWidth: '50%',}},methods: {setLineWidth() {let p = this.contentPosition;switch (p) {case 'center': {this.leftWidth = '50%';this.rightWidth = '50%';break;}case 'left': {this.leftWidth = '10%';this.rightWidth = '90%';break;}case 'right': {this.leftWidth = '90%';this.rightWidth = '10%';break;}                }}},mounted() {this.setLineWidth();}
}
</script><style lang="stylus" scoped>
.my-divider {position: relative;width: 100%;display: flex;flex-direction: row;align-items:center;margin: 15px 0;color: #000;.line {background: #000;height: 1px;}.label {width auto;padding: 0 12px;text-align: center;transform: translateY(-1px);white-space: nowrap;// 不换行(单行)}
}
</style>

属性

参数说明类型必选默认值
label文字string
content-position文字位置,左 left,右 right,中 centerstringcenter

使用

<my-divider label="少年包青天" />
<my-divider label="少年包青天" content-position="left" />
<my-divider label="少年包青天" content-position="right" />

相关文章:

《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线

前言 使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色&#xff0c;问题就出现了&#xff01;&#xff01; 仔细看原来是两层&#xff0c;默认背景色是白色。 想着把背景色改为透明应该能用&#xff0c;结果发现背面是一条实线&#xff0c;难怪要用白色遮挡…不符…...

【第十二课】KMP算法(acwing-831 / c++代码 / 思路 / 视频+博客讲解推荐)

目录 暴力做法 代码如下 KMP算法 不同的next求法-----视频讲解/博客推荐 视频推荐 博客推荐 课本上的方法- prefix的方法- 求next数组思路---next数组存放前缀表的方式 s和p匹配思路 代码如下 暴力做法 遍历s主串中每一个元素&#xff0c;如果该元素等于模板串p中…...

JSON 简介

JSON是什么&#xff1f;(了解) JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;常用于Web应用程序之间的数据传输。 JSON格式是一种文本格式&#xff0c;用于描述数据的结构和内容。它由两种基本元素组成&#xff1a;键值对和…...

Impala4.x源码阅读笔记(三)——Impala如何管理Iceberg表元数据

前言 本文为笔者个人阅读Apache Impala源码时的笔记&#xff0c;仅代表我个人对代码的理解&#xff0c;个人水平有限&#xff0c;文章可能存在理解错误、遗漏或者过时之处。如果有任何错误或者有更好的见解&#xff0c;欢迎指正。 上一篇文章Impala4.x源码阅读笔记&#xff0…...

Ubuntu2204配置samba

0.前情说明 samba服务器主要是用来局域网共享文件的&#xff0c;如果想公网共享可能行不通&#xff0c;我已经踩坑一天了 所以说如果你想满足公网samba共享你就可以不要看下去了 1.参考连接 Ubuntu 安装 Samba 服务器_ubuntu安装samba服务器-CSDN博客 2.安装samba服务 sud…...

AVL树(超详解)

文章目录 前言AVL树的概念AVL树的实现定义AVL树insert 单旋左单旋右单旋左单旋代码右单旋代码 双旋左右双旋右左双旋 测试AVL树的性能 前言 AVL树是怎么来的呢&#xff1f; 我们知道搜索二叉树会存在退化问题&#xff0c;退化以后就变成单支或者接近单支。 它的效率就变成O(N)…...

禁止浏览器记住密码和自动填充 element-ui+vue

vue 根据element-ui 自定义密码输入框&#xff0c;防止浏览器 记住密码和自动填充 <template><divclass"el-password el-input":class"[size ? el-input-- size : , { is-disabled: disabled }]"><inputclass"el-input__inner"…...

K8s实战-init容器

概念&#xff1a; 初始化容器的概念 比如一个容器A依赖其他容器&#xff0c;可以为A设置多个 依赖容易A1&#xff0c;A2&#xff0c;A3 A1,A2,A3要按照顺序启动&#xff0c;A1没有启动启动起来的 话&#xff0c;A2,A3是不会启动的&#xff0c;直到所有的静态容器全 部启动完毕…...

Vue3.2 自定义指令详解与实战

一、介绍 在Vue3中&#xff0c;自定义指令为开发者提供了一种灵活的方式来扩展Vue的HTML模板语法&#xff0c;使其能够执行特定的DOM操作或组件逻辑。不同于Vue2.x中的全局和局部指令注册方式&#xff0c;Vue3引入了Composition API&#xff0c;这使得自定义指令的编写和使用更…...

XV-3510CB振动陀螺仪传感器

XV-3510CB传感器是一款振动陀螺仪传感器&#xff0c;具有卓越的稳定性和可靠性&#xff0c;超小的封装尺寸SMD53.21.3mm&#xff0c;密封提供了良好的可持续环保能力&#xff0c;采用振动晶体&#xff0c;该传感器具有稳定的性能和超长的寿命。振动晶体的振动能够提供更为精确的…...

设计模式Java向

设计原则&#xff1a; 开闭原则&#xff1a; 用例对象和提供抽象功能进行分割&#xff0c;用例不变&#xff0c;抽象功能被实现&#xff0c;用于不断的扩展&#xff0c;于是源代码不需要进行修改&#xff0c;只在原有基础上进行抽象功能的实现从而进行代码扩展。不变源于代码…...

图片素材管理软件Eagle for mac提高素材整理维度

Eagle for mac是一款图片素材管理软件&#xff0c;支持藏网页图片&#xff0c;网页截屏&#xff0c;屏幕截图和标注&#xff0c;自动标签和筛选等功能&#xff0c;让你设计师方便存储需要的素材和查找&#xff0c;提供工作效率。 Eagle mac软件介绍 Eagle mac帮助你成为更好、…...

Transformer各模块结构详解(附图)

前言&#xff1a;基于TRANSFORMER的结构在视觉领域是承上启下的作用。刚接触会比较难&#xff0c;上的话需要对RNN&#xff0c;LSTM&#xff0c;ATTENTION先有初步的了解。下的话需要学习VIT&#xff0c;GPT&#xff0c;DETR等结构先了解TRANSFORMER都是必要的。 参考&#xff…...

Python遥感影像深度学习指南(2)-在 PyTorch 中创建自定义数据集和加载器

在上一篇 文章中,我们Fast.ai 在卫星图像中检测云轮廓,检测物体轮廓被称为语义分割。虽然我们用几行代码就能达到 96% 的准确率,但该模型无法考虑数据集中提供的所有输入通道(红、绿、蓝和近红外)。问题在于,深度学习框架(如 Keras、Fast.ai 甚至 PyTorch)中的大多数语…...

韩版传奇 2 源码分析与 Unity 重制(三)客户端渲染管线

专题介绍 该专题将会分析 LOMCN 基于韩版传奇 2,使用 .NET 重写的传奇源码(服务端 + 客户端),分析数据交互、状态管理和客户端渲染等技术,此外笔者还会分享将客户端部分移植到 Unity 和服务端用现代编程语言重写的全过程。 概览 在这一篇文章中,我们将开始分析传奇客户…...

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第三节 栈与堆,值类型与引用类型

深入浅出图解C#堆与栈 C# Heaping VS Stacking 第三节 栈与堆&#xff0c;值类型与引用类型 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节 栈基本工…...

分享好用的chatgpt

1.在vscode中&#xff0c;点击这个&#xff1a; 2.搜索&#xff1a;ChatGPT - 中文版&#xff0c;个人觉得这个更好用&#xff1a; 3.下载完成之后&#xff0c;左侧会多出来这个&#xff1a; 点击这个图标就能进入chatgpt界面了 4.如果想使用tizi访问国外的chatgpt&#xf…...

【小白专用】C# 压缩文件 ICSharpCode.SharpZipLib.dll效果:

插件描述&#xff1a; ICSharpCode.SharpZipLib.dll 是一个完全由c#编写的Zip, GZip、Tar 、 BZip2 类库,可以方便地支持这几种格式的压缩解压缩, SharpZipLib 的许可是经过修改的GPL&#xff0c;底线是允许用在不开源商业软件中&#xff0c;意思就是免费使用。具体可访问ICSha…...

Protobuf 编码规则及c++使用详解

Protobuf 编码规则及c使用详解 Protobuf 介绍 Protocol Buffers (a.k.a., protobuf) are Google’s language-neutral, platform-neutral, extensible mechanism for serializing structured data Protocol Buffers&#xff08;简称为protobuf&#xff09;是谷歌的语言无关、…...

Kafka优异的性能是如何实现的?

Apache Kafka是一个分布式流处理平台&#xff0c;设计用来处理高吞吐量的数据。它被广泛用于构建实时数据管道和流式应用程序。Kafka之所以能够提供优秀的性能和高吞吐量&#xff0c;主要得益于以下几个方面的设计和实现&#xff1a; 1. 分布式系统设计 Kafka是一个分布式系统…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...