alokka-CSDN博客

原创 VUE 监听对象中某一个属性的变化

第一种直接监听对象的属性，写法如下<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <di

2021-12-16 13:04:12 3071

原创 JS escape、unescape encodeURI、decodeURI encodeURIComponent、decodeURIComponent转码与解码

看这篇文章前，请先看下我的这篇文章字符集和字符编码（Charset & Encoding），提前了解下编码格式1. escape 和 unescapeescape() 它的作用是返回一个字符的Unicode编码值。采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。escape不编码字符有69个：*.

2021-12-08 16:44:52 533

转载字符集和字符编码（Charset & Encoding）

字符集和字符编码 —— 每个软件开发人员应该无条件掌握的知识！相信大家一定碰到过，打开某个网页，却显示一堆像乱码？还记得HTTP中的Accept-Charset、Accept-Encoding、Accept-Language、Content-Encoding、Content-Language等消息头字段？这些就是接下来我们要探讨的。1.基础知识计算机中储存的信息都是用二进制数表示的；而我们在屏幕上看到的英文、汉字等字符是二进制数转换之后的结果。通俗的说，按照何种规则将字符存储在计算机中，如’a’

2021-12-08 14:26:54 1069

原创 js 判断对象是否为空

let obj = { id: 1}console.log(Object.keys(obj).length > 0) // true

2021-12-02 13:59:29 513

原创 element 验证多个表单

