- 博客(41)
- 收藏
- 关注
RSS订阅原创 require.context()返回一个webpack上下文的函数 （应用场景：组件内引入多个文件）
require.context()返回一个webpack上下文的函数（应用场景：组件内引入多个文件）
2022-07-30 11:47:04
472
原创 vue中iframe引入html文件
// .vue文件中引入html文件、autoMove.html文件放在vue项目public文件夹下<template> <div class="home"> <iframe class="iframe_box" src="/autoMove.html" frameborder="0" scrolling="no" ></iframe> </div></templa
2022-03-31 18:57:41
1939
1
原创 css modules基本使用
使用css Modules(dom上类名被渲染成哈希字符尽量减少类名冲突) 代替 scoped 解决vue样式污染配置参考：https://blog.csdn.net/weixin_44869002/article/details/105831661https://cli.vuejs.org/zh/config/#css-loaderoptionshttps://blog.csdn.net/weixin_44869002/article/details/106826503// vue.config
2022-03-02 14:58:54
1198
原创 $attrs和inheritAttrs灵活封装组件
// 父组件中引入的子组件、在父组件的子组件标签上添加属性配置、会渲染到子组件的最外层 div上、// 防止这种情况发生、在子组件中设置 export default { inheritAttrs: false } 就能禁止渲染到子组件外出 div上// 子组件要被父组件渲染的标签上用 v-bind="$attrs" 就能将父组件的配置都渲染在这个标签上// 父组件：示例<div> <myInput type="password" /> </div>
2022-02-25 13:24:44
468
原创 vue组件通信常用
参考1.eventBus(兄弟组件通信、父子组件通信)1.main.js创建vue实例、直接使用this.$bus Vue.prototype.$bus = new Vue()1.1触发事件 this.$bus.$emit('clickMain', 1)1.2监听事件 PS:这里监听要放在mounted中、并且在页面销毁周期中用this.$off()移除监听 mounted() { this.$bus.$on('clickMain',(e) => { console.lo.
2022-02-25 13:22:36
244
原创 jsconfig.json文件解决vscode引入的文件ctrl + 左键直接跳转
// jsconfig.json文件{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "exclude": ["node_modules", "dist"]}参考配置webpack的@/// 在vue文件引入文件时、添加上面的jsconfig.json文件、按ctrl + 鼠标左键可以直接跳转到对应的文件，../这种引入路径可以直接不加文件直接跳转
2022-01-11 15:36:53
1200
原创 Object.freeze优化非响应数据
// 当vue中使用外部引入json字段渲染下拉框时、大量死数据、这时可以用Object.freeze()优化性能<template> <div> <el-select v-model="queryParams.nation" clearable> <el-option v-for="item in nationalList" :key="item.id" :label="item.name" :value="item.name" />
2022-01-02 12:11:18
235
原创 vue3 vite创建项目全局注册封装组件
// main.js文件import { createApp } from 'vue'import App from './App.vue'import './index.css'//引入封装组件、这里普通import xxx会报错、最好带上后缀.js、这里用的是vite创建项目、@/引入好像不行import * as myComponents from "./components/index.js";const app = createApp(App)//全局遍历注册Object.va
2021-12-12 19:27:55
819
原创 vue中watch监听对象、锁的概念
data() { return { name： 'zs', info: { hobby: '睡觉' } }} watch: { name(val, oldValue) { console.log('info', val, oldValue) }, // 监听对象写成对象形式，里面写deep info: { handler(val, oldValue) {
2021-12-10 12:23:40
421
原创 antd上传单张多张图片 预览和删除
图片上传（有后台接口）express框架+multer写的：https://www.cnblogs.com/catherLee/p/13141231.htmlvue+koa框架写的：https://www.cnblogs.com/threepigs/p/10703689.htmlhttps://www.cnblogs.com/miaSlady/p/13218319.html下面这个有入口文件说明，搭配上面的搭建node服务参考以下代码块都是用的 formdata 方式上传图片开发中用到的单张图
2021-12-10 12:00:00
2914
原创 阿里云盘映射
1.准备工作：如果没有安装RaiDrive【下载地址】（访问密码：338766），记得先安装一下;如果不了解RailDrive的友友，可以参考这里2.下面继续操作：获取网盘的refresh_token在 官网页面登录之后aliyundrive.com网页端按F12 ，点击application（应用程序），local storage（本地存储） ，token里面的refresh_token 并复制下来下载环境 ： https://url64.ctfile.com/f/3843664-.
2021-11-07 15:48:42
3787
原创 前端搭建jeecg后台踩坑记录
安装环境：jdk1.8 参考：https://www.cnblogs.com/pengpengdeyuan/p/14212752.htmlmaven 参考：https://www.cnblogs.com/pengpengdeyuan/p/14217772.htmlredis 参考：https://www.cnblogs.com/yuwentao/p/14960268.html1.启动redis，在redis解压后的文件夹中运行下面黄色区命令2.本地链接mysql 新建jeecg-bo
2021-11-07 13:06:18
489
原创 对象键值方法
遍历拿到对象键1.Object.keys()/** 拿到对象的键、数组 */var obj = { a:'zs', b:'ls' }Object.keys(obj) //['a', 'b']/** 拿到数组的下标、数组 */var arr = [3,6,2,1]Object.keys(arr) //['0', '1', '2', '3']/** 拿到字符串的下标、数组 */var str = '你好,世界'Object.keys(str) //['0','1','2','3.
2021-10-23 22:12:22
242
原创 if-else优化
/** 3.使用策略模式优化多层if-else */function func() { if (type === 'a') { // 执行内容 1 } else if (type === 'b') { // 执行内容 2 } else if (type === 'c') { // 执行内容 3 } // 后续代码}// 使用策略模式优化function func() { let handlerA = () => { console.log('执
2021-10-16 13:24:46
92
原创 测试加载loding效果的方法
//1.普通方法function delay(time) { new Promise(resolve => { setTimeout(() => { resolve() }, time) })}await delay(2000)console.log('test')//2.箭头函数方法const delay = (time) => new Promise(resolve => setTimeout
2021-10-16 13:24:04
119
原创 零代码封装axios通用请求
http.js文件/** 添加拦截 */import Axios from 'axios'const newAxios = Axios.create({ baseURL: 'http://x.x.xxx.x/api', timeout: 4000 //4000ms 请求超时断开请求})/** 请求拦截 */newAxios.interceptors.request.use(config => { let token = sessionStorage.getIt
2021-10-16 13:23:33
72
原创 ant-design组件a-modal对话框两条横线
因为 element-ui的 el-dialog不好实现对话框垂直居中，所以使用 ant-design带 centered属性可实现居中但是 a-modal会有两条上下的横线、如下图：<style scoped less> /* 设置a-modal弹出框去除两条横线 */ ::v-deep .ant-modal-content .ant-modal-header { border-bottom: none !important; } ::v-deep .ant-m
2021-10-15 18:24:40
2115
原创 el-tree数据懒加载渲染
实现以上效果：因为后台数据是不带 children嵌套数组方式的数据，所以根据 id来获取子集数据来渲染，要遵守element官方的数据格式data: [ { id: 1,label: '芷江侗族自治县', children: [ { label: '公坪镇',children: [{ label: '公坪村' }] }, { label: '三道坑镇',children: [{ label: '五郎溪乡' }, { l.
2021-10-14 19:05:08
1008
原创 mixins和vuex区别
vuex (一个组件修改了state的数据、其他组件获取到的值是同步更新修改后的值、有的时候数据更新了页面没有更新可以通过this.$forceUpdate强制刷新)# 优点： js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便 属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会) 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染# 缺点： 刷新浏览器，vuex中的state会重新变为初始状态 解决
2021-10-11 13:18:50
478
原创 vue中watch和computed和methods的区别
1.methods 只适合业务逻辑处理1.数据不会缓存methods() {}2.watch 只适合监听单个数据1.watch监听定义在data中属性的值2.不会缓存，可以异步watch: { fullName(newVal, oldVal) { console.log(newVal, oldVal) }}3.computed 适合监听多个数据、computed定义的函数 可以直接当作属性使用1.定义在computed中的方法就不能在data中定义2.
2021-10-10 18:49:52
173
原创 首页表格请求优化
表格请求大量数据，用el-table 会导致页面卡顿，可以用vxe-table来代替，缺点就是的分页优点问题(可以用element的分页代替)vxe-table#安装:npm install xe-utils vxe-table#PS: 别忘了引入'xe-utils'import Vue from 'vue'import 'xe-utils'import VXETable from 'vxe-table'import 'vxe-table/lib/style.css'#挂载 Vue.
2021-10-10 09:16:21
75
原创 对话框包含select框双向绑定
//关于zhsq小区页面的编辑界面弹出框双向绑定的一些细节：因为弹出的对话框有下拉框部分、双向绑定下拉框数据时又要监听数据、与表格普通数据分开双向绑定所以在computed中就要使用get()、set(val)来实现双向绑定相关代码：<el-form :model=form> <el-form-item label="公司名称" prop="companyDept"> <el-select v-model="companyShow" pl.
2021-10-10 09:16:11
375
原创 vue中搜索框根据关键字筛选
根据select框选中的值，和搜索框中的值进行筛选判断 //获取表格数据的方法async getTableList() { this.loading3 = true const { data: res } = await Axios.get('http://192.168.3.68:9090/system/info/list', { params: this.queryInfo }) this.loading3 = false
2021-10-10 09:16:00
1605
原创 前端小记001
1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？// 给父元素设置 { position:relative; z-index:1;}#ps: 使用transform后，所有子元素无法使用position: fixed;2、设置input 文本框的 placeholder 的颜色input::-webkit-input-placeholder{ color:rgba(144,147,1
2021-10-10 09:15:49
195
原创 socket.io聊天通信
安装： npm i express npm i --save socket.io# 服务端app.js中的代码1.通过express的方式创建后端服务(必须这样写)var app = require('express')()var http = require('http').Server(express)var io = require('socket.io')(http)app.get('/', (req, res) => { res.sendFile(__di
2021-10-10 09:15:29
166
原创 select框搭配搜索框筛选
<template> <div> <!-- 底部表格区域 --> <el-card class='card-bottom'> <el-select v-model='queryInfo.companyName' placeholder='请选择小区名' style='width: 145px' :class="'color
2021-10-10 09:14:57
404
原创 前端常用插件工具类库
函数库Lodashhttps://github.com/lodash/lodashUnderscorehttps://underscorejs.org/Ramdahttps://github.com/ramda/ramdaoutilshttps://github.com/proYang/outils动画库Animate.css：CSS3 动画库，也是目前最通用的动画库。https://daneden.github.io/animate.css/Anime.js：一
2021-10-10 09:14:25
333
原创 判断链接后缀文件类型
1、获取文件后缀//文件路径var filePath = "file://upload/jb51.png";//获取最后一个.的位置var index= filePath.lastIndexOf(".");//获取后缀var ext = filePath.substr(index+1);//输出结果console.log(ext);2、文件类型判断 我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首 先定义一个判断函数：func
2021-10-10 09:14:12
1274
原创 v-has自定义指令实现按钮权限判断
Vue自定义v-has指令实现按钮权限判断应用场景：管理员配置权限之后、用户登录时、从接口拿到按钮权限列表、然根据后台有哪些数据判断显示哪些按钮全局自定义 (自定义指令源码)//注册全局自定义指令 'v-focus'Vue.directive("focus", { //当被绑定元素插入到 DOM 中 inserted: function (el) { //聚焦元素 el.focus() }})局部自定义//如果想要注册局部指令、组件
2021-10-10 09:13:48
2168
原创 echarts基本配置
export default { data() { return { xDataArr: ['周一','周二','周三','周四','周五','周六','周日'], yDataArr: [1,5,6,9,2,9,5], option: { xAxis: { type: 'category', data: xDataArr, boundaryGap: true }, //配置x轴 yAxis: { type: 'value'
2021-10-09 17:46:06
185
1
原创 $forceUpdate强制刷新
vue中$forceUpdate强制刷新的使用$forceUpdate、v-if、key刷新介绍1.$forceUpdate (只会触发beforeUpdate、updated) #作用： 当在data中某个内容进行了改变、但是页面没有进行刷新、而控制台能进行打印证明数据确实改变了，此时就可以用来强制当前 组件刷新 #常见场景： 在v-for循环或者某个操作中对data中的内容进行增加、修改、或者删除操作，data中的数据确实改变了，而且打印的内容也改 变了，但是页面却没有刷新达
2021-10-09 17:45:29
3206
原创 axios简单封装
server.js// 简单封装 Axios 练习import axios from 'axios'// 创建一个实例、默认url、超时const instance = axios.create({ baseURL: 'http://47.104.64.44:8889/api/private/v1/', timeout: 4000})// 拦截器 --请求拦截instance.interceptors.request.use(config => { //请求成
2021-10-09 17:45:00
45
原创 less基本使用
less编译工具kaola：http://koala-app.com/index-zh.html//kaola基本用法：将含有less文件的文件夹拖入kaola工具中，执行编译就会多出一个和.less文件的同名.css文件# 浏览器使用less语法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="
2021-10-09 17:44:15
48
原创 vuex基础
vuex概述# 优点： js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便 属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会) 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染# 缺点： 刷新浏览器，vuex中的state会重新变为初始状态 解决方案-插件 vuex-persistedstate//组件之间数据共享方式# 1.安装vuex npm i vuex -S# 2.导入vue
2021-10-09 17:43:15
32
原创 git常用命令
# git的四大区域1.本地工作区(工作区) --> 2.通过git add 添加到本地暂存区(暂存区) --> 3.通过git commit -m 提交到本地仓库(本地仓库) --> 4.通过git push提交云端仓库(远程仓库)//git本地操作必要的三步骤：git init //初始化创建git add . //添加所有文件到暂存区git commit -m 'git版本库初始化与文件提交操作' //提交
2021-10-09 17:42:20
63
原创 路由导航守卫控制访问权限
1.封装axios请求2.login.vue组件登入方法请求成功，将token值保存到sessionStorage中 //登入方法 login() { this.$refs.loginFormRef.validate(async (valid) => { if (!valid) return var { data: res } = await this.$http.post('login', this.loginForm) if (r
2021-10-09 17:41:06
56
原创 axios的并发和取消请求
并发请求#并发请求：场景： 1.一个接口的参数需要另一个接口获取 2.两个接口同时请求加载完数据 解决方案： //axios.all(接口1， 接口2) //axios.spread(callback1, callback2)#示例：import axios from "axios"import {getSellerDetail} from '../../api/seller'import {getMemberCardInfo} from '../../api/pay_o
2021-10-09 17:39:45
238
原创 electron打包vue项目成桌面应用
方法一：(适用于打包64位win10的单独.exe程序)//打包vue项目得到dist文件夹1.安装electron: npm install --save-dev electron2.package.json中添加 { "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Jane Doe",
2021-10-09 17:38:49
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人