vue
super大米
,
展开
-
VUE接入腾讯实时音视频TRTC方法
VUE接入腾讯实时音视频TRTC方法原创 2021-12-13 16:22:01 · 4712 阅读 · 1 评论 -
element-ui table组件动态渲染表头
第一种方式:利用插槽进行数据绑定//html文件<el-table :data="tableData" border> <el-table-column v-for="(item, i) in tableHeader" :key="i" :label="item"> <template slot-scope="scope"> {{ tableData[scope.$index][i] }} </tem原创 2021-04-26 10:06:14 · 976 阅读 · 0 评论 -
video监听上次播放时间点下次进入后继续播放
最近被人问到如何打开视频播放接着上一次播放的时间点继续播放。由于之前只是采用最基本的视频播放或者利用第三方插件进行播放视频,根本没有考虑这么多;脑子里只有一个大概的想法但是不知道是否能实现所以就没有回答;后续抽空百度了下才发现自己当时的思路是正确的;下面直接上代码吧!//视频播放容器<video id="videoPlayer" width="100%" height="100%" loop controls :src="shareVideoLink"></video>.原创 2021-04-09 23:02:46 · 4786 阅读 · 1 评论 -
element-ui 时间选择器设置时间选择范围
针对element-ui时间选择器进行时间选择范围的控制,最终实现的效果如下图所示,灰色的区域为不能选择区域!<el-form-item label="日期:" prop="time"> <el-date-picker v-model="time" type="date" :picker-options="timeRange" placeholder="选择日期"></el-date-picker></el-form-item>export原创 2020-10-20 14:26:27 · 7764 阅读 · 3 评论 -
VUE防止按钮重复点击
1.新建plugins.jsimport Vue from 'vue'// 在vue上挂载一个指量 preventReClickconst preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { console.log(el.disabled) el.addEventListener('click', () => {原创 2020-08-10 15:34:14 · 1687 阅读 · 1 评论 -
VUE Vant框架开发移动端自适应问题处理
Vant组件库内部的组件样式都是以PX单位计算的尺寸。由于手机屏幕尺寸大小不一,所以我们一般在开发web移动端的时候不采用PX像素为单位设置宽高等。方式一:将px单位转换成rem单位布局1.下载lib-flexible插件npm i lib-flexible --save2.引入lib-flexible//main.js中引入import 'lib-flexible/flexible'3.安装px2rem-loadernpm install px2rem-loader4.配置px.原创 2020-06-21 17:58:11 · 5948 阅读 · 5 评论 -
解决VueRoter/element-ui路由报错Error: Avoided redundant navigation to current location的问题
在router>index.js文件中增加以下代码:const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}原创 2020-06-18 15:04:15 · 1239 阅读 · 0 评论 -
vue循环从后台获取数据
最近在项目中有个功能涉及到了循环从后台获取数据,具体业务逻辑如下!1.首先通过后台获取一组数据;2.在每组数据里拿一个参数id用来请求另外一个接口;3.请求数据后对应的压入到首次请求回来的数组中在页面上进行渲染;解决方法:循环请求数据的时候需要将异步修改为同步,否则数据对应不上。//请求第一组数据 axios.post('http://xxxx.com', qs.stringify(Data) .then((resolve)=>{ //请求成功后拿到数据 //例如请求回来.原创 2020-05-19 18:03:42 · 4152 阅读 · 0 评论 -
element-ui 表格合并
最终要实现的效果:<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" > <el-...原创 2020-02-28 11:26:14 · 181 阅读 · 0 评论 -
keep-alive+vuex实现页面数据缓存
在使用VUE开发项目时,从列表页跳转到详情页后。每次返回会发现列表页都会进行重载。尤其是在列表页涉及到tab切换时,重载后用户还需要再次操纵切换。体验度大大降低。可以选用keep-alive 里的include+VUEX进行动态缓存如:从A>B>C页面时候,让页面刷新。从C>B>A时候让B禁止刷新。也就是需要将B页面存入缓存中。实现:首先需要在A/B/C各自的单页...原创 2020-01-14 18:12:19 · 1443 阅读 · 2 评论 -
vue项目打包后首页空白
VUE项目在运行npm run build后会生产一个dist的文件夹,该文件夹里就是项目打包后的文件。但是当我们打开index.html文件后发现首页是空白的。出现这种情况主要是因为路径不正确导致导致,具体解决方案如下!1.在config文件夹里找到index.js修改build配置,如下图assetsPublicPath默认是"/"修改修改成"./"修改完成后我发现了首页可以正常打...原创 2019-12-06 10:39:42 · 663 阅读 · 1 评论 -
vue+element-ui 封装面包屑导航
面包屑导航在很多项目中都会大量的使用,所以我们最好将封装成组件用来调用。在刚开始封装的时候在网上也找了许多方法,但是发现大多的方法都比较臃肿,而且对于项目后期的维护造成了很大的工作量。最终还是自己封装了一个。1.新建bread.vue文件;<template> <div class="bread"> <div class="example-contai...原创 2019-12-05 10:16:35 · 3577 阅读 · 3 评论 -
js文字无缝滚动,间歇滚动
1.无缝滚动<div id="demo"> <ul id="demo1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>...原创 2019-11-28 13:48:53 · 294 阅读 · 0 评论 -
vue-cli详细安装步骤介绍 vue脚手架安装 项目构建
一、安装node.jsnode.js下载地址:https://nodejs.org/en/download/根据自己电脑的系统环境下载对应的版本,然后按照步骤一步步就可以安装完毕;安装完成后;打开命令行cmd;输入 node -v检测是否安装成功,如果安装成功将版本号显示出来; 二、安装vue-cli命令;(推荐大家用vsCode进行VUE开发)命令行输入:npm in...原创 2019-02-26 22:51:13 · 497 阅读 · 0 评论