学习笔记
yww_yang
这个作者很懒,什么都没留下…
展开
-
js 普通数组对象转树形(Tree)图数据结构
【代码】js 普通数组对象转树形(Tree)图数据结构。原创 2022-11-09 15:41:47 · 364 阅读 · 1 评论 -
JS window.open 监听tab页的关闭
window.open 新开浏览器标签,监听是否被拦截,是否关闭原创 2022-09-22 14:17:15 · 470 阅读 · 0 评论 -
js RGB 转换为 HEX
项目中碰到需要将rgb 转换为hex,找到方法是将rgb 每个数字由10进制转换为16进制const rgbToHex = (r, g, b) => { const toHex = num => { const hex = num.toString(16); return hex.lenght === 1 ? `0${hex}` : hex; }; return `#${toHex(r)}${toHex(g)}${toHex(b)}`;原创 2022-05-06 14:24:21 · 673 阅读 · 0 评论 -
linux 启用apache\mysql 环境
启用mysqlservice mysqld start // 该命令无法启用时根据错误提示直接取用,如下图/bin/systemctl start mysqld.service重启mysqlservice mysqld restart // 该命令无法启用时根据错误提示直接取用,如下图类似于启用mysql启用apacheservice httpd start // 该命令无法启用时根据错误提示直接取用,如下图类似于启用mysql...原创 2022-05-06 11:32:44 · 618 阅读 · 0 评论 -
vue model 使用
vue 组件封装中,使用model 配合.sync 修饰符实现联动实现子组件数据改变同步修改父组件chid.vue<template> <div> <el-button @click="showChange">button</el-button> <div v-show="show">{{ name }}</div> </div></template>&l原创 2022-03-30 11:52:07 · 1876 阅读 · 0 评论 -
js 常用函数
获取两个日期之间的天数格式可为yyyy-MM-dd | yyyy/MM/ddconst getDays = (date1, date2) => Math.abs(new Date(date1) - new Date(date2)) / (1000 * 3600 * 24)getDays('2020-04-04', '2021-03-25') // .log(355)获取当前时间const curTime = new Date().toTimeString().slice(0, 8.原创 2021-11-30 16:31:55 · 59 阅读 · 0 评论 -
vsCode 代码快速生成
选择你需要的快速得到的代码片段案例: vue.json如果需要在.vue 中需要输入某个特定代码可快速得到下面一段代码// 输入vue,得到以下代码片段<template> </template><script>export default { name: '', data() { return {} }, mounted() {}, methods: {}}</script&g.原创 2021-11-05 11:35:32 · 533 阅读 · 0 评论 -
html 图片加载优化
在项目开发中,如果页面中图片过多,就会出现页面加载缓慢的问题。优化的方案为图片降级<div class="box"> <img id='webp' alt=''> <img id='jpg' alt=''></div>/** * 首先考虑使用webp格式的图片,因为webp格式的图片拥有无损压缩和有损压缩两种模式而且压缩率更高等优点。 * 但是webp 但是改格式也有缺点ios|IE|webView是不支持的所以的进行判断。 .原创 2021-11-05 10:25:18 · 1235 阅读 · 0 评论 -
vue 封装滚动数字组件
该组件包含正整数及浮点型小数父组件引用<roll-number :font-size="16" :num="num"></roll-number><script> setInterval(() => { this.num = Math.random() * (10000 + 1); }, 3000);</script>rollNumber.vue 数字滚动组件html<template> <div原创 2021-07-22 15:04:29 · 327 阅读 · 0 评论 -
elementui table 文本限制行数隐藏
elementui table 中 show-overflow-tooltip=“true” 只能有一行隐藏有时候无法满足需求时html<el-table-column label=""> <template slot-scope="scope"> <el-tooltip popper-class="tip-cell" placement="top" v-model="sco原创 2021-07-21 11:24:24 · 1834 阅读 · 0 评论 -
vue 封装组件库,发布至npm
该文章引用:https://blog.csdn.net/qq_31851435/article/details/106647833封装vue组件库有2种形式:使用 webpack-simple 模板,没有vue-router的中间件,不需要路由时推荐使用,同时 webpack-simple没有格式的检测。使用 webpack 模板。┌─testNpm 项目主目录├─ src │ └─ components 存放所.原创 2021-04-14 14:59:25 · 315 阅读 · 0 评论 -
vue 响应式dom监听
vue 响应式dom监听CSS Element Queries基于vue 监听到dom 尺寸变化的组件 // 安装 npm install css-element-queries --save // 引用 // 1、全局引用 main.js import ResizeSensor from "css-element-queries/src/ResizeSensor"; import ElementQueries from 'css-element-queries/src/Elemen原创 2021-04-06 10:15:49 · 236 阅读 · 0 评论 -
js 加锁
js 加锁 防止重复提交$(document).ready(function(){ var lock =false;//锁作为全局变量 $("#submit").on('click',function(){ //如果用户提交了一次,lock被置为true,锁开启。后续在锁被关闭之前,用户都不能提交数据。 if(lock) { //锁已经开启,在提交只会被阻断 return false;原创 2021-03-10 11:28:04 · 2083 阅读 · 0 评论 -
css3 圆形轨迹动画
css3圆形轨迹动画<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title> css3圆形轨迹动画 </title> <style type="text/css"> @keyframes animX{ 0% {left: 0px;} 100% {left:原创 2020-09-25 14:02:31 · 763 阅读 · 0 评论 -
js 禁止拖动
js 拖动时禁止页面的滚动//touchstart里document.documentElement.style.touchAction = 'none';//touchend里document.documentElement.style.touchAction = 'auto';原创 2020-09-25 13:59:46 · 1233 阅读 · 0 评论 -
<audio>在 iOS 微信端不能自动播放
在 iOS 微信端不能自动播放一般来说我们要利用 实现音频自动播放只需要在 标签上加上 autoplay 属性.实现简单的 音频自动播放,代码如下:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi转载 2020-09-25 13:57:38 · 441 阅读 · 0 评论 -
正则简单封装
正则//获取图片地址: 1、'#src="(.*?)"#' ;2、 '/\s+src\s?\=\s?[\'|"]([^\'|"]*)/is' ;//手机号码验证function checkPhone(){ if(!(/^1[34578]\d{9}$/.test(phone))){ alert("手机号码有误,请重填"); return false; }}//精确小数点后两位var Price = '11.22';var reg = /^原创 2020-09-25 13:46:19 · 245 阅读 · 0 评论 -
css 隐藏滚动条或更改滚动条样式
css 隐藏滚动条或更改滚动条样式/*css主要部分的样式*//*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ body::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ body::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)原创 2020-09-25 11:57:28 · 699 阅读 · 0 评论 -
input 的 placeholder 的字体样式
input 的 placeholder 的字体样式input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } input:-moz-placeholder { /* Firefox 1原创 2020-09-25 11:55:31 · 138 阅读 · 0 评论 -
css 背景图 适应
css 背景图 适应CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 <div class="bg"> <img src="../../assets/images/headImg.jpg" alt=""> </div>.bg { background-color: seagreen; height: 200px; width: 100px;}img { height: 100%; wi原创 2020-09-25 11:53:09 · 260 阅读 · 0 评论