09 2022 档案
摘要：vue 添加监听事件addEventListener // vue 添加监听事件，addEventListener第二个参数要绑在this上，即需要在methods中声明，否则销毁的时候会报错 // 在mounted中监听，在beforeDestroy中销毁，绑定的事件在methods中声明 mou
阅读全文
摘要：需求：一个自己写的折叠面板，默认展开一些，接口获取数据后拿到状态，要收起一些，那么刚进页面就会发现有收起折叠面板的动作，需要优化 解决：这里采用在最外层div加一个v-if,值为false，当判断逻辑执行完毕后再给v-if赋值为true，此时首次看到的页面即为想要的页面 <template> <di
阅读全文
摘要：vue2是分模块写的，直接使用就行 // 和data平级 watch: { // 监听简短数据类型 watchValue(newValue, oldValue){ }, // 监听对象属性 'obj.proto'(newValue, oldValue){ }, // handler写法 watchV
阅读全文
摘要：vue2转vite判断当前运行环境 vue2判断当前运行环境使用的是process.env.NODE_ENV 'development'，而当转为vite项目时，process会报错，这里环境的判断应该改为import.meta.env.VITE_USER_NODE_ENV 'development
阅读全文
摘要：vite中定义全局基础样式 import path from 'path' css: { preprocessorOptions: { less: { javascriptEnabled: true, additionalData: `@import "${path.resolve(__dirnam
阅读全文
摘要：vite打包assets资源找不到. vite打包放到服务器时，assets里面的资源找不到，可能是由于assets资源没有放在服务器根目录下，而是其他目录 解决：修改 vite.config.js 中的base，默认没有base配置，默认值是/，也就是直接根目录下，添加base: './'，一级，
阅读全文
摘要：在eslint中写props，直接简写会有语法错误提示，要想去掉，可以加忽略检查的注释，但最好还是改为eslint认可的规范写法 加注释：在上一行加上// eslint-disable-next-line，或者在后面加上// eslint-disable-line，这个编辑器应该会有提示，点击提示修
阅读全文
摘要：通过不同的数据，计算属性返回不同的结果，就需要给计算属性传参，通过返回一个带参数的箭头函数，可以实现计算属性传参 computed: { // 计算属性 computedData() { // 传入参数 return (params) => { // ... } } } computed写法： vu
阅读全文
摘要：vue语法实现图片懒加载 一般网上说的懒加载都是说给图片src指定一张小的空白图片，真实url放在自定义的属性中，在图片进入视口后替换src在加载图片 但在实际开发中，有时候会遇到图片不多，一屏放得下，但是由于图片有点大导致图片像是一条一条加载，在这里也适用于懒加载 懒加载肯定需要js动态更新src
阅读全文
摘要：<router-link to="/home">home</router-link> <router-link :to="{ name: 'user', params: { userId: '123' }}">user</router-link> <router-link :to="{ path:
阅读全文
摘要：在父组件中监听子组件页面是否加载完毕 // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } // Parent.vue <Child @hook:mounted=
阅读全文
摘要：示例<component v-bind:is="currentComponent"></component> currentComponent 是要展示的组件，根据具体代码逻辑，currentComponent赋值为不同的组件 在切换时保持组件状态，可以用 <keep-alive> <compone
阅读全文
摘要：// nvm 在切换node版本时使用管理员运行cmd nvm -v // 查看 nvm 的版本 nvm ls available // 查看 node版本 nvm install 12.8.3 // 安装node，可以输入自己需要的版本号 nvm ls // 查看电脑上面安装的 node 列表 n
阅读全文
摘要：具体可以参照菜鸟：https://www.runoob.com/markdown/md-tutorial.html 链接：[参考：https://xxx](https://xxx)
阅读全文
摘要：git config --global user.name "name" // 全局配置用户名，--global可以放在最后 git config --global user.email "email" // 全局配置邮箱，--global可以放在最后 git remote add origin 仓
阅读全文
摘要：ESLint Definition for rule 'vue/script-setup-uses-vars' was not found 在rules中配置：'vue/script-setup-uses-vars': 'off'
阅读全文
摘要：import axios from 'axios' import qs from 'qs' axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8' // 'Content-
阅读全文
摘要：axios 调用raw类型的参数接口 content-Type要设置成application/json axios.defaults.headers['content-Type'] = 'application/json' 参数直接object对象传进去，不需要qs.stringfy() expor
阅读全文
摘要：生成二维码，扫码跳转网址 import QRCode from 'qrcode' // <canvas ref="myCanvas" style="width: 160px; height: 160px;"/> this.$nextTick(() => { // jumpUrl为跳转的网址，myCa
阅读全文
摘要：JS getClientRects 和 getBoundingClientRect() getClientRects获取元素占据页面的所有矩形区域 getBoundingClientRect该方法用于计算获取的dom元素各边与上、左容器边框之间的距离，返回一个对象{ left, top, right
阅读全文
摘要：/** * input框限制小数 * @param {*} val * @returns */ export const inputLimitFloat = function(val) { val = val.toString() // 截取可能为负号 // const t = val.charAt
阅读全文
摘要：Date.prototype.format = function (format) { var o = { 'M+': this.getMonth() + 1, // month 'd+': this.getDate(), // day 'h+': this.getHours(), // hour
阅读全文
摘要：计算滚动条是否滑倒底部 document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight 滚动的高度加上窗口的高度 可能会碰到某个手机
阅读全文
摘要：常见正则 手机号 /^1\d{10}$|^[2-9]\d{6,7}$|^[48]00\d{7}$|^[19]\d{4}$|^1\d{2}$/; 邮箱 /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0
阅读全文
摘要：less写法示例 <div class="parentDiv"> <div class="childDiv">childDiv1</div> <div class="childDiv">childDiv2</div> <div class="childDiv">childDiv3</div> <di
阅读全文
摘要：文字图片flex布局一行居中后要微调文字高度 采用设置padding或者margin的方式不可行，会往外扩 可以设置文字的line-height来调整文字和图片的相对高度
阅读全文
摘要：使用before和after伪类实现空心箭头 // 主要利用before和after的边框实心箭头，通过绝对定位覆盖完成看上去像空心箭头的设计 .dom { display: inline-block; position: relative; &::before, &::after { conten
阅读全文
摘要：这里的解决方法是安卓监听窗口高度，iOS监听文本块焦点，以实现隐藏与显示底部固定定位元素 // 以下为vue2的写法 // originHeight为窗口高度，当键盘弹出时，android手机会改变，监听变化控制下方固定按钮是否显示 // ios手机input框聚焦键盘弹出，键盘收起时，input框
阅读全文
摘要：需求：代码逻辑需要axios调接口返回后根据具体值再做判断 一个流程需要调多个接口判断执行，axios不提供同步执行 // await后面的Promise可以改为需要调用的接口，通过接口的返回值赋值给resolveValue，最后返回Promise包裹的resolveValue // 条件1 asy
阅读全文
摘要：在使用的组件库中没有折叠面板或者不好用时，可以采用以下方法实现自定义样式 第二个JS为一个vue组件，直接用该组件包裹可能显示和隐藏的内容，第一个JS为简单的使用介绍，被包裹的内容在judge控制隐藏显示时会自动展开收起 import collapseC from 'xxx路径' changeJud
阅读全文
摘要：用对象控制父与子的展开折叠 const isShowCard = { card1: { value: true, // 父 subCard1: true, // 子1 subCard2: true // 子2 }, card2: { value: true, // 父 subCard1: true,
阅读全文
摘要：计算文本要占用多少行 // 使用document.createRange()计算文本行数，实际length会比行数多一 const range = document.createRange() range.selectNode(document.getElementById('domRef')) /
阅读全文
摘要：添加左划删除手势 // 添加左划手势，通过添加swipeleft类实现 addSwipeLeft() { // 侧滑显示删除按钮 var expansion = null // 是否存在展开的list var container = document.getElementById('shopCard
阅读全文
摘要：通过添加类名实现旋转180度 .beginCSS{ transform: rotate(0deg); transition: transform ease 0.5s; } .endCSS{ transform: rotate(-180deg); transition: transform ease
阅读全文
摘要：抛出小球加到地方对应元素晃动(加入购物车动画) /* * 添加到购物车动画 脚本，涉及到键盘弹出时，动画需要延迟100ms执行，以保证键盘已经弹回去，页面元素位置不变 * */ /** * * 动画轨迹控制 * @param addBtnDom 增加按钮的dom元素或者选择器 * @param sh
阅读全文
摘要：一行大小不一样的文字上下居中对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
阅读全文
