![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
样式
刚刚好ā
当地小名气的程序猿 多小呢只有我自己知道~
展开
-
Vue3 头像是圆形,hover上去时头像出现黑色半透明样式,且中间显示修改两字的实现
Vue3 头像是圆形,hover上去时头像出现黑色半透明样式,且中间显示修改两字的实现原创 2024-06-20 18:00:45 · 196 阅读 · 0 评论 -
vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐
利用mouseover和mouseout并结合css样式用vue3实现div盒子的内容hover上去时样式改变及部分元素的显隐原创 2024-06-18 17:08:14 · 238 阅读 · 0 评论 -
使用el-pagination出现样式超出时加上这个属性就能轻松解决
使用el-pagination出现样式超出时的问题解决原创 2024-06-13 11:47:42 · 143 阅读 · 0 评论 -
标准文档流、脱离文档流及脱离文档流的3种方式
1、如果元素不再满足浏览器的默认布局排版,也就是说将元素从默认的布局排版中拿走,此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流,此时就是脱离文档流了。2、元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。3、脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。既要实现既要并排,又要设置宽高,此刻就要脱离标准流。转载 2022-09-07 16:37:22 · 4451 阅读 · 1 评论 -
CSS中的BFC详解:定义、触发方式及应用场景
BFC就是一个css的一个布局概念,是一个独立的区域,是一个环境。Block Formatting Context:块级格式化上下文。W3C的官方解释:它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用,当涉及到布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。BFC的目的:形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。转载 2022-09-07 16:12:59 · 293 阅读 · 0 评论 -
el-table中加入el-input框和el-input-number框,实现el-table的可编辑功能
在需要加入el-input和el-input-number的列使用template即可。原创 2022-07-29 16:58:30 · 3599 阅读 · 3 评论 -
element+vue 消息提示设置为不重复出现的方法(局部即单个页面实现)
现在需设置element中Message消息提示不重复出现,即对现在点击时是否出现message进行判断,若存在则不重复出现,否则出现消息提示。代码解释对目前的el-message是否出现进行判断若没出现进行消息提示,若出现则关闭消息提示。...原创 2022-07-29 15:39:39 · 827 阅读 · 0 评论 -
vue中使用el-table设置排名前三用金银铜的图标展示,其余排名正常展示
实现效果:实现方式:<el-table :data="tableData" :header-cell-style="{ color: 'rgba(255,255,255,1)', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" > <el-table-column label="排名" type="index" width="57px">原创 2022-05-26 10:22:29 · 4812 阅读 · 4 评论 -
利用for循环和flex布局同时做多个样式大致相同内容不同的div盒子,:style=“`background: url(${item.img})`“添加盒子的不同背景图片
实现目标:采用for循环取数组中的数据,结合flex布局生成多个盒子,减少代码冗余。实现效果:实现方法:1.template中:这里涉及到图片的添加,直接采用img标签,以及背景图片的添加,是采用:style="`background: url(${item.img})`"的形式。<div class="box"> <div class="box-content" v-for="(item, index) in statistic" :key="index" :原创 2022-05-11 14:06:41 · 737 阅读 · 0 评论 -
vue点击按钮出现盒子再次点击关闭盒子,以及两次点击提示不同信息的方法
实现效果:点击按钮出现盒子提示‘盒子出现’,再次点击盒子消失提示‘盒子消失’。按钮的样式:<el-button type="text" @click="btnShow">点击这个按钮</el-button> <div v-show="open">这是盒子内容</div>data中的默认值:open:false点击方法:btnShow() { this.open = !this.open },这样就实现了点击按钮展原创 2022-03-31 06:15:00 · 1824 阅读 · 0 评论 -
el-tree通过接口获取数据,并给所有叶子节点添加icon图标
实现目标:与后端对接接口,后端对返回的el-tree数据的叶子节点进行了标识,即leaf为true时代表为叶子结点,leaf为false时为非叶子节点。现要实现将所有的叶子节点前加icon图标。实现效果:实现方法:vue文件中: <el-tree :data="dataTree" node-key="id" default-expand-all > <span slot-scope="{ node, data }"> <原创 2022-03-30 11:22:25 · 1951 阅读 · 1 评论 -
el-tree只有叶子节点才显示勾选框vue-element
实现效果:template中:引用element的el-tree,其中show-checkbox为显示勾选框,选择true,默认所有节点均有勾选框。<el-tree class="tree" :check-strictly="true" :data="datatree" :render-content="eventRender" :show-checkbox="true" /.原创 2022-03-18 17:33:37 · 3496 阅读 · 0 评论 -
div或button添加鼠标悬浮提示信息的多种方法小结vue
1.利用elementUI组件里的Tooltip 文字提示实现原始页面:实现效果:当鼠标悬浮在上左按钮时,出现提示信息实现代码:<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button></el-tooltip>参数说明:参数 说明 类原创 2022-03-18 17:19:55 · 27836 阅读 · 2 评论 -
前端引入icon的方法(iconfont,fontawesome)
前端项目中,经常需要从外引入一些icon图标到项目中,我经常使用的两个icon库就是Iconfont阿里巴巴矢量库,以及font-Awsome。接下来我稍微讲一下这两种的使用方法。Iconfont阿里巴巴矢量库font-Awsome Icon库Iconfont阿里巴巴矢量库的使用使用步骤:1 进入网站之后,搜索想要的icon图标2 选择所需要的所有icon添加入库,可以点击上方的库存,将所有icon添加到某个项目3 在我的项目中,选择刚刚添加的项目,然后点击fontClass...转载 2022-03-03 09:36:09 · 4192 阅读 · 1 评论 -
利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容。实现效果:1、点击左右箭头可切换图片。 2、点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果。如点击”帅气偶像“图片,”帅气偶像“图片出现边框和蓝字效果,其余图片均不出现此效果。 3.改变了swiper原有的箭头样式,以及在单纯的轮播图中加入了文字,同时设置了各图片间距及大小等。实现方法:template中:...原创 2021-11-19 18:00:00 · 1574 阅读 · 0 评论 -
利用swiper在vue中进行简单轮播图的实现
目标:利用swiper在VUE中进行简单轮播图的设计。实现效果:点击左右箭头可进行图片的切换实现方法:<template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item, index) of imgList" :key="index"><img :src.原创 2021-11-18 17:30:00 · 769 阅读 · 0 评论 -
利用click事件和v-show实现点击切换
目标:利用click点击事件和v-show实现点击图片和文字的切换。初始:实现的效果:点击最右侧出现如下展示效果,再次点击恢复上图效果实现方法:template中:<div class="resultType "> <span class="resultTypeTitle">我的偶像</span> <span class="paintWo..原创 2021-11-17 18:25:03 · 1827 阅读 · 0 评论 -
点击按钮选择(单选)变换展示效果
实现效果:效果说明:点击路线最短,出现上图效果;点击资源最少时,资源最少出现蓝框蓝线的展示效果,同时路线最短恢复原始效果(同时间最快的展示效果);即三个框框只能选择一个,被选择的那个出现展示效果,没被选择的不出现。template中:<div class="choose"> <div v-for="(item, index) in chooseData" :key="index" :.原创 2021-11-16 15:53:04 · 833 阅读 · 0 评论 -
点击按钮实现文字内容转换
效果图:点击W显示经度(西经),点击E显示经度(东经),点击S显示纬度(南纬),点击N显示纬度(北纬)。同时“该坐标为:”中的西经、东经、南纬和北纬也会随之切换。在输入框中输入对应的经度和纬度值,下方的“该坐标为:”中的数值也会随之更新。将鼠标放在W\E\S\N相应的按钮上,会出现不同的提示框。实现方法:template中:<div class="dialogLongitude"> <span class="dialogLongitu..原创 2021-11-05 17:25:12 · 1408 阅读 · 0 评论 -
弹窗样式修改,轻松实现弹窗功能
在vue页面中添加弹窗,并自设置弹窗相关样式,不使用element UI 也能轻松实现弹框。步骤如下:1.点击“新增成员”按钮出现弹窗: <el-container> <el-button type="text" @click="addMember = true">新增成员</el-button> <el-dialog :visible.sync="addM原创 2021-10-27 14:22:05 · 2336 阅读 · 0 评论 -
el-input输入框上方出现提示信息利用mouseover和mouseleave
实现效果:当鼠标悬浮在输入框时显示上方的提示信息,当鼠标离开输入框时,提示信息消失。实现方法:v-if控制提示信息的显隐,当noeIndex=index时显示。mouseover:鼠标悬浮;mouseleave:鼠标离开。<div class="item-msg" v-if="nowIndex == index">{{ item.msg }}</div> <el-input v-if="item.type == 'input'" v-原创 2022-02-25 17:46:18 · 5730 阅读 · 0 评论