vue
优秀的土豆丝
一个不想敲代码的程序猿
展开
-
vue3 + ts 实现商品放大镜效果
vue3 + ts 实现商品放大镜效果原创 2022-06-14 21:05:46 · 426 阅读 · 0 评论 -
vue3 实现多组商品横向滚动(多组商品轮播)
vue3 实现多组商品横向滚动(多组商品轮播)原创 2022-06-09 17:35:12 · 3225 阅读 · 0 评论 -
vue3 ts 实现数据懒加载
vue3 ts 实现数据懒加载原创 2022-06-08 22:44:34 · 766 阅读 · 0 评论 -
vue3 ts 自定义指令实现图片懒加载
vue3 ts 自定义指令实现图片懒加载原创 2022-06-08 17:11:42 · 482 阅读 · 0 评论 -
vue + ts 如何封装轮播图组件
vue + ts 如何封装轮播图组件2. 注册成全局组件3. 使用原创 2022-06-07 16:26:51 · 526 阅读 · 0 评论 -
vue3骨架屏效果
vue 骨架屏效果原创 2022-06-06 17:00:20 · 1108 阅读 · 0 评论 -
vue 滚动 吸顶效果
vue吸顶效果原创 2022-06-03 00:46:20 · 829 阅读 · 0 评论 -
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 · 1961 阅读 · 0 评论 -
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 · 297 阅读 · 0 评论 -
vue实现进度条倒计时(vant-ui)
van-count-down + van-progress 实现进度条倒计时效果<!-- van-count-down: time 属性表示倒计时总时长,单位为毫秒 --><!-- van-progress 使用 percentage 属性来设置当前进度百分比 --><van-count-down use-slot ref="countDown" :time="time * 1000" @change="onTimeChange"> <van-progre原创 2020-10-10 10:14:27 · 3258 阅读 · 0 评论 -
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 · 831 阅读 · 1 评论 -
Vue实现 侧边固定定位图标 滑动隐藏
移动端页面,有时候会出现一些固定定位在底部图标,比如领取购物券 联系客服等。这时候如果滑动页面,图标透明度变低,同时移动到屏幕侧边进行隐藏,效果如下。监听滑动事件,每次滑动时,触发动画。添加定时器,1s后显示该图标<template> <div class="concat-common" :class="[ !transition ? 'fixed-transition' : '']"> <div class="coupon" @click="getCoup原创 2020-08-12 10:06:29 · 1725 阅读 · 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 · 164 阅读 · 0 评论 -
vue 商品列表滑入视频时自动播放
<!-- 由于商品到色,痛一块商品id存在相同情况 这里需要商品id和颜色一起判断 --> <!-- 每个商品传入自定义属性 id和颜色,给视频的元素传入 'hasVideo' 类名 --> <div class="good_list_item slide1" ref="goodListItem" :class="{hasVideo: good.showType == 'video'}" :原创 2020-07-03 10:35:06 · 1039 阅读 · 0 评论 -
vue keep-alive缓存下 video src改变 页面不刷新
video 的 src值改变了,但是页面视图视频未更新解决方案:video的src不要绑定在source标签的src上,而是直接绑定video标签的src属性上原创 2020-06-03 18:03:15 · 723 阅读 · 2 评论 -
vueCli 查看打包后文件的大小占比
在package.json文件中 在 build 后面加上一个 --report "build": "vue-cli-service build --report"我们打开文件之后 就会看到一个可视化的 文件占比原创 2020-04-28 15:27:22 · 8401 阅读 · 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 · 381 阅读 · 0 评论 -
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 · 848 阅读 · 0 评论 -
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 · 2299 阅读 · 0 评论 -
vue 自定义组件使用v-model(组件通讯)
父组件:子组件:给组件使用v-model等价于 1. 给组件传递了一个value属性 2. 给组件绑定了input事件原创 2020-02-16 16:49:49 · 150 阅读 · 0 评论 -
vueC-cli3 测试环境打包js文件配置
### vue-cli3 在打包测试环境时js代码不在js文件下的问题, 先说一下我环境的配置###### 分别打包三个环境代码 dev test prod###### 结果在打包测试环境代码时,js被打包至与html同级目录下,虽然这不影响生产环境的打包目录,但是想要打包后的js文件都是存放在js文件目录下,该如何做呢???######只要在vue.config...原创 2020-01-13 10:50:09 · 1386 阅读 · 0 评论 -
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 · 4157 阅读 · 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 · 1343 阅读 · 0 评论 -
vue+axios 前端实现登录拦截(路由拦截、http拦截)
路由拦截 + 请求拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Home }, { path: '...原创 2019-11-04 10:37:26 · 491 阅读 · 0 评论 -
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 · 2287 阅读 · 0 评论 -
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 · 287 阅读 · 0 评论 -
vue+axios 请求封装
import axios from 'axios'import router from '../router/index'import { Message } from 'element-ui'import { showFullScreenL...原创 2020-01-13 13:58:29 · 174 阅读 · 0 评论 -
Vue项目登录成功后返回到原操作页面
把用户原操作页面的地址作为重定向路由的参数//使用钩子函数对路由进行权限跳转router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (!token && to.path !== '/login') { next({ path: ...原创 2019-10-30 13:13:22 · 4408 阅读 · 3 评论 -
vue.js element message提示 es6模板字符串 提示语点击事件
let info = this.isAsync == true ? '正在导入,请到上传下载--结果页面查看导入结果' : '上传成功' let message = this.$message({ dangerouslyUseHTMLString: true, message: `<span>${info}</span>` ...原创 2019-10-29 10:04:54 · 2455 阅读 · 2 评论 -
vue如何修改计算属性得值
计算属性默认只有 getter ,必须在计算属性里加上setter,否则修改计算属性的值就会报错computed: { uploadImages() { get: function () { return this.$store.getters.refundImages }, set: function (newValue) { this.$s...原创 2019-04-19 16:37:45 · 14320 阅读 · 2 评论 -
vue项目中keep-alive缓存,从详情页返回列表时保存上一步的信息
1、最近用vue做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。2、从其他菜单进去,不需要缓存,要保持页面的初始状态。基于上面两种情况,我打算用vue中的keep-alive来缓存页面。问题的解决方法列表项目. 用vue的内置组件keep-alive来缓存列表页面,再路由出口渲染组件时配置:<keep-alive> <ro...转载 2019-04-18 10:27:36 · 4888 阅读 · 1 评论 -
vue中的组件通讯
组件通讯因为组件是一个独立的个体,组件无法使用到外部的数据但是在真实开发中,多个组件之间是需要相互使用彼此的数据的,因此需要使用组件通讯的技术,让组件之间能够相互传值。组件通讯分为三类父组件传递值给子组件子组件传递值给父组件非父子组件之间的传值组件通讯-父传子定义两个组件Vue.component("parent", { template: ` &lt...原创 2019-04-18 10:29:46 · 126 阅读 · 0 评论 -
axios 中文文档 翻译
正文基于Promise的http库,适用于浏览器和node.js。原文点击查看原文特色浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请求和返回(数据) 取消请求 自动转化json数据 客户端支持抵御XSRF(跨站请求伪造)浏览器支持 ...转载 2019-04-18 10:21:53 · 396 阅读 · 0 评论 -
vue中Axios的封装和API接口的管理
一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios...转载 2019-04-18 10:21:35 · 4718 阅读 · 1 评论