- 博客(226)
- 收藏
- 关注
RSS订阅原创 js中some和every用法
some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true；只要有一个不满足就返回false；some一般使用场景大多都是用在：判断一个字段是否存在在某个数组中。some() 不会对空数组进行检测。some() 不会改变原始数组。
2023-05-29 16:13:24
837
原创 vue解决数组对象新增键值队以后修改数据数据丢失的问题
这里新增了两个键值对象 checkInfo: false showLog: false。当我想修改showLog的属性值时出来了数据发生了改变了但页未发生改变的情况。this.$set（ target, key, value） 有三个参数。target：要更改的数据源(可以是对象或者数组)使用this.$set 进行捕获 页面数据上树。key：要更改的具体数据。value ：重新赋的值。
2023-02-15 19:20:14
117
原创 npm打包整个过程
这里注意点package.json文件夹 main放入放入当前npm run build 打包后的。当包有修改的时候， 2：先修改package.json中的版本号（version），注册需要用户名，密码和邮箱， 当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）打开npm官方网站： www.npmjs.com;然后再执行npm publish；（不修改版本号上传会失败）后续会让填用户名密码和邮箱；上传时不能使用淘宝镜像。
2022-12-02 16:24:56
6889
原创 vue登录持久化获取登录状态密码放入cookie,设置过期时间加密
①若勾选了记住密码；则需要设置cookie，将复选框状态与加密后账号密码（安全起见，做了加密）设置cookie过期时间并存入cookie中，页面加载的时候判断一下是否有cookie值存在，若存在则获取对应的cookie赋值给用户名输入框、密码输入框以及记住密码复选框的状态。②若未勾选，则需要清除cookie中存放的账号密码以及复选框状态的数据，并且将cookie过期时间设为当前时间之前的时间；特别要注意的部分就是cookie过期时间以及获取cookie的时候复选框的状态，这两个容易出错。
2022-12-01 16:50:33
1002
原创 手把手告诉你如何安装多个版本的node，妈妈再也不用担心版本高低引发的一系列后遗症（非常详细，非常实用）
最近好多人都问到node怎么同时安装多个版本?如何配置node的环境变量,如何自如的在多个版本中切换node?还有就是自己在做appium自动化的时候，有时候会因为node的版本过高或者是太低用命令启动appium时候而报错，试了一下是否可以安装一个高版本和低版本的node在一个系统中，你如果需要高版本的切换高版本的node，如果需要低版本的切换低版本的node，这样这个问题就会完美解决了，因为这种种原因,所以宏哥打算写一篇文章来专门讲解如何安装多个版本的node!!!
2022-11-07 14:48:28
5002
2
原创 vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
全局安装服务支持 http-sever ，安装后若不配置环境变量，需要使用http-server命令，也可以自己去配置环境变量，此处省略配置方法。服务开启成果后，如上图。服务开启时会自动寻找文件夹内的index.html，我们只需要打开图中地址即可正常预览打包后的项目。vite创建的项目，打包后的文件本地预览报错，原因是file文件不支持import，需要开启个服务。进入打包后的文件夹，运行cmd，输入下方命令行，开启一个服务，端口号设置不冲突即可。
2022-11-07 10:39:05
3039
原创 工程化vite+vue2打包配置文件配置表
打开,按照官网提示创建新的vite项目(由于原先项目没有用ts，所以创建项目不选ts版本，包管理工具也依然选择是npm)。创建完成后，使用vs code打开，打开命令行，执行npm i安装依赖npm i安装依赖完成后，使用npm run dev启动项目第二步,安装依赖配置依赖生成配置vite.config.js配置文件 注意base的路径！！！！
2022-11-07 10:33:14
654
原创 提升前端开发质量的十点经验沉淀
语言的灵活性，函数传入的参数很可能不符合预期，必要时我们需要进行判断并且进行兜底处理，不可完全信任调用方。当然，如果参数过多也需要思考一下当前函数是否承载了太多的功能，进行一下功能上的拆分。的有效值 ，此时本该处理，但会提前结束，最终引发错误。中的对象是引用，因此赋默认值的时候最好通过函数，每次都返回一个新对象。
2022-09-05 11:15:50
468
原创 vue为什么要使用template
但在使用v-show时要注意,不能使用template,因为v-show是设置显示与隐藏，而template是没有实际东西的dom，所以v-show与template联合使用将失效。lse-if与v-else时候,我们可以使用template,来代替div。在使用v-if与v-e。...
2022-07-21 11:08:30
335
原创 常用pc端 实现左边100px固定，右边自适应
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以用flex布局实现这个效果，用到的flex方法有flex-basis，flex-shrink，flex-grow。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。......
2022-07-21 10:56:12
184
原创 vue 导出数据的实现
btnExport() { console.log('导出') /** * * @params * exportEnum 导出种类, */ // let params = { // exportEnum: val // } let con...
2022-04-22 11:39:17
2522
原创 路由持久化权限校验
app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>router.js 设置权限 //民事立案第一步 { pa...
2021-12-22 11:33:37
207
原创 Vue中mixin混入
混入我们先来看看vue官方是怎么介绍的混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。官方文档说的很详细，通俗易懂的话来说一个.vue文件由template，script，style组成，混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”（mixin对象的结构和.vue的script里面的结构一样），既此组件既可以调用组件内
2021-12-15 10:11:37
1570
原创 判断当前走打包后的服务还是未打包的服务 以及url参数截取
// 获取截取& ?后的参数值function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); .
2021-11-09 16:34:41
811
原创 vue-video-player 使用插件播放视频
main.jsimport VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer) <div class="demo"> <video-player class="video-player vjs-custom-skin" ref="vi.
2021-11-09 16:28:13
208
原创 自定义loading组件
自定义loading组件 在main.js 引用// Loadingimport './components/loading/index.css';import Loading from './components/loading/index.js'; /* 自定义 loading 组件 调用 this.$loading.show('加载中...'); 使用方法 this.$loading.hide(); 使用方法 作者:zhou*/ l.
2021-11-09 16:19:07
1398
原创 wangeditor图片上传回显
import E from 'wangeditor'import draggable from 'vuedraggable'html <div class="editor" id="editor" > <p class="editorText" id="text" :value="this.url "></p> </div> data editor: '', editorContent: '', 回显的.
2021-11-08 20:07:54
1861
原创 VSCode 中使用ESLint+Prettier来统一前端代码风格
代码规范除了编辑器检查以外，还有一些譬如变量名、样式名的规范，可以参考腾讯的代码规范或者百度的代码规范腾讯代码规范百度代码规范1、先行安装如下四个插件2、VScode编辑器设置settings.json{ //主题和图标配置，根据自己情况配置 "workbench.iconTheme": "simple-icons", "workbench.colorTheme": "Monokai Dimmed", //忽略搜索的文件夹 "search.e...
2021-10-19 11:09:34
256
原创 vuecli3代码压缩混淆使用uglifyjs压缩JS
、安装 “uglifyjs-webpack-plugin”cnpm i --save uglifyjs-webpack-plugin没有安装cnpm的同学可以用npm2、在项目根目录下创建一个名为 vue.config.js的文件3、在vue.config.js中引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin')4、在vue.config.js中配置uglifyjs-we
2021-10-18 11:08:39
2757
原创 vue实现模糊查询搜索
<bz-input size="small" class="search" v-model="value" placeholder="请输入关键字搜索" > <template v-slot:left-icon> <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" /> ...
2021-10-13 10:08:34
4304
原创 JS数组扁平化(flat)方法总结详解
需求:多维数组=>一维数组 1 2 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 1 arr_flat = arr.flat(Infinity); 第一种处理 1 ary = str.replace(/(\[\]))/g, '').split(',');
2021-10-09 18:03:10
800
原创 vue文件里写自己的function 转时间时期年月时分秒
可以写在export default的下方export default{}function toHHmmss (date) { var time; var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60)); var seconds = (data % (1000 ...
2021-08-26 10:41:24
104
原创 js将时间戳转为时间日期格式
封装方法 getBeforeDate(num, time) { let n = num; let d = ''; if(time) { d = new Date(time); } else { d = new Date(); } let year = d.getFullYear(); let m.
2021-07-08 10:58:52
975
原创 如何从数组对象中取出一个值存放在数组中
// 获取勾选内容 handleSelectionChange(val) { //当前选中勾选的数组对象 console.log(val) // 数组对象 // eslint-disable-next-line no-unused-vars let arrCode = []; //定义数组 val .map((item) => { //遍历当前的数组对象 arrCode.push(item.p...
2021-07-08 10:43:00
3194
原创 接口返回多个数组对象的方法
mounted() { // 列表参数获取 以及后面传递参数给后台 这里返回过来的上一个数组对象 this.queryList = this.$route.query.list; console.log(this.queryList) }, methods: { batchPushBtn() { // 定义方法 let timeArr = []; // 定义一个数组存放多个数据对象 this.queryList.forEach((item)=>{ ..
2021-07-08 10:25:05
988
原创 Vue在父组件中改变子组件内的某个样式
<template> <div class="cont"> <footEr></footEr> </div></template><script> import footEr from '../../components/foot.vue' components: {footEr}</script> <style scoped>.
2021-06-09 11:41:33
618
原创 遮罩层出现后不能滚动 添加事件@touchmove.prevent 移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
<div class="maskshow" @click="hidden_video" @touchmove.prevent></div>.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是..
2021-05-19 12:19:29
4269
1
原创 PC端页面各种状态下的布局
PC端常见的布局技术:一：水平居中1：margin:0 auto ; 自动居中.text{ width: 200px; margin: 0 auto;}优点：兼容性好缺点: 需要指定宽度2：使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元素3：使用table实现.child{.
2021-04-29 09:43:15
1244
原创 echarts 各个配置项详细说明总结
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a'.
2021-04-27 10:16:42
189
原创 总结vue2.0与vue3.0的区别，让你快速上手
1:vue3.0和2.0的区别2.0数据双向绑定方面Vue2.0使用Object.defineProperty原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知// 数据let data = { title: '', // 备份数据 _data: {}}// 定义特性Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取
2021-04-21 11:03:09
27121
13
原创 vue-cli 3中dart-sass替换node-sass
Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代！使用dart-sass代替node-sass，不管你是否使用dart-sass，建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃使用方法为什么要替换?node-sass仓库在墙外, 且新特性都会先在dart-sass实现怎么替换?
2021-03-23 16:21:08
2337
原创 常用javascript方法封装
1、输入一个值，返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele])
2021-03-02 15:56:55
176
原创 前端性能优化总结
前端指标1、FP，First Paint。2、FCP，First Content Paint。3、FMP，First Meaning Paint。4、ATF，Above The Fold，首屏时间5、TTI，Time To Interact，首次交互时间，可以用DomReady时间。6、资源总下载时间。Load时间 >= DomContentLoaded时间（1）Dom加载完时间，DomContentLoaded。（2）页面资源加载完时间，Load，包括图片，音视频等异
2021-02-19 10:58:46
291
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人