- 博客(53)
- 资源 (5)
- 收藏
- 关注
原创 vue3与webpack5安装element-plus样式webpack编译报错?
【代码】vue3与webpack5安装element-plus样式webpack编译报错?
2023-04-06 10:09:57
336
1
原创 Element-UI中Tree组件获取过滤方法后的数据并且转换JSON数据(circular-json)
注意: 这里解释一下为什么要用CircularJSON这个插件,因为element tree这node数据存在一个对象里的子项存在循环引用,存在循环引用的对象。
2023-03-29 17:52:22
890
1
原创 Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)
【代码】Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)
2023-03-29 15:56:33
3066
原创 前端终端不能使用yarn解决办法
由于vscode中的集成终端使用的是powershell,所以我们要设置一下powershell的执行权限。2、执行set-ExecutionPolicy RemoteSigned 回车,然后输入y。如果安装完yarn后,直接输入命令进行执行会出现报错,例如查看版本号:yarn -v。1、在c盘中输入以下路径,找到powershell。3、重启vscode就可以在终端使用yarn。
2023-03-24 10:02:28
503
原创 Element-ui中的el-cascader级联操作(Element)
1.el-cascader下拉存在多选2.父子选项不关联3.el-cascader支持模糊查询4.所有的多级选项,同一条链路上一次性只保证一个点选,同层级可以多选。
2023-03-22 16:55:28
1931
原创 学习vue-unit.md单元测试
前端工程越来越复杂,光靠工程师的常规工作来维护项目变得越发困难。在前端开发中引入自动化测试技术,让项目质量可以通过自动化工具来保障,将解决这个难题。从实际应用情况来说,大小公司也都越来越重视测试,大公司工程大,必然要测试;小公司分工没有那么细,要求”一角多能“,前端工程师更要承担测试工作。另外,掌握测试不只是一种技能,它更能提升你的架构思维、编码能力和把控项目整体稳定性的能力。...
2022-08-01 11:36:56
305
原创 echarts根据数据是否展示轮播
一、代码如下let timeOut // 全局声//方法内的属性 dataZoom: [ //滑动条 { yAxisIndex: 1, //这里是从X轴的0刻度开始 show: false, //是否显示滑动条,不影响使用 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 startValue: 0, // 从头开始。 endVal
2022-05-09 13:03:52
424
原创 echarts图表xAxis、yAxis多个数据轮播问题未跟着轮播问题
一、问题如下二、解决代码如下 // 重点yAxisIndex为多个的话变为数组[],轮播的变为1,哪个轴向为滚动条在dataZoom里面写哪个轴向yAxisIndex、xAxisIndex dataZoom: [ //滑动条 { yAxisIndex: [0, 1], //这里是从X轴的0刻度开始 // 重点 show: false, //是否显示滑动条,不影响使用 type: 'slider', // 这个 data
2022-05-09 10:05:53
887
原创 vue根据视频播放结束后显示登录页
一、效果如下二、代码入下<template> <div class="footer"> <!-- 背景视频 --> <video src="@/assets/begin.mp4" loop="loop" :autoplay="Data.autoplay" muted id="media" v-if="!Data.time"></video> <!-- 播放结束后显示得 --> &l
2022-04-25 17:12:06
601
原创 vue中无线滚动列表飞入效果(可视化大屏)
一、效果如下二、代码如下(因项目是vite与vue3.0、element-plus)<template> <ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled" style="overflow: auto"> <li v-for="(item, index) in Data
2022-04-25 16:18:37
1596
原创 framework-admin-vue3 管理系统快速开发模板
基于Vue3、ElementPlus框架、工程化工具Vite进行构建。此模板可用于现代化管理系统的初始开发模板,可节省一些重复性的工程初始化搭建工作。
2022-02-08 10:41:41
876
原创 ECharts 配置语法大全(加中文注释)
一、每个系列通过 type 决定自己的图表类型:type: 'bar':柱状/条形图type: 'line':折线/面积图type: 'pie':饼图type: 'scatter':散点(气泡)图type: 'effectScatter':带有涟漪特效动画的散点(气泡)type: 'radar':雷达图type: 'tree':树型图type: 'treemap':树型图type: 'sunburst':旭日图type: 'boxplot':箱形图type: 'candlestick'
2021-10-24 13:18:49
2165
原创 vue项目中webpack使用(terser-webpack-plugin)打包时候去掉console.log与debugger调试
一、配置路径vue-cli3 在项目目录下的vue.config.js文件里面配置二、安装插件依赖yarn add -D terser-webpack-plugin 或 npm install terser-webpack-plugin三、vue-cli3修改 vue.config.js 文件中进行配置vue-cli3修改 vue.config.js 文件中进行配置在文件头部引入//打包配置自动忽略console.log等const TerserPlugin = require
2021-06-28 10:40:01
4229
原创 vue项目中webpack使用(uglifyjs-webpack-plugin)打包时候去掉console.log与debugger调试
一、配置路径vue-cli2 在 build 文件下面的webpack.prod.conf.js中配置vue-cli3 在项目目录下的vue.config.js文件里面配置二、安装插件依赖依赖: uglifyjs-webpack-plugin.yarn add -D uglifyjs-webpack-plugin 或 npm install uglifyjs-webpack-plugin三、在 vue.config.js 文件中进行配置在文件头部引入//打包配置自动忽略
2021-06-25 14:33:53
3173
原创 echarts图形数据过多自动滚动(赋代码)
因项目使用echarts数据过多自己滚动效果如下:代码如下:<template> <div id="echarts" style="width: 500px; height: 400px"></div></template><script>import echarts from "echarts";export default { name: "", data() { return { }; },
2021-03-22 16:14:00
1980
2
原创 原生html中echarts的tooltip自动轮播、封装文件与使用(与上篇文章做对比)——(附源码)
一、引入echarts-auto-tooltip.js文件//在htnl文件引入js文件<script src="echarts-auto-tooltip.js" type="text/javascript"></script>//在当前页面的js文件使用方法function myChart(){ //Echarts配置略过 //渲染echarts加载数据 myChart.setOption(option); //增加轮播 tools.loopShowToo
2021-02-26 15:46:52
863
1
原创 vue中echarts的tooltip自动轮播、封装文件与使用(附源码)
一、引入tools.js文件(其实就是echarts-auto-tooltip.js)因在vue中使用轮播与htnl文件使用echarts-auto-tooltip.js不共用,因此封装一个vue使用的自动轮播。使用方法:在当前组件入组<script> //在当前组件引入tools文件 import tools from 'tools'; mounted() { //执行方法 this.drawLine(); }, methods(
2021-02-26 15:32:24
2631
2
原创 vue解决跳转时新页面没有置顶
一.Vue页面跳转后当前位置不在顶部的解决办法(两种办法)1.在main.js中添加如下代码:// 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })//或者router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox docume
2021-01-15 17:09:39
959
原创 vue中Element-ui 表格 (Table)合并行、列单元格
一、前言注:因为个人公司项目需要处理table表格重复数据多个单元格显示。现已合并。效果如下:二、代码<template> <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%;text-align:center;border:1px solid #d9d9d9" :cell-st
2021-01-15 16:32:27
4372
原创 vue前后端通信进行对所有请求和响应都进行AES加密(密文形式)
一、前言注:前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合。无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互。网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,这样的接口对爬虫工程师来说是一种福音,要抓你的数据简直轻而易举。近期因为政府项目要求被要求项目所有的交互与响应都变为密文。如下图实现效果。二、前端操作安装crypto-js。npm install
2021-01-15 14:56:19
1303
原创 vue中table表格内容过长——显示省略号悬浮显示内容
一、问题1:vue中table表格单列内容文本过长,导致回行过多,撑大table表格过于难看。如图:二、解决方法(三种)解决效果图如下:第一种:①在el-table上面增加代码tooltip-effect="dark"或者tooltip-effect=“light”<el-table :data="resultData" border tooltip-effect="dark" style="width:100%" :header-cell-style="
2021-01-06 10:56:59
18050
5
原创 vue项目中使用crypto-js AES加密解密(url地址参数变为密文)
一、安装crypto-jsnpm install crypto-js --save二、配置在src目录下得components里创建utils.js、代码如下:const CryptoJS = require('crypto-js'); //引用AES源码jsconst key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234
2020-10-24 21:19:03
783
2
echarts常用图形封装(一套代码创建多个项目)
2021-03-09
vue脚手架(常用配置).zip
2021-02-22
geojson——全国json(中国、省份、区县).rar
2021-01-25
echarts地图js包括(世界、中国、省市、区县).zip
2021-01-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人