- 博客(54)
- 收藏
- 关注
RSS订阅原创 VUE +ELementUi实现el-table表单的分页效果
1、HTML<template><div class="block page text-center"> <el-pagination background small :hide-on-single-page="true" @current-change="blockCurrentChange" :current-page.sync="blockPage.currentPage"
2022-01-07 15:20:06
379
原创 波浪效果实现
HTML注意：bolang.png这张图片在设计的时候，头尾要能连接起来（就是要对称，效果会比较好）。<!--波浪效果--><div class="waveEffect"> <div class="waveContent"></div> <div class="wavePic"> <div class="waveImg"></div> </div></div>SCSS.wave
2021-12-17 14:30:25
368
原创 vue中实现点击图标复制功能
HTML<template slot-scope="scope"> <div class="tradeId"> <span data-clipboard-action="copy" class="copy" :data-clipboard-text="scope.row.transaction_id" @click="copyId"> <el-tooltip v-show="!tooltipVisible" class="item" effect="d
2021-12-17 14:24:24
947
原创 Vue实现图片左右滚动
npm安装npm install vue-seamless-scroll --saveHTML<div class="index-roll"> <vue-seamless-scroll :data="partnerList" :class-option="optionLeft"> <ul v-bind:style="{ 'width': (partnerList.length * 360) + 'px' }"> <li v-for="(item,
2021-12-17 12:02:54
2398
原创 VUE实现网页中滚动鼠标时导航背景颜色透明度的改变
1、HTML<div id="topNav" :style="topNavBg"> 这里是导航内容</div>2、JSexport default { data () { return { topNavBg: { backgroundColor: '' } } }, mounted () { window.addEventListener('scroll', this.handleScroll) // 监听
2021-11-30 17:33:28
3203
3
原创 Vue中实现设置echart柱状图、折线图、饼图自动滚动
在echart中这段代码下this.charts = echarts.init(document.getElementById(id))添加// 设置柱状图自动移动var currentIndex = -1setInterval(function () { let charts = echarts.init(document.getElementById(id)) var dataLen = data.length // 取消之前高亮的图形 charts.dispatchActi
2021-10-29 15:51:29
849
原创 解决ElementUI中按钮列表中间有下划线的情况
<style> .el-table__fixed-right{ height: 100% !important; }</style>
2021-10-29 15:48:57
917
原创 vue实现幻灯片切换效果
1、html<div class="forestScene"> <div class="forestScenePic"> <div class="activePhoto"> <img :src="indexData.photos[indexData.activePhoto]"> </div> <div class="smallPicture">
2021-10-29 15:47:52
760
原创 vue中拾取经纬度
拾取经纬度<el-col :span="24"> <el-form-item label="经纬度" prop="latitudeAndLongitude"> <el-input v-model="dataForm.latitudeAndLongitude" placeholder="经纬度"> <template slot="append"><a target="_blank" href="http:/
2021-10-29 15:45:48
317
原创 获取当前时间
获取当前时间created () { var aData = new Date(); console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间) this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate(); console.log(this.value)},...
2021-10-29 15:44:35
89
原创 vue实现点击按钮图片左右滚动
1、HTML部分<el-row :gutter="20"> <el-col :xs="24" :sm="24" :md="24"> <div class="jxIndexFrame"> <span class="jxIndexTitle">荣誉资质</span> <div class="certificateModel"> <
2021-10-29 15:41:46
958
原创 Vue实现ueditor编辑器
1、安装npmnpm install --save vue-ueditor-wrap2、HTML部分<el-col :span="24"> <el-form-item label="文章内容" prop="articleContent"> <vue-ueditor-wrap v-model="dataForm.articleContent" :config="myConfig"></vue-ueditor-wrap> &
2021-10-29 15:32:53
307
原创 Vue + pdf在线阅读
1、安装npmnpm install --save vue-pdf2、HTML<div v-if="dataForm.pdfUrl !== '' & dataForm.pdfUrl !== null & dataForm.pdfUrl !== undefined"> <div class="pdf"> <pdf :src="pdfOption.src" :page="pdfOption.currentPage"
2021-10-29 15:30:36
142
转载 vue + element-UI + banner自适应
HTML<el-row> <el-col :xs="24" :sm="24" :md="24"> <div class="block indexBanner" :height="bannerHeight + 'px'"> <el-carousel :height="bannerHeight + 'px'" id="el-carousel"> <el-carousel-item v-
2021-10-26 17:51:34
853
原创 vue.js文字滚动效果
HTML<el-col :span="16"> <div class="companyEntryName"> <div class="notice"> <ul class="marquee_list" :class="{marquee_top:animate}"> <li v-for="(item, index) in enterpriseNameList" :key="
2021-10-26 17:48:02
128
原创 VUE实现平滑滚动到顶部
1 html部分<a href="javascript:void(0)" id="top" @click="backTop" class="toolbar-item toolbar-item-top"></a>2 js部分export default { data () { return { } }, methods: { backTop () { window.scrollTo({ top: 0,
2021-10-26 17:44:53
177
原创 基于bootstrap的图片循环滚动
1、引入放在head之外<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script&g
2021-10-19 18:14:08
1055
原创 CSS通过滤镜让图标变灰
HTML<a href='' class='icon'><img src='01.jpg' /></a>CSS.icon{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray
2021-10-19 18:13:08
381
原创 CSS实现立体字的效果
HTML<div class="text_solid">这里是测试文字</div>CSS.text_solid{ font-size: 32px; text-align: center; font-weight: bold; line-height:100px; text-transform:uppercase; position: relative; background-color: #333; color:#f
2021-10-19 18:11:34
1928
原创 CSS实现文字渐变效果
HTML<div class="text_signature " >这里是测试的文字</div>CSS.text_signature { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5); width: 320px;}
2021-10-19 18:10:07
155
原创 实现宽高等比例自适应
HTML<div class="scale"> <div class="item"> 这里是所有子元素的容器 </div> </div>CSS.scale { width: 100%; padding-bottom: 56.25%; height: 0; position: relative; }.item { position: absolute; width: 100%; h
2021-10-19 18:08:29
102
原创 字母大小写转换
p {text-transform: uppercase} // 将所有字母变成大写字母p {text-transform: lowercase} // 将所有字母变成小写字母p {text-transform: capitalize} // 首字母大写p {font-variant: small-caps} // 将字体变成小型的大写字母...
2021-10-19 18:03:04
110
原创 页面动画出现闪烁问题
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：.cube { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; /* Other transform properties here */
2021-10-19 18:01:38
685
原创 CSS实现文字竖向排列
单列展示时.wrap { width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ }多列展示时.wrap { height: 210px; line-height: 30px; text-align: justify; writi
2021-10-19 17:59:05
1077
原创 CSS实现文本两端对齐
文本两端对齐.wrap { text-align: justify; text-justify: distribute-all-lines; //ie6-8 text-align-last: justify; //一个块或行的最后一行对齐方式 -moz-text-align-last: justify; -webkit-text-align-last: justify;}
2021-10-19 17:53:48
74
原创 css 选取第 n 个标签元素
first-child first-child 表示选择列表中的第一个标签。last-child last-child 表示选择列表中的最后一个标签nth-child(3) 表示选择列表中的第 3 个标签nth-child(2n) 这个表示选择列表中的偶数标签nth-child(2n-1) 这个表示选择列表中的奇数标签nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。nth-
2021-10-17 14:51:44
407
原创 elementUI中表格中出现分割线解决办法
设置全局样式为.el-table__fixed-right{ height: 100% !important;}
2021-10-15 16:47:32
1576
原创 隐藏滚动条仍可以滚动
隐藏滚动条仍可以滚动.demo::-webkit-scrollbar { display: none; /* Chrome Safari */}.demo { scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-x: hidden; overflow-y: auto;}
2021-10-15 16:46:14
165
原创 不固定高宽 div 垂直居中的方法
1、方法一：伪元素和 inline-block / vertical-align（兼容 IE8）.box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; //微调整空格}.box { display: inline-block; vertical-al
2021-10-15 16:45:01
94
原创 css设置内容居中
1. 使用变换（Transform）（1）当元素的宽度和高度未知时；（2）卡片式弹出框中有多个子元素，其中一个焦点元素位于中心center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}2. 使用Flex（1）当有一个或多个元素要居中时；（2）当子元素是动态的并且大小未知时；（3）当有一行项目需要像页脚一样居中时。.parent { display:
2021-10-15 16:43:05
997
原创 滚动条样式设置
1、滚动条样式设置注意：companyCultureData 是包含含有滚动条内容的外部Class/*滚动条设置*/.companyCultureData{ width: 100%; overflow: auto;}.companyCultureData::-webkit-scrollbar { width : 2px; height: 1px;}.companyCultureData::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ bo
2021-10-15 16:38:01
67
原创 CSS设置文字渐变色
从左到右的渐变background-image: linear-gradient(to right, #4b936a, #3bc07a);从上到下的渐变background-image: linear-gradient(#4b936a, #3bc07a);
2021-10-15 16:35:14
187
原创 字体引入和字间距调整
1、字体引入/*字体引入*/@font-face { font-family: 'num'; src: url("../../../../public/num.TTF");}// 使用时.fontFamily { font-family: 'num';}2、字间距调整letter-spacing: 6px;
2021-10-15 16:33:56
251
原创 设置placeholder的颜字体颜色样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder { /* Firefox 18- */ color: red;}
2021-10-15 16:31:50
259
原创 纯css实图片现瀑布流布局
1、HTML部分<body> <h1>纯CSS3实现倾角瀑布流</h1> <div id="waterfall"> <span><img src="./imgs/1.jpg" ></span> <span><img src="./imgs/2.jpg" ></span> <span><img src="./imgs/
2021-10-15 16:29:54
140
原创 用position定位时，使文字自动换行
1、CSSword-break:break-all;2、定义和用法word-break 属性规定自动换行的处理方法。提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。3、语法word-break: normal|break-all|keep-all;值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行keep-all只能在半角空格或连字符处换行...
2021-10-14 18:08:52
618
原创 CSS超出省略
1、单文本查出省略width: 200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本超出省略display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;3、适用范围因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；4、注-webkit-line
2021-10-14 18:06:34
2362
原创 VUE + ElementUI实现下拉多选
1、HTML<el-col :span="24"> <el-form-item label="学院" prop="college"> <el-select v-model="dataForm.collegeList" multiple filterable style="width: 100%;" pl
2021-10-14 18:02:24
342
原创 小程序-navigator-跳转有背景处理方法
开发小程序在使用navigator 标签时，发现点击后背景中有一部分是灰色，设置其属性hover-class=“none”，则不显示背景色，代码如下<navigator url="/pages/teaCulture/teaCultureList/teaCultureList" hover-class="none"> <text>查看更多 ></text></navigator>...
2021-10-12 11:34:16
404
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人