![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue-cli
不说别的就是很菜
这个作者很懒,什么都没留下…
展开
-
vue+less+style-resources-loader 配置全局颜色变量
全局统一样式后,可配置vue.config.js实现全局颜色变量,方便在编写时使用统一风格的色彩。原创 2023-11-29 16:11:26 · 909 阅读 · 0 评论 -
vue+jsonp编写可导出html的模版,可通过外部改json动态更新页面内容
导出后文件结果如图所示,点击Index.html即可查看页面,页面所有数据由report.json控制,修改report.json内容即可改变index.html展示内容。原创 2023-11-29 16:04:32 · 908 阅读 · 0 评论 -
vue实现一个popover悬浮组件(简易版)
效果图实现思路定义组件,监听元素的mouseenter和mouseleave还有组件的mouseenter和mouseleave事件由于有滚动等交互需求,所以加一个轮询,监听鼠标对于元素和popover组件的交互状态实现代码<!-- * @Fileoverview: 保护措施详情 * @Description: 仪表盘-数据流图-保护措施详情--><template> <div class="popover"> <div原创 2022-05-27 14:34:36 · 3675 阅读 · 6 评论 -
【数据流图】SpriteJs绘制数据流图
使用vue2+SpriteJs+Echarts5实现的2D数据流图,适用于演示场景,不适用于自由度过高的开发场景原创 2021-12-17 17:22:14 · 1232 阅读 · 3 评论 -
vue+原生js实现滚动加载数据动画
效果展示实现思路通过动态移除和新增元素实现代码run() { if (!this.isRuning) { this.isRuning = true; let runRes = this.$refs.runRes; let i = 0; while (runRes.hasChildNodes()) { runRes.removeChild(runRes.firstChild); } this.interval = setInterva原创 2021-10-28 14:37:55 · 231 阅读 · 0 评论 -
vue+原生js+element-ui实现轮播列表动画(无限轮播)
效果展示实现思路用element-ui中的el-row和el-col来构建列表,若无element-ui,也可用类似布局组件或直接用div元素实现将滚动区域封装,使用绝对定位与相对定位的方式,并将超出滚动区域部分hidden隐藏下述业务代码有每分钟刷新一次列表的需求,所以用两个interval,若纯轮播则一个interval即可通过改变子元素相对于父元素的top值,并设置transition: all 1s;即可出现如图所示效果当轮播结束后再次首尾相连,即可实现无限轮播关键代码流畅过原创 2021-10-28 14:17:36 · 4086 阅读 · 0 评论 -
echarts+vue动态生成可配置的桑基(sankey)图
效果展示实现思路桑基图实现的本质也是一条条source-target,节点与节点之间的连线做到完全可配置化,需抽离出大量可配置的属性无数据的节点要进行隐藏,因此需要加是否有数据的判断节点颜色和线条颜色通过设置itemStyle和lineStyle来配置分辨率自适应则需要设置函数来动态计算实现代码//now-size.jslet nowClientWidth = document.documentElement.clientWidth;export function nowSize(原创 2021-10-28 14:04:32 · 2774 阅读 · 0 评论 -
【数据流图】Echarts地图实例(热力图&线图&markPoint)
效果展示需求解读分辨率自适应左右框内标题及内容都可动态配置同时包括地图热力图与地图线图出发点添加涟漪动画markPoint根据数据不同动态展示是否高亮热力图颜色数值范围由返回数据动态控制难点分析series.type为lines或effectScatter显示的前提为geo属性有值,而展示热力图却需要series.type为map,就涉及到geo与map两属性重叠与z轴level问题线图需要准确知道起点与终点坐标,若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定原创 2021-10-28 12:04:04 · 7317 阅读 · 4 评论 -
vue+echarts封装一个可配置的环形图
效果展示组件代码<template> <div class="donut-chart"> <div ref="chart" class="chart"></div> </div></template><script>const OVERVIEW_COLOR_LIST = [ '#6F9CF9', '#65DCAC', '#A486D5', '#F7C739', '#EB7原创 2021-10-28 11:19:32 · 535 阅读 · 0 评论 -
vue封装一个大屏加载动画
效果展示组件代码<template> <div class="spinner"> <div v-for="item in 5" :key="item" :class="rectName + ' rect rect' + item" ></div> </div></template><script>export default { name: 'Lo原创 2021-10-28 11:14:37 · 585 阅读 · 0 评论 -
Vue+el-popover+原生JS+CSS实现日历功能
效果展示功能固定位置展示星期(日/一/二/三/四/五/六)固定位置切换年份,重绘日历滚动展示完整日历自动滚动到离当天最近有数据的一天,若全年无数据则滚动至当天在日期下方动态添加小红点表示该天有数据,悬停展示当天数据概览,点击可高亮该日期实现思路实现固定位置与滚动容器定高,用于展示滚动修改滚动条样式,适配颜色header采用绝对定位固定body日期区域用绝对定位,与header固定位置保持距离body区域定高,展示滚动条拆解后元素结构如图所示:实现高亮与悬停展示原创 2021-10-28 10:43:00 · 584 阅读 · 0 评论 -
vue生成并导出表格(使用xlsx第三方包,支持csv/html/xlsx等格式)
使用第三方包xlsx文档支持导出格式● xlsx● xlsb● xlsm● xls● xml● csv● txt● ods● fods● uos● sylk● dif● dbf● prn● qpw● 123● wb*● wq*● html● htm安装npm install xlsx使用demo<template> <div class="demo"> <qz-icon class="icon-d原创 2021-10-27 18:07:37 · 655 阅读 · 0 评论 -
vue+echarts图表编写模版(浏览器宽度自适应/及时销毁组件)
在此模版基础上可在两处编写代码,如无交互,可将click交互模块代码删除<template> <div class="chart" ref="chart"></div></template><script>export default { mounted() { this.init(); }, methods: { // 初始化数据 init() { this.paintChart(.原创 2021-10-27 18:04:41 · 341 阅读 · 0 评论 -
解决el-tree被元素包裹后节点高亮显示不完全方案
问题详情如下图所示,将树形图包裹在panel中,超出最大宽高则横向或纵向滚动,但高亮设置的是当前选中节点的content,设置宽度100%,就会造成下图情况。解决方法覆盖原有高亮样式,给所有节点设置class为row-context,并设置row-context的样式,直接对高亮下的该容器设置样式,造成伪高亮效果(非组件自带高亮效果).el-tree-node.is-current > .el-tree-node__content { background: #fff; colo原创 2021-10-27 17:57:02 · 655 阅读 · 0 评论 -
在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)
使用出现的问题根据element-ui文档与网上教程编写如下代码<el-popover v-model="row.visible" trigger="click"><span slot="reference" @click="row.visible=!row.visible">删除</span></el-popover>常规情况下,row中的visible属性会发生改变,但通过调试发现row属性并未改变,查看源码所以<span s原创 2021-07-06 18:13:36 · 10251 阅读 · 2 评论 -
vue+echarts 动态设置折线图最大值与跨度
效果图实现chartData为折线图数据数组为使interval跨度为整数,排布整齐,所以均匀分为五段,max为5的倍数具体代码如下let max = Math.floor(Math.max(...this.chartData) / 10) * 10 + 10;let interval = Math.floor(max / 5);...原创 2021-06-30 17:09:54 · 1037 阅读 · 0 评论 -
vue+echarts实现世界地图热力分布并打标
效果图代码<!-- * @Fileoverview: 风险分布 * @Description: 概览-风险分布--><template> <div class="map"> <div ref="self" class="map__content"></div> </div></template><script>import echarts from "echarts";im原创 2021-06-17 15:32:24 · 1782 阅读 · 1 评论 -
vue+echarts 创建水球图组件
步骤效果图下载注册编写组件使用效果图下载npm install echarts-liquidfill --save注册在main.js中引入import "echarts-liquidfill";编写组件<template> <div class="fill"> <div class="fill__chart" ref="fill"></div> </div></template><sc原创 2021-04-19 10:16:46 · 363 阅读 · 0 评论 -
vue+echarts 实现日历坐标系+热力图 按月隔开的图表
预览(由于图表过长,用div包裹后实现滚动)实现分隔思路日历坐标系不自带分隔,就用边框粗细来实现伪分隔还有一种分隔思路是使用多张热力图图表,这意味着series中会有多个对象,而且不方便传值echarts官方实例中不带文字的显示,所以根据文档查阅,自定义热力图中的label就可以实现实现代码<div class="ip-risk--left"> <div ref="chart" class="ip-risk__chart"></div> <原创 2020-12-02 17:14:53 · 2384 阅读 · 0 评论 -
echarts使用dataZoom属性,左右滑动时折线图混乱或显示不全问题的解决方案
问题复现由图可知,8号数据为0且当前显示局部趋势与下方滑动条中趋势图形不符,排查问题发现是数据过滤的问题解决方案属性中加入filterMode: 'empty'关于dataZoom中的filterMode属性可以查看官方文档dataZoom-slider.filterMode解决后效果图...原创 2020-11-09 14:42:18 · 3767 阅读 · 3 评论 -
vue封装el-dialog为公用组件时控制打开关闭的方法
在我们封装的组件中加入变量visible与关闭函数<el-dialog title="文件详情" :visible.sync="visible" :close-on-click-modal="false" @close="dialogClose" > //加入你要编写的内容</el-dialog>export default { props: { dialogFlag: { defau.原创 2020-10-23 17:08:21 · 1752 阅读 · 0 评论 -
el-drawer 设置抽屉内容的滚动显示(非整个抽屉的滚动&包括父子组件传参)
效果图实现思路在父组件中加入要执行交互的元素与el-drawer组件,还有我们要放在el-drawer中的内容组件<template> <div class="home"> //执行交互的元素(这里用的是按钮) <el-button @click="drawer = true" type="primary">点我打开</el-button> // el-drawer组件 <el-drawer :v原创 2020-10-23 16:57:34 · 11988 阅读 · 0 评论 -
【element-ui】el-table中slot-scope的使用,用于动态绑定className等
以某列为例<el-table-column prop="level" label="风险等级"> <template slot-scope="scope"> <span :class="'level'+scope.row.level">//动态绑定时无需使用反引号 {{`${levelMap[scope.row.level]}`}}//在内容上使用需要使用反引号 </span> </template></e原创 2020-10-11 15:47:17 · 1782 阅读 · 0 评论 -
vue-cli3 实现封装一个滚动公告栏组件(数据大屏可用)
注意组件名等可自行更改,仅作参考用预览图思路总共10条数据,在界面中显示5条,每3秒滚动一次,每次向下滚动一条通过两个盒子,外层定高盒子设置溢出部分隐藏内部定高盒子每次都通过marginTop值得改变去向上滚动滚动动画通过setInterval实现渐变色横条也是两条,底层定宽,顶层计算宽度并设置渐变色代码<template> <div class="interface"> <div class="interface__content">原创 2020-10-11 15:42:18 · 1792 阅读 · 0 评论 -
vue-cli3+echarts 封装实现一个渐变的自适应柱状图组件
预览图思路1.对原创 2020-10-11 15:34:56 · 243 阅读 · 0 评论 -
vue-cli3+echarts 实现封装一个渐变色仪表盘组件
效果预览思路使用两个仪表盘叠加,起始角度一样,底部仪表盘结束角度固定不变通过props传入数据计算在上层的仪表盘的结束角度并赋值代码<template> <div class="gauge"> <div class="gauge__bottom" ref="bottomGauge"></div> <div class="gauge__top" ref="topGauge"></div> &l原创 2020-10-11 15:27:08 · 935 阅读 · 0 评论 -
Vite尝鲜:快速创建一个vite项目
简介:Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。比webpack打包更加快速。它主要具有以下特点:1.快速的冷启动2.即时的模块热更新3.真正的按需编译安装步骤:全局安装vitenpm i -g create-vite-app创建vite项目create-vite-app vue3-demo运行vite项目npm inpm run dev注意点:原创 2020-09-24 11:56:15 · 4975 阅读 · 0 评论 -
仿网易云音乐的移动应用前端工程(vue-cli4.x+vant+vuex+vue-router+mongoDB+express)
这是一个仿网易云音乐的移动应用前工程说明。(前端有一些没有仿照网易云音乐现有版本的UI设计,简化了UI和一些功能,自己重新设计了比较简单的UI,目前还是大三,对于优化之类的都不大熟悉,文件仅供参考,欢迎讨论指正)本工程github链接后端工程github链接后端博客链接网易云音乐API链接技术/资源Vue-cli 4.4.0 vue脚手架vue-router 路由vuex 状态管理scss 专业级CSS扩展语言vant 有赞开发的vue移动端ui库postcss 屏幕适配插件Ne原创 2020-06-29 20:39:56 · 420 阅读 · 0 评论 -
仿网易云音乐的移动应用后端工程(vue-cli4.x+vant+vuex+vue-router+mongoDB+express)
这是一个仿网易云音乐的移动应用后端工程说明。(网易云有登录注册等的接口,但是由于没有做过移动端的应用,对于express和mongoDB都不熟悉,所以没有用接口,直接自己写了个后端来实践一些交互操作,目前还是大三,对于优化之类的都不大熟悉,文件仅供参考,欢迎讨论指正。)本工程github链接技术栈express:node.js的后端框架MongoDB:数据库工程目录工程配置步骤安装expresscnpm i express --S安装mongoosecnpm i mongoos原创 2020-06-29 17:27:15 · 331 阅读 · 0 评论 -
vue-cli 4.x 从vuex取出的数据更新后再执行函数
import { mapGetters } from "vuex";定义一个变量data() { return { songId: "" }; },从vuex中获取变量值computed: { getCurrentSongId() { return this.$store.state.currentSongId; }, ...mapGetters(["getterCurrentSongId"]) },在watch中监听函原创 2020-06-25 14:14:32 · 709 阅读 · 0 评论 -
Vue-cli 4.x 用watch实时监听props并更新组件数据
props: ["cardUrl","cardPlayCount"]data() { return { imgCardUrl: this.cardUrl, imgCardPlayCount:this.cardPlayCount, }; },watch:{ 'cardUrl'(newVal){ this.imgCardUrl=newVal }, 'cardPlayCount'(newVal){ this.img原创 2020-06-24 13:34:47 · 882 阅读 · 0 评论 -
vue-cli 4.x 父子组件路由传参,并根据参数进行axios跨域取值
在子组件元素上添加点击事件<img-card v-for="(item, index) in imgCardData" :key="index" :card-url="item.picUrl" :card-play-count="item.playCount" @click.native="goListDetial(item.id)" >在子组件methods中定义方法这里利用query进行传值,跳转后会显原创 2020-06-24 13:32:42 · 222 阅读 · 0 评论 -
vue-cli4.x 移动端项目基础配置(记录)
创建vue.config.js// vue.config.jsconst path = require('path');const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入const B原创 2020-06-24 10:18:53 · 579 阅读 · 0 评论 -
Vue-cli 4.x使用vant样式出不来的解决方法(vue.config.js)
排查前提1.babel.config.js配置完成2.package.json中已经显示vant安装完成解决方法打开vue.config.jsrequireModuleExtension的值应为true,否则无法加载第三方样式亲测可用原创 2020-06-22 17:37:32 · 2109 阅读 · 1 评论 -
vue-cli+elment-ui 标签页动态加载组件(el-tabs)
用到的组件el-tabs标签页,<component>标签,用:is切换加载功能动态切换标签页并显示不同组件内容效果图标题实现代码//.vue单文件<template> <div :class="bemCss('tabs')"> <el-tabs v-model="activeName" @tab-click="handleCl...原创 2020-04-03 00:00:02 · 4131 阅读 · 0 评论 -
【记录】vue-cli+element-ui 制作一个侧边栏组件(抽屉Drawer)
用到的组件el-drawer抽屉、el-button按钮测试还用到了输入框等组件功能1.自由添加按钮,并可使按钮居中2.抽屉里的内容由<slot>插入,用的具名插槽3.鼠标悬停在按钮时出现文字4.可指定侧边栏距离窗口最右侧的距离原创 2020-04-02 23:36:47 · 6538 阅读 · 0 评论 -
IDEA2019.3.4 配置使用Prettier
在Terminal中运行npm install --global prettier打开File-Settings在Plugins中安装Prettier插件并且重启编译器打开File-Settings在其中添加Node解释器路径和你的Prettier安装路径,点击OK在需要格式化的文件中用Shift+ctrl+A如图所示也可以直接用ctrl+alt+Shift+P快捷键来美化当前文件...原创 2020-03-24 19:11:12 · 7327 阅读 · 0 评论