- 博客(75)
- 收藏
- 关注
RSS订阅原创 获取svg的宽度高度
let width = svg.style.width //失效let width = svg.offsetWidth //失效let width = svg.offsetWidth //失效let width = svg.getBBox() //失效let width = svg.getBoundingClientRect().width //有效
2022-03-16 10:59:06
1228
原创 addEventListener重复绑定事件问题
原本用的addEventListener一直在同一个节点多次绑定了事件试了用removeEventListener也没办法解绑不清楚具体是什么原因最后换了种方式node.onclick = function() { twicePopup(4) };//ts写法：可能会判断node不属于HTMLElement类型，加个as（类型断言）(node as HTMLElement).onclick = function() { twicePopup(4) };用该方法不会出现绑定多次的问题...
2022-03-14 10:37:45
1274
原创 addEventListener绑定事件，立即触发问题
原来的写法Node.addEventListener('click', twicePopup(1));更改后的写法Node.addEventListener('click', function() { twicePopup(1)});缺少function（） {}需要传递对twicePopup函数的引用
2022-03-14 10:02:00
1086
2
原创 js中insertAdjacentHTML的用法
//一个参数 beforebegin：开始标签前， beforeend：开始标签后， afterbegin：结束标签前， afterend：结束标签后//第二个参数 需要插入的内容 this.element.insertAdjacentHTML("afterbegin", '<div></div>'); ...
2022-03-13 14:09:28
381
原创 ERROR in ./src/main.ts Module not found: Error: Can‘t resolve ‘xxx‘
ERROR in ./src/main.ts Module not found: Error: Can’t resolve ‘xxx’找不到.ts模块需要在webpack.config.js内进行配置即可resolve: { //文件扩展名需要添加ts extensions: ['.ts', '.js'], },定义后对外暴露引入并应用...
2022-03-13 13:07:01
7425
1
原创 高德地图基础代码优化
地图渲染矢量图形或标记heatingStationPoints.polygon.forEach( //循环在地图上新增多边形 (item: any) => { let polygon = new AMap.Polygon({ ...item, //此处不用加map: map }); //不用在此处单个添加map.add() if (polygon) coverageAreaData.allData.pus
2022-02-25 11:15:43
252
原创 vite打包配置（gzip、文件分类等）
import compressPlugin from "vite-plugin-compression"; //静态资源压缩import legacyPlugin from '@vitejs/plugin-legacy'; //浏览器兼容export default defineConfig({ plugins: [ vue(), compressPlugin({ //gzip静态资源压缩 verbose: true, // 默认即可 disable: f
2022-02-24 15:23:30
6152
1
原创 浏览器中performance的基本使用
1.最上面一排为控制按钮2.overview：FPS、CPU、NET3.火焰图：CPU的可视化（各种事件、各种network请求详情）4.统计数据：summary:统计报表，Bottom-Up:事件时长顺序，Call Tree:事件调用顺序，Event log:事件发生的先后顺序基本使用：选中加载时长的task在下面事件调用顺序处查看耗时最长的事件下面右侧可查看事件调用顺序找出耗时最长的事件，cv到代码中进行优化...
2022-02-21 20:33:22
866
原创 [VuetifyLoaderPlugin Error] No matching rule for vue-loader found
Vuetify 采坑原本正常启动服务，写代码，但后来关闭服务重启后，报错，如下：排查好久，上网也查了许多资料，最后自行解决：在使用vue add vuetify后vue.config.js会自动生成，并附加配置，但第二次启动服务会报错（不确定具体因为什么报错，但需要更改这里配置）const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')module.exports = { configureWebpack: functi
2021-12-19 21:24:37
850
原创 获取、修改节点属性值，更改iframe路径方法及其配置
获取、修改节点属性值$(".news_list_firmInfo_go_detail").click(function () { let fullPathInfo = $(this).attr("fullPath"); //获取点击节点的属性值 $(".news_list_all")[0].style.display = "none"; $(".news_list_detail")[0].style.display = "block"; $(".news_list_det
2021-12-09 14:21:46
730
原创 js实现复制粘贴
<span class="logistics_tracking_order_data">LVS2016933302522732N12</span><img onclick="copyText()" src="./image/copy.png" >// 复制粘贴function copyText() { let oInput = document.createElement("input"); let copyData = document.quer
2021-12-07 10:11:33
591
原创 jquery实现标签样式切换，以及切换显示不同内容
标签样式切换$(".product_core_info_row").click(function () { //点击列表集合，切换不同标签并显示样式 $(this) .addClass("product_core_info_row_active") //添加已设置好的样式，在html中先添加一个默认的 .siblings() .removeClass("product_core_info_row_active"); });切换显示不同内容let liL
2021-12-03 09:32:42
1476
原创 关闭指定端口的服务
查看所需关闭端口的PID值命令（PID是最后一列）：netstat -nao|findstr 8090打开任务管理器 =》 详细信息 =》 找对应的PID值结束进程即可
2021-11-22 09:00:22
1461
原创 Vue3中postcss的安装及配置
安装postcss-pxtoremnpm install postcss-pxtorem -D在根目录下创建postcss.config.jsmodule.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的cl
2021-10-22 16:27:17
4007
1
原创 Host key verification failed.(Git 主机密钥验证失败)，GitHub配置公钥
每个计算机可以生成多个公钥，每次生成公钥后都会被覆盖，出这个错应该就是GitHub上没公钥，需要重新将公钥复制到GitHub上首先生成公钥步骤1 先配下个人的用户名和邮箱。命令：git config –global user.name “username”git config –global user.email “[email protected]”2 可通过命令git config -l查看配置的用户名和邮箱。3 生产公钥。ssh-keygen -t rsa输入完这个命令后，会有两个步
2021-08-25 11:26:09
4641
原创 js 方法截取url中路径信息，并将其转为对象（为加密专用，防止url中的val中出现=或&）
思路：&永远会比=少，先取第一个=的下标存到数组中。然后再继续找所有&的下标存到数组中（&不太会出现在val中，所以这里是以&为标准）。再寻找所有出现在&后第一个=，并将其存到之前放=的数组中。获取到了他们的下标后就好办事了，下面的看代码就行。直接套用此方法即可不是很简洁，可以看思路，有更好的方法可以评论告诉我，或者将博客地址发我！urlDecode(url) { //传入参数格式为url中"?"后面部分console.log(url);let d
2021-08-22 19:34:08
385
原创 Vue性能方面优化
（1）代码层面的优化v-if 和 v-show 区分使用场景computed 和 watch 区分使用场景v-for 遍历必须为 item 添加 key，且避免同时使用 v-if（v-for优先级更高）长列表性能优化（Object.freeze()）事件的销毁图片资源懒加载（vue-lazyload）路由懒加载第三方插件的按需引入（babel-plugin-component）优化无限列表性能（vue-virtual-scroller）服务端渲染
2021-08-15 23:44:56
243
1
原创 Vue 的父组件和子组件生命周期钩子函数执行顺序？
加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated父组件更新过程父 beforeUpdate ->..
2021-08-15 21:50:13
230
原创 Vue组件通信的几种方法
（1）props / $emit 适用 父子组件通信这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。（2）ref 与 $parent / $children 适用 父子组件通信ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例$parent / $children：访问父 / 子实例（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信这种方法通过一个空的 Vue 实例作
2021-08-15 21:47:09
49
原创 vue项目中loading全局配置，（超方便）两种方法
第一种方法简单操作1、首先写一个公共组件，然后再建立一个js文件将其引入并使用js文件import topbar from '../components/navigation'export default (Vue) => { Vue.component('topbar', topbar)}2、最后在入口main.js引入这个js文件并使用import globalVue from './globalVue.js'Vue.use(globalVue)3、然后vue组件中直接
2021-08-10 14:58:01
7941
原创 vue中向html插入节点标签（简单易懂）
正常vue中插入节点会报这个错：原因：插入的不是节点，而是一个字符串，需要将这个字符串变为对象才能插入到HTML中简单几步：1、创建新节点2、将新节点替换要插入的标签（innerHTML方法）3、将节点插入到页面指定的标签中（appendChild（）方法）<template> <div class="home"> <h1 ref="home">首页（发现音乐） <h2>有数据</h2> </h1
2021-08-07 17:53:11
9290
1
原创 合并分支两种情况（更改主分支和不更改主分支），远程库分支与本地查询的远程库分支不一致
主分支更改、次分支更改：Master: Branch、checkouttest: 更改、add、commit、push、checkoutMaster： 更改、add、commit、push、merge（比对）、add、commit、push、删除次分支主分支不更改、次分支更改Master： Branch、checkoutTest： 更改、add、commit、push、checkoutMaster： Merge（无需比对）、add、commit、push、删除次分支删除本地分
2021-08-07 15:28:11
368
原创 一维数组转二维数组，for循环+if即可
element表格中的html写法<el-table-column label="发票编号" width="100"> <template slot-scope="scope"> <el-dropdown placement="left" style="margin:5px 0" v-for="(item, index) in scope.row.invoiceIdList" :key="index"> <el-button>{{ite
2021-07-06 17:39:54
322
原创 小程序关闭内嵌的H5页面，返回到小程序上一级页面
首先关键引入小程序js库<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>调用小程序内的方法即可 wx.miniProgram.navigateBack({}) // 这里退回到上一级页面, 也就是刚刚跳转前的页面详情可见此链接https://www.freesion.com/article/458369020/...
2021-07-05 16:22:21
2482
原创 element简单上传文件
<!-- 模板上传 --> <div class="templateFillIn" v-show="active==2" v-loading="templateFillInLoading"> <el-upload class="upload-demo" drag action="#" multiple :limit="1" :http-request="httpR
2021-06-09 16:28:18
611
原创 单级菜单需要多页面时的配置
方便传参跳转路径路由设置{ path: '/subjectAdmin', name: 'index', java: true, component: 'markingCenter/subjectAdmin/index', meta: { title: '科目管理' } }index.vue文件设置<template> <transition> <keep-alive> &
2021-06-07 15:05:28
87
原创 element获取单行的下标（scope.$index）
element获取单行的下标scope.$index <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button class="del" @click.stop="contractInvoiceDataDel(scope.$index)" type="text" size="small">删除</e
2021-05-25 11:53:08
3523
原创 对外暴露.vue文件共用
js文件里import topbar from'../components/title';import overlayLoad from'../components/overlayLoad';import { Icon } from "vant";export default (Vue) => { Vue.component('topbar', topbar); Vue.component('overlayLoad',overlayLoad); Vue.use(Icon);}.
2021-05-24 16:34:58
101
原创 el-input设置最大数值和最小值
需要用这个标签 el-input-number 才能设置<el-input-number :max="Number(scope.row.transAmount)" type="text" v-model="scope.row.transRelevanceAmount" />
2021-05-21 16:02:35
11355
1
原创 Cannot read property ‘push‘ of undefined 错误解释并解决 通用
错误提示: Cannot read property ‘push’ of undefined状况一：这个是因为你要push的不是一个数组解决：你需要将你定义的参数设为数组data = []状况二：还有一种情况是你设置了数组，但你在刷新后还是会报这个错那是因为刷新后你定义的参数就为undefined了解决：所以你需要在js里加个判断就行了if(this.data === undefined) { this.data = []}...
2021-05-19 10:23:22
32238
2
原创 vue文件中index.vue的使用方法
<template> <div> <keep-alive> //组件缓存 <home-page v-if="pageName === 'homePage'"></home-page> </keep-alive> <add-page v-if="pageName === 'addPage'"></add-page> <info-page v-if="pa
2021-05-17 13:51:38
7973
原创 vue预览pdf带全文缩略图
https://github.com/FranckFreiburger/vue-pdf#createloadingtasksrc
2021-04-13 09:35:25
2054
原创 千分位数字
// 千分位数字Vue.prototype.$num_filter = (val) => { //有数值或为0的时候进行操作 if(val || val == 0) { //为字符串的话转为数字 if(typeof(val) == 'string') { val = parseFloat(val) //为数字就不用转换 } else { val = val } // 先保留两位小数后再格式化为浮点型数字 v
2021-04-12 10:46:43
262
原创 正则验证金额
正则验证输入金额（纯数字、小数点后两位）Vue.prototype.$judgeMoney = function (money) { if(money) { let reg =/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; if(reg.test(money)) { return money } else { return this.$message.error('请输入正确的金额') } }}...
2021-04-01 13:41:33
1663
1
原创 scss引入其他scss变量，且通过js动态修改scss变量（亲测，已修改）
先展示结果统一用的html<template> <div class="home"> <h1>Gordon-Liu</h1> <h2 ref="h2">Gordon-Liu</h2> <h3>Gordon-Liu</h3> </div></template>1、scss引入其他scss变量test.scss文件 //定义scss变量
2021-03-26 11:20:37
15408
9
原创 element-ui中远程搜素，input实现搜索下拉框（可保留输入内容），或select实现搜索下拉框（不可保留输入内容）
实现效果，选择数据后，可将其他数据也带出来并在页面上显示input实现搜索下拉框<el-form-item label="账户名" :label-width="formLabelWidth"> <el-autocomplete v-model="formTwo.accountName" //输入框所选中的数据 :fetch-suggestions="querySearchAsync1" //下面方法 :trigger-on-focus="false" //
2021-03-13 20:32:11
3658
原创 在vue项目中moment.js的简单使用
先执行安装命令npm install moment --save引入momentimport moment from 'moment'; //直接引入moment.jsVue.prototype.moment = moment; //在原型上添加moment，this.moment使用即可直接使用即可，课转换任何格式created() { this.a() }, methods: { a() { console.log(this.moment(16
2021-03-10 20:33:50
797
原创 简单和复杂的vuex配置
简单的vuex配置//将数据都存到本地存储中this.$store.dispatch('onMobile',填写数据) //触发actions异步this.$store.commit('SET_Mobile',填写数据) //触发mutations方法this.$store.state.mobile //获取vuex中的数据import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vue
2021-03-07 17:59:50
192
原创 简单的路由配置
将所有额度路由放在另一个文件中export const myRouter = [ { //跳转路由总页面 path: '/', redirect: '/walletEntrance/home' }, { //404页面配置 path: '*', component: () => import('../components/404.vue'), }, { path: '/pay', name: 'pay', meta: { title: '支付
2021-03-07 17:49:05
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人