- 博客(44)
- 收藏
- 关注
RSS订阅原创 VUE实现某区域中拖拽效果
参考链接：https://haofly.net/vue-dragscroll/main.jsVue.directive('dragscroll', function (el) { el.onmousedown = function (ev) { const disX = ev.clientX const disY = ev.clientY const originalScrollLeft = el.scrollLeft const originalScr
2021-08-04 16:08:29
995
原创 css 给不规则图片设置阴影（发光效果）
问题：想实现给不规则图片设置阴影，使其看起来像发光的效果，box-shadow的确可以加阴影，但是只适合div及一些规则的图片，如图：解决方案：css有一个filter函数，它是给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。除了"inset"关键字是不允许的。该函数与已有的box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：注意：Internet .
2021-03-25 15:51:41
4173
原创 element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块 解决方案
前言想要表格的高度自适应屏幕，保证table能一屏内展示完。elementUI的版本："element-ui": "^2.14.1",关键代码： <div style="height: 80vh;"> <el-table style="width: 100%;background: transparent;overflow:auto;" v-loading="table.loadi...
2021-03-23 16:42:39
5987
2
原创 echart5中 画世界地图报错‘../node_modules/echarts/map/js/world.js‘
echart5移除了内置的 geoJSON（原先在echarts/map文件夹下）。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。在旧版本（echart5以下）中我们要画世界地图得引入：import '../node_modules/echarts/map/js/world.js'我是找到旧版依赖中的world.js文件，放到自己建的plugins文件夹..
2021-03-12 16:06:44
4498
4
转载 重磅！超详细的 JS 数组方法整理出来了
https://juejin.cn/post/6907109642917117965数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。一、创建数组1.使用数组字面量表示法vararr4=[];//创建一个空数组vararr5=[20];//创建一个包含1项数据为20的数组vararr6=["lily","lucy","Tom"];//创建一个包含3...
2021-01-07 17:55:33
136
转载 echarts立体柱状图
效果图：安装echartsnpm install echarts --savemain.jsimport Vue from 'vue'import App from './App'import echarts from 'echarts'Vue.prototype.$echarts = echartsVue.use(Element)Vue.config.productionTip = falsenew Vue({ el: '#app', comp..
2020-12-10 10:53:23
3038
原创 echarts 图例不选中
官网地址：https://echarts.apache.org/zh/option.html#legend.selectedecharts图表的图例是默认显示且选中的，但有时候我们需求是不选中，关键代码如下： legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], selected: { '邮件营销': false, '联盟广告': false
2020-12-09 14:08:27
1996
6
原创 纯css改变文本内容及样式
效果图：<div class="a"></div><style> .a{ position: fixed; left: -30px; bottom: 100px; color: red; padding: 15px; width: 30px; height: 30px; background: lightpink; text-align: center; border-radius: 50%; dis.
2020-11-25 14:36:00
5228
转载 使用echarts时，鼠标首次移入屏幕会闪动，屏幕会出现滚动条
原因：在echarts图表中出现tooltip时，画布的父标签（即：echarts.init()的标签）的有时宽高都会发生变化，导致相对布局的div可能大小发生变化（画布大小却不变），导致页面闪动。解决方法 1：在该画布的父标签（即：echarts.init()的标签）外层套一个div，设置overflow:hidden；然后，设置tooltip的confine：true;(设置tooltip不超出图表)。解决方法2：tooltip: { tran...
2020-11-12 15:28:10
2149
1
转载 Element resetFields()重置表单不生效的问题
问题重现因 “添加” 和 “编辑” 字段是一样的，所以我把它们放在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了。重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增框会填充第一次打开的编辑框内容先打开编辑框再打开新增框新增编辑框也被填充了数据form的@closed 方法调用了resetFields，但没有生效resetForm() { this.$refs['form'].resetFields();},2.rese...
2020-09-15 09:32:32
528
转载 vue在IE下报 webpack `Invalid Host/Origin header` 的问题
本次产生原因：IE某些版本不支持axios //为解决IE 不支持axios import Promise from 'es6-promise'; Promise.polyfill();引入es6-promise后，IE就出现如下错误：原因：应该是webpack出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。解决：在webpack.dev.config.js中...
2020-09-09 16:10:57
293
原创 纯css文字渐变动画效果
<div class="music-title"> 时间都去哪儿了</div><style scoped> .music-title{ font-size: 40px; color: #de6f64; background-image: -webkit-linear-gradient(left, #ffdcb4, #b96972 25%, #e88a57.
2020-09-08 10:07:29
1015
1
原创 element-ui 自定义$confirm、$notify 内容
如有需要在confirm、notify循环添加数据 // 把写的提示信心需要换行的内容写在数组里 confirmText const confirmText = [ '1、回到首页后，实验流程数据将会清空。', '2、实验左下角提示按钮中包含实验介绍内容和实验操作引导视频。'] const newDatas = [] const h = this.$createElement for (const i in confirmText) { .
2020-08-25 17:59:26
2583
转载 vue 开发小技巧
优雅更新props更新prop在业务中是很常见的需求，但在子组件中不允许直接修改prop，因为这种做法不符合单向数据流的原则，在开发模式下还会报出警告。因此大多数人会通过$emit触发自定义事件，在父组件中接收该事件的传值来更新prop。child.vue:exportdefalut{props:{title:String},methods:{changeTitle(){thi...
2020-08-10 10:47:36
238
原创 echarts多对多关系图
let dataInfo = [{ name: "蔚来汽车", category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4 symbolSize: 50, draggable: true, fixed: true, value: [0, 150]}, { name: "威马汽车", category: 0, symbolSize: 80, draggable: true, fixed: ...
2020-07-29 10:28:25
2052
转载 jquery上传图片获取图片原始尺寸
<html><head><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body><input type="file" id="fileUpload" /><input id="upload" type="button" value="Upload" /><scrip.
2020-06-30 14:34:02
406
原创 vue项目中生成特定形状的词云图——js2wordcloud
下载依赖：npm install js2wordcloudhtml代码<div class="word-cloud-chart"> <div id="chart2" class="word-cloud-bg" > </div></div>css样式.word-cloud-bg{ width: 600px; height: 500px; background: url('../../assets/view.
2020-06-10 16:35:45
2789
6
原创 深拷贝和浅拷贝的区别及实现
前言js分两大数据类型： 基本数据类型：Number，String，Boolean，Undefined，Null。（栈内存） 引用数据类型：Date，Function，RegExp等（堆内存）注意：闭包中的变量并不保存在栈内存中，而是保存在堆内存中。因为如果闭包中的变量保存在了栈内存中，随着外层中的函数从调用栈中销毁，变量肯定也会被销毁，但是如果保存在了堆内存中...
2020-04-29 10:04:20
286
转载 JavaScript中undefined和xxx is not defined区别
undefined是javascript的一种基本数据类型，变量未赋值或者函数没有返回值时返回undefined。var temp;temp2 = 123;alert(temp2);temp3 = temp4+1;alert(temp3);在上面的代码中，第一个alert可以正常弹窗为123；但是第二个alert是不会执行的，因为使用了没有定义的temp4来运算，这是不允许的。...
2020-04-29 10:00:11
592
原创 antd vue table跨行合并单元格，并且自定义内容
ant-design-vue版本：~1.3.8需求：表格实现跨行合并，并且在合并完的单元格中显示图片效果图：源码：export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/...
2019-12-16 16:03:29
3953
1
原创 element-ui 日历组件calendar 自定义使用
官方文档：https://element.eleme.cn/#/zh-CN/component/calendar官方文档描述过的我就不赘述了，最近做的项目有一个日历展示的功能，在此做一个记录。element-ui版本：^2.12.0效果图：关键代码如下：<el-calendar v-model="value" id="calendar"> ...
2019-10-24 15:34:06
44923
22
原创 element-ui框架table表格的列筛选 获取值传给后端
由于数据需要根据列筛选选中的值做特殊的处理，所以我要把选中值传到后端。代码：<el-table :data="tableData" style="width: 100%" @filter-change="handleFilterChange"> <el-table-column prop="tag" label="标...
2019-10-21 11:33:24
3539
原创 element-UI表格多选，翻页记住之前的选项以及弹窗回显默认选中
最近有个需求，element-ui表格多选，翻页的时候选中的选项不会被清空。我用的element-ui版本是：2.8.2下面是关键代码，模拟数据和分页根据自己需求加<el-table :data="productList" ref="multipleTable" :row-key="getRowKeys" @selection-change=...
2019-10-17 11:18:22
3888
3
原创 element-ui + vue 批量上传文件，接口请求一次
使用element-ui的上传组件时，你使用的是自动上传（即选择完文件就立马上传），即使你设置了属性 :multiple=true,但是请求接口的时候还是分开请求的，你选了几个文件就请求几次，那我们要如何请求一次，把文件和自己所需要的参数拼接好传给后台呢？这需要把自动上传改为手动上传。主要有两个步骤，首先是选取文件，第二部是点击上传（这一步做参数拼接）。上代码：html部分<...
2019-10-09 16:48:01
5729
13
原创 js向对象中写入值
let fund_label = [{label:['红色','绿色','蓝色'], label_type: '1'}, {label:['正方形','长方形'], label_type: '4'}, {label:['大'], label_type: '6'}]let arr = {}for (let i = 0; i...
2019-09-27 16:13:46
2169
原创 css 替换标签文本内容
有些UI组件内容不好自定义的，我们可以操作dom节点替换内容，例如：$('#content').html('替换内容')我们也可以用css替换，如下：<div id='content'> <span>今天</span></div><style> #content span{ displ...
2019-09-25 11:42:51
10783
1
原创 vue-ant-design 刷新页面，根据当前路由选中相应菜单
1.设置默认选中的key值:defaultSelectedKeys为$route.path2.将每个菜单的key值和路由的path一样的<div id="components"> <a-layout> <a-layout-header style="background: #fff;height: 50px;padding: 0px 20...
2019-09-24 20:06:16
7195
原创 vue 父子组件传参数
有时候你一个功能模块要在多个地方使用到，这样，我们可以把这个功能模块封装成一个组件，这样有时候就避免不了要父子传参。在Vue中，父组件通过prop给子组件下发数据（向下传递），子组件通过事件给父组件发送信息（向上传递）。如图：父组件：parent.vue<!-- 父组件 --><template> <div> &...
2019-09-05 14:56:27
173
原创 js从数组中的对象取出特定字段并生成新的数组
let arr = [ { 'id': '1', 'name': '小红', }, { 'id': '2', 'name: '小白', }, { 'id': '3', 'name': '小黄', }];// 使用map()生成数组let new_arr = arr.map(obj => {return obj.n...
2019-09-04 19:00:29
33557
2
原创 vue ant-design 加面包屑
注意事项： 1、路由层级要清楚 2、每个路由要有title路由配置文件：{ path: '/', component: RouteView, meta: { title: '首页', keepAlive: true, icon: 'search' }, children: [ // 消息中心 ...
2019-08-28 18:13:01
5370
2
转载 Vue+element-UI table 导出到excel
由于表格的数据量很小，不劳烦后端再写接口转发链接：https://www.cnblogs.com/secretAngel/p/10277077.html准备工作： 1、安装依赖：npminstall--savexlsxfile-saver 2、在放置需要导出功能的组件中引入 import FileSaverfrom'file-saver'imp...
2019-06-27 09:10:12
1450
2
转载 vue在less中使用css3 calc 的问题
原文：vue在less中使用css3 calc 的问题问题描述在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。原因分析less的计算方式跟calc方法有重叠，两者在一起有冲突解决方案：width:e("calc(100% - 4rem)");width:c...
2019-04-25 09:53:56
2829
原创 在vue项目中使用jquery的第三方插件jquery.wordexport.js
前言项目需求是甲方需要导出一个word格式的文件，之前我司用的都是ireport，java后台，怎么说呢，比较繁琐，不是很方便。这一次，由于内容很少，就想完全由前端来生成word。在网上找了很多资料，很多回答说使用的是jquery的第三方插件jquery.wordexport.js。这个插件的 样式不灵活，必须是行内样式。表格的话可以统一设置样式。先放上一张效果图：项目目录结...
2019-04-23 13:55:26
8322
7
原创 小程序离开当前页面时，清除定时器
在小程序的首页，有一块数据，我是需要实时更新的，所以我就用了定时器。每隔一秒调用一次。但是当我跳转到别的页面时，不想再调用，这时就要清除定时器。代码如下：//主页var data111 = require("../../app.js");const app = getApp();Page({ data: { timerTask:null, }, //获取指数 ...
2019-04-18 15:36:56
8400
1
原创 echarts将网格线设置成虚线
yAxis: { splitLine :{ //网格线 lineStyle:{ type:'dashed' //设置网格线类型 dotted：虚线 solid:实线 }, show:true //隐藏或显示 }}...
2019-03-15 10:21:50
29893
2
转载 js实现第二屏回到顶部效果
转载链接：https://blog.csdn.net/dreamfj/article/details/82683707功能：滚动到第二屏才出现“返回顶部”按钮； 点击“返回顶部”按钮会返回顶部，而且速度越来越慢； 在返回顶部的途中如果用鼠标滚一下滚轮会停止返回顶部的滚动。html代码：<div style="height: 6000px;"></div>...
2019-03-04 16:23:01
285
转载 VUE获取元素的高度
原文链接：https://blog.csdn.net/zqian1994/article/details/82732825Vue获取元素高度.// 当前区域<div ref="elememt"></div> // 获取高度值 （内容高+padding+边框）let height= this.$refs.elememt.offsetHeight; ...
2019-03-01 16:36:13
11155
原创 js隐藏部分手机号码
需求：将手机号码中间四位隐藏，有以下几种方法定义一下手机号：let tel='18718337013'1、replace()替代方法；alert(tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"));说明：该方法是利用正则，将手机号码分为三段，第一段三个数字，第二段四个数字，第三段四个数字，将第二段用四个“*”号替代 2、su...
2019-02-26 14:42:35
2108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人