白菜new-CSDN博客

原创利用Less修改element-ui组件的样式

利用Less修改element-ui组件的样式在vue项目中用的最多的便是嵌套，利用Less嵌套的方法，在全局中划出了一个作用域，这样便能直接修改当前使用的element-ui组件样式，且不会破坏全局其他样式。<style lang="less">.sms-alert { .el-dialog__header { font-size: 16px; font-weight:bold; } .el-dialog__body { padding-top: 0;

2020-08-19 15:24:25 4236

原创移动端css适配方案

大多数时候开发页面需要做一定适配，这里记录两种1.设计图以PC为模板2.设计图以移动端为模板首先我们需要利用meta标签对viewport进行控制(如果不知道viewport可以先干完活去了解一下，不影响使用)content属性值：以下的meta标签即让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放；如果不这样设定好就会使用比屏幕宽的viewport，就会出现横向滚动条二、rem控制1.设计图以PC为模板代码如下：2.设计图以移动端为模板代码如下：......

2022-06-14 12:02:38 1811 1

原创 JavaScript 正则表达式获取url后的内容（第一个问号后的内容）

最近开发小程序遇到个需求，通过扫码进入小程序，需要获取到二维码带进来的内容。再将其转换为对象类型目标是获取问号后的数据，首先通过?将url分成两部分

2022-06-13 12:01:38 979

原创一文了解python操作excel（使用openpyxl）

二、关于修改load_workbook(path) 获取工作本，path填写相对应地址查看所有工作表选择工作表max_row 最大行 min_row 最小行max_column 最大列 min_column 最小列修改某一单元格读取单条数据保存工作本三、关于删除删除表 remove(sheet)...

2022-06-02 14:30:15 830

原创 JavaScript 二进制转base64图片 and 对象转换为byte数组

二进制转base64图片 and 对象转换为byte数组

2022-05-26 14:07:39 1983

原创解决 vite 中 import_meta.globEager is not a function的问题

项目场景：由于是旧项目通过vue-cli进行创建，使用的是webpack，随着业务的发展后台代码逐渐增多，本地开发每次等一两分钟。修改编译工具，改用vite问题描述接口、路由文件、store模块的自动化引入从require.context转为import.meta.globEager，启动vite，浏览器报错import_meta.globEager is not a function浏览器中定位错误发现，编译后的代码，将import_meta自动声明了解决方案：import.meta

2022-04-18 10:06:09 8822 5

原创 threejs加载GLTFLoader模型时出现未能解析three模块标识符

今天在学习three.js遇到了导入模块出错的问题我使用原生html导入GLTFLoader时遇到了报错import { GLTFLoader } from "./three.js/examples/jsm/loaders/GLTFLoader.js"我重复检查引入的地址都没有问题，我也没有使用three的标识符，官方的案例也是一样的引入，但是案例在引入前多了以下的代码<script type="importmap"> { "imports": { "three": ".

2022-02-09 17:29:25 3566 2

原创 JS点击按钮复制文本

在PC端上通过点击按钮复制对应文本的业务场景，不经常有，但是让我碰见了，也了解了下实现方法。1、通过createElement生成一个input输入框，并将其透明度设为0，使得用户无感知；2、将需要复制的内容赋值到输入框内，（一定要将输入框添加到页面body中）才能使用select函数选中。3、通过document.execCommand(“copy”)执行浏览器复制命令，就能将对应文本进行复制了function handleCopy(text) { const input = document

2021-12-24 10:31:18 1599 8

原创在vue3.0的JSX语法下使用插槽

由于在vue2中JSX的语法在渲染和代码简洁度上有优化，偶尔也会用JSX的形式封装组件；新的项目里开始用vue3发现，以前丢插槽的两种方式行不通了，得想想办法才行。// vue2 插槽写法render (h) { const { $scopedSlots } = this // 第一种 const { title = () => h('p' , { style : 'margin-top: 0' } , this.title) , } = $scopedSlots

2021-12-23 18:06:39 2508

原创 elementUI 让Notification组件弹出到最上层

问题描述：在使用dialog对话框等有modal遮罩层的组件时，再使用Notification通知组件便会遇到，遮罩层把通知掩盖住了@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析：提示：这

2021-12-22 14:36:20 3001

原创一道题带你了解js闭包

function Foo() { var i = 0; return function() { console.log(i++); }}var f1 = Foo(), f2 = Foo();f1();f1();f2();// 上面这个js程序输出的是什么（）？A、 0 1 0B、 0 1 2C、 0 0 0D、 0 0 2答案留到最后！一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁，但是此题Foo函数返回了一个匿名函

2021-10-11 09:00:15 104

原创有趣的排序思想

一、计数排序统计每个数字出现的次数12133221232个3个2个1122233应用场景：简单的单值排序问题，排序问题中数据的值域很有限leetCode1122.数组的相对排序便是用到计数排序的思想var relativeSortArray = function(arr1, arr2) { let cnt = new Array(1001).fill(0); for (let x of arr1)

2021-10-08 17:37:46 68

原创在js中获取vue文件的style标签下的内容

前言：由于业务需求，将页面内容转成pdf，前端需要提供整个页面的dom元素提供给后端，但样式并不是在行内而是在<style>标签里。解决方案：通过原生属性 document.styleSheets 读取vue单页面组件加载过的所有css样式const cssBlock = document.styleSheets有了获取到的css样式表就能遍历去找到我需要的，由于是伪数组，我们先用ES6解构一下；点开可以发现他的顺序是从页面初始化开始，大概率我们需要的样式会在最后，所以我们用re

2021-08-06 09:48:35 2247

原创 CSRF及XSS认识

CSRF (Cross-site request forgery)：跨站请求伪造即攻击者盗用了你的身份，以你的名义发送恶意请求CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！简单阐述CSRF攻击的思想：1.user 浏览并登陆信任网站 A2.网站A 验证通过，在 user 产生A的Cookie3.user 在没有登出A网站的情况下，访问危险网站B4.网站B 要求访问网站A ，发出一个请求(r

2021-07-26 18:02:44 92

原创 Vue3 compile模块①——学习编写AST抽象语法树

文章目录前言一、AST抽象语法树是什么？二、看一眼AST语法树三、写一下AST语法树第1步、语义拆分，将标签拆分成数组第2步、数组转换成树，利用递归实现AST总结前言最近在看vue3.0的compile模块，用到了AST抽象语法树，在网上找资料发现国内比较缺乏相关内容，看到热门的是用一个插件去解析和操纵JavaScript版的AST语法树，但我想了解的是单页面应用里的标签是怎么形成语法树的，自己能否学着写一下。一、AST抽象语法树是什么？AST（Abstract Syntax Tree）是源代

2021-07-09 17:32:08 857 2

原创 js字符串函数substr替换使用技巧

替换字符串前言一、思路二、运用前言最近在业务场景中有些电话号码、银行卡等信息需要将中间几位替换为*，自然的想到了substrsubstr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)一、思路我们从传入的参数有4个/** * @param {string} str 原字符串 * @param {number} start 开始替换的位置 * @param {number} stop 停止替换的位置

2021-07-06 17:20:47 1860

原创轻松解决element UI 表单重置问题

三步解决前言一、从ui框架入手二、上手表单1.设置表单初始值2.表单初始化赋值以及一些通用参数3.给表单抽屉/弹窗设置open方法总结前言在后台管理系统中，最常见的业务就是CURD，对数据进行增删改，通常情况下新增与编辑我们会做成一个通用组件，我们在不使用v-if的情况下如何重置我们的表单呢？技术栈：vue3.0 + elementPlus一、从ui框架入手方法名说明resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果clearValida

2021-06-29 17:57:26 4091 4

原创 js正则表达式获取文件名和后缀

获取文件名let fileName = file.name.replace(/(.*\/)*([^.]+).*/ig,"$2")获取文件名后缀// 匹配 . 之前除换行符以外的所有字符替换为""let fileType = file.name.replace(/.+\./, "")

2021-06-07 10:18:01 4372 1

原创项目中遭遇监听input框操作报错 [object InputEvent]类型

发生场景在使用ant-design-vue的ui框架中，对查询表单做了个封装。希望在函数式组件监听input框修改内容时返回值。一开始是使用@input触发监听listeners[‘input’] (value)当输入内容时，便会报错[Vue warn]: Invalid prop: type check failed for prop “value”. Expected String, Number, got InputEvent 解决办法通过面向百度编程，我猜测由于vue双向绑定的关

2021-05-21 16:20:20 1312

原创解决WebStorm编辑器的CSS文件链接图片时遇到泛红警告

前端Vue项目在WebStorm中打开，使用less语法链接的图片会受到编辑器的警告。我们只需打开File下的Settings，找到Webpack配置配置找到当前项目的node_modules@vue\cli-service\webpack.config.js确认稍等一下编辑器警告清除掉了...

2021-05-18 09:03:21 870

原创从零开始创建Maven项目

Maven 相关使用命令向导一步步创建项目1）在硬盘上创建一个空的目录，用来存放Maven项目，如E:\temp\demoMaven。2）打开 CMD 窗口，用 cd 命令，切换到 demoMaven 目录比如一般有如下目录。3）在 CMD 窗口中输入“mvn archetype:generate”，按 Enter 键。联网初始化一段时间后（一般不少于 5 分钟），会一步步提示输入 groupId、artifactId、version、packageName 等信息。最后创建成功，而且可以在 E

2021-05-13 08:41:02 380

原创学会就能看懂vue源码（一）—— 数据属性、访问器属性、Object.defineProperty方法、Object.getOwnPropertyDescriptors方法

学会就能看懂vue源码（一）前言数据属性访问器属性Object.definePropertyObject.getOwnPropertyDescriptors测验前言了解vue2双向绑定原理，决定从源码入手，引申了不少基础知识，决定记录一下。相信学会这些就能看懂双向绑定原理的部分源码了数据属性包含的是一个数据值的位置，在这可以对数据值进行读写。数据属性的四个特性：configurable ：表示能否删除从而重新配置定义其属性，能否修改属性的特性，默认为trueenumerable ：表示能否通

2021-05-12 14:19:42 429 1

原创从浅入深——理解JSONP的实现原理

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持GET请求）;实现过程： 1.在客户端定义一个回调方法，预定义对数据的操作； 2.再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口； 3.服务器

2021-05-10 17:11:53 78 6

原创 webpack Proxy工作原理

webpack Proxywebpack Proxywebpack-dev-server工作原理跨域webpack Proxywebpack Proxy , 即wepack提供的代理服务，将客户端发送的请求转发给其他服务器目的是为了解决开发模式下的跨域问题想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-serverwebpack-dev-server是webpack官方推出的一款开发工具，将自动编译和自动刷新浏览器

2021-05-07 10:12:22 826 1

原创使用toString判断所有js数据类型

文章目录前言一、toString二、上代码三、扩展判断变量为空前言由于JavaScript是一种解释型编程语言，声明变量并不需要定义类型，变量可以随时更改存储数据的类型。我们都知道 typeof 可以判断数据类型，但遇到 null 、array等其他数据类型时，就需要用到更为详细的toString了一、toStringtoString() 是 Object 的原型方法，调用该方法，默认返回当前对象的[[Class]]。其格式为[object Xxx] ，其中 Xxx 即为目标的类型二、上代码

2021-04-29 17:50:27 618

原创使用原生 JS 完成头部吸顶操作

使用原生 JS 完成头部吸顶操作1.通过 querySelector 获取 product 元素节点，获取 product 对象到其上级层顶部的间隔 offsetTop2.使用 onscroll 原生方法监听滚动条滚动的高度3.当滚动的高度大于对象到其上级层顶部的间隔则对 product 定位进行固定4.当其他情况则清空 product 定位的属性(function (product , productTop , scrollT) { product = document

2021-03-09 09:52:41 217

原创 Vue下实现element的select选择器下拉加载更多

select选择器实现下拉加载更多可以将此细分为，1.下拉到底部； 2.触发请求； 3.加载，难点便只是在下拉到底部。我们要想知道是否已经触底，首先找到拥有滚动条的元素在select 添加 ref<template> <el-select v-model="value" ref="select" placeholder="请选择" :loading="loading"> <el-option v-for="item in options"

2021-01-27 13:53:08 3055 7

原创 Swiper3 导航栏的轮播

Swiper3 导航栏的轮播最近迭代旧项目开发移动端，使用 swiper3 制作一个拥有的导航栏的轮播。单独截取的代码可能跑不起来（主要看 js 的逻辑）先看效果：上代码：记得提前引入 swiper3 的文件swiper_v3.4.2/swiper.min.cssswiper_v3.4.2/swiper.min.js还有 jquery 的也是 3.0版本js<script><%-- 轮播 --%>$(document).ready(function()

2020-09-29 18:04:47 528

原创 div包裹input，出现的幽灵空间，都是vertical-align搞得鬼

div包裹input，出现的幽灵空间，都是vertical-align搞得鬼最近在做表单时发现了div和input框的位置有偏差，出现了幽灵空间，查阅过程找到大牛的文章（需要花比较长时间阅读）。分享一下：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/究其原因就是： input 是内联元素，有默认的 vertical-align，因为这个影响到了basel

2020-09-28 09:58:29 519

navicat100_premium_cs.rar

微软常用运行库.zip

空空如也