Holly1945-优快云博客

原创 element-plus 按钮在一些浏览器中无法显示问题

postcss-selector-not插件解决element-plus按钮样式在一些浏览器上不显示的兼容问题

2022-10-31 11:41:38 1121

原创 element plus 自定义表单控件触发校验

emit,mitt,element plus

2022-08-12 12:55:37 1689

tailwindcsshttps://www.tailwindcss.cn/静态资源cdn 导入：无法自定义 Tailwind 默认主题不能使用任何指令，如： @apply， @variants 等等无法启用更多的变体，如： group-focus无法下载第三方的插件您法 tree-shake 未使用到的 StylesTailwindcss 集成到你的构建过程中npm i tailwindcss@latest postcss@latestnpx tailwindcss initt

2022-04-26 14:07:40 1279

原创 H5在安卓微信浏览器返回时动态获取的数据不会保留（页面刷新了数据初始化了）

解决思路：判断机型跳转前将动态构建的页面内容缓存在sessionStorage中页面加载时，先从sessionStorage中获取数据/** * resloveWechatAndroidReturnRefresh * @param {*} querySelector 要缓存的容器 * @param {*} key sessionItem key * @param {*} fetchContent 动态构建页面内容方法 */function resloveWechatAndroidRet

2022-04-02 15:26:26 1101

原创 nodejs 简单文件下载

