记录
一起打滚吗
这个作者很懒,什么都没留下…
展开
-
使用swiper对echart进行轮播
接到一个需求是对echarts图标进行轮播例图:下面的两个点代表轮播切换安装swipernpm install [email protected] //据说这个版本稳定一点swiper的使用方法:https://www.swiper.com.cn/usage/index.html在项目中应用swiper<template> <div class="swiper-container"> <div class="swiper-wrapper"&g原创 2022-04-19 17:00:23 · 615 阅读 · 0 评论 -
如何在vue项目中引入自定义字体
做大屏项目时,UI给出的设计稿数字是digital字体,实现方法如下1、下载相应.ttf字体到本地我是这这个网站下载的https://www.fonts.net.cn/2、在css中引入字体记得该css文件最后是要引入到main.js里面的3、使用在font-family中就可以使用自己引入的字体了本文仅作为工作中的日常记录...原创 2022-03-20 15:44:57 · 1161 阅读 · 0 评论 -
Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘: The source height is 0.
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.使用heatmap.js生成热力图时,报了这个错。原因是canvas容器需要高度,给div容器设置高度就可以了。<template> <div id="heatmap"></div></template>改为<temp原创 2022-03-03 16:02:27 · 3776 阅读 · 0 评论 -
vue使用screenfull实现全屏
1. screenfull介绍官网地址:https://github.com/sindresorhus/screenfull.js2. 依赖安装 npm install --save screenfull这里我在安装后有报错,默认给我安装的是6.0版本,后来我重新安装5.1.0版本报错消失3. 引入 import screenfull from "screenfull"4. 案例展示<template> <div> <div v-原创 2022-02-11 14:48:36 · 3271 阅读 · 0 评论 -
前端vue导出excel
在后台管理系统中常常遇到导出列表详情的需求,之前遇到的项目都是后端出接口,前端调用就可以了。这次合作的后端坚持要前端处理导出,因为没有做过这方面,还是弄了好久,所以记录一下如何使用。导入依赖// npmnpm install -S file-saver xlsxnpm install xlsx-style --savenpm install -D script-loader导入Export2Excel.js/* eslint-disable */require("script-loader原创 2022-01-12 13:35:01 · 509 阅读 · 0 评论 -
前端发布npm包
仅用于个人记录开发工作中遇到的一些日常1、vue init webpack-simple first-npm-practice 初始化项目尽量使用webpack-simple,用vue init webpack first-npm-practice创建项目会生成很多配置项,我们其实用不到。创建成功后,npm install 安装依赖 npm run dev跑起来2、在src下面新建components文件夹,里面新建index.vue(名字不重要,自己取),在src同级目录下新建index.j原创 2021-11-26 11:16:13 · 679 阅读 · 0 评论 -
vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be esta
vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80创建项目的时候遇到这个报错在网上搜了一些解决方案1、设置所有代理为 null(我使用后无效)npm config set http-proxy nullnpm config set https-proxy原创 2021-11-25 14:50:06 · 654 阅读 · 0 评论 -
vue中手机号中间隐藏显示
为了保护用户隐私,产品需求将table展示中的用户手机号中间四位以显示。如18212345678显示为1825678<el-table-column prop="userPhone" label="用户手机号" min-width="160" sortable > <template slot-scope="scope"> {{scope.row.userPhone?scope.row.userPhone.replace(/(\d{3})(\d{4})(\d{4原创 2021-11-03 16:32:02 · 1064 阅读 · 0 评论 -
Element-UI表格多选框与tags联动
项目需求是一个可选择的table表格,勾选上后显示标签,并且翻页也能存留数据首先是如何将勾选的数据保留,使其翻页或者刷新不改变勾选内容1、给表格添加row-keyrow-key:行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。<el-table v-loading="ta原创 2021-09-22 13:51:36 · 1429 阅读 · 2 评论 -
v-if v-else渲染交叉问题
v-if v-else渲染交叉问题做项目时遇到一个弹框根据不同类型展现不同内容的情况,因为不想写两个弹框,所以采用v-if和v-else根据类型的不同渲染对应内容。用到的都是table列表,出现了渲染问题点击A按钮点击B按钮发现这两行并没有根据按钮改变渲染解决:可能是Vue识别到的是相似组件(高度相似甚至相同),所以就不会更新元素,所以为其加key值标识就可以了。 <el-table :data="tableData" :height="400" class="mt-2原创 2021-07-09 15:47:07 · 118 阅读 · 0 评论 -
按照字段升降序排列数组对象
项目需求为按照某字段顺序排列//从高到低 function sortIdAsc(a, b) { return b.offlineTotal - a.offlineTotal //offlineTotal是用来排序的字段 } Arr.sort(sortIdAsc)// 升序或降序只用改变a、b位置后续一个需求是需要根据时间顺序来进行排列,所以不能单纯的使用字段进行操作。而需要用到Date.parse() 方法Date原创 2021-07-02 14:57:21 · 174 阅读 · 0 评论