Yongqiang Chen的博客

【代码】Vue里定义方法：通过子节点ID查找所有关联的父节点ID。

Vue页面methods里定义方法，获取当前页面Url路径上的参数

JavaScript验证一张图片链接是否有效（JS验证图片链接是否有效）

Vue使用el-input框输入文本正则匹配（正则表达式）版本号？

数组一：（不限制长度）[["1","1-1","1-1-2"],["1","1-1","1-1-3","1-1-3-1"],["2","2-4","2-4-1"],["2","2-5","2-5-3"]]转换成数组二：[ { code: "1", children: [ { code: "1-1", children: [ { code: "1-...

常用的前端JavaScript方法封装

在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效。不用修饰符.trim，使用js的trim方法，在el-input的@blur事件中去除首尾空格

一、缘由在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。二、第一次实现与遇到的问题比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下：<template> <el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item

1、html部分<el-select v-model="productLineIds" placeholder="请选择品线" size="small" clearable multiple collapse-tags @change="selectAll" > <el-option v-for="item in productLineOption" :label="item.name" :value="item.id" :key="item.id"></el

Math 对象用于执行数学任务。Math 是数学函数，但又属于对象数据类型typeof Math=> ‘object’Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。1.Math.abs()获取绝对值。/**返回一个数的绝对值**/Math.abs(-7.25);//返回值是7.252....

字符串对象：作用：String对象用于处理文本（字符串） 创建： var str = "abc"; var str = new String("abc"); 包装对象（装箱、拆箱）——了解 JS中能够自动将基本类型包装成对应的包装对象，使用完毕后自动还原。 字符串也可以看作是一个数组，数组的元素是一个一个的字符。API: 属性：...

1.在vue项目中使用require的方式引入图片//home.vue文件<template> <div class='home'> <img :src="img.save"> </div></template><script>export default { name: 'home', data () { return { img

说一个简单的话题，新手刚接触导入导出的时候，export和export default傻傻分不清，下

有时候项目整体主题是偏暗色的，那么此时原来的input框和textarea框在暗色主题下就显的很不好看。这时发现input框和textarea框的其他样式都很容易改，就placeholder的样式最容易被忽略。当想改placeholder的样式时发现f12元素审查，找了半天都找不到在哪看placeholder的原始样式，其实要改placeholder的样式很简单，input框修改placeholder里面字体颜色大小（textarea框同样使用）：input::-webkit-input-placeh

在上家公司工作的时候，常去的工作地点就有4个，经常回到原工作地点时发现以前用的那台电脑被别的同事用了，于是又坐在了一台没vscode的电脑面前。每次安装vscode后都不记得需要哪些插件，于是就总结了几个常用的、必备的、满足需求并安装最少插件的插件。No1: Vetur vue代码自动格式化插件，统一代码格式。No2:JavaScript (ES6) code snippets 包含ES6语法中的JavaScript代码段（支持JavaScript和T...

使用Vscode很长时间了，常常想提高编码速度，于是把自己总结的几个常用快捷键分享给大家。靓仔！你的点赞和收藏就是我更新博客的动力！！！折叠：ctrl+k，ctrl+0展开：ctrl+k，ctrl+j自动格式化：ctrl+k，ctrl+f自动换行：alt+z上移整行：alt+↑下移整行：alt+↓向上复制整行：shift+alt+↑向下复制整行：shift+alt+↓删除整行：ctrl+shift+k大家可以新建一个demo.html在Vscode里多练习几遍上面的命

前言：我在上家公司遇到一个需求，就是有一个组件库现有四十多个组件，未来可能还会更多。它们都是渲染到同一个位置，但是根据项目场景不同一次只会用到组件库里的某几个组件。如果我将组件全部引入进页面，那将是庞大的体力活，而且后续追加组件我还得来改代码。最后找到了动态注册组件的方式，每次根据后端返回的参数动态加载需要的组件。我就是根据下面的一个例子来实现自己需要的功能的，例子：<template> <div class="testPage"> <Button

文字模糊效果只需要添加以下两行代码，即可达到将文字模糊处理的目的：color: transparent;text-shadow: #111 0 0 5px;毛玻璃效果其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。下面提供一个简单示例：.blur { display: block; width: 300px; height: 300px; ma..

下划线转换驼峰function toHump(name) { return name.replace(/\_(\w)/g, function(all, letter){ return letter.toUpperCase(); });}驼峰转换下划线function toLine(name) { return name.replace(/([A-Z])/g,"_$1").toLowerCase();}...

1.添加数组 push(val1, val2, ...) //从末尾添加 unshift(val1, val2, ...) //从开头添加 splice(index, 0, val1, val2, ...) //从指定索引处添加 array[array.length] = value; //向末尾添加一个元素2.删除元素 pop() //从末尾删除一个元素，并返回删除的元素 shift(...

mouseover当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。而经过绑定mouseenter的元素时，只会在鼠标刚进入的时候触发，当进入其子元素的时候，是不会再触发的了。...

理论上1px已经是最小单位了，那如何画一条0.5px的线呢解决办法：1.移动端，使用meta viewport 的方式<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>要记得viewport只针对于移动端，只在移动端上才能看到效果，缩放到原来的0.5倍，如果是1px那么就会变成0.5px2.采用transfo

定义类名"no-select"，在需要使用不能被选中的地方添加该类名.no-select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}...

a.封装绑定事件和解绑事件/** * @description 绑定事件 on(element, event, handler) */export const on = (function () { if (document.addEventListener) { return function (element, event, handler) { if (element && event && handler) { el

scroll 事件本身会触发页面的重新渲染，同时scroll事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），下面介绍两种常用的解决方法，防抖和节流。防抖（Debouncing）防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。通俗一点来说，看看下面这个简化的例子：//..

//封装方法export const getExplorer = () => { const ua = window.navigator.userAgent const isExplorer = (exp) => { return ua.indexOf(exp) > -1 } if(isExplorer('MSIE')) return 'IE' else if(isExplorer('Firefox')) return 'Fire.

vue里怎么使用event bus (vue里怎么使用事件总线)，示例：第一种方式：//新建bus.vue<script> import Vue from 'vue' export default new Vue({ name: 'bus', data(){ return {} } })</script>//在vue文件里使用import Bus from './bus

css设置文字阴影，示例：text-shadow: 0.025rem 0.025rem rgba(179, 94, 85, 0.3);第一个是左右偏移量；第二个是上下偏移量；

【代码】vue全局修改设置滚动条样式。

输入 url 后，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻 找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存---->系统缓存---->路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务 器，得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一个 http 请 求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数 据，并将这个 http 请求封装在一个 tc

第一步：封装socket.jsimport { Message } from 'iview';class Socket { constructor (wsurl, binaryType){ this.wsurl = wsurl this.websock = null this.binaryType = binaryType this.initWeb...

文本超出隐藏，并显示省略号（...）,示例：只显示一行：overflow: hidden; //超出的文本隐藏text-overflow: ellipsis; //溢出用省略号显示white-space: nowrap; //溢出不换行显示多行：overflow: hidden;text-overflow: ellipsis; //溢出显示省略号display: -webkit-box; //弹性盒-webkit-box-orient: vertical; //上下垂直排

border设置虚线可调节虚线间距，示例：width:100%;height: 1px;background-image: linear-gradient(to right, rgb(101, 44, 194) 0%, rgb(216, 19, 19) 50%, transparent 50%);background-size: 80px 1px;background-repeat: repeat-x;

让一个盒子上无点击事件可以用css里的pointer-events，示例：.music-bar{ &.disable{ pointer-events: none; opacity:0.6;}}

1.先安装jdk，例如：jdk-8u181-windows-x64.exe2.按照步骤：计算机---->属性---->高级系统设置---->高级---->环境变量---->系统变量（新建）填写内容： 变量名：JAVA_HOME 变量值：java安装好的路径（默认的C:\ProgramFiles\Java\jdk1.8.0_181）3.新建好以后在系统变量里找到Path，操作步骤：选中Path----...

A person should have a strong will, or he will achieve nothing (一个人要有坚强的毅力，否则他将一事无成)Invest Regularly in Your Knowledge Portfolio （定期为你的知识资产投资）Critically Analyze What You Read and Hear （批判的分析你读到...