const http = require('http')const url = require('url')const fs = require('fs')const path = require('path')function getQueryObj(query) { const queryObj = {} if (query.length) { const queryArr = query.split('&') queryArr.forEach((e, i) =

2022-03-28 18:36:44 774

原创 mockjs学习

简单使用1mock/index.jsimport Mock from 'mockjs'// 占位符扩展const Random = Mock.RandomRandom.extend({ constellation: function(date) { const constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'] return

2022-03-22 15:13:43 372

原创文件下载XMRHttpRequert,fetch,axios

备注： ajax 没有流下载，没有合适的响应类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2022-03-18 20:31:37 500

原创 img标签图片报错处理

方法样式子元素替换监听onerror事件.company-logo { position: relative;}.company-logo:after { content: attr(content); display: block; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; font-size: 12px; line-height: 36px

2022-03-09 17:14:59 1118

原创 proxy与object

const handler = { defineProperty(target, prop, descriptor) { console.log('trigger defineProperty') return Reflect.defineProperty(target, prop, descriptor) }, deleteProperty(target, prop) { console.log('trigger deleteProperty') return

2022-03-03 18:57:34 2254

原创 koa-static源码简单实现分析

const Koa = require('koa');const app = new Koa();// 静态资源// const staticServer = require('koa-static');app.use(staticServer('./static'))app.use(staticServer('./static/img'))const server = app.listen(8899, (res) => { console.log('服务已启动...')})

2022-02-24 19:09:16 246

原创 css 评论框contentediable content + attr 按钮点击效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt

2022-02-24 10:43:07 224

原创 css实现分页分页符pdf打印分页

css 样式page-break-after: always; /在标签后换页/page-break-before: always; /在标签前换页//* 目录 */.mce-toc { border: none; page-break-after: always;}可以打开浏览器 -> 打印 -> 查看效果HTML中不体现

2022-02-22 15:10:20 966

原创 spark-md5 比较大文本

spark-md5import SparkMd5 from 'spark-md5'noChange(value, original) { if (original) { const originalMd5 = SparkMd5.hash(original) const valueMd5 = SparkMd5.hash(value) return originalMd5 === valueMd5 } return false }md5.js

2022-02-21 19:17:18 640

原创 elementui table设置滚动条位置

elementui table设置滚动条位置// table table组件refchangeScrollPosition(position = 0) { if (this.$refs.multipleTable) { this.$refs.table.bodyWrapper.scrollTop = position } }

2022-02-14 10:56:26 1062

原创 js-String

const yy = 'yuusa'const y1 = new String(yy)const y2 = String(yy)console.log(yy, y1, y2)console.log(yy === y1)console.log(yy === y2)console.log('type')console.log(typeof yy)console.log(typeof y1)console.log(typeof y2)// 输出对象值console.log(y1+'')

2022-01-13 11:37:16 153

原创 webpack 生产环境清空打包文件

output.clean v5.20.0+boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }module.exports = { ..., output: { clean: { dry: true } }}dry: true, // 打印而不是删除应该移除的静态资源keep: /ignored\/dir\//, // 保留 'ignored/d

2022-01-10 15:40:11 642

原创 webpack打包css相关

css loaderstyle-loaderMiniCssExtractPlugin.loadercss-loaderpostcss-loaderless-loaderscss-loader…css 文件分离模块化mini-css-extract-plugin 插件{ test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader',

2022-01-07 20:26:18 899

原创前端提升点

如何提高写代码能力https://blog.youkuaiyun.com/qq_29392425/article/details/73650769代码设计、代码逻辑业务流、功能操作流、数据输入输出流，定义函数，定义函数的输入与输出。逻辑建模能力的人来设计函数框架、来设计工具来设计代码模板，然后让没有逻辑建模能力的人来填肉写详细逻辑代码。会定义几个对象来做参数。另外，我也很注重函数的日志、函数的异常保护、异常抛出、异常返回。另外，我也很注重参数输入值的合法性校验。

2021-12-30 10:34:38 195

原创 js复杂参数json转换为url查询参数queryString

在获取到数据params 为object 并且对象中含有数组类型等将params转换为url的查询参数拼在url后面生成的url解决办法：参照axios的方法url + params => urlaxios({ method: 'get' params: { area: '上海', businessWeight： [1, 8] // 重要程度：第一个为min, 第二个为max }})// 生成`baseurl前面是url + action=fetch.lis

2021-12-23 13:01:21 1558

原创 Proxy error: Could not proxy request 请求地址 from localhost:9528 to 代理地址

vue devServer proxy1.是因为代理对象没有开启服务，不能访问到对象服务器2.代理规则写错3.请求超出代理timeout，代理失败我出现的问题是：时不时出现代理错误线上环境正常axios 请求的timeout 为 300000我的proxyTimeout： 3000某些接口速度慢的时候所以请求失败修改我的proxyTimeout属性devServe -> proxy 的配置选项http-proxy-middlewarehttp-proxy-middlewar

2021-12-20 12:09:59 7950

原创 history模式前端路由部署后访问/刷新页面404问题

前端路由实际是路由与组件的映射表访问任何路径，服务器只需要响应index.html （单页面应用）浏览器根据不同路由匹配要渲染的内容刷新操作时候：浏览器会带着地址栏路由请求服务器返回相应地静态资源如果没有找到对应的资源返回 404配置nginx:location / { root /... # vue工程的路由是history模式 try_files $uri $uri/ /index.html; // ** 重点加上这个配置 index index.h

2021-12-17 14:29:41 4465

原创 element ui点击范围外，失焦或者关闭弹窗

v-clickoutside<div class="el-select" :class="[selectSize ? 'el-select--' + selectSize : '']" @click.stop="toggleMenu" v-clickoutside="handleClose"> ...</divimport Clickoutside from 'element-ui/src/utils/clickoutside'export

2021-12-06 10:56:58 957

原创 vue assets图片使用

背景图片background: url("~@/assets/logo.png");

2021-12-01 11:28:29 677

原创 vue-router

open new window打开新窗口const newUrl = this.$router.resolve({ name: 'search-detail', params: { id }}) window.open(newUrl.href, '_blank')

2021-11-30 17:55:53 717

原创 vue组件的options上添加自定义属性

定义在data平级添加attrName，获取this.$options.attrName这是我的idea用法,不知道大家有没有更好的方法因为在使用混入mixins时候，从各个模块导入的api 不同，但功能类似想要实现不同模块挂上各自不同接口import { fetch ,insert, update, delete } from '@/api'export default { apis: { fetch, insert, update, delete }, data() {},

2021-11-22 17:57:13 1764

原创 element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考

element ui的表格列遍历tableData 与表头，找出该列最长的字符max创建span标签计算最长字符所占宽度offsetWidth设置min-width属性(String类型）在组件渲染前计算出最小宽度，避免表格渲染过程宽度高度不稳定其他方案参考：1. render-header 计算出宽度，然后渲染表头 2. header 插槽<script>/** * @description: 计算字符串的字节长度 * @param {*} str * @return

2021-11-22 17:45:36 4110

原创 vue+element-ui表单相关流程

提交校验字段onSubmit(formName) { this.$refs.Form.validate((valid) => { if (valid) { this.isEmptyValidate( () => this.$emit('close'), // 为空确认操作 () => { // 不为空操作/继续提交 this.saveLoading(true) this.$emit('submit', ()

2021-11-19 17:30:43 955

原创 vue 用js的 delete 关键字删除绑定表单的对象删除不成功

问题：在vue elementui 表单数据创建提交之前过滤掉空值的属性，删除后，属性还在问题出现原因:我直接操作vue data 绑定的form而我在组件中设置了监听属性值变化,所以在删除属性时候，监听到变化，又给form 对象设置了这个属性还有值。哈哈哈所以无效删除简单做法：过滤前，将form 深拷贝一份，然后操作。 watch: { bindValue: { handler(value) { this.$set(this.form, this.

2021-11-19 12:15:23 2374

原创 element ui 多列排序样式与实现&后台排序参考

排序：点击上箭头点击下箭头点击表头单元格，有个排序顺序 :sort-orders=“sortOrders” 默认是3个状态顺序切换 “ascending”、“descending” 、nullsortOrders: [null], // 点击表头，只触发清除此列排序状态<template> <el-table-column v-bind="{ ...$props, ...$attrs}" :class-name="getSortClass(prop)">

2021-11-18 19:28:13 903

原创 keep-alive缓存多级菜单相关

keep-alive场景：多级菜单二级菜单信息管理 -> 包含列表、新增、编辑、详情子页面需求：列表页的搜索条件、分页、滚动条位置等状态需要缓存方法：使用vue自带keep-alive 组件<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cache

2021-11-18 19:20:24 508

原创 jsx语法技巧vue

v-bind="$attrs"v-bind="$attrs"<div {...{attrs: this.$attrs}}></div>

2021-11-12 11:37:01 1118

原创 git clean -d -fx慎用error: The following untracked working tree files would be overwritten by checkout

报错error: The following untracked working tree files would be overwritten by checkoutgit clean -d -fx但是千万慎用，用之前备份一下项目代码，特别是项目中不跟踪提交的有用的脚本与配置文件等这个命令会1.-x 删除忽略文件已经对git来说不识别的文件2. -d 删除未被添加到git的路径中的文件3. -f 强制删除这个删除之后，回收站不会有，很难找回来心痛呀！提前安装vscode (loca

2021-11-11 15:13:40 543

原创 git stash drop stash@{0} error: unknown switch `e‘

引用参考windos 10 系统解决办法git stash drop stash@`{0`}

2021-11-11 14:49:38 1549

原创 axios 前端传递复杂参数

添加链接描述import axios from 'axios'import Qs from 'qs'axios({ url: '', method: 'post', data: { name: 'name', age: 'age', infos: [ { value: 'value1', label: 'label1' }, { value: 'value1', label: 'label2' }

2021-11-03 18:30:35 279

原创 office文件后缀对应Mime-Type/content-type

office 后缀对应的 content-type.doc application/msword.dot application/msword.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template.docm application/vnd.ms-w

2021-11-03 13:39:21 814

空空如也

空空如也