日常笔记Vue2 通过 vue-router 从一个页面跳转至另一个页面时如果当前页面跳转前不在顶部，出现跳转后的页面

Vue2 通过 vue-router 从一个页面跳转至另一个页面时

如果当前页面跳转前不在顶部，出现跳转后的页面展示时也不在顶部的问题

    // router.js
    const router = new VueRouter({
        mode:'history',
        base:process.env.BASE_URL,
        routes,
        scrollBehavior(to, from, savePosition){
            return { x: 0, y: 0 }
        }
    })
    
    export default router
    
    
    // vue3. router=> index.js中
    router.beforeEach((to, from, next) => {
    // 路由跳转后，让页面回到顶部
    // chrome
    document.body.scrollTop = 0; // firefox
    document.documentElement.scrollTop = 0; // safari
    window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩子就不会被销毁
    next();
    //to 即将进入的路由
    //from 即将离开的路由
    //next 放行
})

隐藏元素滚动条(兼容)

        // ul 为例 
        ul::-webkit-scrollbar {
            width: 0 !important;
        }

        ul {
            -ms-overflow-style: none
        }

        ul {
            overflow: -moz-scrollbars-none;
            scrollbar-width: none;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 14px;
          background: linear-gradient(90deg, #3041FE 1.2%, #D903CB 99.97%);
        }

文字溢出省略号

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

禁止移动端 input 获取焦点时，调用软键盘

      this._this.$refs.verCode.addEventListener('focus', () => {
         document.activeElement.blur()
      })

css 文本垂直

    writing-mode: vertical-lr;
    word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/

一键复制

    copy(data) {
        let input = document.createElement('input')
        input.value = data
        input.id = 'copyInput'
        document.body.appendChild(input)
        input.select() // 选中文本
        document.execCommand('copy') // 执行浏览器复制命令
        document.getElementById('copyInput').remove()
        this.MessageTip('复制成功')
    }

实用的 css 颜色处理

    // darken rgba 处理16进制颜色
    .error-box { 
        background-color: rgba(#fff, 0.2); 
        color: darken(#fff, 10%); 
    }

Vue3 浏览器适配 postcss 配置

    // 1. 创建 postcss.config.js  适用于 webpack
  module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 1920, // UI设计稿的宽度
      unitPrecision: 2, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['.am-'], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
}


// 适用于 vite    postcss.config.cjs   cjs 表示此模块只能用 commonJS 模式加载
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        'last 10 versions' // 所有主流浏览器最近10版本用
      ],
      grid: true
    },
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度的1/ 10    或者rootValue: 192
      propList: ['*', '!border'], // 除 border 外所有px 转 rem
      selectorBlackList: ['.el-'] // 过滤掉.el-开头的class，不进行rem转换
    }
  }
}

    
    2. 下载插件
    npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S  

    npm install postcss-url --S
    npm install postcss-import --S
    
    7.0 -- 8.0 迁移指南： https://evilmartians.com/chronicles/postcss-8-plugin-migration

css 禁止图片拖动

    img {
      -webkit-user-drag: none;
    }

vue3 路由传递 params 参数

    // 1. 跳转路由必须使用 name，不能使用 path
    useRouter().push({
        name:'home',
        params:{id:1}
    })
    // 2. 路由必须开启接收 props
    {
        path: '/',
        name: 'home',
        component: () => import( '@/views/home/index'),
        props:true
    }
    // 3. 接收 params 可以使用 props，也可以使用 useRoute().parames.id

vue 页面滚动到指定元素的位置

document.querySelector('.scroll').scrollIntoView({
  behavior:'smooth',
  block:'start'
},true)

window.scrollTo({top: JSON.parse(sessionStorage.getItem('hTop') || 700), behavior: "smooth"})// 第二个数表示滚动距离

浏览器的标签页被隐藏或展示时触发的事件

    document.addEventListener('visibilitychange', () => {
        document.visibilityState取值：hidden，visible；
        document.hidden取值：true/false
    })

监控页面触底

const handleScroll = () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    // 页面可视区的高度
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
    // 滚动条的总高度
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    //滚动条到底部的条件  - n 是因为有的浏览器有bug，检测不到触底
    if (scrollTop + windowHeight >= (scrollHeight - n)) {
        console.log('chudi....')
        return
    }
}

页面触底的另一种思路

