在vue页面中使用伪元素进行 气泡框创建|选中效果自定义|滚动条自定义
2024-05-30 23:18:42
在vue页面中使用伪元素进行 气泡框|单选框自定义|滚动条自定义
1. 基于vue，使用到的图标是element plus
2. vue单页面代码
<template><h1>{{ msg }}</h1><div className="error-message"><el-icon :size="20" :color="'blue'"><edit /></el-icon>系统异常，请稍后再试</div><!-- 气泡框 --><div className="container"><div className="box top-arrow">Top </div><div className="box right-arrow">Right</div><div className="box bottom-arrow">Bottom</div><div className="box left-arrow">Left</div></div><!-- 单选框自定义 --><div className="container"><div><input type="checkbox" id="backend" /><label htmlFor="backend">后端开发</label></div><div><input type="checkbox" id="backend" /><label htmlFor="backend">后端开发</label></div><div><input type="checkbox" id="frontend" /><label htmlFor="checkbox">前端开发</label></div><div><input type="checkbox" id="frontend" /><label htmlFor="checkbox">前端开发</label></div></div><!-- 浏览器中自定义滚动条 --><div class="container2"><div class="rect"><div class="box"></div></div><div class="rect2"><div class="box"></div></div></div></template><script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons'defineProps({msg: String
})const count = ref(0)
</script><style scoped lang="scss">
.error-message {position: relative;color: #666666;padding: 12px 30px;background-color: #FFECE4;border-radius: 5px;
}.error-message::before {content: '::before伪元素';
}.container {display: grid;grid-template-columns: 200px 200px;grid-template-rows: 200px 200px;.box {width: 150px;height: 100px;background-color: red;color: white;position: relative;border-radius: 20px;display: flex;justify-content: center;align-items: center;font-size: 16px;}.box::after {content: '';width: 0;height: 0;position: absolute;}.box.bottom-arrow::after {border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 12px solid red;left: 22px;top: -10px;}.box.right-arrow::after {border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 12px solid red;top: 22px;left: -10px;}.box.left-arrow::after {border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 12px solid red;top: 22px;right: -10px;}.box.top-arrow::after {border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 12px solid red;left: 22px;bottom: -10px;}
}// 自定义复选框样式
input[type="checkbox"] {margin: 0;
}#frontend {opacity: 0;
}#frontend+label {margin-left: -12px;pointer-events: none;
}#frontend+label::before {content: '\a0';display: inline-block;vertical-align: 0.1em;width: 0.8em;height: 0.8em;border-radius: 0.2em;background-color: silver;text-indent: 0.15em;line-height: 0.65;cursor: pointer;
}#frontend:checked+label::before {content: '\2713';background-color: yellowgreen;
}.container2 {display: flex;justify-content: space-around;.rect,.rect2 {width: 200px;height: 200px;overflow: scroll;border: 1px solid gainsboro;}.rect2::-webkit-scrollbar {width: 10px;height: 0;background-color: transparent;}.rect2::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.08);border-left: 4px solid transparent;background-clip: padding-box;}.rect2::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, 0.08);border: 0;}.box {width: 100px;height: 300px;background-color: aliceblue;}}
</style>2023.04.26更新一个新的气泡框添加创建方式
child3是所在框的class名.child3::before {position: absolute;content: '';width: 0;height: 0;border: 10px solid;border-color: rgba(20, 102, 166, 0.85) transparent transparent transparent;//transparent放在不同位置改变箭头方向left:88px;top: 51px;}
在vue页面中使用伪元素进行 气泡框创建|选中效果自定义|滚动条自定义相关推荐
- 在vue页面利用css伪元素：：after画样式
上面是UI给的原型图,其实做的是一个vue的嵌套表格上下级的关系,大家都看过element里面的树形组件,就是拿那个实现的,改的样式. 刚开始画出来是这样的,那个线突出去了,原型上是不突出的,最后研究 ...
- VUE项目中 获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 表格生成后第一列是复选框,效果: 表格是直接循环展示的后台返回数据,代码写法: 2. 得复选框 ...
- css中的伪元素、基线对齐、盒子模型
目录 一.伪元素 二.基线对齐 三.盒子模型 1.外边距margin 2.边框(border) 一.伪元素 说明:伪类元素使用两个冒号(::)而不是一个冒号,目的是为区分伪类和伪元素,大多数浏览器都支 ...
- Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
- JavaScript如何查找和访问HTML页面中的HTML元素
JavaScript如何查找和访问HTML页面中的HTML元素 HTML语言中,全部是由标签(标记.tag)组成的.在浏览器内部解析HTML标记时,会转换为成具有特定结构的HTML文档对象模型,这个对 ...
- 如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
- CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
- 输入框校验-vue页面中校验
输入框校验-vue页面中校验 输入框中只能输入汉字和字母(特殊字符和数字都要禁用) 输入框中禁止输入数字 输入框中只能输入汉字和字母和数字 只能输入数字.只能输入字母. 只能输入数字字母下划线.只能输 ...
- css中的伪元素的使用
CSS伪元素::after用来创建一个伪元素,作为已选中元素的最后一个子元素.通常会配合content属性来为该元素添加装饰内容.这个虚拟元素默认是行内元素. ::after表示法是在CSS 3中引入 ...
最新文章
- 架构设计：生产者/消费者模式 第6页：环形缓冲区的实现
- CentOS学习日记：PostgreSQL篇
- Asp.Net Core 轻松学-多线程之Task快速上手
- ArcGIS for Android 中MapView截图实现方法
- ⑧javaWeb之在例子中学习（过滤器Filter）
- Reinforcement Learning
- 开发工具：IDEA EasyCode插件用法(很实用)
- 【今日CV 视觉论文速览】16 Nov 2018
- AI小白必读：深度学习、迁移学习、强化学习别再傻傻分不清
- java loadclass_【java 类加载的深入研究1】loadClass()的研究
- 云服务器ecs_阿里云ECS云服务器抢占式实例计费模式优缺点
- 想搞一套AI问答游戏系统？简单，Google又开源了
- 触发器及其应用实验报告总结_555时基电路及其应用
- 【2】Keras之激活函数
- 管理新语：搞绩效考评需谨慎，切勿随意
- 游戏关卡设计理论普及
- Python沪深300成分股价值分析
- Mysql - 开发技巧(二)
- mc服务器文件夹改皮肤,我的世界皮肤放在哪个文件夹位置及更换方法解析
- shell习题第15题：看数字找规律