自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(74)
  • 收藏
  • 关注

原创 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

原创 vue跳转打开新页面或窗口

【代码】vue跳转打开新页面或窗口。

2023-10-09 17:52:19 253

原创 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

原创 Ckeditor5 富文本

ckedit-5, vue-富文本

2022-09-27 15:26:13 435

原创 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

原创 vue3.0 router(v4.X)使用

111

2020-12-11 18:23:11 182

原创 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: &lt

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关注的人

提示
确定要删除当前文章?
取消 删除