青云码上-优快云博客

原创 antd-vue的less默认变量

// The prefix to use on all css classes from ant.@ant-prefix: ant;// An override for the html selector for theme prefixes@html-selector: html;// -------- Colors -----------@primary-color: @bl...

2024-12-18 15:24:00 164

原创 Ant Design Vue 的 a-table 行选择分页时bug处理

有bug的伪代码如下(示例以 id 来作为 rowKey)：<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" rowKey="id" :pagination="pagination" ...

2024-10-31 15:54:00 306 1

原创 antd-vue的 $confirm 增加确定按钮loading

this.$confirm({ title: '警告', content: '确定要xxxxxx吗？', okText: '确定', okType: 'danger', cancelText: '取消', onOk() { return new Promise((resolve,...

2024-03-20 14:59:00 895 1

原创 a-date-picker设置禁用以前的时间（含时分秒）

<a-date-picker v-model="selectTime" show-time format="YYYY/MM/DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" :disabled-time="disabledTime" placeho...

2023-12-25 16:29:00 688

原创 win10设置账户为管理员

首先打开命令提示符，管理员身份运行查看管理员列表net localgroup administrators给账号设置为管理员net localgroup administrators 用户名 /add给账号取消管理员net localgroup administrators 用户名 /delete...

2023-12-19 18:06:00 853

原创 window获取项目目录结构

window自带的tree命令有点问题，试了很多次都不能忽略node_modeules文件夹所以使用 tree-cli 来获取项目目录结构第一步：npm i tree-cli -g第二步：在cmd命令窗口进入到项目根目录，执行命令：treee -l 5, -o out.txt --ignore "node_modules/"*注意是 treee，不是 tree然后就可以看...

2023-11-16 18:09:00 410

原创 vue2组件二次封装

有时候公共UI组件满足不了一些特定的需求样式，并且有较多地方使用同一个UI组件，这时候就需要考虑二次封装现有UI组件组件二次封装关键的几点：使用 $attrs 接收 props使用 $listeners接收事件使用 $slots 和 $scopedSlots 接收插槽使用model定义prop变量及其变化的事件(改变v-model的默认事件(input)，同时避免表单校验时的交互bu...

2023-11-16 14:36:00 182

原创 JS检测Caps Lock是否打开，实现提示【大写锁定已打开】

实现类似这种功能可以给输入框(一般是密码框)绑定 mousedown 事件，然后在事件中直接使用e.getModifierState('CapsLock') 可获取 CapsLock(大小写切换) 是否打开。getModifierState详细文档...

2023-11-09 18:34:00 352

原创 js判断数据类型最准确的方法之一

function getType(data) { const type = Object.prototype.toString.call(data); let res = ''; switch (type) { case '[object Object]': res = 'Object'; break; case '[object Array...

2023-11-06 18:07:00 63

原创 eslint提示 xxx should be listed in the project's dependencies

有时候手动安装了一个npm包A，npm包A里面包含了npm包B，这时候如果import xxx from 'npm包B';eslint会报错，提示 npm包B 不在 package.json 里面解决方法：在 eslintrc.js 增加配置module.exports = { rules: { 'import/no-extraneous-dependencies...

2023-10-25 13:57:00 2686

原创 eslint识别不了别名解决方法

第一步npm i eslint-import-resolver-alias -D第二步：在 eslintrc.js 配置module.exports = { settings: { 'import/resolver': { alias: { map: [ // 这里参照webpack的别名配置映射 ['...

2023-10-25 13:49:00 1147

原创 css修改页面内元素的滚动条样式

<div class="box"> <div class="content"></div></div><style> .box{ width: 100px; height: 200px; overflow: auto; } .content{ ...

2023-09-07 20:56:00 173

原创解决iframe跨域

主项目配置nginxadd_header Origin-Agent-Cluster "?0" // chorme 116版本开始对iframe跨域更加严格，要加此配置子项目配置nginxadd_header Origin-Agent-Cluster "?0"add_header X-Frame-Options 'ALLOW-FROM *.主项目域名1 *.主项目域名2 *.bai...

2023-08-29 14:27:00 678

原创 webpack5和webpack4的一些区别

自动清除打包目录webpack4// bashnpm i clean-webpack-plugin -D//webpack.config.jsconst {CleanWebpackPlugin} = require('clean-webpack-plugin');module.exports = { plugins: [ new CleanWebpackPlugin(...

2023-08-17 16:07:00 848

原创 vue函数式组件

<template>改为<template functional> 即可然后模板里使用到父组件参数的话，需在变量前面加上 props，如<div>{{count}}</div>改为<div>{{props.count}}</div>如果组件比较简单，只是展示数据的话，可以使用函数式组件，函数式组件没有生命周...

2023-08-14 18:02:00 258

原创查询端口进程并结束进程

查询占用某个端口的 PIDnetstat -ano|findstr "端口号"根据 PID 查找进程tasklist|findstr "32080"根据 PID 结束进程taskkill -PID 32080 -F

2023-07-19 15:13:00 87

原创 webpack配置externals汇总

webpack@5.88.1vue@2.7.14vue-router@3.6.5element-ui@2.15.13ant-design-vue@1.7.8externals用于提取第三方依赖包，使用cdn资源的方式将第三方依赖包引入项目，可以大大减少项目打包体积配置externals对象有技巧：key 就是 import aaa from 'bbb'中的bbbvalue 可...

2023-07-19 14:49:00 966

原创 BrowserRouter刷新404解决方案

1、本地开发环境在js脚本命令里加上 --history-api-fallback"scripts": { "serve": "webpack serve --config webpack.dev.js --history-api-fallback"}2、生产环境，可以修改nglnx 配置：server { listen XXXX; //端口号 serv...

2023-07-14 17:38:00 1713

原创图片转base64

两种方法第一种function getBase64(imgUrl) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.src = imgUrl; img.crossOrigin = 'Anonym...

2022-08-01 15:42:00 197

原创 vue全屏插件 screenfull

npm install sreenfull --saveimport screenfull from ‘screenfull’<div @click="fullscreen"> 切换全屏 </div>// 全屏切换fullscreen() { screenfull.toggle();} ...

2022-03-10 17:32:00 1344

原创 vue环境常量拓展

一个环境文件(如 .env .env.dev .env.prod )只包含环境变量的“键=值”对;只有NODE_ENV，BASE_URL和以VUE_APP_开头的常量将通过webpack.DefinePlugin静态地嵌入到客户端侧的代码中，但我们可以通过修改webpack的配置来让项目支持其他命名方式的常量:// vue.config.jsmodule.exports...

2022-02-16 10:22:00 230

原创微信X5内核调试

微信X5内核调试第一步debugmm.qq.com/?forcex5=true第二步http://debugtbs.qq.com/第三步http://debugx5.qq.com/

2022-01-17 13:09:00 2237

原创 mac安装Homebrew和 tree

安装Homebrew直接复制以下命令安装即可：/bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)" 安装了Homebrew就可以使用brew命令了。安装tree我安装Homebrew是为了安装 tree：brew install tre...

2022-01-06 14:40:00 1243 1

原创输入框只能输入数字（最好用）

原生js<input type="text" oninput="iptEvent(value, event)" placeholder="只能输入数字" />function iptEvent(value, e) { // 纯数字，不含小数点 e.target.value = value.replace(/\D/g,''); // 纯数字，或者2位内小数 /...

2021-12-31 01:24:00 473

原创 vue中 .sync 的作用

我们使用 vue 编写弹框组件的时候，想要关闭弹窗时往往会写个关闭的方法，子组件$emit，父组件里还要加 @xxx="xxxxx"，非常的不优雅，现在使用 .sync 就非常方便优雅地控制弹窗显示和隐藏了。父组件：<myModal :show.sync="modalShow" />//编译时会被扩展为<myModal :show="modalShow" @u...

2021-12-21 16:29:00 373

原创打包 vue 组件为 web-component

vue build --target wc --name componentName src/components/xxxxxx.vuecomponentName：web-component 组件名字，自己取src/components/xxxxxx.vue：vue组件路径

2021-12-17 13:57:00 947

原创数组去重（根据对象属性去重）

普通去重[...new Set(arr)]根据对象属性值去重function unique(arr,u_key) { let map = new Map() arr.forEach((item,index)=>{ if (!map.has(item[u_key])){ map.set(item[u_key],item) } }) retur...

2021-12-13 15:44:00 320

原创 Element.scrollIntoView()

Element接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。语法element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop); // Boolean型参数element.scrol...

2021-09-28 11:21:00 477

原创常用正则校验

匹配中文：/[\u4e00-\u9fa5]/匹配表情：/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/匹配手机号：/^[1][3,4,5,6,7,8,9][0-9]{9}$/匹配座机：/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{...

2021-08-30 20:46:00 92

原创 js下载文件

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...

2021-08-18 11:10:00 150

原创控制animation暂停：animation-play-state

.active { animation-play-state: running;}.paused { animation-play-state: paused;}

2021-05-19 15:45:00 743

原创苹果手机 z-index 失效

原因：在苹果手机上， transform变换的时候会让z-index“临时失效”，其实并非z-index失效了，只是z-index被用在不同的 stacking context 上，而非在默认的 context 上同等地比较层级了。所以 DOM 在transform的工程中，DOM 处于一个新的 stacking context 里，z-index也是相对于这个 stack...

2021-05-13 19:39:00 859

原创手写flat

let arr = [1,[2,3,[4]],5,6,[7,[8],[9,10,[11],12]]];Array.prototype.myFlat = function(n){ let newArr = []; this.forEach(item=>{ if(Array.isArray(item) && n > 0){ newArr...

2021-05-05 17:14:00 105

原创简单版手写promiss，包含resolve，reject，then链式调用

// 要模拟promise的构造函数 function MyPromise(fn) { this.data = null; // 要resolve的数据 this.err = null; // 要reject的数据 this.resolveCallback = null; // 存放resolve的回调，即 .then 里面的函数 this.reje...

2021-04-28 21:34:00 300

原创使用@supports完美兼容CSS属性

今天写微信小程序遇到一个问题：给page加 150rpx 的 padding-bottom 值，我考虑到 iphone X 系列的底部黑线，参考我之前写的css属性——env()和constant()设置安全区域；所以我这样写：page{ padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx); padding-...

2021-04-21 19:58:00 860

原创 fetch请求文件流并下载（Excel）

1、blob文件流fetch(url,{ method: 'get', responseType: 'blob'}).then(res => { return res.blob();}).then(blob => { let bl = new Blob([blob], {type: "application/vnd.openxmlfo...

2021-04-17 19:55:00 4078

原创 H5阻止IOS回弹

2021-04-16 14:50:00 904 1

原创 http（超文本转移协议）

HTTP全称：Hypertext Transfer ProtocolTransfer是转移的意思，不是传输的意思“传输”的英文单词应该是“transport”，而不是“transfer”“transport”(传输)的含义是指：从端到端(例如从ip1:port1到ip2:port2)可靠地搬运比特，也就是TCP/IP协议栈中的第3层传输层(transport layer)协议所做的那些事情...

2021-04-08 10:42:00 312

原创 vue项目打包分析

修改package.json中的script，在build后面加个--report"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report", "lint": "vue-cli-service lint" },这样打包文件里就会生成一个r...

2021-03-31 20:29:00 1324

原创 js排序之快速排序

快速排序的3个基本步骤：从数组中选择一个元素作为基准点排序数组，所有比基准值小的元素摆放在左边，而大于基准值的摆放在右边。每次分割结束以后基准值会插入到中间去。最后利用递归，将摆放在左边的数组和右边的数组在进行一次上述的1和2操作。快速排序实现方式一(简明易懂，好理解，好写，适合面试时候写)var quickSort = function(arr) { if (arr.len...

2021-03-30 02:06:00 226

空空如也

空空如也