随笔分类 - vue
vue相关内容
摘要：使用image-conversion实现图片压缩到指定大小 // 导入 import * as imageConversion from 'image-conversion' /** * 压缩小图到100kb */ compressImg(file) { console.log('file: ',
阅读全文
摘要：vue 打开新的Tab页 const router = this.$router.resolve({ path: '/path' }) window.open(router.href, '_blank') resolve中的对象参数和push一样，也可以有name、query、params
阅读全文
摘要：- 使用已有的轮子简单实现H5左右滑动手势 1. 安装`vue2-touch-events` `npm install vue2-touch-events` 2. 在`main.js`中引入 ```js // main.js import Vue2TouchEvents from 'vue2-tou
阅读全文
摘要：报错： EISDIR: illegal operation on a directory, read Internal server error: EISDIR: illegal operation on a directory, read 原因：引入子组件时，子组件是xxx/文件夹名/index.
阅读全文
摘要：父组件使用v-model绑定 child.vue export default { props: { value: { type: String, default: '' }, }, model: { prop: 'value', event: 'change' } methods: { // va
阅读全文
摘要：vue-router点击相同的路由链接会报错NavigationDuplicated { "_name": "NavigationDuplicated", "name": "NavigationDuplicated", "message": "Navigating to current locati
阅读全文
摘要：vue使用window.addEventListener('scroll', this.scroll)监听滚动事件不生效 window.addEventListener('scroll', this.scroll) 写在mounted里面 html,body的高度别限制, 如height: 100%
阅读全文
摘要：const router = this.$router.resolve({ path: '/path' }) window.open(router.href, '_blank')
阅读全文
摘要：通过mixins混入重写组件 <script> import { Input } from '某UI库' export default { name: 'Home', mixins: [Input], // 通过mixins混日，重写组件库的组件 data() { return { // 同名数据会
阅读全文
摘要：// vue2 computed: { fullName() { return this.firstName + this.lastName; } } // 传参 computed: { fullName() { return (params) => { } } } // vue3 const ne
阅读全文
摘要：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:
阅读全文