/* handlerScroll.js */
const MYIntersectionObserver = (el, callBack, callElseBack = () => { }) => {
    // const src =
    const intersectionObserver = new IntersectionObserver((entries) => {
        // 如果 intersectionRatio 为 0，则目标在视野外，
        // 我们不需要做任何事情。
        if (entries[0].intersectionRatio <= 0) {
            callElseBack()
            return
        }
        // intersectionObserver.unobserve(el)

        callBack()
    }, {
        threshold: 0
    })
    // 开始监听
    intersectionObserver.observe(el)

}
export default MYIntersectionObserver


/* 使用方式 */
/* 列表循环的最下方添加锚点 dom */
<div class="scroll">加载中</div>

/* 引入并监听 */
import Scroll from '@/utils/handlerScroll.js'

onMounted(() => {
  let dom = document.querySelector('.scroll')
  Scroll(dom, () => {
    data.pageData.current = 1
    onLoad() // 加载逻辑
  })
})

使用伪元素修改滚动条样式

    ::-webkit-scrollbar

文字外边框

-webkit-text-stroke-color:red; // 边框颜色
-webkit-text-stroke-width:1px; // 边框宽度

文字竖向展示

word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
writing-mode: vertical-lr;

移动端 H5 遮盖页面滑动会看到下边界

解决1：遮盖状态下禁止滑动
 @touchmove.prevent=""

safari 定时器中的音频

// iPhone音频不能自动播放，需要用户手动点一下，而你需要在这次点击事件中开始并结束一下，然后setTimeout才有效果
点击函数内：重载
this.openEnd.load()
然后其他地方播放
this.radio.play()

数组去重

// 最简单的方式
const uniqueArr = (arr) => [...new Set(arr)];

从url获取参数并转为对象

