- 博客(167)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 handsontable使用文档及扩展
Handsontable 是一个类似 Excel 表格编辑器，支持丰富的展现和交互，以及多样的单元格展现和配置customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]也可以声明customBorder:true，表示允许自定义单元格边框。
2024-01-09 08:37:46
3456
1
原创 vue3动态引入图片(:src)
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
2023-10-27 16:40:33
5686
原创 异步查询如何做节流（只查询时间段最后一次）
在这个示例中，throttleQuery函数接受两个参数：query是要执行的查询操作的函数，delay是延迟执行查询的时间间隔。每次调用throttleQuery时，会取消之前的定时器（如果存在），然后设置一个新的定时器来延迟执行查询操作。只有在延迟时间内没有新的查询请求时，才会执行最后一次查询。要实现异步查询的节流，只查询时间范围内的最后一次，可以使用一个定时器来延迟执行查询操作，并在每次触发查询时取消之前的定时器。这样，只有在一定时间内没有新的查询请求时，才会执行最后一次查询。
2023-08-18 11:07:00
152
原创 原生js快速获取路由param
alert(GetQueryString(“参数名1”));alert(GetQueryString(“参数名2”));alert(GetQueryString(“参数名3”));
2023-08-16 11:28:19
487
原创 Ts的使用
注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性。JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构（有什么类型的属性和方法）注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效。有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。
2022-11-03 17:06:55
3193
原创 vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结
文章目录一、特征二、安装三、局部注册四、常用属性总结五、常用事件总结六、案例1、html2、js3、css一、特征1、没有依赖2、使用可拖动，可调整大小或两者兼备3、定义用于调整大小的句柄4、限制大小和移动到父元素或自定义选择器5、将元素捕捉到自定义网格6、将拖动限制为垂直或水平轴7、保持纵横比8、启用触控功能9、使用自己的样式10、为句柄提供自己的样式二、安装npm install --save vue-draggable-resizable三、局部注册import Vu
2022-05-18 15:43:25
3706
3
原创 利用html2canvas导出图片（html结构导出）
首先需要安装插件npm install html2canvas导入插件：import html2canvas from 'html2canvas'事件：downloadImg('jpg')downloadImg('png')逻辑：// 下载图片downloadImg (type) { html2canvas(document.querySelector('需导出的结构类名')).then(canvas => { const url = canvas.toDataUR
2022-05-18 15:10:52
578
原创 mac添加hosts记录步骤
1、打开mac终端2、输入 vim /etc/hosts ，进入文件 (注意：如果权限不够则通过： sudo vim /etc/hosts 进入文件，可能需要输入登录密码等) 3、按下字母a切换为编辑模式（英文），即可对文件进行增删改查4、修改完成后按下esc键，退出编辑模式5、按下shift+:键，界面出现冒号，输入wq，按下回车，强制保存文件内容后退出vim编辑器6、source /etc/hosts 使修改立即生效...
2022-04-25 14:47:15
7650
原创 Antd vue 表格自定义页码（Pagination）
在antd vue中，有默认的页码，但是想自定义页码需要自己配置案例：代码：html：<a-table :rowKey="(record, index) => record.key" :loading="tableData.loading" :columns="columns" :pagination="{...pagination, total:tableData.total,}" :data-source="tableData.list" bordered
2022-04-20 09:23:20
2732
1
原创 highcharts多图表联动
官方案例：https://www.highcharts.com.cn/demo/highcharts/synchronized-charts展示图：vue中使用触发：watch: { chartList: { handler (n) { if (!this.mouseMove) { this.mouseMove = true setTimeout(() => { this.handleMouse()
2022-01-19 15:37:37
1001
1
原创 js本地下载
const url = item.urlconst link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', item.name)document.body.appendChild(link)link.click()
2022-01-18 18:10:05
466
原创 highcharts本地导出图片
copyChart () { // 复制charts为图片 // 获取highcharts的svg图片 const img = new Image() img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG())))} ` // 将svg转化为canvas const canvas = document.createElement('canvas') const
2022-01-18 10:17:05
1374
原创 解决 iframe嵌入后页面全屏插件（screenfull）报错的问题（fullscreen error）
在使用全屏插件screenfull的时候，有时候会遇到类似下面的报错：解决方式：在iframe中添加属性allowfullscreen="true"解决问题<iframe allowfullscreen="true" src="*****" frameborder="0" style="width: 100%; height: calc(100vh - 115px);"></iframe>...
2022-01-14 13:46:49
2776
1
原创 vue 启动Module build failed (from ./node_modules/vue-loader/lib/index.js)
把node_modules 删除之后，输入以下命令(一定这个顺序)：1 npm install vue-template-compiler -D2 npm install3 npm run dev
2022-01-04 11:20:46
1289
原创 Echarts中tooltip添加单位
案例：代码：tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } }, formatter: function (params) { var relVal = params[0].name for (var i = 0, l = params.length; i < l; i++) { relVa
2021-12-31 15:16:10
11928
2
原创 vue实现base64编码（encode）
js:base64Encode(){ var rv; rv = encodeURIComponent("********"); rv = unescape(rv); rv = window.btoa(rv); return rv;}this.loginUrl = "******" + this.base64Encode()html:<iframe width="100%" height="100%" :src="loginUrl"></iframe>
2021-12-30 16:51:30
4239
原创 Js数组排序方法（sort）失效解决方法
在平时进行数组排序时，常用的数组排序方法sort有时候并没有起到排序的作用，例如：const arr = [1，5，2，16，7]console.log(arr.sort())打印结果为：很明显，sort并没有起到排序的作用，原因就在于sort()中没有传参，那么默认就是按照数组每个元素的 ASCII 字符顺序进行升序排列，正确方案：const arr = [1，5，2，16，7]arr.sort(function (a, b) { // 对sort方法进行重写，本质是冒泡排序 retu
2021-12-29 10:58:29
5709
原创 Echarts 饼图中hover图形不会影响中间数据
在series中把label变成false，再单独在data中配置想要展示的labelseries: [{ // name: "Access From", type: 'pie', radius: ['55%', '66%'], // center: ["50%", "40%"], center: ['40%', '45%'], avoidLabelOverlap: false, label: { show: false }, emphas.
2021-12-28 18:09:58
737
原创 Echarts 柱状图配置圆角
在option中的series中配置barBorderRadius属性：弧度分别为 【左上，右上，右下，左下】series: [{ name: '结构化数据量(万)', type: 'bar', barWidth: 12, data: this.data2, z: '100000', color: '#4499e9', itemStyle: { // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 normal:
2021-12-28 18:06:04
9297
原创 Echarts 配置折线面积图
在option中的series中配置itemStyle：series: [{ { name: '非结构化数量(千)', type: 'line', smooth: true, // 曲线 symbolSize: 0, data: [20, 40, 60, 80, 50, 60, 30], itemStyle: { normal: { color: '#48d0aa', borderColor: '#48d0aa',
2021-12-28 18:03:46
852
原创 echarts x轴字数溢出隐藏
xAxis中：axisLabel: { margin: 8, formatter: function (params) { var val = ""; // 超过四个字隐藏 if (params.length > 4) { // 截取四个字 val = params.substr(0, 4) + '...'; return val; } else {
2021-12-27 17:33:54
811
原创 echarts 触发点击节点事件
myChart.on('click',function(params){ console.log('myChart----click---:',params.data)});
2021-12-22 16:21:16
325
原创 vue中变更路由标题和图标（meta）
需要把变更的图标放到public的static文件夹下直接上代码：router.beforeEach((to, from, next) => { NProgress.start() // 更改标题 if (to.meta.title) { document.title = to.meta.title } // 更改图标 if (to.meta.icon) { document.getElementsByTagName('link')[0].setAttrib
2021-12-22 15:57:12
1657
原创 antd vue 调整checkbox默认样式
// 鼠标hover时候的颜色.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{ border: 2px solid #1BBA79 !important;}// 设置默认的颜色.ant-checkbox{ .ant-checkbox-inner{ bord
2021-12-14 15:59:05
2508
原创 echarts x轴超过字数换行
xAxis中：axisLabel: { show: true, color: "#90CFFF", fontSize: 24, formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;//
2021-12-14 15:42:51
517
原创 echarts柱状图上方显示数值
series: [ { name: "计划", type: "bar", // stack: "Total", data: [], barWidth: 30, itemStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, colo
2021-12-13 17:18:52
3347
原创 html改变页面滚动条样式
/*滚动条样式*/.centerList::-webkit-scrollbar { width: 30px; /*height: 4px;*/}.centerList::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(2, 35, 60, 1);}.centerList:
2021-12-09 14:00:33
374
原创 antd vue 设置table表格滚动条样式
/deep/.ant-table-body{ &::-webkit-scrollbar {//整体样式 height: 12px; } &::-webkit-scrollbar-thumb {//滑动滑块条样式 // border-radius: 30px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // background: #00aaff; background:
2021-12-09 13:59:58
1757
原创 echarts多次渲染更细报错的问题（There is a chart instance already initialized on the dom）
同一个echarts数据变化或需要重新渲染的时候会报错解决的办法就是先在页面卸载这个chart图表，再重新渲染一次let myChart //卸载原有的chartthis.$echarts.init(document.getElementById("chartName")).dispose();myChart = this.$echarts.init(document.getElementById("chartName"));myChart.setOption(option);...
2021-12-09 13:45:52
787
原创 vue不同组件使用window.onresize只监听到一个的问题
原本写法：window.onresize = () => { // 窗口尺寸改变时触发事件}改进写法window.addEventListener('resize', () => { // 窗口尺寸改变时触发事件})
2021-12-09 13:37:27
857
原创 echarts在legend中显示百分比或value值
所占百分比：formatter:function (name) { var total=0; for (var i=0;i<option.series[0].data.length;i++){ total+=option.series[0].data[i].value; } for (i=0;i<option.series[0].data.length;i++){ var dpercent=(option.series[0].data[i].value/tot
2021-12-08 09:44:56
4623
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人