- 博客(108)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue3 报错 Failed to execute ‘insertBefore‘ （在keep-alive 才会存在）
使用vue3 的过程中报错 Failed to execute 'insertBefore'
2022-06-18 10:01:58
2137
7
原创 vite build 下去除console、debug等无效
vite.config.ts种build下必须配置minify（压缩方式）。压缩方式对比率查看以及build:{ minify: "terser", terserOptions: { compress: { drop_console: true, drop_debugger: true } }}
2022-05-20 14:47:08
3754
6
原创 import.meta.env.PROD部分错觉
关于import.meta.env.PROD和import.meta.env.DEV指定是NODE_ENV 分别为development和productionvite build ，那么他会自动默认加载.env.production倒是没有问题但是如果使用了--mode去加载设置加载不同的文件注意这个时候其实都是import.meta.env.DEV为true，所以要标明其NODE_ENV如下图所示，如果build 的.env 不标明 NODE_ENV = production。那么其import
2022-05-20 14:45:36
1603
原创 扩展ElementUI el-autocomplete 上下键闭环滚动选择
对element ui中的 el-autocomplete中的上下键进行扩展，可上下键闭环滚动功能选择关键对el-autocomplete进行监听上下键并处理<template> <div class="content"> <el-autocomplete v-model="value" ref="selectRemote" placeholder="请输入关键词" @select="handleSelect".
2021-09-08 15:03:25
569
1
原创 Vue中使用render 封装el-table解决多级表头自定义模板
vue中多数情况下使用template封装组件逻辑清晰结构简单。但是在某些情况下，比如非常简单的组件 vue render简单解析或者template无法解决某些场景下，。使用完全javascirpt能力就显得尤为重要。文章目录使用render场景render简单了解createElement 了解模板中 attribute 对应的数据对象render中操作`$attrs`和`$listener`render 中 `$slots、$scopedSlots、scopedSlots`$slots$sco.
2021-03-13 15:26:01
2557
5
原创 好用的chrome插件之Octotree
github上经常要浏览代码。那么如何像在IDE 上一样浏览代码呢。这里推荐一款不错的插件Octotree如下，选择vscode的风格浏览github上vue的源码，是不是很happy点击设置，进行设置不同的风格注意：和vscode不同的是。vscode上双击文件是固定该文件。而这里是直接双击tab才是固定。如上述event.js 在tab上是斜体，当你双击之后才是固定千里之行始于足下...
2021-02-20 10:49:16
175
原创 vue render函数简单解析
平时用render 非常少。当然vue3 对template 模式优化，其速度和render几乎无异。但是对简单的组件其实用render模式则更加优雅。创建一个全屏小组件template<template> <i class="el-icon-full-screen" @click="toggleScreen"></i></template><script>const screenfull = require("screenfu.
2021-02-04 18:24:28
230
原创 关于chrome卸载后，书签找回
最近系统不知道咋的突然抽风。导致系统直接无限重启，无奈，当时没有启动U盘，修复不了boot。只能重置电脑。导致chrome被卸载。书签也就没了。首先重置电脑后找到保存chrome的文件地址：C:\Windows.old\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default可以看到书签文件和其备份文件。找到重新安装的chrome地址下的最新的Bookmarks和Bookmarks.bak文件，并分别复制checksu.
2021-01-26 12:14:21
9519
原创 富文本vue集成 CKEditor4的简单封装
由于CKEditor5 对IE 11不支持。那么这里对CKEditor4 进行重新封装文章安装引入ckeditor4新建CKEditor4组件使用效果安装npm install ckeditor4-vue引入ckeditor4import CKEditor from "ckeditor4-vue";新建CKEditor4组件<template> <div> <ckeditor :editor="editor" :valu.
2021-01-14 19:07:21
949
原创 富文本vue集成 CKEditor5的简单封装
市面上众多富文本编辑器quill、wangEditor、Tinymce、ckEditor等等，这里感觉ckEditor最为丝滑~。文章安装安装vue组件相关以及富文本类型其他富文本类型新建CkEditor5组件使用安装安装vue组件相关以及富文本类型npm install --save @ckeditor/ckeditor5-vue2 npm install --save @ckeditor/ckeditor5-build-classic其他富文本类型类型预览npm install .
2021-01-14 19:06:51
1367
4
原创 css 之height和min-height
小记height:100%和min-height:100%height和min-height的设置为100% ，其高度是根据父盒子height真实有效的高度而得到高度。否则就是auto注意: 其中。如果父盒子使用了min-height:100%而没有设置height,这个时候子元素的高度是auto。...
2020-12-31 11:28:36
450
原创 Vue3.x和 Element Plus 之ToDoList(一)
vue3.x 已经出来一段时间了。而ElementUI 也是以TypeScript和Composition API进行了重构重开了一个ElementPlus。（谁说Element 没人维护的~~~）目录安装或升级vue/cli创建todo-app加入Element-Plus新建页面新建vuex安装或升级vue/cli直接在原有的基础上进行升级 npm i -g @vue/cli或者npm install -g @vue/cli@next创建todo-app1.创建appvue create.
2020-12-22 15:45:16
933
原创 Element-UI换肤解决方案
Vue 之ElementUI换肤的解决方案，网络上有很多，这里就不去一一赘述。这里直接用ElementUI给的解决方案使用下载样式，简单粗暴。然后全局替换下载的ElementUI样式中的color和background-color值然后直接将替换好的样式直接link到head上ElementUI 动态换肤：theme-chalk-preview注意的问题：有的时候我们会对ElementUI样式进行重写。那么这个时候如果没有自定义class去包裹ElementUI的class去写的话，就会造成，直.
2020-12-16 18:49:26
2309
原创 vue-element-admin 左侧菜单增加可拉伸收缩
有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能目录slidebar增加拖拽点增加动态style增加计算属性barWidth监听拖拽点slidebar增加拖拽点增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽split-panel样式：#split-panel { cursor: col-resize; height: 100%; width.
2020-12-11 10:14:13
3166
8
原创 Element之el-image 预览单独使用
Element-UI中el-image中的预览功能没有单独提供api。又想使用功能。方法一：此方法就是直接导入。node_modules中的element-ui中的image-viewer import ElImageViewer from 'element-ui/packages/image/src/image-viewer'因为包含es6 语法，所以ie部分可能无法兼容。方法二 直接把image-viewer源码等相关文件copy出来此法过于繁琐，因为牵涉到的方法还蛮多方法三： .
2020-11-10 17:16:36
5653
6
原创 vue更复杂对象的函数式watch
平时对象的值变化监听，在watch上即可监听，但是表达式只接受简单的键路径。'obj’或者‘obj.xx’，而对于更复杂的就需要用到函数示例：现在父组件传递给子组件conf对象，现在想动态的监听conf.formModel[conf.item.prop]，也就是formModel中a属性的变化conf:{ formModel:{ a:‘1123’ }, item:{ prop:'a' }}键路径方式会报错：watch: { 'conf.formModel[con.
2020-11-02 11:25:33
401
原创 Element el-table不换行显示
element 表格需要单元格不换行显示方法一：增加样式 .el-table .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}方法二：增加show-overflow-tooltip属性el-table 默认会换行显示，加了show-overflow-tooltip属性，会单行显示，且超出会以popover去显示...
2020-10-15 16:15:03
14381
3
原创 vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署
每次在没有jenkins自动部署的情况下都要经历、打包、将包通过ftp丢到服务器上。实在繁琐。那这里就推荐一个vscode插件一键打包，一键部署。Alibaba Cloud Toolkit目录介绍安装与部署介绍前端持续化集成-一键部署：在一键部署中有很多插件和工具：比如前面说的jenkins、deploy等等，这里使用阿里开发的一款插件Alibaba Cloud Toolkit阿里云官网：产品分类>开发运维Alibaba Cloud Toolkit传送门vscode安装步骤安装与部.
2020-09-29 16:17:44
3255
2
原创 xlsx配合element-ui 中的table 多级表头导出excel
以前利用exceljs 做过 导出自定义样式的Excel文件，然而现在有需要表格的表头是多级的。这样会非常麻烦。要把没级表头重新拆开以最小表头为层级的数，还要去处理行与列的情况。这样工作量忒大了，直接裂开。所以这里直接用了xlsx 中的导table为excel的方式目录xlsx地址依赖安装引入`xlsx`和`file-saver`使用xlsx地址xlsx地址依赖安装1、安装xlsx依赖npm install xlsx -S2、安装file-saver下载excelnpm install.
2020-09-28 15:55:44
1373
1
原创 spinner使用以及简单封装
有些时候element-ui提供的loading，某些人觉得不好看。那么这个时候就要自定义一些loading。这里给几个推荐文章目录开源spinnerepic-spinners地址效果vue-spinner地址效果根据上述进行封装开源spinnerepic-spinners地址效果vue-spinner地址效果根据上述进行封装...
2020-09-21 14:55:49
457
原创 animejs基本使用
文章安装引入使用options动画参数更多安装npm install animejs 引入var anime = require("animejs/lib/anime");使用anime(options);例: 对一个id为 example 的 dom 高度进行从0 到 100的动画anime({ targets: '#example', height: [0, 100], duration: 300, easing: "
2020-09-11 17:02:12
2137
原创 Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object ‘#＜Obj 解决方案
最近项目在 打包时出现错误：issue传送门造成这个的原因是因为：导入导出模块使用的规范不同，commjs和ES6的导出导入冲突解决方案在babel.config.js中增加sourceType选项module.exports = { presets: [ '@vue/app' ], sourceType: 'unambiguous'}千里之行始于足下...
2020-09-01 20:46:03
391
原创 Element-ui el-pagination封装之sync多层的问题
因为vue一般情况是数据单向流向，父到值，而这里 错误就是数据流向的问题。可以参考sync用法简易封装核心：//省略<el-pagination :current-page.sync="page" :page-size.sync="rows" layout="total,sizes,prev, pager, next, jumper" :total="total" :page-sizes="[10, 15, 30.
2020-08-11 10:20:04
1414
原创 VSCODE插件之Regex Previewer 使用
vscode插件值Regex Previewer的使用，平时使用正则校验测试，则，该插件还不错安装完之后：选中需要测试的正则，ctrl+alt+m（mac ：⌥⌘M)）或者点击test Regex打开预览面板在预览面板增加需要测试的正则串例如：测试选中则表示正则匹配千里之行始于足下...
2020-08-05 16:06:26
5909
1
原创 微信公众号开发不能下载文件处理方式
在微信公众号网页开发，下载流文件，无效果。这里处理方式是直接打开连接在微信中预览~~~~使用window.open()打开连接预览（android是打开浏览器，ios是预览）~~~特此记录
2020-07-24 16:47:38
2474
原创 ES6扩展之运算符...
ES6 扩展运算符...开始数组应用总结对象应用总结总结数组说到...(三个点)，rest用于获取函数的多余参数。而扩展运算符...,它与rest参数相反，rest用一个变量数组的值去表达多个参数，而这里的扩展运算符，相当于将一个数组的值以特殊字符去分隔而得到的示例：var a=[1,2,3]console.log('a=',a)console.log('...a=',...a)应用1.复制数组对于只有一层的数组复制为深复制，即数组中不包含对象，否则为浅复制。（深浅复制的区别）.
2020-07-13 17:45:46
335
原创 前端工程化之yeoman的使用 (二)
前面对yeoman进行了初步的了解 前端工程化之yeoman的使用（一） ，接下来对yeoman进行扩展安装自己的脚手架，以及遇到的问题进行记录开始新建模板用到的方法属性等说明逻辑解析效果新建模板因为我这里直接删除generators文件夹了（可对照上篇文章的新建目录结构部分）。所以files中的数组直接就是generator："files": [ "app" ],新建根据公司项目分pc端和移动端分两块pc和mobile用到的方法属性等说明需要的方法：initializ.
2020-07-10 14:35:02
425
2
原创 前端工程化之yeoman的使用 (一)
前端工程化之yeoman使用，前面已经使用plop进行文件模板的开发工程化，而对于大型项目脚手架的工程化则yeoman则大名鼎鼎开始安装创建新建目录结构运行安装全局安装yeomannpm install -g yo创建1、创建一个文件夹，命名规则必须为generator-name ，Yeoman要根据这个名字去查询可用的生成器2、npm init 创建node模块清单package.json文件，当然其中有些是必填的，模板如下：{ "name": "generator-name",.
2020-07-09 09:34:03
285
原创 前端工程化之plop的使用
工程化、模块化让编码更加丝滑、让我们"懒"起来这里记录plop.js的使用。plop.js可以通过命令行去生成、处理文件模板代码等，从而解放双手。比如yeoman、比如node cli自己去编写一套针对模板脚手架的工具等。这些后面慢慢探索。开始安装plop全局安装plop在项目的根目录下创建一个plopfile.js安装plop npm install --save-dev plop全局安装plop可选，如果不执行这步骤，那么后面script 脚本运行时要使用npm run 脚本名。全.
2020-07-03 15:35:09
7641
4
原创 轻量级的货币金额处理库currency.js的使用
货币金额计算等。因为IEEE754 数值的浮点计算，js没有处理浮点计算精度误差问题,其他语言入java，c内部处理了。currency.js传送门只有1kb的超级轻量级的处理货币金额的js库安装currency.jsnpm install --save currency.js使用currencynode_modules中已安装名为currency.js打开currency.js 使用module.exports导出模块那么使用require(‘模块名’)引入。我们都知道对于nod.
2020-07-02 11:08:23
5041
原创 Vue .sync修饰符使用
vue双向绑定，但是在父子组件之间遵循单向原则，即子组件不要去改变父组件传递过来的值示例：子组件 child-dialog<template> <div v-show=“show”> 子弹窗组件 <button @click="close">关闭</button> </div></template> <script> export default { name: 'dialog',.
2020-07-01 17:10:30
401
原创 Vue 具名插槽 v-slot指令替换slot和slot-scope
在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。slot 和 slot-scope 这两个目前已被废弃，仍可使用，据说3.0后要没了旧slot用法子组件：<div> <slot name=“test”></slot></div>父组件中使用：<div> <template slot="test"> </template></div>旧的s.
2020-06-30 17:45:58
1846
原创 sass中 变量参与计算无效
在使用calc计算的时候，变量无法参与计算使用#{}则可以如下使用 $inputWidth:240px; width: calc(#{$inputWidth} - 70px);千里之行始于足下
2020-06-30 15:48:47
799
原创 使用nvmw进行node下载以及版本管理等
工作中多个项目开发的时候，不同的项目中可能node使用的版本不一致，那么为了多个node版本切换则使用nvmw进行，其用法和nrm差不多开始全局安装nvmwnvmw下载不同版本的node所有node版本列表使用node某一版本全局安装nvmwnvmw地址全局安装:npm install -g nvmwnvmw下载不同版本的node使用nvmw进行不同node版本下载卸载以及切换打开node下载官网LTS:推荐安装的版本Current：更新的最新版本可以使用上诉的版本号（推荐或者.
2020-06-23 14:40:09
1175
原创 Eslint semi 结尾分号设置与否
由于java书写习惯 语句结束加分号，而前端使用了eslint，习惯性的加分号，会给错误。这里特别记录一下例如：测试字符串后增加了一个分号，可以看到是eslint semi规则设置报错找到配置文件，配置semi即可取消对分号的报错ESlint配置而我这里配置在了.eslintrc.js文件中，并没有在 package.json 中增加eslintConfig方案一：打开 .eslintrc.js找到rule节点下的 semi可以看到现在是不允许有分号：第一个参数："off"或0-.
2020-06-18 16:15:33
30344
1
原创 图片显示、文件下载等
下载附件文件以及图片显示，后端返回url。前端直接根据url，去打开或者图片直接赋给src即可后端返回流可以看我另一篇博->传送门在那篇博客中，直接使用responseType设置为blob类型。然后使用URL.createObjectURL() 创建一个地址。也可以responseType 设置arraybuffer。只不过要使用blob去转换为blob然后再去使用URL.createObjectURL()当然也可以转成base64去直接显示图片。这里使用window中的b.
2020-06-10 12:23:21
280
原创 Vue中v-html无法渲染
vue 中v-html将原始html渲染为带样式的文本最近在使用v-html去渲染富文本的时候发现，怎么都渲染不出。后发现后端为了安全性考虑，将<"、">"、"&"全部进行了转义这个时候要使用innerText 去渲染出原始htmlVue.prototype.$HtmlUtils = { /** * @param {Object} text 转码为html */ htmlDecode: function(text) { var temp .
2020-06-05 18:01:42
4512
1
android5.0 sample 怎么导入的？，和平时导入不一样
2015-01-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人