_小太子-CSDN博客

原创 vue 的报告页面，生成pdf，使用html2canvas ，下载pdf格式文件。多页分页下载

vue 将页面转换成pdf 并下载。分页下载页面

2024-04-17 16:25:06 456

原创 vue 下拉选择框点击外部关掉下拉弹框

最核心的逻辑就是上面了。接下来就是封装成一个指令，专门处理这种，点击元素之外触发某种操作。这里封装一个，的指令，绑定指令的元素，表示点击元素之外的地方就会执行相应的函数。// html那边 <div v-click-outside="hidePanel" ref="selectBox" class="select-box" >

2024-03-07 10:12:20 504

原创 echarts tooltip 提示框阴影设置

【代码】echarts tooltip 提示框阴影设置。

2023-12-18 17:26:49 639

原创 Echarts Y轴自定义设置图片

如图Y轴有文字和图片，1-3的图片不同，后面的是特定的css 样式；

2023-12-13 17:41:59 365

原创 js 数组按指定长度截取

【代码】js 数组按指定长度截取。

2023-12-11 09:13:42 251

可以获取当前窗口显示的放大比例，也称为设备像素比 (devicepixelratio)。这通常用于处理高DPI (高分辨率)屏幕上的视图缩放。您可以使用window.devicePixelRatio 属性来获得当前设备像素比。在这个示例中，devicePixelRatio将包含当前窗口显示的放大比例。通常情况下，这人值将是1，表示没有缩放。在高DPI屏幕上，它可能是1.5、2或更高，具体取决于屏幕的配置,请注意，这个值是只读的，而且在某些浏览器中可能不支持。

2023-11-22 17:18:29 721

原创 css 写带三角形的对话框，空心的三角形边框

思路：利用元素的 border 属性，将其三个方向的 border-color 值设为透明色（或者和其父元素的背景色一致，形成视觉差，俗称障眼法），剩下一个方向的 border-color 的值即为你需求的三角形的颜色。span 画一个三角形，然后span 的伪类画一个和背景色一样的小一点点的三角形，摞在一起，注意一下z-index,然后就完成啦。首先，我们要会先实现一个小三角形；

2023-10-10 16:02:46 445

原创 echarts 轴文字内容太长导致显示不全解决方案

（这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。情况：Y轴内容是文字，内容太长可能会系那是不全。调整grid会导致短数据前的留白过于多。如果是数字，可将数字进行处理；axisLabel 的formatter 进行处理。首先可以配置grid自适应， containLabel 属性设置true。将文字设置超出部分显示省略号；

2023-09-20 15:08:43 2058

原创 dayJS 获取本周，上周，本月，上月，本季度，上季度日期

【代码】dayJS 获取本周，上周，本月，上月，本季度，上季度日期。

2023-08-30 09:45:48 1124

原创 vue Blob类型导出excel表格的下载

【代码】vue Blob类型导出excel表格的下载。

2023-08-29 09:11:18 232

原创 vue js 增强密码校验（数字，大小写，字母，特殊字符）

vue 新建用户密码的正则校验

2023-07-05 10:09:31 1209

转载炫酷的css边框动效

css 边框

2023-02-06 09:09:31 565

原创 vue 中使用 mixin (混入)

前言：如果写vue 组件的时候，发现几个组件的逻辑差不多类似，就可以使用 vue 的mixin混入,把类似的逻辑抽离出来封住成js ,然后各个组件引入使用。mixin就是用来解决vue组件逻辑复用的问题的。因为是针对js 逻辑的复用，所以一般都是js 文件。// name.jsexport default { data () { return { name: 'mixin的name', obj: {name:'mixin', value:'mixin'}

2022-05-18 11:38:49 1140

原创 input 选自动填充，去除浏览器自动填充后样式

