qq_40576178的博客

原创 js下载附件

data中定义此变量。

原创 vue动态监听localStorage或sessionStorage中数据的变化

1、首先在main.js中设置以下代码。2、在存数据的页面设置此代码。3、在取数据的页面用此代码。

原创 正则校验手机号

【代码】正则校验手机号。

原创 使用vue3开发移动端，切换底部菜单栏时首页图表不显示问题

【代码】使用vue3开发移动端，切换底部菜单栏时首页图表不显示问题。

原创 让el-table表头文字和单位换行显示

表头文字和单位换行显示

原创 js 时间格式转换 ‘2022-07-21T06:00:22.000+0000‘

js时间格式转化

原创 echarts自定义提示框悬浮文字

echarts悬浮提示

原创 修改数组对象中字段名且取前10条

处理数据js

原创 echarts实现水波球和立体柱状图

echarts实现水波球和立体柱状图

原创 js实现导出excel表格

js实现导出excel表格

原创 substr删掉最后一个字符

js删掉最后一个字符

原创 js插件实现飘窗

网页飘窗

原创 echarts雷达图

let option = { tooltip: { trigger: 'item', }, legend: { right: 'auto', bottom: 0, textStyle: { color: ()=>{}, fontSize: 26 }, }, series:[..

原创 嵌套饼图设置不同的颜色

let option = { tooltip: { trigger: 'item', }, legend: { right: 'auto', bottom: 0, textStyle: { color: ()=>{}, fontSize: 26 }, }, series:[..

原创 echarts饼图

1、option配置项computed: { pieOption() { let option = { graphic: [ { type: 'image', left: 'center', top: 'center', style: { width: 150, height: 150, .

原创 el-radio设置激活的样式

.el-radio{ background: #fff; } .el-radio.is-bordered.is-checked{ background: #409eff; } /deep/ .el-radio__inner:after{ width: 10px; height: 10px; bord.

原创 el-radio设置激活的样式

.el-radio{ background: #fff; } .el-radio.is-bordered.is-checked{ background: #409eff; } /deep/ .el-radio__inner:after{ width: 10px; height: 10px; bord.

原创 vue页面内容超出浏览器高度但不出现滚动条

浏览器页面下方其实还有内容，但不显示。解决办法给父元素设置以下属性即可解决overflow: scroll;height: 100vh;

原创 iframe全屏展示pdf

使用iframe显示pdf时，默认会根据浏览器自适应，如果想实现让pdf沾满整个容器宽度，需要设置以下属性<iframe width="100%" :src="PDFsrc+'#view=FitH,top'" frameborder="0" style="width: 100%; height: 100%"></iframe>在src路径后面添加#view=FitH,top默认是自适应，也可手动添加#view=Fit...

原创 把单独多条对象放在数组中

let zhData={ name:'综合', meetNum: this.allNumber} let yfhg={ name:'依法合规', meetNum: this.yfhgNumber} let wrfz={ name:'污染防治', meetNum: this.wrfzNumber} let stzl={ name:'生态治理', meetNum: this.stzlNumber} let jnjt={ name:'节能减碳', .

原创 echarts点击触发多次

给echarts图表设置点击事件后，会导致出发多次请求，设置off即可解决 let myBarChart = this.$echarts.init(this.$refs.majorHidTroBar) myBarChart.setOption(this.barOption) myBarChart.off('click') //图表渲染前销毁点击事件 myBarChart.on("click", function(value){ this.l

原创 使用jsonp传参并设置echarts柱状图的x轴高度样式

代码如下：getEchartsData(){ let url = this.$baseURL + '/HGApi/getHGCPDHCountDataDetail' const searchParam={ module:'02', date:this.dateNH } $.ajax({ type:'get', url, dataType:'jsonp', dat.

原创 echarts柱状图

var colorList = [ "#f48149", "#fbb321", "#ff4e00", ]; let option = { title:{ text:'港口岸电接驳率', textStyle:{ color:'#d9bb96', fontWeight:'bold', fontSize.

原创 elementUI轮播图样式

<div class="pictures"> <!-- 示范工程轮播图 --> <el-carousel indicator-position="none" arrow="always" height="810px"> <el-carousel-item v-for="item in sfgcpicLists" :key="item.id" :name="item.picNa.

原创 vue实现给同级div添加样式

页面中多个div，点击当前div显示激活的 样式，别的去掉激活的样式 <div class="buttonText" :class="{activeOrange:active==2}" @click="commonClick('电力部')">电力部</div><div class="buttonText" :class="{activeOrange:active==3}" @click="commonClick('化工部')">化工部</div><

原创 2句话解释防抖和节流

防抖：单位时间内只执行最后一次1、先清空定时器id （clearTimeout）2、创建定时器节流：不停的执行1、判断如果没有定时器id，先创建定时器2、定时器内部将id设置为空(null)

原创 css相关知识

一、Emmet语法1、快速生成HTML与CSS自动排序：.demo$*5标签中有内容：div{ $ }*5，$左右没有空格，此处为了让符号显示出来8div{文字}*5二、background、box-shadowbackground-attachment: scroll / fixed （背景图像滚动 / 固定）1、background简写：background：背景颜色 图片地址 背景平铺 背景图滚动 背景图位置background：pink url() repear-x fixe

原创 vscode插件

1、Material Theme主题插件，包含不同色彩风格的主题和图标样式2、Prettier-code-formatter格式化代码，设置中保存时自动格式化搜索设置中的save出现Editor:Format On Save，勾选保存时格式化文件3、Bracket Pair Colorizer2将配对的括号显示相同的颜色，不配对的括号显示不同颜色4、Auto rename Tag修改标签前半部分，后半部分标签自动变化5、Live Server本地开启Http Server，建通ctrl

原创 vscode终端无法打开

settings.json中添加： “terminal.integrated.shell.windows”: “cmd.exe”

原创 proxy代理

代码 devServer: { // server模块配置 port, inline: true, open: true, overlay: { warnings: false, errors: false }, proxy: { // 全局变量ip配置 [process.env.VUE_APP_BASE_API]: { target: process.env.VUE_APP_SERVE..

原创 echarts圆环占比效果

let echarts = require('echarts'); var BorderWidth = '10'; //反方向剩下部分的样式 var placeHolderStyle = { normal: { label: { show: false, position: "outside" }, labelLine: { show: false, ...

原创 echarts占比环形图

option = { backgroundColor: 'green', tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphic: { elements: [ { type: 'text', .

原创 el-table表格滚动

// 日报滚动 dailyRefScroll() { clearInterval(this.timeDailyRef) //清除定时器 const table = this.$refs.dailyRef //获取DOM元素 const divData = table.bodyWrapper //获取表格中承载数据的div元素 // divData.scrollTop = 0 this.addDailyRefScro.

原创 26号之前显示上上月，26之后显示上月

value2: new Date().getDate() < 26 ? moment().subtract(2, 'months').startOf('month').format('YYYY-MM-DD') : moment().subtract(1, 'months').startOf('month').format('YYYY-MM-DD'), // 月报 选择月份

原创 el-tab标签右侧显示小文字

代码如下:<el-tab-pane name="标签名"> <span slot="label">标签名<b style="font-size: 27px;margin-left: 8px;">({{leaderTalkNumber}})项</b></span></el-tab-pane>

原创 axios的get请求

原创 js处理数据

处理前的数据：preValue: {202002: 2.57, 202003: 2.55, 202004: 2.74, 202005: 2.62, 202006: 2.54, 202007: 2.47, 202008: 2.43, 202009: 2.41, 202010: 2.4, 202011: 2.24, 202012: 2.41, 202101: 1.9}value: {202102: 2.62, 202103: 2.59, 202104: 2.91, 202105: 2.65, 202106.

原创 el-table表格行中出现一条横线

解决方案：::v-deep .el-table::before { z-index: inherit; }

原创 修改el-table中排序小三角样式

::v-deep .el-table .caret-wrapper { height: 45px; } ::v-deep .el-table .sort-caret{ border: 7px solid transparent; } ::v-deep .el-table .sort-caret.ascending{ border-bottom-color: #C0C4CC; top: 5.

原创 moment格式化时间

格式化为2022-02-09moment(new Date()).format('YYYY-MM-DD')