const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`\)

getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");

/* {q: 'js+md', newwindow: '1'} */

检查对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false

生成随机十六进制

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b

检查当前选项卡是否在后台

const isTabActive = () => !document.hidden; 

isTabActive()
// true|false

检测元素是否处于焦点

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素处于焦点返回true，反之返回false

文字复制到剪贴板(支持图片)

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码 前端世界')

检测用户浏览器内核

getBrowserType(){
  let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  let browser='unknown';
  if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段，表明是IE浏览器
    browser="IE";
  }else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段，表明是火狐浏览器
    browser="Firefox";
  }else if(userAgent.indexOf('OPR')!=-1){//Opera
    browser="Opera";
  }else if(userAgent.indexOf('Chrome')!=-1){//Chrome
    browser="Chrome";
  }else if(userAgent.indexOf('Safari')!=-1){//Safari
    browser="Safari";
  }else if(userAgent.indexOf('Trident')!=-1){//IE内核
    browser='IE 11';
  }
  return browser;
},

base64 加密解密

原生

// 加密
const string = '12345678'
const enc = window.btoa(string)  // enc : 'MTIzNDU2Nzg='

// 解密
const encString = 'MTIzNDU2Nzg='
const decString = window.atob(encString)  // decString : '12345678'

js-base64

// 安装依赖
npm install --save js-base64

// 单页面引入
import {Base64} from 'js-base64'
// const Base64 = require('js-base64').Base64
Base64.encode(pwd) // 加密
Base64.decode(pwd) // 解密

// 全局注册
import Vue from 'vue'
import {Base64} from 'js-base64'
Vue.prototype.$Base64 = Base64
// 或
import Base64 from 'js-base64'
Vue.use(Base64)

// 单页面使用
const encpwd = this.$Base64.encode(pwd) // 加密
const decpwd = this.$Base64.decode(encpwd) // 解密

监听 @keyframes 动画

    开始事件 webkitAnimationStart   
    结束事件 webkitAnimationEnd   
    重复运动事件 webkitAnimationIteration
    
    div.addEventListener('webkitAnimationEnd', function() {
        console.log('结束');
    });

css 图片穿透

当 img 覆盖在某一个 dom 上面时，如果希望用户交互可以透过 img 触发下面 dom 的事件时
img {
    pointer-events: none;
}

安卓或 ios 拨号功能

<a href="tel:888,023"></a>：888转023
<a href="tel:11211211212"></a>:直接拨打手机号11211211212

css animation 实现节流

定义节流动画，控制 dom 默认行为
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

使用动画
.test { animation: throttle 2s step-end forwards; }

伪类重置动画
.test:active { animation:none }

animation 节流缺点是不够安全，控制台去掉 class 节流就无效了。
其次，如果节流动画时间过长，第一次页面渲染时，动画会执行一次，要等动画时间过后，事件才能触发

html 原生 progress

<meter min="0" max="100" low="25" high="75" optimum="80" value="50" ></meter>

改变进度颜色：
//meter::-webkit-meter-bar,
meter::-webkit-meter-suboptimum-value,
  meter::-webkit-meter-optimum-value,
meter::-webkit-meter-even-less-good-value
{
  background-color: red;
}

input 下拉表单清除默认样式(小三角)

<input type="text" list="datalist" class="input">
<datalist id="datalist">
  <option value="test1"></option>
  <option value="test2"></option>
  <option value="test3"></option>
  <option value="test4"></option>
</datalist>



/* 去除小三角形的css */
input::-webkit-calendar-picker-indicator{
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  border: 0;
  color: transparent;
}

按照对象数组中 item 的某个字段排序

const sort = data => {
    data.sort((a,b) => a.id - b.id)
    return data
}

清除 type="number" 小三角

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
}

一键复制二维码只支持 https 和 localhost(127.0.0.0)

// base 64 转 Blob
const base64ToBlob = (dataurl) => {
  let let = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}


const copyQrcode = () => {
  nextTick(()=>{
    let container = document.getElementById('qrCode').childNodes[1]; 获取二维码父元素内 img 的 src
    console.log(container,'dom')
    let myBlob = base64ToBlob(container.getAttribute('src'));
    navigator.clipboard.write([new window.ClipboardItem({ [myBlob.type]: myBlob })])
  })
}

// navigator.clipboard 只能在 localhost 域名或 https 下执行，http 不行

vue 获取 DOM 行内样式

 console.log(this.$refs.DOM.style.cssText === 'display: none;','???')  DOM 为 ref 定义的元素

vue 初始化对象数据

    // 将 obj 的值初始化为最初状态
    this.obj=this.$options.data().obj
    
    还有过滤器 （filters ）  
    过滤器无法通过 this 直接引用
    但是可以通过以下方法就可以获取到
    this.$options.filters.过滤器名字

禁止鼠标滚轮控制 number 类型的 input

const  stopScrollFun = (evt) => {
    evt = evt || window.event;
    if(evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
    } else {
        // IE
        evt.cancelBubble=true;
        evt.returnValue = false;
    }
    return false;
}

获取当前 30 天开始和结束的日期格式

GetDateStr(AddDayCount = 30) {
  let dd = new Date();
  // 开始日期
  let ny = dd.getFullYear();
  let nm = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
  let nd = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0

  // 结束日期
  dd.setDate(dd.getDate()-AddDayCount);//获取AddDayCount天后的日期
  let y = dd.getFullYear();
  let m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
  let d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0

  // return y+"-"+m+"-"+d+' '+'00:00:00';
  console.log(y+"-"+m+"-"+d,ny+"-"+nm+"-"+nd,'y+"-"+m+"-"+d;')
  return [y+"-"+m+"-"+d,ny+"-"+nm+"-"+nd]
},

清除内部滚动条

::-webkit-scrollbar{
  width: 0;
  background: transparent;
}

判断数组中是否含某个对象

JSON.stringify(arr).indexOf(JSON.stringify(obj))

点击任意地方关闭

// 点击任意位置关闭
const queryFn = e => {
    const screenDoc = document.querySelector('.big') // 需要关闭的元素
    const valueInfoDoc = document.querySelector('.small') // 用于开启的元素
    if (valueInfoDoc && valueInfoDoc.contains(e.target) && screenDoc && !screenDoc.contains(e.target)) {
    }else {
        data.asideVisible = false // 关闭
    }
}
onMounted(()=>{
    document.addEventListener('click',queryFn)
})
onUnmounted(()=>{
    document.removeEventListener('click',queryFn)
})

css 中的伪元素 content 配置 i18n

// 使用 attr 属性，attr 能够接收 html 结构上的任意属性(包括自定义)的值，但是属性必须是最近的父元素的
&::before {
  //content: '上一页';
  content:attr(datacontent);
  font-size: 16px;
  color: #CCCEFF!important;
}

// html
<el datacontent='something'></el>

npm、vite、vue3

npm init vue@latest

// 如果启动后只有 localhost 访问
// 执行 `npx vite --host 0.0.0.0`

// 或者修改 npm 配置
"scripts": {
  "dev": "vite --host 0.0.0.0",
  "build": "vite build",
  "preview": "vite preview --host 0.0.0.0"
},

// 使用 sass
1.  npm install sass --save-dev
1.  npm install sass-loader --save-dev
1.  npm install vue-style-loader --sava-dev

dom 非透明区域外阴影，支持不规则图形

filter: drop-shadow(0px 0px 6px rgb(255,255,255));

JS 定义行内样式变量

// 定义
element.style.setProperty('变量名', `值`);
// css 内使用
transform: perspective(1000px) rotateX(var(变量名)) scale3d(1.045,1.045,1.055);

requestAnimationFrame设置刷新帧率随浏览器画面刷新而刷新

const mouseMove = e => {
    let {offsetX, offsetY} = e
    requestAnimationFrame(() => this.computed(offsetX, offsetY))
}

修改 input 的 placeholder 字体样式

input[type=text]::placeholder {
  background: linear-gradient(180deg, #E4B8FF 0%, #AFD5FF 100%); // 渐变
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

处理 swiper 用户操作后停止自动轮播，disableOnInteraction="false" 失效问题

// autoplay 写成对象
:autoplay="{delay: 3000,stopOnLastSlide: false,disableOnInteraction: false}"

css 滤镜用于制造毛玻璃效果

::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(14px);
  opacity: .6;
  background-color: rgba(0,0,0, 0.25);
}

css 圆角边框渐变色、

border: 1px solid transparent;
border-radius: 30px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image:linear-gradient(to right, #333, #333), linear-gradient(0deg, rgb(174, 111, 255) 0%, rgb(46, 179, 255) 100%);

H5 唤起支付宝

window.location.href = 'alipays://platformapi/startapp?appId=20000067&url=地址'

vue 展示 pdf

https://www.npmjs.com/package/@vue-office/pdf#%E5%8A%9F%E8%83%BD%E7%89%B9%E8%89%B2

多行文字展示省略号

.words {
  width: 388px;
  height: 170px;
  word-wrap: anywhere; // 任意换行
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 控制省略号在第几行显示 */
  //max-height: 3.2em; /* 控制显示的高度 */
}

let ua = navigator.userAgent.toLowerCase(); // 这里将所有字母转小写

浏览器	ua展示的信息

safari浏览器                            	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.1.1 mobile/15e148 safari/604.1

微信浏览器-安卓	mozilla/5.0 (linux; android 10; bkl-al00 build/huaweibkl-al00; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/77.0.3865.120 mqqbrowser/6.2 tbs/045227 mobile safari/537.36 mmwebid/8185 micromessenger/7.0.17.1720(0x27001137) process/tools wechat/arm64 nettype/wifi language/zh_cn abi/arm64

微信浏览器-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 micromessenger/7.0.14(0x17000e29) nettype/wifi language/zh_cn

QQ浏览器-安卓	mozilla/5.0 (linux; u; android 10; zh-cn; bkl-al00 build/huaweibkl-al00) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/66.0.3359.126 mqqbrowser/10.6 mobile safari/537.36

QQ浏览器-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/604.3.5 (khtml, like gecko) version/13.0 mqqbrowser/10.5.3 mobile/15b87 safari/604.1 qbwebviewua/2 qbwebviewtype/1 wktype/1

UC浏览器-安卓	mozilla/5.0 (linux; u; android 9; zh-cn; v1816a build/pkq1.180819.001) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/78.0.3904.108 ucbrowser/13.0.4.1084 mobile safari/537.36

UC浏览器-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x; zh-cn) applewebkit/537.51.1 (khtml, like gecko) mobile/17f80 ucbrowser/13.0.4.1340 mobile aliapp(tunionsdk/0.1.20.3)

vivo自带浏览器	mozilla/5.0 (linux; android 9; v1816a build/pkq1.180819.001; wv) applewebkit/537.36 (khtml, like gecko) chrome/62.0.3202.84 mobile safari/537.36 vivobrowser/8.1.14.2

百度-安卓	mozilla/5.0 (linux; android 9; v1816a build/pkq1.180819.001; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/76.0.3809.89 mobile safari/537.36 t7/11.23 sp-engine/2.17.0 flyflow/4.18.0.31 lite baiduboxapp/4.18.0.31 (baidu; p1 9)

百度-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 sp-engine/2.21.0 main%2f1.0 baiduboxapp/11.25.0.16 (baidu; p2 13.5.1) nabar/1.0

猎豹-安卓	mozilla/5.0 (linux; u; android 9; zh-cn; v1816a build/pkq1.180819.001) applewebkit/535.19 (khtml, like gecko) version/4.0 liebaofast/5.21.0 mobile safari/535.19

谷歌-安卓	mozilla/5.0 (linux; android 9; v1816a) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.110 mobile safari/537.36

谷歌-ios	mozilla/5.0 (iphone; cpu iphone os 13_5 like mac os x) applewebkit/605.1.15 (khtml, like gecko) crios/84.0.4147.71 mobile/15e148 safari/604.1

夸克-安卓	mozilla/5.0 (linux; u; android 9; zh-cn; v1816a build/pkq1.180819.001) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/57.0.2987.108 quark/4.2.1.138 mobile safari/537.36

夸克-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x; zh-cn) applewebkit/601.1.46 (khtml, like gecko) mobile/17f80 quark/4.2.2.1053 mobile

欧朋-安卓	mozilla/5.0 (linux; u; android 9; zh-cn; v1816a build/pkq1.180819.001) applewebkit/537.36 (khtml, like gecko) version/4.0 opr/12.45.0.1 mobile safari/537.36

欧朋-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148

360-安卓	mozilla/5.0 (linux; android 9; v1816a build/pkq1.180819.001; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/73.0.3683.121 mobile safari/537.36

360-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148

搜狗-ios	mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 sogoumobilebrowser/5.21.8

字体描边

text-shadow:
        #000 1px 0 0,
        #000 0 1px 0,
        #000 -1px 0 0,
        #000 0 -1px 0;

vue v-bind css 绑定 js 变量

<div><div>

const xx = ref('100px')

div {
    width:v-bind("xx")
}

删除富文本字符串中的 html 元素

    const wipeoffHtmlDom = (item) => {  
        let as = item.replace(/<[^>]+>/g, "")  
        return as  
    }

    // 滚动穿透
    watch(()=>store.state.noticePop.notice,value => {
        document.body.style.overflow = value ? 'hidden' : 'scroll';
    })

日常笔记

Vue2 通过 vue-router 从一个页面跳转至另一个页面时

隐藏元素滚动条(兼容)

文字溢出省略号

禁止移动端 input 获取焦点时，调用软键盘

css 文本垂直

一键复制

实用的 css 颜色处理

Vue3 浏览器适配 postcss 配置

css 禁止图片拖动

vue3 路由传递 params 参数

vue 页面滚动到指定元素的位置

浏览器的标签页被隐藏或展示时触发的事件

监控页面触底

页面触底的另一种思路

使用伪元素修改滚动条样式

文字外边框

文字竖向展示

移动端 H5 遮盖页面滑动会看到下边界

safari 定时器中的音频

数组去重

从url获取参数并转为对象

检查对象是否为空

生成随机十六进制

检查当前选项卡是否在后台

检测元素是否处于焦点

文字复制到剪贴板(支持图片)

检测用户浏览器内核

base64 加密解密

监听 @keyframes 动画

css 图片穿透

安卓或 ios 拨号功能

css animation 实现节流

html 原生 progress

input 下拉表单清除默认样式(小三角)

按照对象数组中 item 的某个字段排序

清除 type="number" 小三角

一键复制二维码 只支持 https 和 localhost(127.0.0.0)

vue 获取 DOM 行内样式

vue 初始化对象数据

禁止鼠标滚轮控制 number 类型的 input

获取当前 30 天开始和结束的日期格式

清除内部滚动条

判断数组中是否含某个对象

点击任意地方关闭

css 中的伪元素 content 配置 i18n

npm、vite、vue3

dom 非透明区域外阴影，支持不规则图形

JS 定义行内样式变量

requestAnimationFrame设置刷新帧率随浏览器画面刷新而刷新

修改 input 的 placeholder 字体样式

处理 swiper 用户操作后停止自动轮播，disableOnInteraction="false" 失效问题

css 滤镜用于制造毛玻璃效果

css 圆角边框渐变色、

H5 唤起支付宝

vue 展示 pdf

多行文字展示省略号

字体描边

vue v-bind css 绑定 js 变量

删除富文本字符串中的 html 元素

一键复制二维码只支持 https 和 localhost(127.0.0.0)