- 博客(15)
- 收藏
- 关注
RSS订阅原创 使用swiper对echart进行轮播
接到一个需求是对echarts图标进行轮播例图：下面的两个点代表轮播切换安装swipernpm install swiper@5.4.5 //据说这个版本稳定一点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
630
原创 如何在vue项目中引入自定义字体
做大屏项目时，UI给出的设计稿数字是digital字体，实现方法如下1、下载相应.ttf字体到本地我是这这个网站下载的https://www.fonts.net.cn/2、在css中引入字体记得该css文件最后是要引入到main.js里面的3、使用在font-family中就可以使用自己引入的字体了本文仅作为工作中的日常记录...
2022-03-20 15:44:57
1185
原创 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
3926
原创 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
3348
原创 前端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
512
原创 前端发布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
689
原创 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
668
原创 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
1095
原创 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
1479
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
130
原创 按照字段升降序排列数组对象
项目需求为按照某字段顺序排列//从高到低 function sortIdAsc(a, b) { return b.offlineTotal - a.offlineTotal //offlineTotal是用来排序的字段 } Arr.sort(sortIdAsc)// 升序或降序只用改变a、b位置后续一个需求是需要根据时间顺序来进行排列，所以不能单纯的使用字段进行操作。而需要用到Date.parse() 方法Date
2021-07-02 14:57:21
179
原创 slot-scope 插槽 的使用
slot-scope 插槽 的使用 ——'<template slot-scope="scope">'代码：<template slot-scope="scope"> <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="onDeleteArticle(scope.row.id)">
2021-01-07 16:16:19
863
原创 vue小案例--在线翻译
学习完vue.js的基本操作后跟着网易云课堂的“米斯特吴 ”老师写的小案例没有写css只实现了基本功能。可以自己添加option完善可以翻译的语言种类。1、 先将展示界面的组件挂载到APP.Vue（1）Import导入（2）Components注册（3）在template中调用2、 搭建简单form表单界面3、 点击 button时需传递，在form中绑定一个事件，用v-on绑定...
2020-02-26 17:53:02
249
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人