- 博客(102)
- 收藏
- 关注
原创 若依框架->tag标签滚动条样式如何适配火狐浏览器
伪类选择器 ::-webkit-scrollbar无法适配火狐浏览器内核,导致滚动条无法隐藏。以下代码在火狐浏览器不生效;火狐浏览器tag出现样式问题:无法显示全部。
2023-08-31 10:42:54 663 1
原创 vue 使用Object.defineProprety将普通对象转化为可观测对象
/** * 把一个对象的每一项都转化成可观测对象 * @param { Object } obj 对象 */ function observable (obj) { if (!obj || typeof obj !== 'object') { return; } let keys = Object.keys(obj); keys.forEach((key) =>{ defineReactive(obj,key,obj[key]) }).
2022-03-23 11:13:35 1489
原创 if 某值什么情况下返回false
逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么if判断 false ,其他为true
2022-03-03 09:42:35 964
原创 Vue 自定义主题、logo如何监听其变化及实时更新(Vuex状态管理)
官网地址:Vuex官网首先了解Vuex,下面内容不具体描述Vuex基础知识。问题描述:在项目中遇到需求:自定义系统的logo、title、主题颜色等,此时修改这些系统配置时会涉及到同步更新问题。例如在系统配置管理页面更新系统logo,则系统logo自动更新。(意思就是在vue项目中更新logo写在A组件,logo在B组件,A中logo值发生改变,无法实时更新B中logo,需要使用vue提供的vuex技术)Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应.
2021-12-27 16:17:39 1064
原创 如何让多个div横向排列而不换行以及位置偏移问题
设置两个div为inline-block。<div style="width: 100%"> <div style="white-space: nowrap; width: fit-content"> <div class="title-style"> <span>xxx</span> </div> <div style="display: inline-block;">
2021-12-23 14:03:54 562
原创 常用git指令
拉取服务器上最新资源git pull更新所有文件git add . git commit -m "注释" //上传到本地 git pushgit上已经新建了远程的新的分支,但是vscode依旧显示原来的分支,新建的找不到,使用这个命令即可显示。git remote update origin --prunepush(推送)后,如何撤回?执行git reset --hard 【版本号】 执行git push origin 【分支如:dev】 --force切换分支git
2021-12-20 14:25:26 102
原创 溢出隐藏overflow: hidden 与 CSS3 box-shadow 阴影冲突问题
css给div四个边框添加阴影_微若轻澜的博客-CSDN博客_边框加阴影
2021-12-15 13:34:58 5241 3
原创 对象深拷贝方法
/** * 对象深拷贝 */export const deepClone = data => { var type = getObjType(data) var obj if (type === 'array') { obj = [] } else if (type === 'object') { obj = {} } else { // 不再具有下一层次 return data } if (type === 'array') { .
2021-12-07 14:50:23 173
原创 vue 点击按钮实现复制粘贴功能 vue-clipboard2
官方文档:https://vue-clipboard2.inndy.tw/配置:import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)代码(基于elementui表格):<template> <div> <span class="form-title">请求URL:</span> <el-table...
2021-11-24 13:14:48 981
原创 vscode不显示git的远程分支
git上已经新建了远程的新的分支,但是vscode依旧显示原来的分支,新建的找不到,使用这个命令即可显示git remote update origin --prune
2021-11-22 09:46:10 1279
原创 VUE CodeMirrorr+json-lint实现可编辑的Json-Editor组件 动态调用多次时出现格式错误问题
在不同的Tab下都调用了json编辑组件,导致第二个页面json格式变成:解决方法:在配置项中添加:autoRefresh: true 需要刷新代码:<template> <div class="json-editor"> <textarea ref="textarea" /> </div></template><script>import CodeMirror from 'code...
2021-11-03 10:28:00 1780
原创 js浅拷贝
for(let i in temp) { this.outPutData.push(Object.assign({},temp[i]))//将值进行浅拷贝}
2021-10-25 17:24:59 103
原创 js 动态向数组中添加对象变量
数据格式:records的数据需要动态加入满足以下格式{ "code": 0, "msg": null, "data": { "records": [ { "id": 1, "name": "xxx", "updateTime": "2021-01-01 00:00:00" } ], .
2021-10-25 17:23:37 1725
原创 vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题
在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示,因为elementui导航样式默认:.el-menu--collapse .el-menu .el-submenu, .el-menu--popup { min-width: 200px;}需要动态改变min-width的值。解决:一开始考虑通过css动态改变样式的方法,设置this.$el.style.setProperty("--width",this.width);给变量赋值,但是由于elementui
2021-10-11 16:06:40 3159 2
转载 VUE Axios取消请求 - CancelToken
铺垫 Axios 是一个基于 Promise 的 HTTP 库,它的浏览器支持性良好,是Vue主推请求异步的方法;它支持多种请求的简写和请求参数的配置,也支持使用自定义配置新建一个axios实例,举例如下const request = axios.create({ baseURL: 'https://domain-name.com/api/' timeout: 8000}) 其中,create()方法中是自定义的初始化配置参数。初始化数据除此之外,通常还会设置拦截器,实现h
2021-09-06 13:27:13 3558
原创 vue + elementUI 表单重置方法 (针对未绑定prop无法使用resetFields的情况)
正常使用el-form组件resetFields方法可重置表单内容,但由于存在新增属性未绑定到prop,无法通过resetFields方法重置,可使用this.$options.data(),会清除新增属性。 this.$options.data() // 整个data全部重置 this.form = this.$options.data().form // 重置data中的 某个form表单...
2021-08-16 14:24:09 782
原创 el-select 选中其中一项所有项都被选中的bug 使用整个对象作为value值
选择整个item对象作为value值,此时必须设置value-key.<el-select :disabled="item.disabled" v-model="dataForm[item.model]" :placeholder="'请选择'+ item.label" v-if="item.type === 'selectItem'" @change="changeHandle($event,item.model)"> <el-option ...
2021-08-03 14:00:42 3939
原创 vue 吸顶效果,开始随页面滚动,滚动到指定位置固定在顶部或者固定在指定位置
首先找到需要加吸顶的元素加上id和样式我这里是给页面左侧导航加吸顶,在外层div加id,里层div加样式<div class="asset-main-wrapper" id="menuFlag"> <el-row class="asset-main-wrapper-part"> <el-col :span="4" > <div :class="whether ? 'isFixed' : ''"> <el-row>
2021-07-26 09:51:31 6020
原创 elementUI el-select allow-create属性 创建新条目时限制输入字符长度
el-select允许输入创建新tag,限制新tag输入字符长度官方文档思路:自定义验证规则,循环遍历绑定数组,逐个判断是否满足。核心代码 验证部分 // 验证标签长度let tagslength = (rule, value, callback) => { if (value.length == 0) { callback(new Error('至少输入一个标签')) } else { var show = true for (let i in value) {
2021-07-21 15:04:45 6698
原创 Element-ui 对话框el-dialog close关闭的回调 点击其他按钮关闭el-dialog时均调用close方法
点击确定或取消按钮关闭窗口,则触发close关闭回调事件,调用refreshData方法。一定要避免重复调用!!<el-button type="text" @click="centerDialogVisible = true" @close="refreshData">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" c
2021-07-21 09:54:12 15644
原创 echarts 关系图自定义节点 symbol如何设置显示本地图片
官网使用教程:https://echarts.apache.org/zh/option.html#series-graph.data.symbol本地图片存储:想要显示本地图片需要如下拼接:symbol:'image://'+ require('../../../public/img/assetDisplay/node.png'),
2021-07-20 16:19:55 5736 1
原创 vue 根据当前日期获取其前七天的日期
查询最近七天数据:日期显示vue调用this.month = getRecentDay()js:/** * 根据当前日期获取其前七天的日期 * @param month * @return {Array|*} */export function getRecentDay() { let arr = [] for(let i = 6;i >= 0;i --) { let temp = getDay(-i) arr.push(temp) } return arr;
2021-07-19 16:59:14 2096
原创 vue 根据当前月份获取其前六个月的月份
month = 7 返回[‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’] 最近七个月。vue调用方法let month = new Date().getMonth() + 1this.month = getRecentMonth(month)js:/** * 根据当前月份获取其前六个月的月份 * @param month * @return {Array|*} */export function getRecentMonth(month) { let arr = []
2021-07-19 16:56:08 1995
原创 vue echarts使用map地图 引入china.js报错Cannot read property ‘echarts’ of undefined
下载china.js导入项目中引入,会报错Cannot read property ‘echarts’ of undefinedimport Echarts from "echarts";// 引入中国地图数据import "./china.js";在项目里安装4.9.0版本echarts,可直接导入china.js。(node_modules里面的包)import Echarts from "echarts";// 引入中国地图数据import "echarts/map/js/ch.
2021-07-19 16:43:00 4454 6
原创 Vue项目 使用echarts实现词云图
配置依赖未安装淘宝镜像npm install echarts-wordcloud --save安装淘宝镜像cnpm install echarts-wordcloud --save默认加载的是最新版本依赖"echarts-wordcloud": "^2.0.0",需要echarts更新到 5.0.1+ 的版本。我一开始使用了4.9.0版本的echarts,报错:...createTextStyle is not a function,所以版本不匹配需要进行更改。方法一:更新echar
2021-07-19 09:12:48 1352
原创 vue echarts饼状图百分比展示
设置label的formatter。label: { show: true, formatter: '{b} : {d}%'},已封装好,可直接复制使用。<template> <!-- 饼状图 --> <div ref="echart" :class="className" :style="{height:height,width:width}" /></template><script> import * as echa
2021-07-06 16:37:59 1514
原创 vue echarts柱状图 隐藏坐标轴刻度线等 横向显示百分比
隐藏坐标线axisLine: { show: false},隐藏刻度线axisTick: { show: false},label展示formatter百分比已经封装好的组件,可以直接复制代码使用,自行传入data.bar.vue<template> <!-- 柱状图 --> <div ref="echart" class="className" :style="{height:height,width:width}" />&..
2021-07-06 15:10:58 2388
原创 vue treeselect树形选择器使用(select下拉框中显示树形列表)
官方文档官方文档npm配置npm install --save @riophae/vue-treeselect具体使用需要注意的地方是normailzer规范化,后端返回的数据结构未知,但是树形选择器需要结构为id,label,children三个属性,因此需要出来规范。<template> <div class="content-part"> <el-form ref="form" :model="formData"> <el-fo.
2021-07-05 15:25:30 4450 1
原创 vue + antv g6实现拓扑图(用来做数据血缘展示业务)
antv g6使用官方文档具体使用业务需求主要问题完整代码官方文档官方文档链接(看完之后的感觉是我懂了,但没完全懂。)具体使用业务需求做数据血缘,大概类似做ER图吧,一开始想使用echarts拓扑图来做,但是echarts有个定位问题一直没弄明白,找不到办法解决,echarts的节点需要自定义位置,但是我们是动态数据,且力引导算法不满足业务需求,所以最后选择了antv g6。类似ER图,后续需要补上每张表的字段显示,但是暂时显示如图。主要问题1、需要自定义节点,g6使用自定义dom节点
2021-07-05 10:24:26 10166 3
原创 vue集成阿里云Aliplayer直播点播组件
官方文档属性和方法官方文档都有用法,需要可自行查阅官方文档链接组件代码 Aliplayer.vue<template> <div class='prism-player' :id='playerId' :style='playStyle'></div></template><script> //查具体属性文档 https://help.aliyun.com/document_detail/125572.html?spm=a
2021-07-05 09:33:24 2666
原创 elementui 组件Popover弹出框点击内容区关闭弹出框的解决办法
需求:点击图标显示选项,选中某一图标隐藏内容区。官方给的关闭方法是通过v-model设置显示或隐藏。示例:<el-popover placement="top" width="160" v-model="visible"> <p>这是一段内容这是一段内容确定删除吗?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type.
2021-07-01 15:54:43 2043
原创 vue 提交按钮点击后显示处理中,禁止二次点击
<el-button type="primary" :disabled="submitLoading" @click="dataFormCheck">{{submitLoading ? '处理中...' : '确定'}}</el-button>// 表单提交dataFormSubmit() { this.submitLoading = true;},
2021-06-18 16:37:17 1462
原创 vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句
需求:实现一个SQL编辑区,通过左侧选择自动生成SQL语句。这里写目录标题codemirror代码编辑器使用已经封装好的组件,可自行配置参数直接复制使用。(使用的idea主题)二级目录SQL代码格式化功能SQL代码格式化遇到的bugcodemirror代码编辑器使用已经封装好的组件,可自行配置参数直接复制使用。(使用的idea主题)//封装好的组件<template> <div class="json-editor"> <textarea ref="t
2021-06-18 09:04:44 6737 2
原创 vue+element ui列表使用分页组件 翻页的时候返回页面顶部
此时滚动条已经翻到页面底部,更换上一页或者下一页时,重新回到页面顶部。// 翻页后滚动条回到页面顶端scrollTop(selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0);},//切换页面currentChangeHandle(val) { this.pageIndex = val //找到你想要滚到
2021-06-16 14:27:59 3392
原创 Elementui el-select创建条目的多选下拉框 自定义校验 新增条目时字符长度限制
数据格式tags默认设置为为[]dataForm: { id: 0, tags: [],},rules: { tags: [{ type: 'array', trigger: 'change', validator: tagslength }]},验证规则多选value返回的是一个数组,需要循环去判断,我加了一个show,只要有标签长度超过时就改变状态去回调。// 验证标签长度let tagslength = (rule, value, callback) =
2021-06-09 11:30:49 2474
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人