qq_45418844的博客

原创 黑马VUE3视频笔记

为了解决定义平级属性、一个页面2个script标签的问题。vue2的插件是vetur vue3的插件是volar。不希望整个state都作持久化，用paths:[]父组件传过去的值动态控制，子组件接受的也是动态的。声明基于数据的派生的计算属性getters。对仓库里的数据做出结构，用其包裹。pinia的key值是可以改的。深度监听：deep:true。底层组件给顶层组件传值。3.定义一个store。4.使用 store。

原创 尚硅谷css3笔记

在设有具体像素值的线性渐变或者径向渐变前加上repeating-3.在background-clip前加上私有前缀。2.设置background-clip：text。不能用background-image。①vw:相对于视口宽度的百分比。②vh:相对于视口高度的百分比。注意：缩放也是运用在块级元素上。1.设置字体颜色为透明色。

原创 vue中moment.js的用法

使用moment格式化日期

原创 解决vscode保存时格式自动修整的问题

格式onsave在VS Code with Prettier中不起作用 - 问答 - 云+社区 - 腾讯云在settings.json中加入"editor.defaultFormatter": "esbenp.prettier-vscode",settings.json完整代码{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize...

原创 Object.keys(obj)的用法

修改后：解决办法：this.newsImgs = res.data.imgList.map(img => { return img[Object.keys(img)[0]];})this.newsInfo = res.data.imgList.map(img => { return Object.keys(img)[0];})<el-carousel height="300px"> &...

原创 解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location: “/login“ 的问题

CSDN重复路由退出登录方法已经退出了当前路由，又手动指定了路由，所以提示重复路由

原创 在sessionStorage中存和取cookie键值对

//在sessionStorage中存储cookie键值对sessionStorage.setItem('inieToken', 'admin')this.$router.push('/home')created () { if (sessionStorage.getItem('inieToken')) { this.name = sessionStorage.getItem('inieToken') } else { this.$router.push..

转载 Electron使用electron-builder打包时下载electron失败或慢的解决方案

Electron使用electron-builder打包时下载electron失败或慢的解决方案_wm9028的专栏-CSDN博客https://blog.csdn.net/wm9028/article/details/114583011

原创 js---数组

原创 倒计时计算

原创 VUE中使用md5加密

1.本地安装npm install --save js-md52.在main.js中引入import md5 from 'js-md5';Vue.prototype.$md5 = md5;3.使用方法let userinfo = {"username": this.loginFrom.name,"password": this.$md5(this.loginFrom.pwd)}在本地输入密码1qaz@*****经过数据库加密后的密码：92d7ddd2a010c

原创 如何清除浮动

原创 组件间通信

1.子组件给父组件传值子组件：<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { data () { return { //将msg传递给父组

原创 拖拽功能的实现

1.安装依赖cnpm installvuedraggable2.引入依赖import vuedraggable from 'vuedraggable'<div class="part" v-for="(value, index) in dataList" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" @click="clickPart(value,index)" v-bind:key="index" dr..

原创 截取时间字符串

将2021/12/27上午11:00 转变成成2021-12-27的形式1.先用substr截取（0，10）个字符 -----> "2021/12/27" 字符串形式"2021/12/27下午2:05:39".substr(0,9)"2021/12/2"2.再用spilt("/")将其截取 ---------->["2021", "12", "2"] 数组形式"2021/12/2".split("/")(3)["2021", "12", ...

原创 编程式导航+事件委派

<div class="all-sort-list2" @click="goSearch"> <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId"> <h3 :class="currentIndex == index?'cur':''" @mouseenter="changeIndex(index)"> <a :da.

原创 节流的使用

1.按需引入：只是引入节流函数，其他的函数没有引入（模块），这样做的好处是，当你打包项目的时候体积会小一些import throttle from "lodash/throttle";2.使用（es5的方式）changeIndex: throttle(function (index) { //修改当前currentIndex索引值 //函数节流:在20MS时间之内只能执行一次 this.currentIndex = index; }, ...

原创 防抖与节流

防抖：连续快速的触发，只会执行最后一次节流：在规定的时间范围内不会重复触发，只有在大于这个时间间隔才会触发回调，把频繁的触发变为少量触发【可以给浏览器充裕的时间解析代码】解决方式：lodash插件：里面封装函数的防抖与节流业务【闭包+延时器】1.引入lodash<script src="./lodash.js"></script>lodash函数库对外暴露的是_函数方式一：2.使用：函数中的 let result =_.debounce(functi.

原创 git基于master创建本地新分支

应用场景：开发过程中经常用到从master分支copy一个本地分支作为开发分支步骤：1.切换到被copy的分支（master），并且从远端拉取最新版本$git checkout master$git pull2.从当前分支拉copy开发分支$git checkout -b devSwitched to a new branch 'dev'3.把新建的分支push到远端$git push origin dev4.关联$git branch --set-upstr

原创 鼠标经过某一列给其添加背景颜色

<div @mouseleave="leaveShow"> <h2 class="all">全部商品分类</h2> <h3 :class="currentIndex == index?'cur':''" @mouseenter="changeIndex(index)"> <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId"&g..

原创 nprogress进度条的使用

1.安装cnpm install --save nprogress2.引入import nprogress from "nprogress";import "nprogress/nprogress.css";3.在请求拦截器中添加进度条开始nprogress.start();4.在响应拦截器中添加 进度条结束nprogress.done();5.修改样式在nprogress.css中修改（鼠标定位在资源管理器上，直接搜索nprogress）...

原创 相对定位和绝对定位

1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局，元素的宽高不变，设置偏移量也不会影响其他元素的位置。2.absolute：设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。父元素如果没有定位，子元素定位了，则子元素相对html定位；父元素如果定位了，子元素也定位了，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位。如果想要实现一个盒子覆盖另外一个盒子，上面的盒子可以用z-i.

原创 12.9日学习总结

1.安装less和less-loadercnpm install --save less less-loader@5less-loader的版本建议不要安装太高。2.声明式导航，可以进行页面跳转<router-link to="/home"></router-link>相当于a标签，但是一定要加上to3.编程式导航 this.$router.push|replace，可以进行页面跳转this.$router.push("/home")声...

原创 eslint校验关闭功能和配置代理跨域

在根目录下创建一个vue.config.jsmodule.exports = { productionSourceMap:false, // 关闭ESLINT校验工具 lintOnSave: false, //配置代理跨域 devServer: { proxy: { "/api": { target: "http://39.98.123.211", }, }, },};...

原创 ＜el-tree＞的节点过滤

<div style="height:650px;overflow:auto;"> <el-tree style="background:none;color: #fff;" ref="tree" :filter-node-method="filterNode" :data="folderTree" class="file-tree" :props="defaultProps"> <div slot-scope="{ node, dat...

原创 使用滚动条来显示＜el-tree＞组件溢出的内容

<div style="height:650px;overflow:auto;"> <el-tree></er-tree></div>在<el-tree>组件外面包裹一个divoverflow:auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。overflow:scoll;内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。【注意】：设置元素的长度，长度范围小于背景范围。...

原创 axios获取接口的方法

created () { axios.post("接口地址",请求的参数).then((res) => { let arr = res.data this.folderTree = arr }) }

原创 一行多列div布局

<divstyle="width: 300px; position: absolute; right: 60px; top: 50px"class="measure-class"><div style="width:50% ;padding: 16px;box-sizing: border-box; background: rgba(14, 18, 31, 0.77); color: #ffffff; display:inline-block; ali...

原创 12.7学习笔记

1.世界坐标Cartesian3：笛卡尔空间直角坐标系new Cesium.Cartesian3(x, y, z)2.经纬度Cesuim中没有具体的经纬度对象，要得到经纬度首先需要计算为弧度，再进行转换。3.弧度Cartographicnew Cesium.Cartographic(longitude, latitude, height)这里的参数也叫做，longitude，latitude，即经度和纬度。角度转弧度 π/180×角度弧度变角度 180/π×弧度4..

原创 /地图添加点

1.在leaflet-map标签中添加ref="map"<leaflet-map id="map" ref="map"></leaflet-map>2.导入importmarkerImgfrom"../../public/leaflet/images/marker-icon.png";3.在点击事件中添加varmyIcon=L.icon({iconUrl:markerImg,iconSize:[30,35...

原创 根据经纬度标记地图上的点

//清除marker if (this.marker) { this.$refs.map.map.removeLayer(this.marker); } //地图添加点 this.marker = L.marker([lat, lon], {}).addTo(this.$refs.map.map); this.$refs.map.flyTo(lon, lat); this.marker ...

原创 头像和退出

<el-dropdown> <div class="demo-type"> <div> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> <i class="el-icon-arrow-dow...

原创 table背景色

el-table{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; color: #fff!important; ...

原创 Elementui 表格时间戳转年月日

1.npm install moment --save2.import moment from 'moment'3.<el-table-column prop="create_time" label="下单时间" :formatter="dateFormat" ></el-table-column>4.dateFormat:function(row, column) { var date = row[column.prop...

原创 如何在el-table里面的el-table-columnl里面写样式？

<el-table-columnl class-name=".detailShow "></el-table-columnl><style lang="less" scoped>/deep/.detailShow .cell.el-tooltip { display:inline-block; }</style>

原创 git命令

git status 查看分支是否干净git checkout -b *** //创建分支***git branch //查看分支

原创 error Expected indentation of 2 spaces but found 8

本来需要2个空格，实际出现了8个，出现8个空格一般都是tab键引起的注释掉这一行： '@vue/standard'重点说明修改.eslintrc.js文件后要重新启动才可以生效根据你项目的启动命令：npm run serve...

原创 Module Error (from ./node_modules/eslint-loader/index.js)

第一步：初始化并重新安装eslintnpm init -ynpm install eslint --save-dev第二步：进入node_modules下的bin目录，并初始化eslintcd ./node_modules/.bin/.\eslint --init第三步：设置配置选项，除选择vue.js外，其他都选择默认项或者y或者Y，如下仅仅到选择vue.js步骤? How would you like to use ESLint? To check syntax and...

原创 搭建vue项目

1.vue crate test（项目名）2.npm i3.出现问题PS C:\Users\16907\Desktop\demo1> npm inpm WARN deprecated undefined@0.1.0: this package has been deprecatednpm WARN saveError ENOENT: no such file or directory, open 'C:\Users\16907\Desktop\package.json'npm not

原创 npm warn package.json @1.0.0 no repository field

看字面意思大概是package.json里缺少repository字段，也就是说缺少项目的仓库字段"repository":{"type":"git","url":"https://gitee.com/y_project/RuoYi-Vue.git"}