vue
荣亦
今朝有酒今朝醉
展开
-
2021-08-17
【vue Draggable(拖拽)插件在火狐浏览器的坑】**vue Draggable 在Firefox拖拽时 会打开新的浏览器窗口 进行搜索当前拖拽的组件解决方案:初始化阻止Firefox的默认拖拽搜索行为created() { document.body.ondrop = function(event) { event.preventDefault(); event.stopPropagation(); }; },...转载 2021-08-17 16:38:59 · 232 阅读 · 0 评论 -
基于vue的树形结构
基于vue的树形结构封装主要功能:添加同级、添加子级、拖拽、双击名称进行修改依赖:vue、element-ui、sassgit地址:https://github.com/rongyanping/vue-tree封装 MyTree.vue<template> <div class="my_tree"> <div class="broth...原创 2019-07-12 16:40:04 · 2016 阅读 · 0 评论 -
vue中v-model详解
input中使用// v-model 是一个语法糖<input v-model="something">// 上面的v-model等同于下面<input v-bind:value="something" v-on:input="something = $event.target.value">在组件中使用v-model时一个组件上的 v-model ...原创 2019-04-01 11:55:20 · 2905 阅读 · 0 评论 -
vue事件触发(emit)及监听(on)
每个 Vue 实例都实现了事件接口:使用 $on(eventName,callback) 监听事件使用 $emit(eventName,[…args]) 触发事件$emit 和 $on 必须都在实例上进行触发和监听。// on监听emit触发的事件created:function(){ this.$on('emitFn',(arg)=> { ...原创 2019-04-01 10:37:07 · 8879 阅读 · 0 评论 -
vue中父子组件传参时props使用问题(一)
情景: 父组件给子组件传参注意事项:1. props传递数据作用域是孤立的,它是父组件通过模板传递而来,2. 想接收到父组件传来的数据,需要通过props选项来进行接收。3. 子组件需要显示的声明接收父组件传递来的数据的数量,类型,初始值。4. 简单的接收可以通过数组的形式来进行接收。5. Vue传递数据时是基于数据单向流动,子组件不能改变 props 任何属性,需要通知父组件改变相应...原创 2019-04-01 10:01:44 · 1909 阅读 · 0 评论 -
vuex中mapState、mapMutations的用法
<template> <div> <!--vuex中的各种使用方法 mapState、mapMutations--> <a href="https://www.jb51.net/article/138239.htm">参考文档:getters,map等用法</a><br> <but原创 2018-12-11 14:43:28 · 2216 阅读 · 0 评论 -
vue中使用echarts时 将echarts做响应式
子组件: Echartsline<template> <div :style="{width:childWidth,height:childHeight}" class="line-wrap"> <!--echarts 带面积的折线图--> <div id="elines" :style="{width:childWi原创 2018-12-21 15:41:36 · 3725 阅读 · 1 评论 -
videoJs常用方法、事件、VUE中使用的注意事项
Vue中使用原生videojs进行播放rtsp格式的视频流(类似直播) vue中使用videoJS 如果需要播放flash视频,需要下载5.0及以下的版本,否则无法播放falsh 参考文档1(options参数,版本下载) 参考文档2(videoJS 常用事件及方法) &amp;amp;lt;div&amp;amp;gt; ...原创 2018-12-10 16:33:23 · 30323 阅读 · 7 评论 -
vue配置文件不打包
开发过程中经常需要修改后台接口地址,如果将接口地址放进打包文件中,不便于后台人员上传项目时随时修改接口地址。本文主要是解决前后台能方便及时的修改后台接口。1.在static中创建js文件夹,js文件夹中创建config.jsvar ApiUrl ;if(location.hostname==='localhost'){ //前端本地测试 ApiUrl = 'http://10.5.6...原创 2018-12-03 11:53:31 · 10424 阅读 · 3 评论 -
vue中使用video-player 播放rtmp格式的视频,播放前有一小段黑屏
问题:在vue项目中使用video-player 播放rtsp格式的视频的时候,若视频渲染比较慢的时候, 会导致初始画面是黑屏的状态。解决思路:监听播放状态,等数据加载完,页面可以渲染的时候 再显示画面,在这之前做一个加载的动画<template> <div class="videoBox" :style="{width:videoWidth,height:vide...原创 2018-12-04 14:06:04 · 7976 阅读 · 2 评论 -
vue自定义指令
/* 自定义指令 lazyload* 功能: 图片懒加载 (进入到固定区域再加载;已加载过的不再加载)* 步骤:1.数组原型上添加 删除(remove) 方法;* 2.初始化的时候 默认显示一张图片;* 3.未加载的图片;已经加载过的图片 分别放入两个数组;* */export default { install(Vue...转载 2018-09-27 16:00:10 · 177 阅读 · 0 评论 -
前端下载二进制流文件为excel文件
情景提示: 请求后台接口。 后台返回二进制流。 前端实现浏览器自动下载成exlce文件。 项目框架Vue。 主要知识点:Blob对象。h5新特性 download/**封装函数 downLoadFile.js*params: *data:二进制文件*/exports.install = function (Vue, options){ Vue.prototype.d...原创 2018-09-07 16:21:08 · 16520 阅读 · 1 评论 -
vue 使用echarts(一)
外层的容器要固定宽高(最外层),否则如果是不断调用echarts封装的函数 宽度会越来越宽原创 2018-09-07 10:17:47 · 293 阅读 · 0 评论 -
vue 播放rtmp格式的视频
安装环境:vue 2.5.16 videojs-flash: 2.1.0, vue-video-player: 4.0.6浏览器环境: 必须允许flash 播放main.js 引入: import VueVideoPlayer from ‘vue-video-player’ import ‘video.js/dist/video-js.css’ //样式 import...原创 2018-08-17 09:27:51 · 3659 阅读 · 6 评论 -
vue 路由拦截
路由钩子函数beforeEach 使用方法* 登陆功能时使用的// 页面刷新时,重新赋值tokenif (sessionStorage.getItem('token')) { store.commit('set_token', sessionStorage.getItem('token'))}const router = new Router({ mode:'histo...原创 2018-08-26 13:15:10 · 682 阅读 · 0 评论 -
vue axios 封装 请求拦截
创建request文件夹(与src同级) 在request文件夹下—-创建http.js将登陆时后台返回的token 存在sessionStorage 中import axios from 'axios';import store from "../store"import router from "../router"// axios.defaults.timeout = 5...原创 2018-08-26 13:10:50 · 273 阅读 · 0 评论