TurtleOrange-CSDN博客

常用正则表达式校验数字的表达式数字：^[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 448

原创 CSS 通用样式总结

CSS 通用样式总结1. CSS中英文样式换行p { /* 两边对齐 */ text-align: justify; /* normal-默认 break-all-允许在单词内换行 keep-all在半角空格或连字符处换行 */ word-break: normal; /* normal-允许内容顶开或溢出指定的容器边界 break-word内容再边界内换行 */ overflow-wrap: break-word; /* CSS3中将 word-wrap 改名为 over

2022-03-24 11:53:30 1125

原创【Markdown编辑器实用技巧】

Markdown编辑器实用技巧

2022-03-04 10:13:25 135

原创 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 3898

原创踩坑：小程序 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 3255

原创 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 535

原创微信小程序引入WeUI组件库（详细成功案例，带图）

微信小程序引入WeUI组件库本章选择官方引入组件的方式为第一种通过npm方式（第二种）引入WeUI通道第一步（引入WeUI库）第二步（组件代码）第三步（注册组件）第四步（看效果）

2021-11-04 11:55:43 872

原创 JavaScript String对象和Array对象的方法总结和对比

JavaScript String对象和Array对象的方法总结和对比String和Array共有String独有Array独有concatcharAtcopyWithinindexOfcharCodeAtentriesincludesendsWitheverylastIndexOffromCharCodefillslicematchfiltervalueOfrepeatfindtoStringreplacefindIn

2021-11-04 10:31:56 760

原创微信小程序引入WeUI组件库（详细成功案例，带图）

微信小程序引入WeUI组件（详细成功案例）第一步（确定位置）：在小程序的根目录下，pages文件夹点击右键，选择在资源管理器中显示第二步（初始化npm）：进入根目录文件夹后，打开cmd或者git bash，在根目录下输入 npm init，运行之后一直按回车成功后会增加一个文件第三步（安装weui-miniprogram插件）：继续运行下一条命令 npm install weui-miniprogram -S，安装插件安装好之后会多出这个文件夹第四步（使用插件）：在需要使用UI

2021-10-08 10:43:49 2153 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 12223 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 523

原创 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 387

原创 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 516

原创 Vue 3 中使用Element-plus国际化语言问题（修改为中文语言成功案例）

Vue 3 中使用Element-plus国际化语言问题（修改为中文语言成功案例）1.遇到的问题使用Element-plus组件默认是中文，如图：2.分析问题原因于是我就去找了他们的官方文档的源码以及查看他们的讨论区，找到了这个 i18n related issue | 国际化相关问题再找了它1.0.2-beta.59版本的更新内容一句话总结就是，最新的ElementPlus 国际化兼容版本还在开发中…3.解决办法使用1.0.2-beta.59以前的Element版本，我这里打了

2021-08-11 17:48:35 3895

原创常用的flex布局样式

常用的flex布局样式

2021-08-02 13:08:59 624

原创【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 466

原创 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 9834 2

原创 90版本以上的谷歌浏览器，本地请求不携带cookie

90版本以上的谷歌浏览器，本地请求不携带cookie1.发现问题本地用谷歌浏览器跑localhost代码在登录页面去登录，接口一直报请求超时（之前没有问题），经查看前端在发请求的时候没有携带cookie（如下图）2.产生问题原因经过测试，谷歌浏览器线上代码没问题√，谷歌浏览器跑本地代码localhost有问题×，火狐浏览器线上代码没问题√，火狐浏览器跑本地代码localhost没有问题√；原因是：Chrome禁用第三方Cookies的计划，在91版本后谷歌浏览器把same-site-by-def

2021-07-21 17:45:34 2484

原创 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 592

原创 vue中鼠标事件

vue中鼠标事件@click//单击@mousedown//按下@mouseup//抬起@dblclick//双击@mousemove//移动@mouseleave//离开@mouseout //移出@mouseenter//进入@mouseover//在

2021-06-09 23:52:23 236 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 199

原创将方法和变量绑定到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 1098

原创 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 252

原创 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 142

原创前端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 131

原创结合生活-浅谈Vue生命周期

结合生活-浅谈Vue生命周期没有亲身经历的事物，是永远进入不了你的脑袋里面的，永远不会深刻Vue.js生命周期上面是Vue官方文档里展示的生命周期图示，还建议大家：上图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。接下来是正题：我们把产品的生命周期与Vue的生命周期做比较（总体思想）：生产产品 --》》》-- 创建实例（Create）产品摆架 --》》》-- 实例挂载（Mount）商品循环更替 --》》》-- 数据更新（Upd

2021-03-05 09:47:50 133 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 190

原创 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 1977

原创图片加载完成后执行相应功能

图片异步加载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 376 2

原创 Vuex中getters的使用方法

Vuex中getters的使用方法前提脚手架搭好Vuex，项目内store文件夹下的index.js实例代码export default createStore({ state: { todos: [ { id: 1, text: '...1', done: true }, { id: 2, text: '...2', done: false }, { id: 3, text: '...3', done: true } ] }, getters: { // 基础用法

2020-12-23 11:53:40 1246

空空如也

空空如也