vue
缤芬治
这个作者很懒,什么都没留下…
展开
-
配置全局路由,动态获取面包屑导航
在APP.vue 中template中<!-- 面包屑 --> <el-breadcrumb v-if="showBread" class="bread-container"> <template slot="separator"> <el-icon name="right" :size="12"></el-icon> </template> <!-- @click.native=原创 2021-08-17 18:40:30 · 978 阅读 · 0 评论 -
Vue中使用防抖函数详解
什么是函数的防抖?什么场景下使用防抖函数?高频率触发一个事件,比如点击事件,点击以后新建一条消息或是一个任务,每次点击都会调用后端接口,那么就会造成一些没必要的请求,和开销,那么用户在不断点击的过程中让前面的点击都不会去发请求,只有最后一次才去发请求,这样,就能防止用户恶意的去做一些操作,造成不必要的网络浪费;在Vue中如何使用防抖呢?首先准备一个防抖的函数,在utils文件夹下新建一个tool.js文件,所有的工具函数都放在里面export const debounce = function (f原创 2021-08-12 15:45:54 · 1702 阅读 · 0 评论 -
vue-router配合element UI 生成动态的面包屑实现动态导航
将每个页面的面包屑导航放在路由元信息的meta中let routes = [//A页面的路由规则 { path:"/A", component: A, name:"A", meta: { list:[ {name:"A"} ] }sh }, //B页面的路由规则 { path: '/ceshi/:id', component: B, name:"B", before原创 2021-08-11 11:35:01 · 619 阅读 · 0 评论 -
vue插件发布到npm上
在项目的根目录创建plugins文件夹,里面放各种组件和入口文件index.js;在Vue组件中一定要提供name属性;在index.js 中/* eslint-disable *//** * 动态引入文件 * 参数1:引入文件的路径 * 参数2:是否查找子文件 * 参数3:匹配以.vue结尾的文件 */const requireComponent = require.context('./',true,/\.vue$/);const install = function(Vue)原创 2021-06-19 16:11:17 · 77 阅读 · 0 评论 -
Vue slot 的使用
插槽的使用 - 作用域插槽作用域插槽的概念和使用比较难于理解,通过查看多方资料,做了以下的总结:描述:作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name=原创 2021-03-14 23:02:24 · 506 阅读 · 0 评论 -
axios取消请求源码
function CancelToken(executor) { if (typeof executor !== 'function') { throw new TypeError('executor must be a function.'); } var resolvePromise; //将promise放在CancelToken的实例上(也就是可以通过 config.cancelToken.promise访问到这个promise的实例) this.promise =原创 2021-02-02 12:08:11 · 143 阅读 · 0 评论 -
记录一个有关修改引用类型的数据引起其他数据改变的bug
有一个场景,现在有一个公共的子组件,这个子组件在很多地方都被用到了,现在有个问题,就是从父组件传递过来的数据是一个对象,如下代码所示,因为这个数据是从后台获取的,现在想要把含有value:0的数据过滤掉,于是我开始了下面的写bug之旅。{name:"",colors:["red","black"],data:[{name:"wer",value:0},{name:"wer",value:1}]}子组件用props接受 props: { //数据 pieObject: {原创 2021-02-01 22:41:15 · 157 阅读 · 0 评论 -
vue-awsome-swipe 带缩略图
安装引入import { swiper, swiperSlide} from "vue-awesome-swiper";import "swiper/dist/css/swiper.css";HTML<swiper ref="mySwiper" :options="swiperOptions" class="gallery-top" v-if="picturesMiddleList.length > 1"> <swiper-slide v-for=原创 2020-11-26 17:04:15 · 632 阅读 · 0 评论