关凯华の的博客

原创 el-menu结合vue-router生成左侧导航栏，并设置选中状态以及hidden隐藏

1、vue-router:index.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Layout from '@/layout'export const routes = [{ path: '/', component: Layout, hidden: true, redirect: "/swiperInf

原创 el-table 实现单选

1、隐藏thead多选框.el-table { thead { .el-table-column--selection { .cell { display: none; } } }}2、设置变量存储数据multipleSelection: [],selectList: []3、单选事件selectionChange(selection) { this.selectList = []

原创 Linux(Anolis OS 7.9) 安装 docker

Linux(Anolis OS 7.9) 安装 docker

原创 Vue 项目断点调试

Vue 项目断点调试

原创 WebPack 基础应用

webpack 是前端项目工程化的具体解决方案。主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体的功能实现上，提高了前端开发效率和项目的可维护性。...

原创 封装图片展示预览组件

封装图片展示预览组件

原创 Linux 安装 nginx 最新版 (Anolis OS8.4)个人网址

linux 安装 nginx

原创 从对象数组中找出id相同的对象，放到新数组(二维数组)中

关凯华的博客 查看原文<script> const list = [ { id: 'f75de220-cd01-463a-9be9-9445f1b70834' }, { id: 'f75de220-cd01-463a-9be9-9445f1b70834' }, { id: 'f75de220-cd01-463a-9be9-9445f1b

原创 树形结构数据 实现 搜索功能

树形结构数据 实现 搜索功能http://www.gkh0305.com/archives/treedatasearch

原创 微前端 - qiankun框架的使用以及部署和遇到的问题

关凯华的小站http://180.76.52.88/#/docs/weiqianduan/qiankun

原创 JavaScript 常用方法（view ui）

JavaScript 常用方法1、随机数2、日期格式化3、下载文件1、随机数getRandom (min, max) { return Math.floor(Math.random() * (max - min)) + min},2、日期格式化/** * @description: 格式化时间 * @param: * date :待s格式化的时间 * step(不传默认返回当前时间) :在当前时间基础上加|减 step(单位 type ) *

原创 View UI form 清除表单验证状态

1. 全部清除 this.$refs.formData.resetFields();2.清除表单项for (let item of this.$refs.formData.fields) { if (item.prop.includes('gkh0305')) { // 清除错误状态 item.resetField(); // 设置验证状态（如果不设置，表单项需要点击两次才生效） item.validate()

原创 vue 批量注册局部组件

export const comObj = {};const requireComponent = require.context("文件夹相对路径", true, /\w+\.vue$/);requireComponent.keys().forEach(fileName => { // 去掉路径中不包含gkh0305的文件 if (fileName.includes('gkh0305')) { const reqCom = requireComponent(fileNa

原创 element-plus 上传组件(http-request 覆盖)

1. upload.jsexport const upload = data => request({ url:'https://up-z1.qiniup.com', method:"post", data})2. App.vue<template> <div class="app"> <!-- 覆盖默认的上传行为 --> <el-upload class="upload-demo"

原创 vue-axios 封装请求模块

1. 安装 axios 模块yarn add axios2.创建 src/utils/request.js/** * 封装 axios 请求模块 */import axios from "axios"const request = axios.create({ baseURL: "http://ttapi.research.itcast.cn/" // 基础路径})export default request...

原创 移动端REM适配（Vue项目 / Vant组件库）

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装# yarn add amfe-flexiblenpm i amfe-flexible2、然后在 main.js 中加载执行该模块import 'amfe-flexible'二、使用 postcss-pxtorem 将 px 转为 ..

原创 M1 芯片 mabook air 成功安装 centos 8

使用 utm 虚拟机正常安装 X86 架构 centos8镜像即可

原创 七牛云直传文件

www.gkh0305.top

原创 vue 项目启动速度优化

vue 项目启动速度优化

原创 JavaScript 正则表达式

1、创建var rg=/123/2、测试rg.test("123")结果 true3、特殊字符3.1 边界符^ :匹配行首的文本$ :匹配行尾的元素var rg = /^123/; // 以 123 开头var rg = /^abc$/; // 以 abc 开头的字符串3.2 字符类var rg = /[abc]/; // 只能是 a,b,c 中的`一个`var rg = /^[abc]$/; // 三选一var rg

原创 springboot 实现ueditor 上传

package top.gkh0305.uploads.controller;import com.alibaba.fastjson.JSON;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import org.springframewo.

原创 echarts 根据浏览器自动缩放

window.addEventListener("resize", () => { if (myChart) { myChart.resize(); } });

原创 vue 点击按钮后滚动条到底部

原创 vue-cli项目全屏

<template> <div id="navbar"> <div class="logo">logo</div> <div class="menu-right"> <i class="iconfont" :class=" isFullscreen .

原创 解决element ui 中el-table 中使用el-popover 无法弹出问题

el-table 中使用el-popover 需指定唯一ref <el-popover placement="top" title="访问提示" trigger="hover" :ref="`popover-${scope.$index}`" width="300" ></el-popover>

原创 vue项目中使用富文本编辑器（wangEditor）

1、新建wangEditor组件<template> <div class="editor-wang"> <div id="wangEditor"></div> </div></template><script>// 引入 wangEditorimport wangEditor from "wangeditor";export default { data() { return