文章目录

JS
Vue
- Vue中scrollIntoView失效 | Vue中scrollIntoView无效
- - 解决Vue使用scrollIntoView失效
CSS

JS

js对象深拷贝

/**
 * 深拷贝对象
 * @param {Object,Array} obj 要复制的对象
 * @returns {Object,Array} 返回一个复制的对象
 */
 
const copyObj = obj => {
    
    
    // 非对象 {}
    const isObj = typeof obj !== 'object' || obj === null

    if (isObj) return obj

    // 是数组 []
    const isArr = Array.isArray(obj) 
    // 确认数据类型
    const newObj = isArr === true ? [] : {
    
    }

    // 遍历对象
    for (const key in obj) {
    
    
        newObj[key] = copyObj(obj[key])
    }

    return newObj
}

const a1 = [
    {
    
    
        a: [
            {
    
    
                b: ['我是老6']
            }
        ]
    }
]

const a2 = copyObj(a1)

a1[0].a[0].b = '我不是老666666666666'

console.log(a1)
console.log(a2)

运行结果

js随机色

function ramColor() {
    
    
    //随机生成RGB颜色
    const arr = [];
    for (let i = 0; i < 3; i++) {
    
    
        // 暖色
        // arr.push(Math.floor(Math.random() * 128 + 64));
        // 亮色
        arr.push(Math.floor(Math.random() * 128 + 128)); 
    }
    const [r, g, b] = arr;
    // rgb颜色
    // var color=`rgb(${r},${g},${b})`;
    // 16进制颜色
    const color = `#${
      
      r.toString(16).length > 1 ? r.toString(16) : "0" + r.toString(16)
        }${
      
      g.toString(16).length > 1 ? g.toString(16) : "0" + g.toString(16)}${
      
      b.toString(16).length > 1 ? b.toString(16) : "0" + b.toString(16)
        }`;
    return color;
}

End
2023/4/20 9:21

数组对象排序

const arr = [{
    
     age: 1 }, {
    
     age: 100 }, {
    
     age: 23 }, {
    
     age: 87 }, {
    
     age: 4 }, {
    
     age: 10 }, {
    
     age: 27 }, {
    
     age: 99 }, {
    
     age: 54 }, {
    
     age: 23 }, {
    
     age: 55 }, {
    
     age: 23 }, {
    
     age: 87 }]

console.log(sortArrKey(arr, 'age', 1));

/** 
 * @param {Array} arr 要排序的数组
 * @param {string} sortKeyName  排序的键(Key)
 * @param {Number} sortType 排序类型 1是正序 非1是负序
 * @return {Array} 返回一个排序的数组
 */
 function sortArrKey(arr, sortKeyName, sortType = 1) {
    
    
  return arr.sort((o1, o2) => sortType === 1 ? o1[sortKeyName] - o2[sortKeyName] : o2[sortKeyName] - o1[sortKeyName])
}

演示
在这里插入图片描述
End
2023/4/19 12:07 辑

兼容pc端与移动端事件

1. 封装兼容pc端与移动端事件

src/tuil/events.js

/**
 *  判断是PC端还是移动端
 *  通过不同的设备定义不同的事件名
 */
const isMobile =
    navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    ) !== null

const events = isMobile
    ? ['touchstart', 'touchmove', 'touchend']
    : ['mousedown', 'mousemove', 'mouseup']


export {
    
    
    events
}

2. 使用

假如在vue使用

src/views/Home.vue

<template>
  <div ref='div'>home</div>
</template>
<script setup>
import {
      
       ref, onMounted } from 'vue'
//引入
import {
      
       events } from '@/utils/event'

const [start, move, end] = events
console.log(start, move, end);

//获取元素
const div = ref(null)

onMounted(() => {
      
      
  // 使用
  div.value.addEventListener(start, _ => console.log('你好呀'))
}) 
</script>

pc效果

移动端效果
在这里插入图片描述

End
2023/4/17 19:19 晴朗

scrollIntoView 滚动到可视区

基本用法

el.scrollIntoView()
el.scrollIntoView(true)
el.scrollIntoView(false)
el.scrollIntoView(opts)
el.scrollIntoView({
    
     behavior: 'smooth', block: 'start', inline: 'nearest' })
el.scrollIntoView({
    
     behavior: 'auto', block: 'start', inline: 'nearest' })

el.scrollIntoView(opts)

el 滚动的元素，例如 div
opts:
- true 滚到父级顶部
- false 滚到父级底部
- { behavior: ‘smooth’, block: ‘start’, inline: ‘nearest’ } 参数为一个对象时↓
  - behavior
    - auto 无动画
    - smooth 平缓过渡
  - inline 水平对齐（默认 start）
    - start
    - center
    - end
    - nearest
  - block 垂直对齐（默认 start）
    - start
    - center
    - end
    - nearest

10分钟看懂call apply bind

名称	地址
call apply bind - 转【菜鸟教程】-侵删	https://www.runoob.com/w3cnote/js-call-apply-bind.html
call apply bind - 转-备用	https://www.runoob.com/w3cnote/js-call-apply-bind.html