自动填充后，本来黑色的背景色变白，字体变黑。input:-webkit-autofill { -webkit-text-fill-color: #fff; // 设置填充不变色 transition: background-color 50000s ease-in-out 0s; } input:-internal-autofill-previewed, input:-internal-autofill-selected { -webkit-text-fi...

2022-05-12 16:05:57 844

原创 echarts 的案例（Make A Pie）停用了

数据可视化技术分享-echarts热门组件 - Powered by Discuz!http://analysis.datains.cn/finance-admin/index.html#/chartLib/allPPChart - 让图表更简单EChartsDemo集MCChartseries-bar柱状图 - makeapie echarts图表可视化案例https://madeapie.com/#/分享你我 - ECharts 作品集前言：2

2022-05-09 17:03:43 806

原创 echarts设置上下限，折线超出部分，显示别的颜色

需求: 进出水设置了最大值最小值，监控实时数据，超出部分标红。visualMap视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。 visualMap: [ { top: 10, right: 10, show: false, precision: 1, seriesIndex: 0, ...

2022-05-09 16:52:19 2847

原创 git 切分支,拉分支代码

1.查看远程分支git branch -a $ git branch -a* master remotes/origin/longhua remotes/origin/master remotes/origin/quantian remotes/origin/release remotes/origin/release_2022-03-28 remotes/origin/workorder运行等到下面这些分支我们现在在分支master 下。2. 查看本...

2022-05-05 14:49:41 3646

原创 iviewui DatePicker 日期选择器限制选取时间跨度

需求：当前日期是 2022年4月27日，要求当天后的日期不可选，选中的日期跨度是4天，比如我选13号，13号前四天后四天是可选的，其余都不可选。vue + ivewUI<DatePicker ref="datePicker" type="daterange" @on-pick="onPick" class="ivu-ml-16" place...

2022-04-27 16:39:59 1921 3

原创 Echarts 仪表盘

<EChart height="300px" :option="option1" /> <div class="tipBox"> <div>正常分数 <div style="color: #22b8bc">95 ~ 100分</div></div> <div>黄色预警分数<div style="color: #ffce64">90 ~ 95分</di...

2022-04-27 09:37:27 1415

原创前端-sso单点登录方案

定义：单点登录就是指通过用户的一次性鉴别登陆，其他子项目在需要验证用户信息的时候，无需再做登录操作，自动识别登录。为什么要选择单点登录：就当一个项目下有三个子项目

2022-04-22 11:14:25 2925

原创 es6常用的写法

es6 在项目中的运用

2022-04-21 10:19:06 823

原创 sort排序

介绍： sort()：对数组的元素进行从小到大来排序（会改变原来的数组）如果在使用 sort() 方法时不带参，默认排序顺序是在将元素转换为字符串按照Unicode 编码，从小到大进行排序举例 1：（当数组中的元素为字符串时）let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];let result = arr1.sort(); // 将数组 arr1 进行排序console.log('arr1 =' + JSON.stringify(arr1).

2022-04-20 10:13:55 620

原创 forEach会不会修改原数组

forEach 的介绍：forEach()方法需要一个回调函数（这种函数，是由我们创建但是不由我们调用的）作为参数回调函数中传递三个参数：第一个参数，就是当前正在遍历的元素第二个参数，就是当前正在遍历的元素的索引第三个参数，就是正在遍历的数组注意：forEach() 没有返回值。也可以理解成：forEach() 的返回值是 undefined。即 let tempArry = myArr.forEach() 这种方式接收是没有意义的。forEach 能不能改变原数组...

2022-04-20 10:01:35 2369

原创波浪进度条

2022-04-19 14:51:23 199

原创 JS 的异步遍历

JS 的异步遍历

2022-04-19 10:27:17 642

原创前端基于x6 画流程图

前端x6运用

2022-04-13 10:27:51 2562 1

原创纯 css画小黄人

搬运的，实在是太可爱<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>drawLittleHuang</title> <link rel="stylesheet" type="text/css" href="index.css"></head><body> <div class="w.

2022-04-13 09:29:17 377

原创 css -动画按钮

按钮上的紫色会动的，不知道怎么上传动效<button>CSS 动画按钮</button>button { display: block; border: 0; color: white; cursor: pointer; border-radius: 26px; font-size: 20px; padding: 15px 25px; margin: 60px auto; box-shadow: 0 5px 10px rgba...

2022-04-12 11:39:04 472

原创 css 边框环绕动态效果

边框外面的线是会环绕动起来的，代码很简单，效果很酷哦<div></div>html,body { height:100%; background-color:#000;}div { width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #eee;}div::after,...

2022-04-12 11:35:20 4281

原创带箭头的对话框

<div id="app">气泡框</div>#app { position: relative; width: 150px; line-height: 50px; margin: 50px auto; border: 2px solid #39f; border-radius: 10px; text-align: center;}#app::before { position: absolute; right: 100%;...

2022-04-12 11:28:28 206

原创设置一行超出，变省略号，用 overflow hidden 会向下偏移

这样设置之后，后面的两个span会向下偏移一定距离实际上就是inline-block元素的默认baseline和其下外边沿的距离。常用的解决方法是为上述inline-block元素添加vertical-align: bottom。

2022-03-21 20:49:05 247

原创帆软iframe 嵌套页面，dom操作

// 显示帆软的查询组件的时候，动态控制是否显示 this.$nextTick(() => { const iframe = window.frames.iFrame const handleLoad = () => { setTimeout(() => { const Do = (iframe.contentWindow ||...

2021-09-23 14:20:25 1482 1

原创前端处理后台返回的json 文件下载

async inspectionResultBinDingData(data, errorMessageMode = 'Notice') { const response = await ajax.request({ responseType: 'blob', errorMessageMode, url: `/api/SI/inspectionRecordExport/inspectionResultBinDingData`, method: 'p..

2021-09-15 16:57:01 841

原创 dayjs 算时间差diff

npm install dayjs --savedayjs(endTime).diff(dayjs(startTime), 'years') dayjs(endTime).diff(dayjs(startTime), 'months') dayjs(endTime).diff(dayjs(startTime), 'days') dayjs(endTime).diff(dayjs(startTime),'minutes' ) dayjs(endTime).diff(dayjs(.

2021-08-31 16:36:44 18951

原创 vue版本更新流程样式

<template> <div class="versioMnanagement"> <div class="met-log-body"> <ul class="met-log-list"> <template v-for="(item, index) in dataList"> <h2 class="year" :key="ind...

2021-08-18 15:25:42 241

原创 Vue 对象数组中一项数据改变，页面不更新

问题描述：将data中数据列表渲染到页面，v-for，点击页面中点击后数组中某项值改变，但是页面不更新，Vue 不能检测数组和对象的变化。方法1：重新赋值，this.data=Object.assign({},this.data);方法2：this.$set(this.tableData, i, this.tableData[i])...

2021-08-11 10:52:44 814

原创 echarts 设置平均线，警戒线markLine属性

option = { title: { text: '一周水质处理量', subtext: 'm³' }, tooltip: { trigger: 'axis' }, legend: { data: ['最大水处理量', '最少水处理量'] }, toolbox: { show: true, feature: { dataZoom:.

2021-08-06 11:32:26 5960 1

原创多维数组展平

[1,2,[3,[4,[5,[6,[7,[8,[9]]]]]]]]遇到这种变态的多维数组结构也是头疼，需要自己展平整成一位数组；const flatten1 = arr => { return arr.reduce((res, cur) => { // 如果当前项cur为数组，就继续递归展平 if (Array.isArray(cur)) { // 返回新数组包括展开的原数组元素和新展平的数组元素 re

2020-07-28 14:14:24 687

原创前端展示用户名-手机号加密特殊处理

1.用户只保留姓后面打星号，或者前面型号只保留最后一个字。方法一：利用substr 对字符串进行截取**，封装成函数function formatName(name) { let newStr; if (name.length === 2) { newStr = name.substr(0, 1) + '*'; // 通过substr截取字符串从第0位开始截取,截取1个 } else if (name.length > 2) { // 当名字大于2位时 ..

2020-07-23 10:46:41 2621

原创 css 使用径向渐变实现卡券效果

使用伪元素实现（Less 版本）.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) { position: relative; box-sizing: border-box; padding: 0 @r; width: @width; height: @height; background-clip: content-box; background-color: @col...

2020-07-06 17:27:45 490