- 博客(74)
- 收藏
- 关注
RSS订阅原创 vue amap（高德地图）
本文示例参照官方文档自定义信息窗口效果：安装依赖npm i vue-amapindex.html添加 <script src="//webapi.amap.com/maps?v=2.0&key=自己注册的KEY"></script> <!--引入UI组件库（1.1版本） --> <script src="//webapi.amap.com/ui/1.1/main.js"></script>HTML部分<d
2022-01-12 17:40:14
766
原创 vue luckysheet使用
安装luckySheet同时使用了npm和CDN链接，单使用npm在导入excel文件时会在执行luckysheet.create方法时有luckysheet undefined的问题（这种方法可能会导致重复引用吧）npm 安装npm install exceljsnpm install luckysheetCDN引入（1） 引入的官方项目下的expendPlugins文件夹,下面包含两个文件（2）在public下的index.html文件放入以下内容<link rel='sty
2021-12-24 16:16:01
2723
4
原创 跨窗口通信（Broadcast Channel）
1. Broadcast Channel(只要是在同一原始域和用户代理下)发送信息页面const bc = new BroadcastChannel('kevin')bc.postMessage('hhh')接受信息页面let clickChannel = new BroadcastChannel('click')clickChannel .onmessage = (e) => { console.log('e :>> ', e)// 发送的数据}2.
2021-09-10 10:57:39
740
原创 element dialog messageBox 点击遮罩层不消失 全局配置
// dialogElement.Dialog.props.closeOnClickModal.default = false// MessageBoxElement.MessageBox.setDefaults({ closeOnClickModal: false})
2021-09-09 12:45:27
1302
原创 element tree相关操作
1. 在严格模式下 勾选根节点，选择所有子节点，再次点击取消点击前点击后<el-tree @check-change="checkChange" node-key="id" :props="defaultProps"/> /** * @description: 节点选中状态发生改变 */ checkChange(data, self, children) { // 获取选中数据 var temp = this.$refs.t
2021-09-06 08:53:26
208
原创 修改svg大小
svg返回的格式 是一个链接 (拼上http://localhost:8080就可以访问) /dev-api/vd/pic/allowAuth/download/7b9fbc3505b158ef9f46d535e73bf2092. 用ajax请求一下图片，拿到返回值// 先引用一下import axios from 'axios'// 请求图片axios.get('/dev-api/vd/pic/allowAuth/download/7b9fbc3505b158ef9f46d535e73.
2021-07-21 16:48:39
2261
原创 vscode 格式化代码（eslint + Prettier - Code formatter）
插件setting.json"editor.formatOnType": true, //保存时自动格式化"editor.codeActionsOnSave": { "source.fixAll.eslint": true // 替代的是 "eslint.autoFixOnSave": true },
2021-07-05 10:49:03
266
原创 element ui 固定列的长度
当固定列宽度为100% 时，固定列下的滚动条 无法拖动当固定列宽度为100% - 滚动条高度， 其他分辨率时，固定列会短一截。.el-table__fixed { height: 100% !important; pointer-events: none; .el-table__fixed-body-wrapper{ pointer-events: all }}...
2021-07-02 11:01:13
562
原创 JS 关于树的操作 查找所有子节点，找出某一节点的父节点
1. 获取全部子节点（广度优先）VUE代码// 数据data: [{ id: 0, label: '0级', children: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9,
2021-06-17 08:47:24
2477
原创 JS简写方法
多个if条件if( x === 'a' || x === 'b' || x === 'c'){}// 简易写法if (['a', 'b', 'c'].includes(x)) {}判断条件下 给变量赋值true 或者 falselet test = fasle;if (x > 5) { test = true;} else { test = false;}// 简写方法let test = (x > 10) ? true : false;// 或者写为l.
2021-04-15 09:13:26
474
原创 vue 文件上传和下载（blob）
文件上传请求// 上传文件接口export function upFile(data) { return request({ url: '/ruo/file/upload', method: 'post', data })}代码 // 创建一个formData对象 var formData = new FormData() formData.append('file', form.file) // 上传接口
2021-04-14 15:31:57
1939
原创 常用的正则表达式
正则表达式常用正则表达式：用处表达式数字和字母/^[A-Za-z0-9]+$/数字/^[0-9]+$/汉字/^[\u4e00-\u9fa5]+$/数字、字母和字符/^[A-Za-z0-9-_#&^+=[]——/∗.]+\\/*.]+/∗.]+/ ( 字符：-_#&^+=[]——\\/*.]+ /∗. )只能输入字母和数字和 / ./[^\w./]/ig只能输入字母和数字和 //[^\w/]/ig...
2021-04-13 15:21:59
107
原创 React proxy
1.第一步:创建代理配置文件在src下创建配置文件:src/setupProxy .js2.编写setupProxy.js配置具体代理规则:const proxy = require( ' http-proxy-midd 1eware " )module.exports = function(app）{ app.use( proxy('/api1'，{// api1是需要转发的请求(所有带有/ api1前缀的请求都会转发给5000) target: 'http:/ /1ocalhost
2021-01-19 14:00:26
129
转载 vue 滚动条样式和鼠标离开自动回到顶部
1. 滚动条样式详细讲解 /*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {width: 8px; /*对垂直流动条有效*/height: 8px; /*对水平流动条有效*/}/*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5); background-co
2021-01-06 11:44:06
305
原创 JavaScript 日期对象比较
1. 日期格式不能直接判断相等（年-月-日）但可以比较大小。const d1 = new Date('2019-06-01');const d2 = new Date('2018-06-01');const d3 = new Date('2019-06-01');d1 === d3; // falsed1 == d3; // false判断方式：用toString()或者valueOf()。日期对象的toString()方法将日期转成 ISO 日期字符串形式，valueOf() 方法则将
2021-01-05 09:02:41
560
原创 Util.js
1. 类型检查const isOfType = (() => { // create a plain object with no prototype const type = Object.create(null); // check for null type type.null = x => x === null; // check for undefined type type.undefined = x => x === undefined; //
2021-01-04 16:15:21
543
原创 vue 事件修饰符（stop、 .capture 、.self、.prevent、.once）
stop：阻止冒泡事件。即：放在谁上，就从谁开始不冒泡（放在被点击的元素身上，自身的点击事件会触发）。capture：捕获触发机制。即：无论点击谁，先触发带有capture的。self：自身不参与冒泡事件。即：冒泡事件照常进行，带有self的不参与。prevent：阻止默认事件。once：只触发一次事件。即：阻止默认事件，就阻止一次、div的click事件就只执行一次。<!DOCTYPE html><html><head> <meta ch.
2020-12-30 11:29:23
451
原创 css 伪元素 content使用
效果图点击之前点击之后1. CSS.menuTitleStyle::after{ content: attr(data-num); width: 25px; height: 25px; display: block; background-color: orange; border-radius: 50%; position: relative; text-align: center; color
2020-12-29 11:36:42
378
原创 vue props emit 的使用
一、父页面引用//引用一import menuTitle from '../../../components/menuTitle/main';export default { name: 'parent', //引用二 components:{ menuTitle }, data(){ return{ menuTitle:"够忙高管理", //父组件要传给子组件的值 } }, methods: { titleAdd(num){
2020-12-29 09:57:44
139
原创 echarts5.0 x轴为时间轴（time），按6小时 12小时 24小时分割
如图一：6小时分割 intervalNum =12xAxis: { type: "time", min:min, max:today, //today为当前时间按小时取整。 如14:00 show: true, minInterval: 3600 * intervalNum * 1000, //12 axisLabel:{ show:true, s
2020-12-18 14:53:47
10032
3
原创 伪元素（:after :before） content 使用阿里巴巴矢量图标
1. 将图标添加至自己的项目2. 将截图中的@font-face代码放在自己的css中，然后点击箭头所指向的位置3. 将箭头所指代码前面加\放在伪元素的content中，4. 具体代码（箭头所指代码 必须添加）
2020-12-10 15:39:33
2925
1
原创 Vue
查看VUE版本npm list vuevue 脚手架npm install -g @vue/cli常用语法1. style // style里面支持驼峰式 和 横杠式 <div :style="{ fontSize: fontSize + 'px',background-color:'pink';}"></div>// 存在多个style 可以用数组方式写style="[baseStyles, overridingStyles]"2. vue
2020-12-08 14:49:37
80
原创 CSS Grid 网格布局
1.容器属性(父元素)//display 属性display: grid/inline-grid; //网格布局//grid-template-columns 属性， grid-template-rows 属性//写法一grid-template-columns: 100px 100px 100px; //每一列的宽度 单位可以为px,%grid-template-rows: 100px 100px 100px; //每一列的高度注意:当元素设为网格布局以后，容器子元素(项目
2020-11-16 15:06:12
124
原创 CSS Viewport （视口）单位
类型视口单位为：vw（视口宽度），vh（视口高度），vmin和vmax。视口单位基于页面的根元素，百分比则基于它们所在的容器1. vw（视口宽度）vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%2. vh（视口高度）vh单位表示根元素高度的百分比，一个vh等于视口高度的1%。3. Vmin (宽和高哪个小取哪个)vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。4.Vmax （宽和高哪个大取哪个）vmax与vm
2020-11-16 13:58:34
378
原创 Flutter启动项目一直处于Running Gradle task ‘assembleDebug‘...
问题原因：连接超时解决方案：修改flutter安装位置下的flutter.gradle(路径为：F:\flutter\packages\flutter_tools\gradle)ps:路径是我自己的路径。从packages开始路径一样修改为图中内容需要添加的代码 maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/reposito
2020-11-13 17:27:00
741
原创 下载，运行flutter gallery项目
项目演示地址演示地址下载地址下载地址运行项目执行flutter channel master(要等一段时间) 之后在执行 flutter upgrade执行flutter channel stable 之后在执行 flutter upgrade
2020-11-13 17:06:12
199
原创 vue报错Cannot read property ‘_wrapper‘ of undefined （nextTick）
错误是 @click="…" 的方法没有在 methods 中定义。
2020-11-04 10:41:44
233
原创 vue 页面刷新 provide inject
vue 单页面刷新方法一（ provide inject ）路由跳转（不太推荐使用。本质就是跳转空白页之后再回来，地址栏会有一个快速的切换）方法一（ provide inject ）修改app.vue中的代码//HTML 部分//原本<router-view />//修改之后<router-view v-if="isRouterAlive"/>//JS 部分export default { name: "app", //provide是需要添加的部分
2020-10-15 11:27:41
211
1
原创 echarts从y轴最小值显示 求助！！！！
设置最小值之后，就会有问题如果写为min:'90%',就不会有问题，但是纵坐标就不显示了有说版本问题的，但是我的版本是4.9.0的啊 yAxis: [ { type: 'value', min:95, max:100, splitLine: { //网格线 lineStyle: { .
2020-09-27 16:07:07
1322
原创 el-table改变窗口大小的时候，不出现滚动条（自适应）
在每一列上加最小宽度min-width="5% 剩余空间会自动分配 <el-table-column prop="roomName" label="车间" min-width="5%"> </el-table-column> <el-table-column prop="carType" label="车型" min-width="5%"> </el-table-column>..
2020-09-23 10:05:52
2438
原创 element-ui select 下拉选位置不对（样式错乱）
问题描述（距离过远）解决方案一(我的问题使用此方案未解决)网上普遍使用popper-append-to-body=“false”这个属性，加在select上面，再修改样式，并且给样式加上!important即可解决方案二检查元素的时候发现，input过于高了，影响到弹出层的位置修改样式代码 /deep/.el-select>.el-input{ height: 100px!important; }...
2020-09-22 14:52:38
3725
原创 @media 查询 使用
Media参数width:浏览器可视宽度。height:浏览器可视高度。device-width:设备屏幕的宽度。device-height:设备屏幕的高度。orientation:检测设备目前处于横向还是纵向状态。aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)device-aspect-ratio:检测设备的宽度和高度的比例。color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥
2020-09-03 17:35:24
136
原创 缩放比例 页面缩放 自适应布局（布局不变）vue
1. 阐述问题 ：搜索框组件（日期选择器，input ，搜索按钮）在100% 125% 150%这三个比例下，日期选择器的大小不变。（日期选择器用的element-ui的 el-data-picker,搜索框组件布局用的栅格）思路来源跳转链接2. 组件样式.input-z-index { //搜索框组件 最外面的div z-index: 9999; min-width: 780px; //原本写的是 width：780px; margin-right
2020-08-26 17:55:22
9470
原创 页面自适应（media）
问题阐述下面这个图片中的菜单，在不同分辨下，需要改变间距。1.min-width这个值应该是屏幕可见的宽度/* Medium devices (landscape tablets, 768px and up) */@media only screen and (min-width: 768px) { .avue-top .el-menu-item { margin: 0 3px; padding: 0 35px; border-bottom: 1px s
2020-08-06 20:21:12
174
原创 echarts两种背景色（隔行不同）
效果图重点属性X轴为时间轴，type类型为timemarkArea用来区分后面背景颜色（markArea写在serize里面，想要几个色块，serize下面就有几个对象）图片中的正常异常文字是markArea的label当有一个轴为时间轴的时候，数据要按时间排序，否则存在潜在问题（折线图会有问题）如果使用时间轴，尽量设置时间轴的最大时间和最小时间，该表max和min为时间戳代码（放在官方示例就可以运行的）官方示例页面链接：点击我使用方法：删除原来所有代码，将下面代码CV操作即可le
2020-08-06 20:08:32
3234
原创 vue echarts 动态数据（watch监听）
watch: { //监听的变量名 S1Data(val) { this.S1Data = val this.myEcharts3(); }, RData(val) { console.error(val) this.Rdata = val this.myEcharts3(); } } //data中的变量名 Rdata:['01日','02日','03日
2020-07-07 13:36:09
4162
原创 vue hightCharts使用（直接使用请求回来的真实数据，不用动态改值）
官网的链接（我是从官网看到的使用的方法）由于本人实在太笨，没看懂网友的方法，就采用了以下的方法import语句如下import Highcharts from 'highcharts';具体实现代码 //请求（我写在了created里面） getRightX().then(response => { //请求回来的数据 //console.log(response) let Highcharts
2020-06-29 14:26:20
371
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人