- 博客(48)
- 收藏
- 关注
RSS订阅
原创 前端-----随笔
git小乌龟[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YCAZOIwN-1627262113131)(C:\Users\guoxinqiang\AppData\Roaming\Typora\typora-user-images\1616045949098.png)]切换/检出--------------------切换分支切换/检出--------------------切换新分支----创建新分支可视化编辑网页document.body.contentEdi
2021-07-26 09:17:59
585
原创 1.字符串填充2. 字符串反转3.第一个字母大写3.检查字符串的开头或结尾是否有特定序列8. 字符串替换
这两个方法用于在字符串的开头和结尾填充指定的字符，直到字符串达到指定的长度。要替换字符串中所有出现的特定子字符串，您可以使用正则表达式方法与全局标志的替换，或使用新的replaceAll方法（注意：并非所有浏览器和Node.js版本都支持）。要使字符串的第一个字母大写，可以使用多种方法，例如 toUpperCase 和 slice 方法，或者使用字符数组。反转字符串中的字符是一种常见的需求，可以使用展开运算符…您可以使用 include 方法来检查字符串中是否包含特定序列，而无需使用正则表达式。
2024-01-07 09:30:00
429
原创 3种在JavaScript中终止forEach循环的方式
forEach相当于就是函数的执行，比如下面这段代码，即使func1执行了return语句，仍然会打印出2。在日常工作中，一般是不会出现一种情况是让你终止forEach循环的，如果有终止的情况，可以使用for和some方法。当满足条件时，使用splice方法将数组内元素移除，也能终止forEach循环。我们也能通过将数组长度设置成0来终止forEach循环。3. 将数组元素移除。
2024-01-06 01:11:08
838
原创 3. 滚动元素到可见区域4.全屏显示元素6.获取数据类型8. 深拷贝对象9. 确定设备类型11.获取浏览器类型及其版本19. 从数组中获取随机值格式化货币的方式
我们经常需要这样做，以便在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的 userAgent 来确定的。cookie可能是我见过的最糟糕的API，它太难用了，我们不得不重新封装它以最大限度地提高我们的开发效率。这时，你可能需要获取浏览器的类型和版本。除了区分是手机还是PC之外，很多时候我们还需要区分当前设备是Android还是IOS。你一定遇到过这样的场景，你需要全屏播放视频并在浏览器中全屏打开页面。是的，这个和第四点一起使用，你也会出现退出浏览器全屏状态的场景。
2024-01-06 00:28:32
537
原创 vue 开发npm插件
随便找一个项目中的.vue文件，调用插件中的方法testFn，因为直接挂载到了Vue的原型上，所以可以直接通过如下代码片段调用，成功调用就是发布插件成功了。根据命令行提示填写对应信息，不需要则直接回车，最后会根据你填写的信息生成对应的package.json文件。如果出现403错误，可能是npm配置了淘宝镜像的原因，重新配置一下npm官网地址即可。在终端输入如下指令按提示输入npm账号、密码以及邮箱。按照提示输入npm账号、密码以及邮箱验证码。注册npm账号，附上官网链接npm官网。
2024-01-02 18:08:42
756
原创 js 删除对象属性
通过用展开运算符(…)可以将需要省略特定属性的对象解构到新对象。这个技巧在需要删除多个属性时特别有用，并且不会更改原始对象。ES6新增的方法，Reflect.deleteProperty(对象，属性名)，返回一个布尔值。
2024-01-02 10:50:28
405
原创 vue父子组件加载/更新/销毁 过程
加载渲染过程: 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted。子组件更新过程: 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated。父组件更新过程 : 父 beforeUpdate -> 父 updated。
2023-04-03 11:37:25
559
原创 过滤所有html标签，特殊符号
v.productInstructions = v.productInstructions.replace(/<[^>]+>|&[^>]+;/g, "").trim();
2022-04-21 16:34:16
425
原创 jq 实现多分类筛选
添加id标识<div class="serchRow"> <span class="left">经营地：</span> <ul class="right" id="0"> <li class="active">全部</li> <li>江西省</
2022-04-18 15:05:30
326
原创 nuxtjs 2+ 版本使用问题总结
如何使用rem布局nuxt.config.js中const remjs = 'var html = document.getElementsByTagName("html")[0];var oWidth = window.innerWidth;html.style.fontSize = oWidth/ 1920* 100 + "px";'head: { title: '银罗首页', htmlAttrs: { lang: 'zh-cn' }, meta: [
2022-04-14 19:58:11
473
原创 vue+element 实现前端分页
<el-table ref="table" v-loading="listLoading" :cell-style="cellStyle" :data="AfterChangeData" :header-cell-style="table_heard_style" :height="700" :row-key="
2022-03-04 11:19:03
762
原创 vue 插槽 v-slot 实现父向子传值
// 子组件代码<template> <div class="child"> <h4>this is child component</h4> <p>收到来自父组件的消息： <slot name="child"></slot> <!--展示父组件通过插槽传递的{{message}}--> </p> </div></template&g
2022-03-03 09:13:36
1205
原创 vue+elementui 级联el-cascader菜单回显
//级联下拉回显(多级) changeDetSelect(key, treeData) { let arr = []; // 在递归时操作的数组 let returnArr = []; // 存放结果的数组 let depth = 0; // 定义全局层级 // 定义递归函数 function childrenEach(childrenData, depthN) { for(var j = 0; j < childre
2022-01-06 09:59:04
797
原创 vue elementui 表格拖动排序
npm i sortablejsimport Sortable from "sortablejs";//表格拖动排序 async dragSort() { const el = this.$refs.singleTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]; this.sortable = Sortable.create(el, { ghos
2021-12-31 16:05:49
201
原创 vue eleemntui 级联组件懒加载获取数据
<el-cascader ref="objArrcasa" v-model="form_list_.leadsQueryInfo.areaIdList" :props="listPropsSHDQ" clearable @change="handleChange1($event, 1)" ></el-cascader>...
2021-12-31 15:59:50
567
原创 vue elementui合并单元格
//html:span-method="arraySpanMethod"//筛选 async getListTable(data) { this.listLoading = true; data.leadsQueryInfo.pageNum = this.pageNum; data.leadsQueryInfo.pageSize = this.pageSize; this.tableDatasList = await JSON.parse(JSON
2021-12-31 15:54:19
349
原创 vue js 数组中为空字段设置默认值
//表格字段从为空处理=='--' emptyDefault(arr) { arr.forEach(val => { Object.keys(val).forEach(v => { if (this.isobjEmpty(val[v])) { val[v] = '--' } }) }) },
2021-12-31 15:47:24
2184
原创 vue js 去除elementui组件el-cascader级联菜单单选框
//时间函数处理多级下拉组件节点 timeAreaNode() { setInterval(function () { document.querySelectorAll(".el-cascader-node .el-radio").forEach((el) => { el.style.display = "none"; }); document.querySelectorAll(".el-cascader-nod
2021-12-31 15:45:34
550
原创 vue js 过滤对象中默认值
//去除数据中的默认 -1 setObj_(obj) { Object.keys(obj).forEach((key) => { if (obj[key] == -1) { if (key != "sex") obj[key] = typeof obj[key] === "string" ? "" : null; } }); return obj; },
2021-12-31 15:43:22
401
原创 vue js 过滤对象中为空的字段
//对象为空数据过滤 isEmptyObj(o) { for(var attr in o) return !1; return !0; }, processArray(arr) { for(var i = arr.length - 1; i >= 0; i--) { if (arr[i] === null || arr[i] === undefined) arr.splice(i, 1); else if (t
2021-12-31 15:31:45
1077
原创 vue js 计算分钟
//计算分钟 s_to_hs(s) { //算法：将秒数除以60，然后下舍入，既得到分钟数 var h; h = Math.floor(s / 60); //计算秒 //算法：取得秒%60的余数，既得到秒数 s = s % 60; //将变量转换为字符串 h += ""; s += ""; //如果只有一位数，前面增加一个0 h = h.length == 1 ? "0
2021-12-31 15:28:18
529
原创 判断对象是否有值
//封装为一个方法判断变量是否为空 isobjEmpty(obj) { if (obj === null || obj === undefined || obj === "" || obj.length === 0 || obj === {}) { return true; } else { return false; } }, //使用 if(!this.isobjEmpty(obj)){ //存在
2021-12-31 15:23:23
657
原创 vue js 当天时间日期转成年月日时分秒,时间格式处理
//时间戳转换成年月日时分秒 formatDate() { let date = new Date() let y = date.getFullYear() let MM = date.getMonth() + 1 MM = MM < 10 ? ('0' + MM) : MM let d = date.getDate() d = d < 10 ? ('0' + d) : d let h = date.ge
2021-12-31 13:47:45
387
1
原创 vue prop表单验证二维数组
效果单个数组:prop="'contactList.' + index + '.contactName'"二维数组:prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'"所有代码<div v-for="(domain, index) in formAddXianSuo.contactList" :key="index" class="contactBox"> <
2021-12-27 16:58:46
1509
原创 前端基础（不定期更新）
### 可视化编辑网页```httpdocument.body.contentEditable="true"document.designMode = "on"扩大文件cmd copy 1.txt /b + 2.txt 3.txt谷歌cookies跨域chrome://flags/搜索 SameSiteSameSite by default cookies和Schemeful Same-Site设置为disabledhtml快速创建文档标签div.class$*3div&g
2021-12-15 10:10:35
815
原创 css实现js效果
平滑滚动曾经有一段时间，我们不得不依靠JavaScript的window.scrollY来实现来执行此操作，如果想平滑滚动还要依赖定时器增加一个动画。随着scroll-behavior属性的新增，我们可以使用一行CSS代码来处理网站上的平滑滚动！浏览器支持约为75％，兼容性还是挺不错的。html {scroll-behavior: smooth;}完整代码:https://codepen.io/shinewen189/pen/RwVVYox滚动捕抓幻灯片、图片库这些也是前端高频使用功能，上
2021-12-13 19:13:10
328
原创 vue + elementui 实现 el-table 表格动态表头筛选功能
<el-table ref="table" v-loading="listLoading" :cell-style="cellStyle" :data="tableData" :header-cell-style="table_heard_style" :row-class-name="tableRowClassName" :.
2021-12-01 17:03:14
1784
原创 vue+ elementui合并单元格后 checkbox多选单选取值问题
@select="selectCheckOne" @select-all="selectAll"select_box:[]//单选 selectCheckOne(val, row) { //isSelect true为选中 false 为取消 let isSelect = val.length && val.indexOf(row) > -1 //findIndex返回-1则不存在，>0则存在 let n = this.sel.
2021-12-01 16:12:42
1203
原创 location.search获取URl参数
location.search获取URl参数 let url = window.location.search //获取url中"?"符后的字串 ('?modFlag=business&role=1') console.log(url); let theRequest = new Object() if (url.indexOf('?') != -1) { let str = url.substr(1) //substr()方法返回从参数值开始
2021-10-13 09:38:42
359
原创 虚拟滚动 content-visibility
用户滚动时只呈现课件区域.card { margin-bottom: 10px; content-visibility: auto; }如果是img图片contain-intrinsic-size: 312px; // 添加此行
2021-08-27 08:40:34
166
原创 vue 改变子组件props中的值
父组件<control :lingthData="lingthData" v-model="deviceF"></control> //v-model里面写上我们要传给子组件，并且还会在子组件中改变这个值 import control from '@/page/map/control'export default { components: { control }, data () { return { deviceF: true
2021-03-26 15:40:01
221
原创 容易被忽略的5个HTML技巧
各种框架和编程语言可能会此消彼长，但 HTML 永不会过时。只是，就算 HTML 的应用如此广泛，这种语言中还是有不少多数开发人员都不了解的标签和属性。而且，尽管市面上有各种模板引擎（例如 Pug）可用，但你仍然需要对 HTML 和 CSS 有所了解。如果你经常使用 CSS，请查看我最近的博客，了解一些鲜为人知却非常有用的 CSS 属性：https://medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-a
2021-03-01 11:45:22
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人