优秀的土豆丝-CSDN博客

方法一新增一个script标签，在这个script标签定义一个name属性（注意多个script使用时 lang的值要一致）<script lang="ts">export default { name: 'Layout'}</script><script setup lang="ts"></script><template> <div>layout</div></template>

2022-05-29 22:54:08 6900 11

① vite.config.ts配置import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const path = require('path')// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dir

2022-05-28 23:36:25 2356

原创 vue 动态绑定hover取值

html中绑定style:style="menuStyle"<el-menu-item class="super_menu_item" :style="menuStyle" :index="`/${item.index}`" :key="item.index"> <i :style="{'color':theme.textColor}" :class="item.icon"></i> <span slot="title">{{ item.title

2021-12-27 17:45:14 1862

原创最近的面试总结

1.flex布局实现骰子六面2. 如何判断一个对象obj是空对象1. JSON.stringify(obj) === '{}'2. Object.keys(obj).length === 03. Object.values(obj).length === 03. 深拷贝和浅拷贝4. JSON.parse(JSON.stringify(obj)的缺点5. 如何检测数据类型（引用数据类型）6. instanceof 和 constructor缺点7. let 全局定义是什么？8. ca

2021-09-14 16:22:03 139

原创 Vue.use统一全局注册组件

组件如果在所有页面都要用, 那么就要全局注册组件。如果有很多个组件, 都要全局注册, 那么又会在main.js 中写很多内容import PageTools from '@/components/PageTools'Vue.component('PageTools', PageTools)在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：提供统一注册的入口文件 src/componets/index.js在同一目录下建立index.j

2021-06-04 14:32:56 274

原创 vue实现进度条倒计时（vant-ui）

van-count-down + van-progress 实现进度条倒计时效果<van-count-down use-slot ref="countDown" :time="time * 1000" @change="onTimeChange"> <van-progre

2020-10-10 10:14:27 3090

原创什么防抖与节流，它们的区别是什么？应用什么场景如何实现

函数防抖（debounce）和函数节流（throttle）都是为了限制函数的执行频次，来优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象（例如input，keyup，keydown，scroll，resize，mousemove等）函数防抖：触发完事件 n 秒内不再触发，才执行；如果n秒内事件再次被触发，则重新计算时间应用场景：用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源window的res

2020-08-28 10:56:57 958

原创 Vue自定义Loading组件

在写组件之前我们要先弄懂install、vue.use、extend、$mount()、mixin的作用install：实际上就是注册组件,触发 install 方法vue.use：触发 install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的参数对象(可选)extend：创建构造器，vue 组件中有些需要将一些元素挂载到元素上,这个时候 extend 就起到作用了，是构造一个组件的语法器$mount：创建的构造器可以通过$mount挂载到元素上,挂载到元素上，opti.

2020-08-27 16:27:49 814 1

原创 Vue实现侧边固定定位图标滑动隐藏

移动端页面，有时候会出现一些固定定位在底部图标，比如领取购物券联系客服等。这时候如果滑动页面，图标透明度变低，同时移动到屏幕侧边进行隐藏，效果如下。监听滑动事件，每次滑动时，触发动画。添加定时器，1s后显示该图标<template> <div class="concat-common" :class="[ !transition ? 'fixed-transition' : '']"> <div class="coupon" @click="getCoup

2020-08-12 10:06:29 1606 2

原创记录一次闭包解决的问题

场景：vue-awesome-swiper的点击事件中既要访问swiper的实例也要访问vue的实例（此时this只能访问到swiper的是对象）解决方案: 利用闭包把vue的实例this当做参数传入点击事件参数swiperOptionPicLunbo: { pagination: { el: '.swiper-pagination', clickable: true }, touchMoveStopPropagation: true, loop: true,

2020-08-05 16:49:00 121

原创 vue 商品列表滑入视频时自动播放

<div class="good_list_item slide1" ref="goodListItem" :class="{hasVideo: good.showType == 'video'}" :

2020-07-03 10:35:06 1021

原创 vue keep-alive缓存下 video src改变页面不刷新

video 的 src值改变了，但是页面视图视频未更新解决方案：video的src不要绑定在source标签的src上，而是直接绑定video标签的src属性上

2020-06-03 18:03:15 677 2

原创 vueCli 查看打包后文件的大小占比

在package.json文件中在 build 后面加上一个 --report "build": "vue-cli-service build --report"我们打开文件之后就会看到一个可视化的文件占比

2020-04-28 15:27:22 8149 2

原创 Vue单页面首屏加载优化

Vue-Router路由懒加载require方式{ path: '/goods', name: 'goods', component: resolve => require(['@/components/page/goods/Goods.vue'], resolve), meta: { title: '商品管理' }}ES...

2020-04-28 14:49:42 362

原创 vue 如何在父组件中在接收子组件参数的同时添加自定义参数

方法一：子组件传出单个参数时// 子组件this.$emit('fn',param)// 父组件@fn='fn($event,param1,param2)'方法二：子组件传出多个参数时// 子组件this.$emit('fn',param1,param2,param3)// 父组件@fn='fn(arguments,param)'...

2020-04-22 14:20:08 818

原创正则常用方法test,match,search,replace

1. test()方法使用方法： Reg.test(str) 找到返回true，否则false 找到第一个后就会停止向后找let str = 'abcdefg'let reg = /b/console.log(Reg.test(str)) =>true2. match()方法str.match(Reg) 不匹配返回null ，匹配到就返回对应的数组let str ...

2020-03-17 15:43:33 970

原创 vue 物流时间轴

son组件<template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</span> &...

2020-03-12 17:31:13 2194

原创前端攻城狮面试题总结

1. px、rem 和 em的区别?- em是相对于父元素的font-size的大小，一单位的em的值根据父元素font-size的改变而改变- rem是相对于根元素( html )的font-size的大小盒子模型所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。盒子模型是由内容、边框、内边距间隙（padding）、外边距（margin）组成。- 标准盒模型:width =...

2020-03-11 17:53:30 4909

原创 js如何实现一个深拷贝和浅拷贝

基本数据类型和引用数据类型的区别基本数据类型 Number、String、Boolean、Null、 Undefined、Symbol（ES6）特点: 数据存放在栈内存中，复制的时候是值传递引用数据类型Object(Array，Date，RegExp，Function)特点：存储的是该对象在栈中引用深拷贝和浅拷贝的区别深拷贝深拷贝复制变量值，对于引用数据，则递归至基本类...

2020-03-09 16:42:54 234

原创小程序分享（好友和海报）功能

点击分享按钮展示分享的弹框内容 <view class="share-modal" wx:if="{{isShare}}" catchtouchmove="true"> <view class='close_mask' bindtap="closeMask">×</view> <view wx:if=...

2020-03-02 11:14:30 791

原创 vue 自定义组件使用v-model（组件通讯）

父组件：子组件：给组件使用v-model等价于 1. 给组件传递了一个value属性 2. 给组件绑定了input事件

2020-02-16 16:49:49 135

原创 vue+axios 请求封装

import axios from 'axios'import router from '../router/index'import { Message } from 'element-ui'import { showFullScreenL...

2020-01-13 13:58:29 169

原创 vueC-cli3 测试环境打包js文件配置

### vue-cli3 在打包测试环境时js代码不在js文件下的问题，先说一下我环境的配置###### 分别打包三个环境代码 dev test prod###### 结果在打包测试环境代码时，js被打包至与html同级目录下，虽然这不影响生产环境的打包目录，但是想要打包后的js文件都是存放在js文件目录下，该如何做呢？？？######只要在vue.config...

2020-01-13 10:50:09 1356

原创 keep-alive上加v-if导致缓存失效

是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们用法 <keep-alive> 正确用法 <router-view v-if="$route.meta.keepAlive"></router-view> </ke...

2019-12-24 17:42:48 3972 1

原创 vue excel下载（记一次post请求下载乱码问题）

参数必须加responseType: ‘blob’，不然会乱码axios.get(url, { params: { ...params }, responseType: 'blob' }) .then(res => { if (!res) return let url...

2019-12-19 15:12:09 1312

原创 vue+axios 前端实现登录拦截（路由拦截、http拦截）

路由拦截 + 请求拦截登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Home }, { path: '...

2019-11-04 10:37:26 454

原创 vue+elementUI+axios实现的全局loading加载动画(部分接口不要loading)

import { Loading } from 'element-ui'let loadingconst startLoading = function() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' })}const ...

2019-11-04 09:46:39 2247

原创 vue 全局过滤器 filter的使用

1. src目录下新建filters目录，filters目录里新建index.js文件（写过滤方法）import moment from 'moment/moment'const toFixed = (value = 0) => { let val = Math.round(value * 100) / 100 return val.toFixed(2)}const date...

2019-11-01 16:08:24 255

空空如也

空空如也