call apply bind 小结

call apply bind 作用 => 改变this指向

名称	用法
call	`对象.call(this指向,参数1,参数2...)`
apply	`对象.apply(this指向,[参数1,'参数2'....].)`
bind	`对象.bind(this指向,参数1,参数2...)`

3者区别

区别
`call`、`apply`、`bind`第一个参数都是`改变this指向`
3者第一个参数传`null`或`undefined`时，this指向window，如`fn.call(null,...agrs)`
`call`与`bind`传参方式一样，如`fn.call(null,...agrs)`,`fn.bind(null,...agrs)`
`apply`传参为数组方式，如`fn.aapply(null,['a','b'])`
`call`、`apply`只改变一次this指向，且立即执行一次该函数
`bind`永久改变this指向，且不会立即执行该函数，如：`fn1.bind(obj1)`不会立即执行fn1函数，如`fn2.bind(obj2)()`，加个括号会立即执行fn2函数
`apply`和`call`是一次性传入参数，`bind`可分为多次传入

2023/3/11 10:17

addEventListener-事件绑定

el.addEventListener(event,callback)用于绑定事件，比如点击（click）
- el 绑定的元素
- event 事件
- callback 回调函数

例：

HTML元素.addEventListener("事件名", function(){
    
    
	// js代码
});

pc端事件

事件名	作用
click	点击事件 - 注：移动端也可触发
contextmenu	鼠标右键
dblclick	双击 - 注：移动端也可触发
mousedown	鼠标按下
mouseup	鼠标松开
mouseenter	鼠标指针移到元素上时触发 - 注：只触发一次
mouseover	鼠标移到元素上- 注：只触发一次
mousemove	鼠标被移动时触发 - 注：触发多次
mouseleave	鼠标指针移出元素触发
mouseout	鼠标从元素移开
键盘事件	…略

例

HTML元素.addEventListener('mouseenter', e =>{
    
    console.log('0')})

HTML元素.addEventListener('mouseleave', e =>{
    
    
	console.log(e)
})

移动端事件(touch)

事件名	作用
touchstart	手指按下
touchmove	手指移动
touchend	手指离开
touches	所有手指列表
targetTouches	第一个手指
changedTouches	涉及当前事件的手指的一个列表

例

HTML元素.addEventListener('touchstart', e=>{
    
    console.log(e)})

HTML元素.addEventListener('touchmove', e=>{
    
    
	console.log(e)
})

2023/3/11 14:21

div输入框

给div加上contenteditable="true"属性，可作为一个输入框

作用 :
- textarea与input输入框无法插入图片以及其它元素
- div不仅可以输入文字，还可插入元素，例如将img图片转为表情输入，

Vue

Vue中scrollIntoView失效 | Vue中scrollIntoView无效

解决Vue使用scrollIntoView失效

在nextTick中使用scrollIntoView即可

例

<script setup>
import {
    
     nextTick } from 'vue';
nextTick(()=> {
    
     
    HTML元素.scrollIntoView({
    
     behavior: 'smooth', block: 'start', inline: 'nearest' })
})
</script>

2023/3/10 18:46

CSS

文本强制不换行

必须设置 width

.user{
    
    
    width: 100%;
    white-space:nowrap; 
    word-wrap: break-all;/* 英文不换行 */
}

多行文本隐藏

.txt{
    
    
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;  /* 保留几行 */
	-webkit-box-orient: vertical;
}

单行文本隐藏

.txt{
    
    
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100pvw; /*  必须设置宽 */  
	white-space:nowrap; 
    word-wrap: break-all;/* 英文不换行 */
}

css文本省略表

必须的属性	作用
overflow: hidden	超出隐藏文本
text-overflow: ellipsis;	超出显示省略号
-webkit-line-clamp: 3;	保留几行

2023/3/12 9:19

稀奇属性

属性名	值	作用	类型
caret-color	颜色值，例red	设置输入框光标颜色	CSS
contenteditable	false 、true	将html元素设为输入框	HTML

图片与文本水平对齐（vertical-align）

可用于评论框

.emjio {
    
     
    vertical-align: middle;
}

效果图
在这里插入图片描述

2023/3/17 22:08

range滑块美化

input[type=range] {
    
    
   margin: 0;
   -webkit-appearance: none;
   appearance: none; 
   background-color: transparent; 
 }



input[type=range]::-webkit-slider-runnable-track {
    
    
   height: 4px;
   background: #eee;
 }

input[type=range]::-webkit-slider-container {
    
    
   height: 20px;
   overflow: hidden;
 }

input[type=range]::-webkit-slider-thumb {
    
    
   -webkit-appearance: none;
   appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   cursor: pointer;
   background-color: #f44336;
   border: 1px solid transparent;
   margin-top: -8px;
   border-image: linear-gradient(#f44336, #f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
 }

效果
在这里插入图片描述

End
2023/4/19 23:46

【小结】Vue3 Css Js HTML || js对象深拷贝 || 事件