![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
分享
TurtleOrange
bug需要debug
展开
-
还在为ElementUI的原生校验方式苦恼吗,快用享受element-ui-verify插件的快乐吧(待续)
verify。原创 2023-01-26 12:36:08 · 1944 阅读 · 0 评论 -
react native环境搭建
react native 环境搭建原创 2022-11-27 17:05:39 · 240 阅读 · 0 评论 -
Vue 动态绑定图片地址,使用require也失效问题解决方案
解决Vue中,使用require显示图片失效问题原创 2022-09-15 15:29:03 · 2998 阅读 · 1 评论 -
数组对象根据id去重(javascript方法)
数组对象根据id去重(javascript方法)原创 2022-08-25 11:01:08 · 2539 阅读 · 0 评论 -
微信小程序比较用户微信客户端版本号
微信小程序客户端版本号比较原创 2022-07-07 11:42:24 · 1161 阅读 · 0 评论 -
最短js代码实现 “计算当前日期的前七天日期(跨月,跨年皆准确)”
最短js代码实现 “计算当前日期的前七天日期(跨月,跨年皆准确)”原创 2022-06-17 10:44:47 · 823 阅读 · 0 评论 -
【数据处理篇】总结常用的js(es567)处理数据的操作
总结一些常用的js(es5、es6、es7)处理数据操作原创 2022-04-06 09:57:51 · 712 阅读 · 0 评论 -
常用正则表达式
常用正则表达式校验数字的表达式数字:^[0-9]*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字:^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数:^(-)?\d+(.\d{1,2})$正数、负数、和小数:^(-|+)?\d+(.\d+)?$有两位小数的正实数:^[0-9]+(.[0-9]{2})?$有1~3位原创 2022-03-25 11:29:54 · 443 阅读 · 0 评论 -
【Markdown编辑器实用技巧】
Markdown编辑器实用技巧原创 2022-03-04 10:13:25 · 133 阅读 · 0 评论 -
flex布局自动换行并解决最后一行对齐
flex布局自动换行并解决最后一行对齐实现效果:html代码(父级容器里面有5个子级盒子)css实现对齐效果:.flex-wrp { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 16rpx; box-sizing: border-box;}/* 实现最后一行对齐 */.flex-wrp:after{ content: ""; width: 180rpx;原创 2022-02-10 09:44:15 · 3878 阅读 · 0 评论 -
踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null
踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null一、发现问题:苹果手机上进入小程序,点击picker组件选择时间日期(YYYY-MM-DD hh:mm:ss),用new Date(“YYYY-MM-DD hh:mm:ss”)转化时间格式,进行比较时,变量转化后的结果为null二、解决方案:let d1= (“YYYY-MM-DD hh:mm:ss”).replace(/\-/g, '/') // ios和安卓手机统一格式// let d1= (原创 2022-01-20 17:56:14 · 3234 阅读 · 0 评论 -
css文字超过n行显示省略号(万金油样式)
css文字超过n行显示省略号(万金油样式).overflowText { overflow: hidden; text-overflow:ellipsis; // white-space: nowrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // n行}原创 2021-12-23 16:48:17 · 524 阅读 · 0 评论 -
微信小程序引入WeUI组件库(详细成功案例,带图)
微信小程序引入WeUI组件库本章选择官方引入组件的方式为第一种通过npm方式(第二种)引入WeUI通道第一步(引入WeUI库)第二步(组件代码)第三步(注册组件)第四步(看效果)原创 2021-11-04 11:55:43 · 861 阅读 · 0 评论 -
微信小程序引入WeUI组件库(详细成功案例,带图)
微信小程序引入WeUI组件(详细成功案例)第一步(确定位置):在小程序的根目录下,pages文件夹点击右键,选择在资源管理器中显示第二步(初始化npm):进入根目录文件夹后,打开cmd或者git bash,在根目录下输入 npm init,运行之后一直按回车成功后会增加一个文件第三步(安装weui-miniprogram插件):继续运行下一条命令 npm install weui-miniprogram -S,安装插件安装好之后会多出这个文件夹第四步(使用插件):在需要使用UI原创 2021-10-08 10:43:49 · 2127 阅读 · 6 评论 -
Object.assign()用法小结
Object.assign()用法1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。2.Object.assign方法实行的是浅拷贝,而不是深拷贝。目标对象拷贝得到的是这个对象的引用3.语法:Object.assign(target, …sources)代码let aaa = { text: 2, value: 11,}let bbb = { text: 3}let ccc = Object.assign(a原创 2021-09-30 11:51:22 · 12205 阅读 · 2 评论 -
微信小程序实现底部导航栏自定义tabBar
重要!!!1.custom-tab-bar组件目录位置一定要和pages同级,不能放在自定义的components文件夹内,不然底部导航栏跳转异常。2.转跳的目标页面在onShow生命周期一定要有以下代码,因为跳转后选中的值会初始化,为了防止选中的值重置。(备注:如果第1点没做到,this.getTabBar()会undefined,故custom-tab-bar组件一定要和pages同级)onShow: function () { if (typeof this.getTabBar ===原创 2021-09-27 10:05:00 · 518 阅读 · 0 评论 -
JS substr()和substring()区别
JS substr()和substring()区别一、string.substr(start,length)string:截取对象start:从第“start”个元素开始(从0开始数包括第“start”个)length:截取长度二、string.substring(start, stop)string:截取对象start:从第“start”个元素开始(从0开始数包括第“start”个)stop:到第“stop”个元素结束(不包括第“stop”个),其返回的新字符串长度为(stop - s原创 2021-09-08 12:07:26 · 383 阅读 · 0 评论 -
Vue中import引入方式详解及export 和 export default的区别
Vue中import引入方式详解1.引入第三方插件import echarts from ‘echarts’import axios from ‘axios’import ElementPlus from “element-plus”;2.引入工具类一、 引入单个import { isNonNegative } from ‘./filters’;export导出export function isNonNegative (str) { … }二、引入多个import * a原创 2021-09-01 10:08:09 · 509 阅读 · 0 评论 -
【Vue】this.$router与this.$route的区别
【Vue】this.$ router 与 this.$ route 的区别1.this.$ routerthis.$ router 访问路由器 ;this.$router 是一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。2.this.$ routethis.$ route 访问当前路由 ;this.$ route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对原创 2021-07-28 15:23:17 · 460 阅读 · 0 评论 -
flvjs播放器事件动态监听并实现flvjs实例销毁(http-flv协议)
flvjs播放器侦听其相关事件1.困扰我的问题最近在使用flvjs播放器播放http-flv协议流的直播视频,业务需求要动态加载非固定数量的视频(不超过6个),使用创建flvjs实例,但销毁flvjs得想法子,下面为你们解决我曾经的困扰~2.思路我们要监听创建出来flvjs实例事件,然后设置变量去判断何时该销毁实例3.代码说明watch: { device(val) { if (val) { this.changeLampPost = true // 切换设备时销毁 } }}原创 2021-07-27 17:08:31 · 9680 阅读 · 2 评论 -
90版本以上的谷歌浏览器,本地请求不携带cookie
90版本以上的谷歌浏览器,本地请求不携带cookie1.发现问题本地用谷歌浏览器跑localhost代码在登录页面去登录,接口一直报请求超时(之前没有问题),经查看前端在发请求的时候没有携带cookie(如下图)2.产生问题原因经过测试,谷歌浏览器线上代码没问题√,谷歌浏览器跑本地代码localhost有问题×,火狐浏览器线上代码没问题√,火狐浏览器跑本地代码localhost没有问题√;原因是:Chrome禁用第三方Cookies的计划,在91版本后谷歌浏览器把same-site-by-def原创 2021-07-21 17:45:34 · 2446 阅读 · 0 评论 -
CSS3之flex兼容性写法
flex布局兼容性写法1.设置flex容器display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ di原创 2021-07-02 08:38:34 · 582 阅读 · 0 评论 -
vue中鼠标事件
vue中鼠标事件@click//单击@mousedown//按下@mouseup//抬起@dblclick//双击@mousemove//移动@mouseleave//离开@mouseout //移出@mouseenter//进入@mouseover//在原创 2021-06-09 23:52:23 · 229 阅读 · 2 评论 -
前端性能优化(节流、防抖、图片懒加载)
前端性能优化1.性能优化原则多使用内存、缓存减少CPU计算量,减少网络加载耗时空间换时间2.节流throttle拖拽一个元素时,要随时拿到该元素被拖拽的位置直接用drag事件,则会频繁触发,很容易导致卡顿节流:无论拖拽速度多快,都会每隔100ms触发一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2021-04-27 02:14:48 · 196 阅读 · 0 评论 -
将方法和变量绑定到window上操作
let that = this // 列表插槽传参 window.deviceList=[] window.showDialog = (row) => { that.infoId = row that.deviceList = window.deviceList that.devDialogVisible = true }slot: (row) => { return `原创 2021-04-21 11:05:06 · 1088 阅读 · 0 评论 -
map字典操作
// 字典是什么?// 与集合类似,字典也是一种存储唯一值的数据结构,但它是以 键值对 的形式来存储// ES6中字典名为Map// 字典的常用操作:键值对的增删改查const map = new Map()// 增map.set('a','aa') // 设置键和值map.set('b','bb')// 删map.delete('b')map.clear()// 改map.set('a','bb')// 查let val = map.get('a') // 获取值/原创 2021-04-19 00:49:54 · 247 阅读 · 0 评论 -
set集合操作
// ES6中集合名为Set// Set操作// 使用Set对象:new, add, delete, has, size// 迭代Set:多种迭代方法,Set与Array互转,求交集/差集const arr1 = [1,1,2,2]const arr2 = [2,3]// 去重let myArr = [...new Set(arr1)] // [1,2]// 判断元素是否在集合中let mySet = new Set(arr1)let isHas = mySet.has(1) //原创 2021-04-19 00:48:45 · 140 阅读 · 0 评论 -
前端web开发知识积累(持续更新)
1. HTML语义化解决啥问题? 为了避免通街都是div和span这种无意义的标签,加入了可语义化的标签,如 p,h1-h6(hgroup),ul(unordered list)、ol(ordered list)、li(list)、header、footer、nav、aside、article有啥优点?1.让人更容易读懂。2.让机器更容易读懂、提高搜索引擎搜索效率、利于SEO...原创 2021-03-09 09:58:43 · 129 阅读 · 0 评论 -
结合生活-浅谈Vue生命周期
结合生活-浅谈Vue生命周期没有亲身经历的事物,是永远进入不了你的脑袋里面的,永远不会深刻Vue.js生命周期上面是Vue官方文档里展示的生命周期图示,还建议大家:上图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。接下来是正题:我们把产品的生命周期与Vue的生命周期做比较(总体思想):生产产品 --》》》-- 创建实例(Create)产品摆架 --》》》-- 实例挂载(Mount)商品循环更替 --》》》-- 数据更新(Upd原创 2021-03-05 09:47:50 · 131 阅读 · 1 评论 -
创建Vue项目步骤
创建Vue项目步骤vue-cli脚手架全家桶技术栈:vue+vue-router+axios+vuex+antd(vue 版)1.新建文件夹,安装vue-cil脚手架(npm install -g @vue/cli)2.脚手架创建好后,创建项目(vue create [项目名])https://www.cnblogs.com/coober/p/10875647.html(看着链接的选项选择)3.在项目里面,创建vue.config.js文件https://blog.csdn.net/Tur原创 2021-02-25 16:08:31 · 189 阅读 · 0 评论 -
vue.config.js配置文件(build包通用)
vue.config.js配置文件const path = require('path')const resolve = dir => path.resolve(__dirname, dir)const webpack = require('webpack')module.exports = { /* # # 基本路径 */ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', /* # # 输原创 2021-02-25 15:29:12 · 1963 阅读 · 0 评论 -
图片加载完成后执行相应功能
图片异步加载1.计时器异步加载(缺点很明显,不知道图片加载时长,受网络影响)$(function(){ setTimeout(function(){ console.log(document.getElementById("image").complete) // function },1000)})2.image标签onload属性(简单)<img src="./long.png" id="image" onload="handleLoad原创 2021-02-19 14:21:15 · 372 阅读 · 2 评论 -
全国省市区县json数据
map.json[ { "name": "北京市", "city": [ { "name": "北京市", "area": [ "东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "转载 2020-12-18 11:26:54 · 4253 阅读 · 0 评论 -
运用极简行代码实现省市二级联动【json动态数据版】
运用极简行代码实现省市二级联动【json动态数据版】map.html请查看:运用极简行代码实现省市二级联动【固定数据版】map.jsvar arr = [] //存数据$(function() { $.ajax({ // 获取json数据 url: 'map/map.json', dataType: 'json', success: function(res) { let _pro = document.getE原创 2020-12-18 11:20:14 · 397 阅读 · 0 评论 -
运用极简行代码实现省市二级联动【固定数据版】
运用极简行代码实现省市二级联动【固定数据版】固定数据(加到map.js开头)var area =[ { "proName":"广东", "cityName":['潮州','东莞','佛山','广州','河源','惠州','江门','揭阳','茂名','梅州','清远','汕头','汕尾','韶关','深圳','阳江','云浮','湛江','肇庆','中山','珠海'], }, { "proName":"广西", "city原创 2020-12-18 11:05:26 · 313 阅读 · 0 评论 -
ios系统微信H5页面背景音乐自动播放
思路:在html页面代码内嵌小程序的代码块,可让ios手机自动播放背景音乐注意:微信小程序的代码块script脚本必须写在html文件,不可外部引入html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi原创 2020-11-04 11:35:32 · 1195 阅读 · 0 评论 -
解决$(window).load(function(){ …})报错问题及详解$(document).ready()和$(window).load()的区别
解决(window).load(function()…)报错问题及详解(window).load(function(){ …})报错问题及详解(window).load(function()…)报错问题及详解(document).ready()和$(window).load()的区别1.解决$(window).load(function(){ …})报错问题①修改:$(window).on(“load”,function(){ …})2.(document).ready()和(document).re原创 2020-11-02 11:36:56 · 2023 阅读 · 3 评论 -
解决ios手机select下拉选择不居中问题
解决ios手机select下拉选择不居中问题思路:select选择后赋值给span,select字体设置透明,span要设置不可点击html5代码<div class="page" style="position: relative;"> <span disabled>第 1 页</span> <select id='pageIndex' onclick="hasSelect()" onchange='pageChange(this.value原创 2020-09-07 17:59:15 · 1432 阅读 · 0 评论 -
js checkbox全选和取消全选功能
全选和取消全选先来看下效果附上代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选和取消全选</title> <link re原创 2020-06-10 11:35:24 · 451 阅读 · 0 评论 -
世界上最令人看起来感觉舒适的10种颜色
世界上最令人感觉舒适的10种颜色,前端调色再也不怕找不到色码了如果有打开微信(或者QQ)的话,按下Alt+A键(或Ctrl+Alt+A键),鼠标放到色块上就能看到RGB了原创 2020-05-15 18:03:03 · 6651 阅读 · 0 评论