![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端小强踩坑之路
℡仅此、而已
这个作者很懒,什么都没留下…
展开
-
jquery实现甘特图时效管理
*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*滚动条整体样式*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*/原创 2023-07-11 16:43:14 · 1323 阅读 · 0 评论 -
移动端vue+vant+高德地图实现拖拽选址,周边选址,搜索选址,自动定位,选择城市功能,获取地址经纬度,详细地址
所有文件直接引用,有时候自动定位会报错,需要升级https站点,localhost下可以定位成功原创 2022-10-24 11:31:20 · 10773 阅读 · 11 评论 -
截取文件链接末尾的方法,图片直接显示,文件通过链接下载
截取文件链接末尾的方法,图片直接显示,文件通过链接下载原创 2022-10-20 15:20:57 · 174 阅读 · 0 评论 -
vantui上传组件自定义封装,图片上传前压缩,
vantui自定义上传组件封装、图片压缩上传、原创 2022-10-20 15:06:47 · 991 阅读 · 0 评论 -
vue+elementui上传组件自定义封装,包含上传前图片压缩,分页组件封装
上传文件自定义封装、分页组件自定义封装、上传文件新增与编辑原创 2022-10-20 14:42:31 · 1107 阅读 · 0 评论 -
Vue + Less + Css变量实现热换肤功能
Vue + Less + Css变量实现热换肤功能,自定义主题,一键换肤需求原创 2022-10-20 14:21:50 · 548 阅读 · 0 评论 -
viewer图片查看器限制在指定div中打开
代码】viewer图片查看器限制在指定div中打开。原创 2022-07-21 16:44:12 · 377 阅读 · 1 评论 -
数组对象根据条件删除某一字段数据、自定义组装数组对象数据、引入侧边模态框滚动内部内容不应滚动底层页面、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用、div横向滚动条位置放上面
1、数组对象根据条件删除某一字段数据js逻辑:2、自定义组装数组对象数据3、引入侧边模态框滚动内部内容不应滚动底层页面vue项目main.js文件注册全局方法4、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用......原创 2022-06-24 16:36:45 · 260 阅读 · 0 评论 -
vue项目列表页搜索条件、列表排序、分页进入详情页缓存问题
无封面原创 2022-06-01 17:12:20 · 771 阅读 · 0 评论 -
elementUI表格二级目录展示,自定义图标展开与收起
收起:展开:followListData数据格式:<el-table :data="followListData" ref="table" :row-class-name="tableRowClassName" style="width: 100%" > <el-table-column type="expand"> <templ...原创 2022-05-25 18:04:23 · 2014 阅读 · 1 评论 -
element UI日历组件自定义操作设置农历、阳历、节日展示、单日操作
图例:自定义calendar.js,其他页面直接引入就可以/*** @1900-2100区间内的公历、农历互转* @charset UTF-8* @Author Jea杨(JJonline@JJonline.Cn)* @Time 2014-7-21* @Time 2016-8-13 Fixed 2033hex、Attribution Annals* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug* @T.原创 2022-05-20 18:14:18 · 4678 阅读 · 2 评论 -
moment.js获取日期
npm install momentmain.js文件全局引入moment.jsmain.js文件Vue.prototype.$moment = moment其他页面引用console.log('今天:' + this.$moment().format("YYYY-MM-DD"))console.log('昨天:' + this.$moment().subtract(1, 'days').format("YYYY-MM-DD"))console.log('明天:' + this..原创 2022-05-20 17:52:41 · 1692 阅读 · 0 评论 -
vue循环背景图:style引用
<div :class="{ gradePicActive: detailNum== item2.label }" :style="{ 'background-image': `url(${require('../../assets/' + item.url + '.png')})`, }" .原创 2022-05-20 17:00:26 · 371 阅读 · 0 评论 -
vue项目路径别名配置、ngnix反向代理配置、代码压缩配置、浏览器favicon.ico配置汇总
根目录下创建vue.config.js文件const { defineConfig } = require('@vue/cli-service')const CompressionPlugin = require('compression-webpack-plugin'), zlib = require('zlib')module.exports = defineConfig({ productionSourceMap: false, transpileDependencies: tr原创 2022-05-19 16:06:12 · 213 阅读 · 0 评论 -
vue项目自定义复选框、引用vuetify组件相关的一系列问题汇总、日期组件、表格组件
图例:一、<template><div class="moreSelect"> <div class="moreSelectLi" v-for="(item, index) in riskDataList" :key="index" :class="{ liActive: checkedGroup.includes(item.v原创 2022-05-19 15:50:57 · 790 阅读 · 0 评论 -
一维数组对象根据对象中的某个字段组装三维数组,三维数组扁平化成一维数组
一初始数组格式:firstArr = [{titleCode:'101',aa:111},{titleCode:'102',aa:222},{titleCode:'103',aa:333},{titleCode:'104',aa:444},]期望数据格式:finaArr = [{name:'名字1',orign:[{titleCode:'101',aa:111,orign:[{titleCode:'102',aa:222}]}]},{name原创 2022-05-19 15:42:01 · 342 阅读 · 0 评论 -
ie浏览器、低版本火狐浏览器兼容问题汇总
一、兼容es6语法1、安装babel-polyfillnpm install babel-polyfill2、在src/main.js最上面第一行代码引入import 'babel-polyfill'二、兼容.finally方法npm install promise.prototype.finally --save然后在src/main.js文件中引入require('promise.prototype.finally').shim()三、滚动条样式兼容,隐藏滚动原创 2022-05-19 15:05:23 · 1501 阅读 · 0 评论 -
判断是否有权限。根据传入的权限标识,查看是否存在于用户的权限标识集合内。
首先,新建一个perTest.js文件const limitListGroup = window.permisListAll || []//收集到的权限数组/** * 判断是否有权限。根据传入的权限标识,查看是否存在于用户的权限标识集合内。 */export default function hasPermission(perms) { let hasPermission = false for (const item of limitListGroup) { if (ite原创 2022-05-19 14:37:23 · 274 阅读 · 0 评论 -
vue项目引用elementui侧边栏导航 后端返回路径数据 bus传参 侧边栏收缩展开其他页面echarts图实时刷新问题
图例:<template> <div style="min-height: 900px"> <el-menu :collapse="isCollapse" default-active="1" class="el-menu-vertical-demo menuStyl" active-text-color="#0b41cd" text-color="#303133" >原创 2022-05-19 14:28:19 · 427 阅读 · 0 评论 -
Vue项目axios自定义封装请求
1、首先,安装axiosnpm install axios2、自定义request.js文件import axios from 'axios'// 环境的切换if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = process.env.VUE_APP_SERVER_URL //开发环境} else if (process.env.NODE_ENV === 'debug') { axios.原创 2022-05-19 14:07:21 · 490 阅读 · 0 评论 -
vuetify表格自定义拖拽排序
图例:1、首先安装sortablejsnpm install sortablejs2、页面引入<template> <div id="standardAssay"> <div class="tabListOne"> <v-card class="mx-auto"> <div class="tableTitle"> <div class="title..原创 2022-05-19 13:49:58 · 747 阅读 · 0 评论 -
echart环形图图例位置自定义设置
图例:示例代码:patientDistri5(valData, newColor) { const option = { tooltip: { trigger: 'item', textStyle: { color: '#333', fontSize: 14, fontWeight: 'normal' }, for.原创 2022-05-19 13:31:21 · 3826 阅读 · 0 评论 -
vue项目数据循环渲染echarts图 数据为0不显示
图例:1、首先安装echartsnpm install echarts --save2、然后在main.js文件中引入echarts//main.jsimport * as echarts from 'echarts'Vue.prototype.$echarts = echarts //全局注册echarts3、现在,其他页面就可以正常引用了//echartsData.vue<template><div class="modelRiskSt.原创 2022-05-19 12:02:13 · 1288 阅读 · 0 评论 -
前端vue项目实现3/4圆环图
示例图:悬浮名字显示鼠标悬浮文献出处显示鼠标悬浮圆环显示一、自定义组件CircleData.vue<template> <div class="hemp-circle"> <svg viewBox="0 0 100 100"> <defs v-if="isGradient"> <linearGradient :id="id" x1="10%" y1="45%" x2="50%" ...原创 2022-05-18 14:50:35 · 1318 阅读 · 0 评论 -
VSCode 保存、自动格式化时ESLint 配置不生效
1、问题描述VSCode 中安装了 Prettier 和 ESLint 插件,在项目中使用了.eslintrc.js文件规范项目代码。但是保存代码时格式化并不是按该文件的配置而是按 Prettier 的配置2、当前项目.eslintrc.js文件是单独文件解决:1、首先打开vscode,在vscode的设置扩展中安装eslint插件;3、查看下面截图,按步骤1、2、3、4执行操作,即可配置成功。点击左下角设置,弹出设置,点击右上角3位置,弹出Settings.json 文件,修改,代码..原创 2022-05-18 15:14:23 · 7394 阅读 · 1 评论 -
鼠标悬浮显示二级菜单
示例图:鼠标悬浮显示二级菜单//css.downAlls{ color: #fff; font-size: 14px; cursor: pointer; position: relative; } .ineerList{ position: absolute; left: -20px; t.原创 2022-02-16 16:08:50 · 838 阅读 · 0 评论 -
前端实现半圆进度条数据动态展示js
效果图示例:html代码:<div class="bigBox"> <div class="box1">100</div> <div class="box2"></div> <div class="box3"><span class="smallBorder"></span></div></div>css代码:.box2{ box-si.原创 2022-01-05 18:12:01 · 1481 阅读 · 1 评论 -
js获取地址栏参数方法
getQueryString = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return ''; }获取地址栏参数:let aab= th.原创 2021-12-20 14:05:29 · 863 阅读 · 0 评论 -
tab切换实现锚点动画定位
一、需求demo示例二、html部分代码,css自己书写<div class="tableul"> <div class="tableli" v-for="(item, index) in allMenuList" :key="index" :class="{tableliActive:tabNum==item.id}" @click="signTable.原创 2021-12-20 13:24:41 · 660 阅读 · 0 评论 -
悬浮标题栏,滚动后悬浮栏置顶
一、html部分<div class="fix-btn" :style="sidebarWith==200?'left:210px;':'left:76px;'"> <div style="display: flex;flex-direction: column"> <div style="font-size: 14px;color: #333;font-weight: normal"原创 2021-12-17 17:37:46 · 659 阅读 · 0 评论 -
js实现签署倒计时功能
<i-button type="primary" shape="circle" @click="againSign" :disabled="!timeFlag" style="width: 200px">{{btnText}}</i-button><script> new Vue({ el: '#app', data: function() { return{ bt..原创 2021-12-16 15:07:29 · 283 阅读 · 0 评论 -
jquery实现鼠标hover锚点定位
一、html结构<div style="display: flex;height: 800px;border: 1px solid red;"> <div style="width: 70%;height: 800px;border: 1px solid salmon;overflow: auto;"> <div :id="item.id" v-for="(item,index) in idlist"原创 2021-12-16 14:49:41 · 912 阅读 · 0 评论 -
react自定义实现tab切换功能
getTabList = () => { const { zlDOList } = this.state //tab头部数据 return zlDOList.map((item, index) => { return ( <div className={this.check_title_index(index)} onClick={() => this.leftTabActive(item.原创 2021-12-16 13:45:37 · 1276 阅读 · 0 评论 -
react实现滚动分页、前端分页、后端分页
一、html结构<div className="topSearch"> <Input placeholder="患者姓名、病历号" value={textValue} allowClear style={{ width: 312 }} onChange={e => this.setState({ textValue: e.target.value,nums: 1,showData: JSON.parse(JSON.stringify([]原创 2021-12-16 13:25:19 · 3338 阅读 · 0 评论 -
前端js根据html代码使用canvas生成图片
图片示例:实现点击保存下载弹窗内容生成图片html2canvas下载地址html2canvas 保存按钮事件: <i-button type="primary" @click="savePic" style="width: 100px">保存</i-button>savePic: function(){ var _this = this; var width = $('.picStyleMain')[.原创 2021-10-21 11:07:56 · 1340 阅读 · 0 评论 -
前端js实现页面生成word下载、打印功能引用jQuery.print.js
示例如图:一、首先,我们使用jQuery.print.js辅助开发:下载地址:GitHub - DoersGuild/jQuery.print: Easy to use, Element Printing Plugin for jQueryhtml代码:<div id="wordStyl" style="background: #fff;margin: auto;"></div>下载事件:<i-button type="default" style="wi.原创 2021-10-21 10:50:16 · 2195 阅读 · 0 评论 -
echarts饼图相关配置及效果展示
const valData= { xAxis: [], series: [{ data: [{ name: item.typeName, value: item.ylFee, feeRatio: item.feeRatio, circleRatio: item.circleRatio }] }] }; //数据格式getTotalCiclePic = (valData) => { const series = valData.series let newPie...原创 2021-10-19 15:16:49 · 442 阅读 · 0 评论 -
echarts图表实现预测数据展示,前段数据显示实线,后段数据显示虚线,柱状图图表效果在底部
如图:import _ from "lodash"valdata的数据我未展示,数据格式为:valdata = [ {aaa:111},{bbb:222},{ccc:333},{ddd:444},{eee:555},{fff:666}]getCaseNumberPic = (valData) => { var _this = this const xAxis = [] valData.forEach(function (o.原创 2021-10-19 15:01:02 · 1528 阅读 · 0 评论 -
echarts图表tooltip内部实现事件传参效果
图片效果:tooltip内容可点击并且可实现动态传参,常见场景为散点图x与y轴值相同导致点重叠引发的问题:newInnerText方法在全局没有,所以一定需要将newInnerText方法注入全局才行,(重要)constructor(props) { super(props); window.newInnerText = this.newInnerText.bind(this) //非常重要,该代码代表此方法已注入 this.state = { .原创 2021-10-19 14:38:02 · 1168 阅读 · 0 评论 -
echarts图表相关配置问题整理、自定义图表滚动条样式、x轴label竖直显示、自定义toolltip内容及样式、tooltip位置自适应、图表无数据引用自定义图片、浏览器窗口变化图表自适应更新等
自定义echarts图表滚动条样式:代码:图表的html格式为:<div className="medicFeeStyl"> <div id="medicFeePic" style={{ width: '100%', height: '100%' }}></div> <div id="noDataImg6" style={{ width: '100%', height: '100%', display: 'flex', justif.原创 2021-10-19 14:13:33 · 652 阅读 · 0 评论