前端
朽木自雕xmzd
朽木自雕
展开
-
【css设置滚动条粗细】
List itemcss设置滚动条粗细*::-webkit-scrollbar { width: 12px; height: 12px;}*::-webkit-scrollbar-button { width: 0px; height: 0px; display: none;}*::-webkit-scrollbar-corner { background-color: transparent;}*::-webkit-scrollbar-thumb { b..原创 2022-05-17 11:17:17 · 3684 阅读 · 1 评论 -
vue禁止鼠标滚轮事件(禁止弹窗后面的遮罩层下的背景滚动)
vue禁止鼠标滚轮事件(禁止弹窗后面的遮罩层下的背景滚动)代码如下代码如下原理: 监听visible的变化,然后通过禁止、解除鼠标滚轮事件来禁止背景滚动<<template> <div class="dialog-wrapper" v-show="visible" @click.self="close"> <div class="dialog target"> <slot></slot> </div&原创 2021-07-22 10:08:12 · 1719 阅读 · 0 评论 -
vue配置全局使用scss的变量和函数
vue配置全局使用scss的变量和函数一、安装sass-resources-loader二、在vue.config.js中添加配置三、使用及效果图一、安装sass-resources-loadernpm i sass-resources-loader -D二、在vue.config.js中添加配置mixin.scss为需要全局访问的装有变量和函数的文件module.exports = {// 下面是要增加的配置 chainWebpack: config => { const原创 2021-04-27 10:23:02 · 1428 阅读 · 0 评论 -
cordova打包vue项目页面白屏及不显示图片问题解决
cordova打包vue项目页面白屏一、遇到的问题二、分析与解决一、遇到的问题在使用Cordova打包vue项目时,使用cordova run android进行真机调试,app总是显示白屏,也就是vue的那一部分代码没有起作用二、分析与解决试了很多种网上的方法,发现都没有什么用,都是过时的解决办法。最后发现是因为路径的原因导致的。vue项目依赖: "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "原创 2021-04-26 18:01:42 · 1844 阅读 · 0 评论 -
Vue多环境配置
Vue多环境配置一、需求二、项目目录三、添加配置文件四、使用五、启动脚本六、跨域一、需求由于开发环境和生产环境的配置文件不一样,所以要进行自动化加载对应环境的配置二、项目目录三、添加配置文件.env.devNODE_ENV = 'development'VUE_APP_MODE = 'dev'VUE_APP_API_URL = 'http://localhost:8080'VUE_APP_UPLOAD_URL = 'http://localhost:8080'outputDir = d原创 2021-03-22 15:49:19 · 1043 阅读 · 0 评论 -
谷歌插件学习之某设计网站非会员去水印下载图片
谷歌插件学习之某设计网站非会员去水印下载图片一、免责声明:此博客只用来进行技术交流,如有不当之处,请联系我删除!二、谷歌插件学习网址三、目标网址去水印及非会员下载原理分析四、插件下载方式一、免责声明:此博客只用来进行技术交流,如有不当之处,请联系我删除!二、谷歌插件学习网址官方文档:https://dev.crxhome.org/guide/what-is-extensions.html#%E4%BB%80%E4%B9%88%E6%98%AF%E6%89%A9%E5%B1%95中文文档:h原创 2021-02-23 17:13:59 · 1216 阅读 · 5 评论 -
自定义事件同时接收父组件和子组件的参数
自定义事件同时接收父组件和子组件的参数需求:自定义了一个事件,使用$emit进行派发,此时传递了一个参数this.$emit('current-change', this.internalCurrentPage);父组件进行监听,传递一个数字6过去@current-change="handleCurrentChange(6)"控制打印发现val为6,num为undefined,说明子组件的参数没有接收到 handleCurrentChange(val,num)...原创 2020-12-22 16:05:01 · 311 阅读 · 0 评论 -
Vue.extend你所不知道的秘密
Vue.extend你所不知道的秘密原创 2020-11-25 11:42:41 · 375 阅读 · 0 评论 -
安卓的微信H5端图片长按不能保存图片 ,长按没反应解决办法
安卓的微信H5端图片长按不能保存图片 ,长按没反应解决办法首先是用网上的常用解决办法:将DOM转换成base64的数据嵌入到img标签中。但是出现如下问题:ios端的微信是没有这个问题,只有安卓端有,研究了一天了,最后发现是安卓端里,img标签嵌套不能大于body里面两层,超过了就没反应了,比如这样就会没反应<div> <div> <div> <img src="" alt="">原创 2020-11-25 11:09:58 · 7575 阅读 · 2 评论 -
vue如何动态绑定img的src的同时给它一个默认的图片
vue如何动态绑定img的src需求场景:当获取不到用户的头像时,需要一个默认的头像作为展示解决办法:使用require引入图片就可以了 <img class="item-img" :src="headIMG(item.HEAD_URL)" /> methods: { headIMG(img) { const imgData = require('./img/customerHeadIMG@2x.png') return img ?原创 2020-11-12 18:35:47 · 560 阅读 · 0 评论 -
使用webpack将所有组件打包起来,并通过script标签直接使用
使用webpack将所有组件打包起来,并通过script标签直接使用需求:需要将所有的组件打包起来,通过script标签引入html页面,在页面上使用自定义的组件名就能直接使用,就像element-ui效果如下:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.原创 2020-07-31 11:47:01 · 2064 阅读 · 2 评论 -
理解js中的防抖与节流
js中的防抖与节流防抖(debounce)概念:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。举例:电脑一段时间(假设10分钟)不操作之后会自动息屏,当你在10分钟只能操作...原创 2020-07-18 21:40:24 · 323 阅读 · 0 评论 -
微信公众平台登陆签名算法分析
微信公众平台登陆签名算法分析网址:https://mp.weixin.qq.com/目标:登陆签名算法逆向开始步骤一:打开调试器,选中xhr,看到密码被加密了步骤二:搜索关键词 “pwd” ,发现可疑代码,直接进入文件下断电步骤三:重新发送登陆请求,发现我们找的位置是正确的,F11进入到函数内部步骤四:我们发现了这个加密函数,这时,我们只需要把整个块的代码复制出来就行了(稍做改动)。然后再编辑器中验证一下步骤五:验证结果正确 0.0。...原创 2020-06-21 00:35:40 · 673 阅读 · 0 评论 -
解决Vue多维数组修改某一值后页面不渲染的问题
解决Vue多维数组修改某一值后页面不渲染的问题问题如下:this.data为vue的data中的数据,它是一个数组,数组里面是对象,数组中有一个selected属性,当在初次渲染完毕后,修改selected的值时,DOM并没有再次渲染。使用了this.$set()登方法,但是不是很好。 // 判断是否是编辑模式,否则直接打开图书开始阅读 if (this.isEditMode) { this.data.forEach((item) =>原创 2020-06-20 21:41:23 · 1329 阅读 · 0 评论 -
q某音乐API接口分析--获取vKey和Sign
q某音乐API接口分析--获取vKey和Sign在q某音乐网站中,想要获得一首歌曲的资源链接(必须要这两个参数vKey和Sign,破解有一定的难度)步骤一:F12打开开发者工具,在network中点击XHR,筛选ajxa请求(一般的数据请求都是使用ajax),这里这种数据都很简单,没有加密,没有sign(签名,口令等),不做分析步骤二:随便点击一个歌单,进入到歌单播放页面(https://y.qq.com/portal/player.html),右边红色圈圈里面的是歌曲的链接地址,一原创 2020-06-20 18:56:41 · 4297 阅读 · 10 评论 -
vue项目打包上线后页面样式与开发页面不一致
vue项目打包上线后页面样式与开发页面不一致原因:打包的过程会进行优化,导致引入样式文件的顺序发生变化解决办法:将自己写的样式文件放在最后面,框架什么的放在前面注意:每个组件的样式文件记得加上scoped,防止样式冲突...原创 2020-06-10 22:11:54 · 3825 阅读 · 0 评论 -
如何进行PC端多屏适配
如何进行PC端多屏适配多屏适配的几种方法:使用媒体查询,如 bootstrap等框架 制作设计图的时候,给一个固定的宽度,如1200,背景使用纯色,或者大背景图 使用rem 其他这里介绍一下 rem 适配方案:能够流畅的适配不同分辨率的屏幕,并且开发效率跟使用px开发没什么区别,只是多了将px转化成rem的css函数效果图如下(可以看到在不同的分辨率下,依然可以保持较好的布局):使用上述方案的步骤:根据设计稿算出 px转化成rem 的缩放比(这里我的设计稿是 192.原创 2020-05-31 00:15:19 · 5209 阅读 · 2 评论 -
animation动画卡顿或有锯齿感
animation动画卡顿或有锯齿感卡顿原因:浏览器是单线程运行的。但是我们要明确以下几个概念:单线程,主线程和合成线程。虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2个重要的执行线程,这 2 个线程协同工作来渲染一个网页:主线程和合成线程。一般情况下,主线程负责:运行 JavaScript;计算 HTML 元素的 CSS 样式;页面的布局;将元素绘制到一个或多个位图中;将这些位图交给合成线程。相应地,合成线程负责:通原创 2020-05-28 05:31:48 · 3476 阅读 · 0 评论 -
浏览器工作原理之渲染引擎
浏览器工作原理之渲染引擎一、浏览器渲染引擎主要模块一个渲染引擎主要包括:HTML解析器,CSS解析器,javascript引擎,布局layout模块,绘图模块HTML解析器:解释HTML文档的解析器,主要作用是将HTML文本解释成DOM树。CSS解析器:它的作用是为DOM中的各个元素对象计算出样式信息,为布局提供基础设施Javascript引擎:使用Javascript代码可以修改...原创 2020-04-14 04:46:03 · 800 阅读 · 0 评论 -
详解浏览器的工作原理之重绘和重排
详解浏览器的工作原理之重绘和重排css图层浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。在渲染DOM的时候,浏览器所做的工作实际上是: 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果 (Recalculate style--样式重计算) 3. 为每个节点生成图形和位置 (Layout--重排,回流) 4. 将每个...原创 2020-04-14 04:42:33 · 485 阅读 · 0 评论 -
前端实战小案例--好看的拟态效果实现
好看的拟态效果实现--前端实战小案例想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了!不积跬步无以至千里,不积小流无以成江海。效果图如下:代码如下:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-...原创 2020-04-13 08:32:39 · 2045 阅读 · 0 评论 -
js设计模式---观察者模式原理与实现
js设计模式---观察者模式1、概念Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态。Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步。注意:有的人也称其为发布订阅模式,但二者其实有细微的差别,发布订阅模式比观察者模式多了一个调度中心。如下图:左为观察者模...原创 2020-04-11 04:59:08 · 871 阅读 · 0 评论 -
详解 js 函数中的 arguments
详解 js 函数中的 arguments1、什么 arguments简单来说:arguments是一个对应于传递给函数的参数的类数组对象arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处。例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:a...原创 2020-04-10 04:25:15 · 13626 阅读 · 0 评论 -
如何设置html的fontsize使得页面元素的大小随屏幕的宽度或高度变化
如何设置html的fontsize使得页面元素的大小随屏幕的宽度或高度变化效果图:(可以看到顶部的菜单栏在跟随页面大小而变化)代码如下 :(在首页加入这段代码,然后使用 rem 设置元素的属性) <script> (function (doc, win) { var docEl = doc.documentEleme...原创 2020-03-07 12:06:30 · 4061 阅读 · 0 评论 -
CSS伪元素设置背景图片不显示解决
CSS伪元素设置背景图片不显示解决 &::after{ position: absolute; bottom: 0; right: -13px; width: 40px; height: 40px; ...原创 2020-02-12 05:24:49 · 7437 阅读 · 2 评论 -
禁用鼠标滚轮事件
代码如下:这是在vue中写的,想要普通的自己改改就行,加个function,去掉this _scrollFunc(evt) { evt = evt || window.event; if(evt.preventDefault) { // Firefox evt.preventDefault(); ...原创 2020-02-11 12:29:40 · 832 阅读 · 0 评论 -
vue-cli4使用全局less文件中的变量该如何配置
目录结构如下:需求:在Navgation.vue中使用global.less中的变量vue-cli3的配置方法如下:传送门vue-cli4的配置方法如下:安装 style-resources-loadernpm i style-resources-loader -D在 vue.config.js 中加上如下配置,没有则创建该文件,文件名不能改,如下:// vue...原创 2020-02-10 19:58:23 · 5928 阅读 · 0 评论 -
webpack学习之webpack.config.js详解
一、webpack基础配置在项目根目录创建webpack.config.js 文件,只能是这个文件名 打开 webpack.config.js ,开始编写配置信息 // 输出模块// __dirname是nodejs的一个全局变量,它指向当前执行脚本所在的目录。module.exports = { entry: __dirname + "/src/index.js"...原创 2020-02-06 00:32:25 · 6050 阅读 · 0 评论 -
vue-cli3自动消除console.log()的调试信息
vue-cli3自动消除console.log()的调试信息在vue-cli3里面已经有这个功能了,只需要开启这个功能就行了,默认是关闭的找到生产环境的配置文件 然后找到 UglifyJsPlugin 这个插件添加一行代码...原创 2020-02-05 14:52:49 · 3211 阅读 · 0 评论 -
django+nginx+uwsgi部署vue项目
一、需求分析前端:vue.js,后端:python+django服务器:腾讯云( ubuntu18.04.1 LTS )使用 nginx + uwsgi 将该项目部署到服务器上二、准备将vue项目打包到dist 目录,能在开发环境正常运行的 准备好django项目,能在开发环境正常运行的三、将vue项目的dist目录放到django中将vue项目打包后的dist...原创 2020-02-05 01:15:53 · 1671 阅读 · 9 评论 -
使用vue-cli搭建的vue项目中,把项目发布到服务器上时,使用域名访问可以出现页面,但是ajax请求的URL中带有undefined,无法获取到数据
使用vue-cli搭建的vue项目中,把项目发布到服务器上时,使用域名访问可以出现页面,但是ajax请求的URL中带有undefined,无法获取到数据,如:其中的一个ajax请求:http://xmzd.wang/undefinedapi/getSingerList/,这里有一个undefined导致无法正常发出请求。原因:当使用npm run build打包项目时,该项目默认会使用produ...原创 2020-02-04 21:00:13 · 2344 阅读 · 1 评论 -
vue.runtime.esm.js?ff9b:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.
报错信息:vue.runtime.esm.js?ff9b:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers.[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Erro...原创 2020-01-23 15:54:18 · 1343 阅读 · 3 评论 -
less函数传参和字符串拼接
在vue项目中,组件中使用的是less语法,当写成这种样式是,图片在network中可以正常获取到,但是无法显示在页面上.bg-image(@imageName){ background-image: url("./@{imageName}.png");}> .icon{ display: inline-block; width: 25px; he...原创 2020-01-11 17:24:59 · 6121 阅读 · 0 评论 -
关于某Q音乐提示referer不合法解决方法
首先:你需要使用后台代理的方式,越过跨域请求问题然后:后端在请求数据时,返回数据如下:(提示 referer不合法)此时的 referer为 "referer": "https://c.y.qq.com"无意中把 referer改为"referer": "https://c.y.qq.com/",发现能正常请求并返回数据后端代码如下: (出问题的是最后一个getDi...原创 2020-01-09 09:01:00 · 1063 阅读 · 0 评论 -
vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated
报错信息:vue-router.esm.js?fe87:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/recommend/000Si7...原创 2020-01-08 15:47:25 · 8525 阅读 · 3 评论 -
vuex中state的数据发生变化,但是getters中的数据没有变化,或者报错: Error in render: "TypeError: Cannot read property 'name' o
vuex中state的数据发生变化,但是getters中的数据没有变化在vue-devtool中可以看数据都是undefined,报错如下(此时Mutation中是使用state.xxx=xxx进行数据赋值):或者报错:[Vue warn]: Error in render: "TypeError: Cannot read property '这里随便是什么' of undefin...原创 2019-12-15 03:56:41 · 1176 阅读 · 0 评论 -
如何在CSS中使用算术表达式
有时候,我们需要在CSS中使用一个计算出来的值,而不是一个固定的值,这时候我们可以使用calc()。注意:符号两头都需要有空格!!!代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>高度充满父容器</title> &...原创 2019-12-11 10:57:47 · 1161 阅读 · 0 评论 -
CSS设置文字镂空效果
CSS设置文字镂空效果color设置transparent,也就是透明-webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色color: transparent;-webkit-text-stroke: 1px @theme-font-color;...原创 2019-12-09 10:11:57 · 4021 阅读 · 1 评论 -
vuex.esm.js?358c:90 Uncaught Error: [vuex] mutations should be function but "mutations.default" is {
报错信息:vuex.esm.js?358c:90 Uncaught Error: [vuex] mutations should be function but "mutations.default" is {}.解决办法:将import * as mutations from './mutations'改为:import mutations from './mut...原创 2019-12-07 15:46:15 · 1311 阅读 · 0 评论 -
vue动画只有离场动画,进场动画不生效
存在问题的图:(只有离场动画,进场动画不生效)解决之后效果图:解决办法:在transition标签中加入appear属性<template> <transition mode="out-in" appear> <div class="singer-detail"> </div> </trans...原创 2019-12-07 15:05:38 · 2521 阅读 · 6 评论