vue
只爱吃菜不吃饭
谢谢你这么厉害还关注我~
展开
-
在vue项目中单独引入某一elementui组件
1.安装element-ui库npm i element-ui -S2.在启动文件中配置import{DatePicker}from'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(DatePicker);3.在页面中使用<el-date-pickerv-model="value1"type="daterange"...原创 2021-04-25 10:12:42 · 5109 阅读 · 0 评论 -
使用swiper实现视频和图片混合轮播
完成需求:轮播页面自动滚动循环播放素材,在视频页面自动播放视频至视频结束后继续轮播下一个素材,手动切换时视频页暂停播放,切换回来后恢复播放。1.安装swiper相关插件2.在轮播页面引入import{Swiper,SwiperSlide}from"vue-awesome-swiper";import"swiper/swiper-bundle.css";importSwiper2,{ Autoplay}from"swiper";Swiper2.use([Na...原创 2021-04-22 11:38:58 · 6835 阅读 · 6 评论 -
vue中监听用户操作,无响应状态返回首页
在根页面的最外层节点上添加点击事件: <div id="app" @click="clickApp" > <router-view /> </div>设置未响应时长data() { return { clickTime: new Date(),// 最新点击时间 responseTime: 300000, // 5分钟不响应自动跳转首页 timeout: null,// 点击后的定原创 2021-04-22 11:23:01 · 623 阅读 · 1 评论 -
uniapp中强制横屏、竖屏
plus.screen.lockOrientation('portrait-primary');竖屏plus.screen.lockOrientation('landscape-primary');横屏原创 2020-11-13 15:45:19 · 4861 阅读 · 0 评论 -
vue 优化小技巧 之 require.context()
1、require.context()回忆一下当我们引入组件时第一步 创建一个子组件第二步 import ... form ... 第三步components:{..} 第四步页面使用 <...></...>代码实现: 目录结构:components / context / subset页面效果以上一共五个子组件大量重复的代码<template> <div> ...转载 2020-07-28 15:44:59 · 578 阅读 · 0 评论 -
ant design vue表单中自定义检验规则,如手机号码
<a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" > <a-input v-de...原创 2019-10-17 11:28:04 · 6966 阅读 · 2 评论 -
vue中动态为元素添加类名
结构:<ul> <li v-for='(item,index) in menumap' :key='index' :ref='item.url' :class='{active:index==isActive}' @click='switchmenu(index)'> <router-link :to='item.url'>{{item....原创 2019-05-17 16:32:58 · 12756 阅读 · 1 评论 -
G2使用过程中的坑总结
1.图例自定义后内容很长,与图表重合了,可以调整图表的paddinglet chart = new G2.Chart({ container: options.ele, forceFit: true, height: options.height, padding: [ 10, 200, 10, 10 ] })chart.legend({ pos...原创 2019-05-27 09:43:33 · 4383 阅读 · 0 评论 -
Vue 组件间通信几种方式(完整版)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如pro...原创 2019-05-27 17:36:12 · 5859 阅读 · 3 评论 -
ant design vue中树形控件defaultExpandAll设置无效
页面步骤:1.设置a-tree标签2.默认的treeNodes值设置为空数组3.在mounted组件加载的时候给treeNodes的值赋值结果:设置defaultExpandAll无效,并不能展开所有节点原因:defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为,可以自行搜索受控组件/非受控组件的概念...原创 2019-06-24 16:12:24 · 20009 阅读 · 10 评论 -
vue中使用jsplumb基本教程
jsplumb中文教程地址:https://wdd.js.org/jsplumb-chinese-tutorial/#/需求效果展示:说明:在展示普通流程图的基础上,实现以下功能:在流程图中展示当前所在节点,并体现出其流转过程。上图中当前节点为分公司咨询组,流转过程为:派单->省公司虚拟专家组->分公司咨询组安装依赖包:npm i jsplumb在main.js中...原创 2019-09-26 11:43:47 · 21850 阅读 · 3 评论 -
webpack在打包中体积和速度上的一点优化
一、配置 resolve.modules1,优化原理(1)webpack的resolve.modules是用来配置模块库(即node_modules)所在的位置。当js里出现import 'vue'这样不是相对、也不是绝对路径的写法时,它便会到node_modules目录下去找。(2)在默认配置下,webpack会采用向上递归搜索的方式去寻找。但通常项目目录里只有...原创 2019-05-22 15:05:10 · 771 阅读 · 0 评论 -
vue+elementui下监听屏幕变化并处理对应样式
mounted () {window.addEventListener('resize', () => {if (document.body.clientWidth < 900) {this.tabposition = 'top'} else {this.tabposition = 'left'}})}补充:最好是将监听后对应的操作函数封装起来...原创 2019-04-25 16:07:10 · 3645 阅读 · 0 评论 -
webpack 用 webpack-parallel-uglify-plugin 加速打包报错
用 UglifyJsPlugin 可以正常打包,就是很慢new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true}),用 ParallelUglifyPlugin 加速打包之后new ParallelUglifyPlugin({ ...原创 2019-05-22 10:27:04 · 6842 阅读 · 2 评论 -
vue中关于子路由页面滚动或resize监听
首先介绍项目结构:我的项目结构是三部分,左侧菜单栏sider,顶部导航栏header,以及主体部分content,加一个小底部。主体部分根据菜单栏切换路由展示页面。其中sider和content部分使用了ele中的滚动条需求:监听content中的滚动事件,实现超过距离展示totop标识,点击可以滚动至顶部要点1:监听滚动事件一般滚动事件监听需要在挂载后mounted()中...原创 2019-05-17 09:42:15 · 1158 阅读 · 0 评论 -
vue中动态加载图片路径的方法
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他...原创 2019-05-16 13:55:14 · 4037 阅读 · 0 评论 -
vue中使用antv(蚂蚁)G2中宽度自适应问题
上图:结构采用栅格布局,左侧图表设置了宽度自适应(forceFit)。然而页面在刚开始刷新的时候,canvas超出了父元素的宽度。如果改变浏览器的大小,window.resize的时候才会触发forceFit: true这个属性,才会自适应屏幕的宽度,这时图表的大小是正常的。查找诸多解决办法后,经发现,最简单的方法如下Vue版:在mounted周期函数中,初始化图表之后,加入下...原创 2019-05-13 10:45:43 · 15511 阅读 · 7 评论 -
vue中插槽slot的简单用法
父组件中定义好使用的模板<template v-slot:extraPath> <span class='extra-path' v-if='active==0'> (填写转账信息)</span> <span class='extra-path' v-if='active==1'> (确认转账信息)<...原创 2019-05-06 17:07:27 · 4012 阅读 · 0 评论 -
vue项目中封装axios
首先,配置axios拦截器,在项目src目录下建立request.js:import axios from 'axios'import store from '@/store'import { message } from 'ant-design-vue';import { Toast } from 'ant-design-vue';import Vue from 'vue';i...原创 2019-04-29 15:42:10 · 691 阅读 · 0 评论 -
vue父子组件传值的方法
父组件中添加要给子组件的数据<aboutch :msg-father="text" trans-father="略略略" @sendiptVal='showChildMsg'></aboutch>text为父组件中data中的动态数据,msg-father与trans-father为传输的数据名子组件中引用需要的父组件数据 props: ['msgFath...原创 2019-04-29 14:00:40 · 1118 阅读 · 0 评论 -
vue中组件间(非父子组件)通信的两种方法:eventbus与vuex的使用
父子组件的通信请查看这篇博文此文主要介绍兄弟组件间的通信所有组件通信方式请查看这篇博文第一种:eventbus创建bus.jsexport default(Vue) => { const eventBus = new Vue() Vue.prototype.$bus = { $on (...param) { eventBus.$on(...p...原创 2019-04-28 11:00:33 · 3747 阅读 · 0 评论 -
ant design vue导航菜单与路由配置
此功能包含:1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由<a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inl...原创 2019-04-28 10:31:03 · 26802 阅读 · 5 评论 -
vue项目中实现局部组件刷新
vue中局部组件刷新,可以使用provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的<template><router-view v-if="isRouterAlive"></router-view></template><script>export default { ...原创 2019-04-25 16:11:46 · 12024 阅读 · 13 评论 -
vue项目开启Gzip压缩和性能优化
vue项目开启gzip自拍压缩和部署 nginx开启gzip优化性能第一步,在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin第二步,运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression ...原创 2019-05-20 16:49:32 · 3079 阅读 · 4 评论