- 博客(74)
- 收藏
- 关注
RSS订阅
原创 vue3.0 Composition API学习及分享！
第一章vue3 完全保留vue2 的特性，也就是说你可以用vue2特性在vue3 开发重写了虚拟dom 优化了positions性能提升打包大小减少了 41%初次渲染快 55%更新快 133%内存的使用减少了54%vue3 使用typescript 重写重要的APIcomposition APIteleport 瞬移组件的位置suspense 异步加载组件的新福音vue2 遇到的问题随着功能的增长，复杂的代码变的难以维护比如 vue2 k开发一个功能 代码可.
2020-12-03 18:03:38
452
原创 VScode vue template内无法使用tab补齐标签
选择 文件 –> 首选项 –> 设置 –> 搜索 emmet。选择 编辑 setting.json。
2023-10-08 15:19:33
143
原创 less中:export 无效问题，vue-cli中导出公共变量，js对象为空对象
【代码】less中:export 无效问题，vue-cli中导出公共变量，js对象为空对象。
2023-07-07 11:25:30
960
原创 elementUi滚动条的使用及原始滚动条样式设置
这时只需要在父组件高度改变时，调用组件的update方法即可。如果相让滚动条一直显示而不是鼠标移入才显示，添加css。如果父级高度会改变，那么滚动条上下拖动就会出现异常。如果不想要横向的滚动条，添加css。滚动条出现的问题及解决方案。
2023-05-30 16:24:43
2198
原创 accept限制
*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video*.ac3 audio/ac3 AC3 Audio*.asf allpication/vnd.ms-asf Advanced Streaming Format*.au audio/basic AU Audio*.css text/css Cascading Style Sheets*.csv text/csv Comma Separat
2022-12-27 15:13:53
325
1
原创 Vue,rem适配PC端
安装npm install lib-flexible --savenpm install postcss-px2rem --savemain.jsimport 'lib-flexible'node_modules / lib-flexible / flexible.js// 找见这个函数，把 540 改成 widthfunction refreshRem(){ var width = docEl.getBoundingClientRect().width; .
2022-05-12 14:55:34
397
原创 json对象转，格式化字符串
首先要了解CSS white-space 属性值描述normal默认选项。空白会被浏览器忽略pre空白会被浏览器保留。其行为方式类似 HTML 中的标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。大部分情况下后台返回都是字符串，所以要做处理.
2022-05-06 16:32:51
308
原创 前端开发规范
前端代码规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。引自《阿里规约》的开头片段：----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码.
2021-08-03 11:55:04
141
原创 Object的属性和静态方法
Object.assign(target,source1,source2,…)用于将所有源对象source的可枚举性的值合并到目标对象target上，返回目标对象。此方法只拷贝源对象的自身属性，不拷贝继承的属性注意：source属性和target属性相同，target属性值会被替换source的属性值 const target = { x : 0, y : 1 }; const source = { x : 1, z .
2021-06-03 18:30:54
309
原创 async await 异步处理
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。await 命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变,除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指.
2021-06-02 21:34:37
245
原创 promise使用及方法
promise是异步编程及回调地狱的一种解决方案,有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，.
2021-06-02 16:00:15
153
原创 defineProperty 与 proxy
Object.defineProperty(obj, prop, descriptor)obj: 要在定义属性的对象。prop: 要定义或修改的属性的名称(也就是我们熟称的key)。descriptor: 将被定义或修改的属性的描述符。var obj = {};Object.defineProperty(obj, "num", { value : 1, writable : true, enumerable : true, configurable : t.
2021-05-27 11:32:44
150
原创 symbol
// Symbol.for() 相当于全局定义 定义的时候，它会查找当前有没有相同的值，有的话就直接使用前者地址，没有的话就会新创建一个储存地址 let s1= Symbol.for('a') let s2 = Symbol.for('b') console.log(s1 === s2) // true // Symbol.keyFor 只能取 Symbol.for 定义的值 console.log(Symbol.keyFor(s1)) // Symbol() 是独一无二的，也就是.
2021-05-20 23:10:48
114
原创 拖拽事件
原生拖拽事件 /** * @dragstart 拖拽开始（鼠标按下并开始移动时触发，会在拖放的元素上触发事件） * @drag 拖拽移动 （在移动的过程中持续触发） * @dragend 拖拽结束 （拖拽停止后触发，无论是否拖拽到有效区域） * 当拖拽到有效区域，会触发以下事件： * @dragenter 进入 （当拖拽元素进入有效区域触发） * @dragover 完毕 (当拖拽元素进入有效区域且持续移动，持续触发) * @dragleave 离开 .
2021-05-10 22:47:01
417
1
原创 XDM 跨文档传递消息
XDM 跨域发送消息 /** * 垮文档消息传递 * XDM 核心 postMessage() 方法 * @msg 传递的数据 当然传递的数据可以是其他数据类型，为了更好的兼容浏览器，建议使用JSON.stringify() * @url 接受哪个域 这里很重要，如果参数为“ * ”，那么它就接受任何域的消息，为了安全建议指定一个域 （那么指定多个域呢？） * iframe 要获取contentwindow document.querySelector('#i.
2021-05-10 17:39:47
115
原创 vue cli3 区分开发环境，测试环境，正式环境
在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）// 如：env.development // 开发env.beta // 测试env.production // 正式编辑新建的文件注意：全局变量仅除NODE_ENV和BASE_URL这两个保留变量外，其余自定义变量都需使用VUE_APP开头。.env文件里不允许存在注释 （这里只为了大家更好的阅读理解）// env.development NODE_ENV = 'development'VUE_.
2020-12-31 16:39:22
1791
原创 css常用的使用技巧
清除浮动主要为子元素浮动（float）之后，父元素无法撑起高度和宽度。<!-- html --><div class="clear"> <img src="demo.gif"></div><!-- css --><style> img { float: left; } /* 清除浮动 */ .clear::after { content: "";.
2020-12-30 10:54:53
278
原创 JSON.parse解析字符串抛出异常解决方法
报错原因：json数据的格式要求非常严格，属性名称必须是用双引号括起来解决方法一var str = "{'name':'xiaoji', 'age':20}";JSON.parse(str); // 报错var str='{"name":"xioaji", "age":20}';JSON.parse(str); // 正确解决方法二// 自己写已个转obj函数function to_Obj(str) { var obj = {}; str.split(",.
2020-12-25 16:16:27
3275
原创 从输入url到浏览器渲染显示页面发生了什么？
我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段，例如：http://www.tuicool.com/search?kw=%E4%。我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP，之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口，如HTTP默认端口80，HTTPS默认端口443
2020-12-17 10:55:24
168
原创 typescript学习
文档https://www.typescriptlang.org/docs/handbook/tsconfig-json.html // 官方文档https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html // 中文文档https://ts.xcatliu.com/basics/primitive-data-types.html // 阮一峰教程https://www.runoob.com/typescript/ts-tu.
2020-11-03 11:14:40
170
原创 TypeScript项目中的tsconfig.json配置
在TS的项目中，TS最终都会被编译JS文件执行，TS编译器在编译TS文件的时候都会先在项目根目录的tsconfig.json文件，根据该文件的配置进行编译，默认情况下，如果该文件没有任何配置，TS编译器会默认编译项目目录下所有的.ts、.tsx、.d.ts文件。实际项目中，会根据自己的需求进行自定义的配置，下面就来详细了解下tsconfig.json的文件配置。文件选项配置files : 表示编译需要编译的单个文件列表"files": [ // 指定编译文件是src目录下的a.ts文件 "
2020-09-07 14:36:25
780
原创 vue中element自定义主题
仅替换主题色单纯的只是想换个主题颜色请参考ElementUI官网的自定义主题。链接: https://element.eleme.cn/#/zh-CN/component/custom-theme.实现自定义主题封装动态换肤色ThemePicker.vue组件。<template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v
2020-08-05 14:43:04
957
原创 vuex高级用法
state：vuex的基本数据，用来存储变量geeter：从基本数据(state)派生的数据，相当于state的计算属性mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。action：和mutation的功能大致相同，不同之处在于 Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步或多个同步操作modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非.
2020-08-05 14:06:07
659
原创 upload上传API文档
wb-upload参数：参数说明类型可选默认必填action自动上传必选参数，上传的地址String--否autoUpload是否自动上传booleantrue/falsefalse否data上传时附带的额外参数object--否listType上传样式类型Stringhead，text/picture/picture-card-是showFileList是否显示上传列表（上传头像，必须false）boolea
2020-07-29 11:22:08
1384
原创 upload上传封装
封装el-Upload目前在编项目中，页面有用到el-Upload，所以对el-Upload做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-Upload是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：我一直在考虑，分开封装还是一起封装，其实各有利弊吧，主要还是看实际项目。最终我选择了一起封装。上传的样式类型如（如：头像，照片墙 ，缩略图，列表缩略图，文件列表
2020-07-29 10:59:10
777
1
原创 Menu菜单导航API文档
wb-menu参数：参数说明类型可选默认必填active默认选中哪个（以index唯一名称为准）String--否openeds默认展开第几组Array[‘1’]--否isrouter是否使用 vue-router 的模式，以 index 作为 path 进行路由跳转Booleantrue/false-否trees菜单数据（参数看下面↓↓）Array--是backgroundColor菜单的背景色（仅支持 hex
2020-07-24 11:44:02
1426
原创 Menu菜单导航封装
封装el-Menu目前在编写管理端，页面有用到el-Menu，所以对el-Menu做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-Menu是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：样式，颜色，自定义，最重要的是；递归渲染（不用关心它的子集）等等.递归渲染实现。<template> <div> <div v
2020-07-24 11:06:08
990
原创 page分页API文档
wb-page参数：参数说明类型可选默认必填background是否为分页按钮添加背景色booleantrue/falsefalse否hideOnSinglePage只有一页时是否隐藏booleantrue/falsefalse否total总条数number--是pageSize每页显示多少条number-10否pageSizes每页显示个数选择器的选项设置number[]-[10, 20, 30, 40,
2020-07-23 15:31:52
846
原创 page分页封装
封装el-Pagination目前在编写项目中，每个页面都有el-Pagination，所以对el-Pagination做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-taPaginationble是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：其实很简单，几乎不用考虑其他问题，照猫画虎就可以了。直接搬过来用。（除非有特殊需求，在进行改造）组件使用方法：(
2020-07-23 15:15:36
441
原创 table表格封装
封装el-table目前在编写项目中，每个页面都有el-table，所以对el-table做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-table是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：动态表头嵌套表头表格显示内容类型自定义（文字，图片，超链接等）表格和分页联动表格事件的处理等等.动态表头实现。正常情况下，我们使用table： <
2020-07-23 11:48:39
1759
原创 table表格API文档
wb-table参数：参数说明类型可选默认必填data表格渲染数据Array--是max-height表格的最大高度String--否stripe是否为斑马纹booleantrue/falsetrue否isRadio是否显示单选框booleantrue/falsefalse否ischeckBox是否启用浮动模式（浮动模式下带有重置功能）booleantrue/falsefalse否isIndex是
2020-07-22 16:52:06
1070
原创 form表单封装
添加自定义事件案例 <el-input v-if="item.type === 'input' || item.type === 'password'" v-model="data[item.value]" :type="item.type" :placeholder="getPlaceholder(item)" @blur="blurEvent(item.event)" <!--这个是.
2020-07-17 15:35:07
2367
1
原创 form表单的全局验证
elementUI表单的全局验证：使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。分析问题：一般验证规则，主要是是否必填，不为空，以及参数类型的验证。 基于这个条件，我们开始找找思路, 单个字段的验证是这样的：name: { required: 是否必填, validator: 自定义规则, message: 失败提示消息(非自定义时触发), trigger: 触发方式 pat
2020-07-16 16:46:09
675
原创 form表单API文档
wb-form参数：参数说明类型可选默认必填data绑定的表单数据objest--是rules校验对象（全局校验定义为空对象）objest--否field-list渲染表单数据Array--是list-type-info可放置options(如：celect /rodio/picker等)objest--否type是否启用浮动模式booleantrue/falsefalse否className给f
2020-07-15 23:10:29
1150
原创 通过js方法调用全局组件（如：element-ui $notify）
组件模板<template> <transition name="fade" @after-leave="afterLeaveFn" @after-enter="afterEnterFn"> <div class="message" :style="style" v-show="isShow" @mouseenter="emptyTimeFn" @mouseleave="clearTime.
2020-07-07 09:22:12
2193
原创 async/await 使用说明
scync/await 说明 // async 是异步函数，不会阻塞其他代码运行， async function f() { return "hello async" } const fn = f(); console.log(fn); // 你会发现它是一个promise 对象 fn.then(res=>{ console.log(res) }) console.log('虽然在后面，但是我先执行');.
2020-07-03 11:53:03
156
原创 Vuex使用及说明
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(还不明白？通俗点说，就是全局变量，每个组件都可以用到~并且可以随时改变和计算等)核心概念state // 它是储存全局变量名（定义变量）mutations // 它是处理同步，并修改 state 里的数据 actions // 它是处理异步，或者多个同步的区域，调用dispatch 执行mutation.
2020-07-03 11:34:26
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人