当做业务需求的时候，同时遇到一个 dialog 有两个表单，在提交的时候就要同时对两个表单进行表单校验，我刚开始就想到了验证嵌套，虽然也能实现，不过会有先后顺序的问题，不能同时进行校验，后来经过百度才发现 promise.all 方法可以实现我们的需求，直接上代码1. 验证嵌套this.$refs['form'].validate((valid) => { if (valid) { this.$refs['table'].validate((valid) => { i

2021-12-01 11:58:08 996

原创 ajax XMLHttpRequest的 onreadystatechange 为什么在send之前？

什么是 AJAX ？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。AJAX 原理手写一个简单的ajaxfunction lajax(url) { let

2021-12-01 10:17:52 704

原创 JS 两个对象数组根据id去重 / 取补集

let arr1 = [ { id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }]let arr2 = [ { id: 1, name: 'a' }]let newArr = arr1.filter(item => !arr2.some(val => item.id === val.id))console.log(

2021-11-30 10:04:16 1219

原创强大的 reduce

1、使用 reduce 替代 map + filter设想你有这么个需求：要把数组中的值进行计算后再滤掉一些值，然后输出新数组。很显然我们一般使用 map 和 filter 方法组合来达到这个目的，但这也意味着你需要迭代这个数组两次。来看看我们如何使用 reduce 只迭代数组一次，来完成同样的结果。下面这个例子我们需要把数组中的值乘 2 ，并返回大于 50 的值：const numbers = [10, 20, 30, 40];const doubledOver50 = numbers.redu

2021-09-30 14:16:19 230

原创 vue this.$router.push query传递对象方法

this.$router.push({ path: '/home', query: { params: JSON.stringify({ name: 'lokka', age: 18 }) }});let params = JSON.parse(this.$route.query.params)this.name = params.name; this.age = params.age;

2021-09-13 17:49:24 3436

原创 element 点击按钮查看大图

产品提了这样一个需求——点击按钮查看图片，我们都知道 element-ui 中有点击图片查看大图功能，我们看源码就知道 image 组件运用了内部的 ImageViewer 组件，一看源码我们就知道这个 ImageViewer 组件就是个图片查看器，那么我们就可以直接引入这个 ImageViewer 内部组件，用 button 来触发就能完美的实现我们的功能element-ui 源码位置：packages/image/src/main.vue<template> <div c

2021-09-13 10:19:05 2061 3

原创 element required动态响应

<el-form-item label="充值提醒：" prop="chargeWarn" :required="!!config.alarmThreshold ? true : false"> <el-checkbox-group v-model="config.chargeWarn"> <el-checkbox label="successPush">成功提醒</el-checkbox> <el

2021-09-11 10:26:46 901

原创 js检测对象中是否存在某个属性关系运算符 in 和 Object.prototype.hasOwnProperty() 区别

1. in 运算符如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。let obj = { a: 1}console.log('a' in obj) // true 自身属性console.log('valueOf' in obj) // true 继承方法2. hasOwnProperty() 方法hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。let obj = { a: 1}co

2021-09-10 20:47:56 1444 2

原创 element 封装上一页、下一页翻页组件

turnPage.vue<template> <div> <el-pagination background :current-page="currentPage" :total="total" :disabled="disabled" layout="prev, next" prev-text="上一页" next-text="下一页" @prev-click="prevClick" @next-click="nextClick"> </el

2021-08-27 13:49:34 676

原创 element table radio 单选表格实现

实际效果可以自行复制下面代码查看后续可以自己封装成 table 组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalabl.

2021-08-27 09:40:21 1683

原创 element datepicker 设置不能选择一天至少两天或多天

写业务过程中，遇到一个需求是不可以选择同一天的时间，比如 2021-8-13 - 2021-8-13，知道 datePicker 里有一个 disableDate 属性，不过之前都是用在一个时间范围，比如一个月之内或者一个星期之内，查了百度半天也没有好的解决办法，最后...

2021-08-26 15:31:50 2664

原创 element datetimerange 只能选择今天之前（不包括今天）

今天做需求，产品要求日期选择只能选择今天之前（不包括今天），就是比如今天是 2021-8-23 那就只能选择之前到22号，上百度查了下方法，发现有点小问题，网上的方法大多是 pickerOptions: { disabledDate: (time) => { if (timeOptionRange) { return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000

2021-08-26 14:55:23 1597

原创 element 修改组件样式

⭐️ 当我们用 element-ui 组件库开发时，时常会遇到想改变 element-ui 组件样式的需求，比如修改下按钮的样式等等，但是我们又防止当前组件样式污染全局，在当前组件 css 中用了 scope 属性来让当前组件的 CSS 只作用于当前组件中的元素，使用 scoped 后，父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件:1、stylus 的样式穿透使用 >>><style scoped>.

2021-08-19 01:37:04 869

原创 JS 判断字符串中包含某个字符或者数组中包含某个元素方法

1. 字符串es5：indexOf()var str = "123"console.log(str.indexOf("2") != -1); // truees6：includes()let string = "apple,banana,orange";string.includes("banana"); // true2. 数组es5：indexOf()var arr = [1, 2, 3]console.log(arr.indexOf(2) != -1)

2021-07-27 18:17:56 4194

原创 nginx 常用命令

帮助命令：nginx -h启动Nginx服务器：sudo nginx查看进程： ps aux | grep nginx配置文件路径：/usr/local/nginx/conf/nginx.conf检查配置文件：sudo nginx -t指定启动配置文件：sudo nginx -c /usr/local/nginx/conf/nginx.conf暴力停止服务：sudo nginx -s stop优雅停止服务：sudo nginx -s quit重新加载配置文件：sudo nginx -s r

2021-07-15 12:03:11 130

原创 element daterange datetimerange 自定义可选范围限制选择多少天或者几个月

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!--

2021-07-14 15:34:00 2398 1

原创 element 中 this.$message 在循环中提示多次解决办法

1. 总结让我们看下element UI Message源码把 message 的 DOM 结构添加到 document 中，我们可以通过document.getElementsByClassName(‘el-message’).length > 0来判断当前页面是否已存在Message2. 具体代码： // 多选 handleCheckbox (val) { if (val.length > 50) { if (document.getElemen

2021-07-12 18:05:26 1842 2

原创 VUE this.$router.push跳转页面传值不同 created 函数只调用一次页面不刷新解决办法

问题：在vue中使用 this.$router.push() 方法，如果只是传入的参数不同，会出现 url 地址变化了，但是页面没有重新请求数据，生命周期函数未调用，需要刷新一下页面才有新的数据加载。原因：由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行

2021-07-09 20:39:32 7904

原创 element el-table radio 单选表格 / 表单实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <

2021-07-09 14:16:17 1468

原创 element v-for动态绑定数据循环列表表单验证实现

1. 总结遍历的 el-form-item 数据 domains 为 el-form v-model 对象里的数据在遍历的 el-form-item 中添加rules，:prop="‘domains.’ + index + ‘.value’"<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

2021-07-08 14:41:38 842

原创 element el-table嵌套input输入框动态添加行 form动态表单验证实现

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">  &

2021-07-08 10:57:52 4045

原创 GIT 基本操作掌握这些就够了

git status命令用于查看在你上次提交之后是否有对文件进行再次修改。git add .可将该文件添加到暂存区git commit -m [message]提交暂存区到本地仓库git push <远程主机名> <本地分支名>:<远程分支名>将本地的分支版本上传到远程并合并git reset用于回退版本，可以指定退回某一次提交的版本$ git reset HEAD^ # 回退所有内容到上一个版本$ git reset HE..

2021-07-08 00:00:12 184

原创 element el-select change事件传 item 对象方法

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。在 el-option 里，我们传入 item 对象，然后在 el-select 中，我们用 value-key 接收，这样我们直接调用 change 方法就可以直接传入整个 item 对象，上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na.

2021-07-05 01:01:37 29071 2

原创 element table表单默认选中多条数据 toggleRowSelection不起作用解决办法

这是因为created生命周期执行的时候 DOM 还没有渲染，el-table 表格还没有渲染完成我们就直接使用了this.$refs.XXX.toggleRowSelection(item)方法，就不会生效。直接在外层套一层this.$nextTick()就可以了 this.$nextTick(() => { list.forEach((item) => { if (item.gasStatus === 1) { th

2021-07-04 23:08:53 2944

原创 element form 对单个或几个input、select表单校验

1. 对单个进行校验 this.$refs['form'].validateField('userName', async (valid) => { if (valid) return // code })2. 对几个进行校验 this.$refs['form'].validateField(['userName','mobileNumber'], async (valid) => { if (valid) return // code })...

2021-07-04 21:54:42 830

原创 JS中的位运算

本文部分内容取自以下文章深入研究js中的位运算及用法js中位运算的运用Js中的位运算和权限设计首先了解下计算机中常用进制二进制八进制十进制十六进制进制基数(radix)前缀示例二进制 binary0b 0B0b11 = 1*2¹+1*2º = 3八进制 octal0o 0O 00o11 = 1*8¹+1 = 9十进制 decimal无前缀11 = 11十六进制 hex0x 0X0x11 = 1*16¹+1*16º = 17.

2021-07-02 20:45:50 2483 3

原创 JS 数据类型——Boolean布尔类型

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。下列运算符会返回布尔值：前置逻辑运算符： ! (Not)相等运算符：=，!，==，!=比较运算符：>，>=，<，<=——————————————————————————————————————————————如果布尔对象无初始值或者其值为:0-0null“”falseundefinedNaN那么对象的值为 false。否则，其值为 true（

2021-07-02 16:17:07 1770 2

原创 element this.$confirm 显示多条数据

let confirmText = [ '请确定要将该张发票红冲？', `红字信息表编号：${this.redNumberList.redNumber}` ] const newDatas = [] const h = this.$createElement for (const i in confirmText) { newDatas.push(h('p', null...

2021-06-07 11:04:21 1051

转载使用git和gitlab进行协同开发流程

一、基本概念仓库（Repository）① 源仓库(线上版本库)在项目的开始,项目的发起者构建起一个项目的最原始的仓库,称为origin。源仓库的有两个作用：汇总参与该项目的各个开发者的代码存放趋于稳定和可发布的代码源仓库应该是受保护的，开发者不应该直接对其进行开发工作。只有项目管理者能对其进行较高权限的操作。②开发者仓库(本地仓库)任何开发者都不会对源仓库进行直接的操作，源仓库建立以后，每个开发者需要做的事情就是把源仓库的“复制”一份，作为自己日常开发的仓库。这个复制是g

2021-05-07 18:44:19 777

转载 HTTP协议超级详解

HTTP协议简介————————————————————————————————————————超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织（CERN）所发起。HTTP的标准制定由万维网协会（World Wide Web Consortium，W3C）和互联网工程任务组（Internet Enginee

2021-04-21 22:05:22 80252 7

空空如也

空空如也