Css/Canvas/SVG/Elementui
Css/Canvas/SVG/Elementui
公孙元二
如果你看到这句话,幸运值+1
展开
-
vue实现按钮权限控制
需求管理端设置页面浏览权限和按钮使用权限,如果用户没有某个按钮的权限,则隐藏该按钮。实现原理主要方式是在el-button按钮上设置标签数值,利用vue的指令功能获取按钮实例对象和按钮上绑定的标签数值,与从接口拿到的按钮权限列表进行匹配,如果匹配成功,证明用户拥有该按钮的使用权限,如果发现没有使用权限,则在指令处理函数中编写代码移除该按钮,界面上就看不到该按钮了。代码src/directive/permission/hasPermi.jsimport store from '@/store'原创 2022-05-15 23:00:00 · 8238 阅读 · 2 评论 -
CSS - 类型、类和ID选择器 - 个人笔记
类型选择器类型选择器也叫元素选择器或标签名选择器,因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中,我们已经用了span、em和strong选择器,<span>、<em>和<strong>元素的所有实例这样就都被样式化了。全局选择器全局选择器,是由一个星号(*)代指的,它选中了文档中的所有内容(或者是父元素中的所有内容,比如,它紧随在其他元素以及邻代运算符之后的时候)。下面的示例中,我们已经用全局选择器,移去了所有元素上的外边距。这就是说,和浏览器以原创 2022-05-15 13:01:09 · 730 阅读 · 0 评论 -
css - 选择器 - 个人笔记
什么是选择器?css选择器是css规则的一部分,它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当被选为应用规则中的CSS属性值的方式。选择器所选择的元素。叫做“选择器对象”。css中,选择器由于CSS选择器规范加以定义,就像是CSS其他部分那样,他们需要浏览器的支持才能工作。你会遇到大多数的选择器规范都是在CSS3中定义的。这是一个成熟的规范,因此大多数浏览器对这些选择器都有良好的支持。选择器列表如果你有多个相同使用相同样式的CSS选择器,那么这些单独的选择器可以混编为选择器列表,这样规则原创 2022-05-15 12:21:24 · 226 阅读 · 0 评论 -
css - 层叠 - 个人学习笔记
理解层叠有三个因素需要考虑,根据重要性排序如下,前面的更重要:1.重要程度2.优先级3.资源顺序1、资源顺序如果给某个页面元素设置多个样式,这些样式如果权重相同,那么写在后面的样式会在元素上生效。2、优先级有些规则写在后面没有生效,写在前面却生效了,这是因为前面的这些规则限定范围更小,浏览器就把它作为浏览器的样式,或者说浏览器认为他们是优先级更高的。例如类选择的权重大于元素选择器,例如在<style></style>里给界面元素先设定.box { color:原创 2022-05-14 22:30:42 · 173 阅读 · 0 评论 -
什么是BFC?如何应用?
定义块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。1.块格式化上下文(block formatting content)2.一块独立渲染区域,内部元素的渲染不会影响边界以外的元素个人理解:在我看来BFC就是用来解决高度塌陷、边框合并、元素覆盖等问题。形成BFC的常见条件(方案):float属性不为noneposition的值不是static或者rel原创 2022-05-04 13:04:00 · 383 阅读 · 0 评论 -
css设置透明的border
.container{ background-color: black; border: 1px solid;/*设置透明边框*/}原创 2022-04-08 10:57:48 · 9512 阅读 · 0 评论 -
chrome浏览器设置font-size为12px以下无效的解决方法
问题描述Chrome浏览器在解析字体大小时,最小字号为12px,小于这个大小的字号都会解析成12px。当你把一行文字设为10px时Chrome浏览器还是会按12px来解析。解决方式解决这个问题的方法是用Chrome的私有属性禁用浏览器文字大小调整的功能。-webkit-text-size-adjust:none;PS: 在新版的chrome中已经禁止了改属性,建议使用CSS3中的方法。比如,设置10px,父元素设置font-size:12px时:transform:scale(0.833);转载 2022-04-06 22:46:06 · 3900 阅读 · 0 评论 -
css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题
overflow:hidden 的主要功能有三个隐藏溢出清除浮动解除坍塌举例理解1.初始html内容:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C转载 2022-04-06 21:56:59 · 9607 阅读 · 0 评论 -
css 单行space-between左右布局,左边元素文字过长显示省略号
效果:代码:<view style="display: flex;justify-content:space-between;"> <text style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"> 编号:{{sysBindCode}} </text> <button @click="changeSysHandle" style="whit原创 2022-04-02 15:45:30 · 874 阅读 · 0 评论 -
vue elementui的el-tag 实现文字超过自动换行
.el-tag{ white-space: normal; height:auto;}原创 2022-03-27 10:44:34 · 5032 阅读 · 0 评论 -
flex 布局 左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧
页面左右布局,左边盒子设置flex:1,左边盒子里的内容是el-table。 右边盒子设定固定宽度,当左边盒子里的el-table每次在页码1和页码2之间切换的时候(我的el-table一共是2页,第二页数据少不会出现垂直滚动条,第一页数据多会出现垂直滚动条),el-table右侧滚动条的出现和消失导致左边el-table的宽度越来越大,所以左边盒子宽度越来越大。导致右边的盒子被推出屏幕右侧边界。原因:如果左边盒子不设置宽度,左边盒子可以被子节点(el-table)无限撑开。解决方案:给左边盒子设置原创 2022-03-21 10:14:35 · 2284 阅读 · 0 评论 -
vue el-table 超过个数禁止勾选
<el-table :data="tableData" :cell-style="tableCellStyle" height="350px" highlight-current-row border v-loading="loading" @select="tableSelectChangeLeft" :row-key="ro...原创 2022-03-18 16:09:36 · 2598 阅读 · 0 评论 -
el-table的type=“selection“多选框居中显示
效果: <div class="center-table"> <el-table :data="tableDataAll" max-height="250" ref="alltable" border :cell-style="tableCellStyle_transfer" @selection-change="handleSelectionChange" @row-click="openDe原创 2022-03-02 22:00:25 · 1301 阅读 · 0 评论 -
vue 管理系统 封装自己的请求接口函数
本文接口遵循restful接口规范。src/api/system/user.jsimport request from '@/utils/request'// 查询export function getUser(query) { return request({ url: '/user/userInfo/list', method: 'get', params: query })}// 查询下拉数据export function getUserDropDow原创 2022-03-01 14:57:02 · 414 阅读 · 0 评论 -
el-table格式化el-table-column内容
对于格式化,有三种方法:template scope、formatter一、template scope + v-if判断<el-table-column prop="sex" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.sex== 0">男</span> <span v-if="scope.row.sex== 1">女原创 2022-03-01 14:40:28 · 1375 阅读 · 0 评论 -
elementui的el-select、el-date-picker的宽度比el-input宽度短
是的,el-select、el-date-picker等的宽度就是比input端,可以设置style,width:100%来解决。<el-date-picker v-model="endTime" type="date" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM-dd"></el-date-picker><el-select style="w原创 2022-02-26 14:46:17 · 7839 阅读 · 2 评论 -
Vue el-date-picker 组件时间格式化方式
<el-date-picker size="small" v-model="editData.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>原创 2022-02-19 20:07:51 · 3873 阅读 · 0 评论 -
vue 封装自定义的表单校验规则 适用于el-form
/src/utils/validate.js// 银行卡号校验export let bankNumberValid = (rule, value, callback) => { if (value) { if (!Number.isInteger(+value)) { callback(new Error('银行卡号必须全为数字')) } else if (value.trim().length < 16 || value.trim().length >原创 2022-02-18 18:55:05 · 814 阅读 · 0 评论 -
CSS 深入理解:overflow: hidden——隐藏溢出、清除浮动、解除坍塌
overflow:hidden 的主要功能有三个:隐藏溢出清除浮动解除坍塌举例理解初始html内容:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co转载 2022-02-17 23:02:05 · 10892 阅读 · 0 评论 -
el-table-column日期时间格式化
方式一:<el-table-column prop="endTime" label="结束时间" width="90" :formatter="formatDate"></el-table-column>methods: { //方法区 formatDate(row, column) { // 获取单元格数据原创 2022-02-11 16:13:45 · 11165 阅读 · 1 评论 -
阻止 el-dropdown、el-switch冒泡事件
需求:通过点击el-table每行的数据,进行勾选。但是不希望点击表格内按钮的时候也触发。因为要阻止这些按钮的冒泡事件。解决方案:加个span标签,然后在标签上使用 @click.stop="" <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"> <template slot-scope="scope">原创 2022-01-12 10:35:14 · 2069 阅读 · 0 评论 -
css 子absolute导致父高度塌陷问题
网上其他方法都是清除浮动的,解决absolute的塌陷问题,发现只有以下这种js有效 <body> <div class="container" id="container"> <div class="box" id="box" ></div> </div> <script> //拿到子元素的高度 var box=d原创 2022-01-11 15:47:58 · 953 阅读 · 0 评论 -
el-dialog内的el-table实现自适应高度
需求:有一个对话框el-dialog,在对话框里放置按钮、表单及el-table,如果把el-table限制了,小屏幕用户使用起来会很难受。我希望高度能随用户屏幕进行调整,大屏幕用户尽量让el-table显示出来(起码显示10条数据),但又不能太大,因为这样用户如果只显示10条数据,高度拉得特别长,el-table空白会特别多。所以需要设置max-height。高度自适应我这里直接使用vh,如有缺点,还请各位看官评论。代码: <el-table ref="tab原创 2022-01-07 15:49:24 · 5031 阅读 · 0 评论 -
CSS 变量回退
这个 CSS 变量回退,说白了,其实就是当 CSS 变量值无效时而使用一个“安全值”来保证某个属性值还是可用的。.message__bubble { max-width: calc(100% - var(--actions-width, 70px));}可能还会去考虑一下浏览器对 var() 的兼容性问题,那么就会再加上一个属性。不过现在的浏览器来看,好像普遍性不存在这个问题。.message__bubble { max-width: 70px; max-width: var(--ac转载 2022-01-07 14:13:16 · 200 阅读 · 0 评论 -
css保持图片原始比例
防止图像被拉伸或压缩这种情况一般是在是图片由用户上传,或者图片未按规定比例使用导致的。处理方式就是直接使用 object-fit 属性:.card__thumb { object-fit: cover;}原创 2022-01-07 13:57:55 · 1367 阅读 · 0 评论 -
ElementUI el-table多选框改为单选框的解决办法/插槽使用radio
需求:表格能够单击数据行进行勾选且是单选的效果。尝试了将type="selection"改成单选效果,但是还要把全选按钮隐藏掉。很麻烦!所以觉得比较好的解决方案是在插槽里使用el-radio代码: <el-dialog title="历史记录查询" :visible.sync="historyDialog" width="800px" append-to-body> <el-button type="primary" plain size="mini" style原创 2022-01-07 10:45:02 · 3449 阅读 · 1 评论 -
vue keep-alive include没有缓存效果
keep-alive中include属性绑定得值 应该是vue页面得name,如下所示<keep-alive :include="[PageOne,PageTwo]"> <router-view :key="key" /></keep-alive>// pageOne页面代码<template> <div> pageOne页面 </div></template><script>expor原创 2022-01-05 21:33:31 · 567 阅读 · 0 评论 -
el-form自定义校验没有效果、提交表单无反应
从以下两个方向解决1.form-item是否添加prop<el-form-item label="客户名称" prop="name"> <el-input v-model="form.name" placeholder="请输入客户名称" /> </el-form-item>2.无值一定要返回callback(),否则便提交不了。 let phoneNumberValid = (rule, value, callback) => {原创 2022-01-05 18:07:55 · 2136 阅读 · 0 评论 -
vue el-form自定义验证validator,以限制数字类型为例
rules: { type: [ { required: true, message: "类型不能为空", trigger: "change" } ], age: [ { required: true, msg: "年龄不能为空", trigger: "blur" , validator:limitNumber} ], count: [ { required...原创 2022-01-05 14:19:01 · 3297 阅读 · 0 评论 -
修改查询栏el-from表单标题字体、输入框(控件)之间的间距
<el-card class="box"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px" class="remove-font-weight"> <el-form-item label="用户名称" prop="userName"> <el-input v...原创 2021-12-30 14:57:53 · 4864 阅读 · 0 评论 -
去除el-row前后的伪元素
.el-row::before,.el-row::after{ content: none; }原创 2021-12-30 14:45:34 · 673 阅读 · 0 评论 -
设置el-from输入框el-input、el-select、日期el-date-editor固定宽度
为了让表单上下对齐,我们需要对控件的宽度进行限制可以在el-form外面包裹一个class="box"的div.box{ .el-input,.el-select,.el-date-editor{ width: 220px; }}原创 2021-12-30 14:30:10 · 1667 阅读 · 0 评论 -
el-table 右侧固定布局fixed=“right“ 错位
解决方案:<style lang="scss" scoped> .table-fixed { /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先,以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !important; //设置高优先,以覆盖内联样式 } }</style>...原创 2021-12-28 17:10:44 · 3695 阅读 · 0 评论 -
CSS中的:nth-of-type(n)和:nth-child(n)
:nth-of-type(n):nth-of-type() CSS 伪类 匹配同类型中的第n个同级兄弟元素。先来看个简单的例子理解一下上面的意思:<style>#wrap p:nth-of-type(3) { background: red;}#wrap p:nth-child(3) { background: yellow;}</style></head><body><div id="wrap"> <转载 2021-12-24 15:49:05 · 1098 阅读 · 0 评论 -
flex:1什么意思
结论flex:1即为flex-grow:1,经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。原理flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。推荐使用此简写属性,而不是单独写这三个属性。flex-grow:定义项目的的放大比例; 默认为0,即 即使存在剩余空间,也不会放大; 所有项目的flex-grow为1:等分剩余空间(自动放大占位); flex-转载 2021-12-24 15:29:39 · 52398 阅读 · 0 评论 -
css html保存空格(空白)及设置文字间隔
在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了。同时内容前后的空格也会被清除<p> hi xiaoming</p>‘hi xiaoming’提示:浏览器的这种机制处理,同样适用于除了普通的空格键,还包括制表符(\t)和换行符(\r和\n),可以通过使用<br>标签显式表示换行。方式一:html空格保留这时候如果希望html中多个连续的空格在网页上能显示,在浏览器中表现出真实的自身空格缩进和换行效果。 我们知道一般有2转载 2021-12-24 15:07:26 · 4518 阅读 · 0 评论 -
css选择器 - 空格,无空格和大于号>的区别 个人笔记
无空格,选择的元素既有.box类,也有.p类<style>.box.p{ font-weight:bold; color:red;}</style><body><div class="box"> <div class="p"> 1 </div> <div class="p2"> 2 <div class="p"> 3 <div class="box .原创 2021-12-22 16:50:17 · 1799 阅读 · 0 评论 -
改变el-table行高
<el-table :row-style="{height:0+'px'}" :cell-style="{padding:0+'px'}" >原创 2021-12-22 15:52:41 · 957 阅读 · 0 评论 -
clientHeight和offsetHeight
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)clientHeight //返回元素的高度(包括元素高度、转载 2021-12-22 13:39:45 · 7041 阅读 · 0 评论 -
动态计算el-table高度
如果你要求页面内容只能在一屏内显示,不想出现页面竖直滚动条,且页面使用el-table,那么就需要el-table动态计算高度 <el-table v-loading="loading" :data="tableData" :height="tableHeight" ref="table" highlight-current-row > <el-table-column ty原创 2021-12-22 09:56:36 · 4031 阅读 · 0 评论