Vue相关
文章平均质量分 57
以实践为线索,学习和工作中遇到的一些问题以及解决方案,以及开发总结等相关
waillyer
码云地址:https://gitee.com/waillyer
展开
-
vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
报错方法一、更换版本npm i [email protected] -S方法二 修改入口文件//main.jsimport Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}..原创 2021-02-22 17:54:13 · 116 阅读 · 0 评论 -
VUE 音频MP3播放插件
安装$ npm install vue-aplayer --save文档:vue-aplayer注册//main.js import vueAplayer from 'vue-aplayer' Vue.use(vueAplayer)引入组件 <div style="width: 100%"> <aplayer v-if="showPlayer" ref="videoPlayRef" :music="videoPlay" :autop原创 2021-02-03 12:00:37 · 3134 阅读 · 0 评论 -
element-ui中tree连动
需求:1、公共选人组件,支持坐席、组织机构等选择2、选择部门后,自动选中部门下的所有成员3、父节点和子节点联动,形成全选和半选状态4、父节点(部门)未展开,不可选中5、展开后可选,收缩后不可选(主要是未了加载请求数据)效果第一步 作为一个公共组件写个组件<div v-if="showIntercomGroup"> <el-dialog title="选择 " id="showIntercomGroupId" class="el-dialogStyle" :visibl原创 2021-01-29 16:43:41 · 978 阅读 · 1 评论 -
vue组件之间传值几种方法
方法一、父子组件传值通过props向下传递父组件<div class="menu_header"> <Menu :msgChild="msg1" /> </div> data() { return { msg1:'父组件的值', } }子组件<el-menu-item>{{msgChild}}</el-menu-itemexport default { name: "Me原创 2020-12-27 22:13:06 · 1540 阅读 · 0 评论 -
对讲排序备份
之前用的是通过css控制位置,然后支持拖动,现在使用flex布局,拖动排序即可 //添加排序对讲窗口 SortVideoTable(sortIntercomBoxDatas) { this.intercomBoxDatas.push(sortIntercomBoxDatas); /*初始化jquery*/ /* $(document).ready(() => { /!*lua中的一个函数,math.ceil(x)返原创 2020-12-17 15:26:44 · 137 阅读 · 0 评论 -
vue聊天功能模块(十二)消息转发
效果1、右击弹出列表,同时保存消息id2、选择转发成员,转发即可注意:转发对象可为当前聊天对象,转发成功后需判断是否是存在转发当前聊天,是的话把消息数据显示转发右击列表 <Dropdown style="z-index:9999999!important;" ref="contentMenuMessageRight" trigger="click"原创 2020-12-04 09:31:40 · 871 阅读 · 1 评论 -
使用 Element+vue实现开始时间结束时间限制
效果<el-form-item label="开始时间"> <el-date-picker v-model="startDate" type="datetime" placeholder="选择日期" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :editable="false"原创 2020-12-03 19:45:05 · 1005 阅读 · 0 评论 -
vue插槽
插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!默认插槽默认名字为default具名插槽具名插槽,就是给这个插槽起个名字 <div class="parent"> 父组件 <Child> <div slot="s1"> <p >我是插槽1</p>.原创 2020-12-03 16:07:02 · 149 阅读 · 0 评论 -
vue聊天功能模块(九)艾特功能实现
预览艾特开始思路:输入ctrl +@ ,弹出群成员列表弹框,点击成员时,把成员名称添加到输入框,同时隐藏弹框1.点击弹框外任意位置,把弹框关闭即可2.点击删除键时,把@和名称删掉3.要实现艾特提示,输入框显示的是“@某某某”,实际发出去的消息,把@某某某转换为我们限定的某字符串,然后收到消息通过字符串匹配即可下面,我们来一步步实现这功能吧...原创 2020-11-06 11:49:13 · 5347 阅读 · 6 评论 -
前端开发必读文档
前端UI组件: Ant Design of Vuehttps://www.antdv.com/docs/vue/introduce报表UI组件:viser-vuehttps://viserjs.gitee.io/demo.html#/viser/bar/basic-barVUE基础知识:https://cn.vuejs.org/v2/guideAnt Design Vue Pro:https://pro.loacg.com/docs/getting-startedJeecgBooJeec原创 2020-10-24 15:54:39 · 862 阅读 · 0 评论 -
js文件下载替换文件名,vue下载文件替换文件名
下载文件方法1、window.open和window.location.hrefa,window.open()在下载文件的时候会打开一个新的页面,同时会暴露链接地址, 而且会在下载文件的过程中,访问链接2次,虽然前端只下载了一次文件,但是服务端会生成2次文件。b,对于rar.doc.等浏览器不能打开的文件,使用window.location.href是完全可以实现下载的。 示例: window.location.href="http://下载.rar" ,等同于<a href="http:/原创 2020-10-24 14:26:58 · 4183 阅读 · 0 评论 -
vue组件和js实现鼠标悬停显示title效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JS控制TITLE悬停效果</title><sc原创 2020-10-13 14:39:09 · 4932 阅读 · 1 评论 -
vue中elementui command绑定变量对象方法
需求:点击下拉框,切换组,选中当前项 <el-dropdown trigger="click" class="child-controllerChild" @command="(command) =>handleDispatchTabClickBoxCommand(command)">原创 2020-10-13 11:51:13 · 2958 阅读 · 1 评论 -
在vue项目中 如何定义全局变量 全局函数
这里写自定义目录标题设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,需要时导入即可一、变量二、方法设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,需要时导入即可一、变量/** * 坐席常量定义 */function MessageConstants () {}//Int 1——连接中// 2——连接成功// 3——对方挂断// 4——连接超时// 5——对方拒接//原创 2020-10-10 15:51:25 · 1676 阅读 · 0 评论 -
vue聊天功能模块(十一)iview实现的右键下拉菜单
需求点击会话列表某个会话,右击下拉菜单自己懒得写,于是使用了组件直接上代码思路是先让下拉菜单隐藏,右击显示,再通过iview源码,设置显示位置<template> <div> <h1>jkfjjfkfkjk</h1> <div @contextmenu.prevent="dblclickGo($event)" style="height: 50px;width: 100px;原创 2020-09-28 10:36:36 · 717 阅读 · 0 评论 -
vue中vuex的使用以及mapActions、mapMutations使用
mapActionsmapActions 必须放在 methods中,因为 action 或者 mutation 都是方法.文件中导入import { mapActions } from 'vuex';export default { // ... methods: { //下述中的 ... 是拓展运算符 // 使用 [] 是解构赋值 ...mapActions([ 'increment', // 将 `this.increment原创 2020-09-27 10:50:14 · 5342 阅读 · 0 评论 -
VUE项目中新开页面
testu(){ const HREF = this.$router.resolve({ path: '/test', name: '/test', params: { id: 1, } }) window.open(HREF.href,'_blank') },原创 2020-09-26 12:01:39 · 316 阅读 · 0 评论 -
vue权限配置
对权限进行分组配置后端会返回数组项,通过id可获取用户拥有权限string.indexOf(searchvalue,start)Number 查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。获取数据,对多选框分组<el-checkbox-group v-model="checkedMenuOptions" @change="handleCheckedChange"> <el-checkbox v-for="item in menuOptions"原创 2020-09-18 09:40:58 · 771 阅读 · 0 评论 -
Sortable排序在vue使用/使用element弹框拖拽排序
一、npm安装npm install sortablejs --save官网参考http://www.sortablejs.com/index.html二、导入项目 import Sortable from 'sortablejs';或者直接下载源码导入 // import Sortable from '@/plugins/Sortable.js'; var that = this; setTimeout(function () { var原创 2020-09-17 17:53:45 · 2714 阅读 · 4 评论 -
vue聊天功能模块(十)音视频通话 时间、计时器
一、显示当前时间<div class="header-time"> <div class="courentTime">{{courentTime}}</div></div>data(){returen{ courentTime: '', timer:''} mounted() { this.initTime() } methods: { initTime() { /*时间处理*/原创 2020-09-16 11:10:38 · 2161 阅读 · 0 评论 -
vue聊天功能模块(四)聊天消息换行
需求:ctrl+回车换行回车发送消息<!--输入区域--><div class="messagesBox-BigRight-down20-input"> <div style="z-index: 9999"> <el-input class="inputmsg" type="textarea" :rows="4" placehol原创 2020-09-10 09:23:19 · 727 阅读 · 0 评论 -
vue聊天功能模块(六)消息图片预览
需求:双击消息图片,大图预览思路:使用element-ui中的previewSrcList 开启预览大图的功能。绑定双击事件,把消息中的url拿到判断双击事件是否绑定有图片id,预览图片预览图片 <!--图片预览--><div style="z-index: 9999999;"> <el-image-viewer v-if="showViewer" :on-close="closeViewer"原创 2020-09-09 15:03:06 · 624 阅读 · 0 评论 -
vue聊天功能模块(八)撤回消息实现
需求:撤回消息思路鼠标右键弹出 撤回 按钮点击撤回按钮,拿到当前选中消息id,遍历消息列表拿到消息相关数据,主要是拿到用户名通过接口撤回当前消息在撤回成功回调中重新更新列表数据到这里,有两个办法更新列表 办法一、可以通过http刷新消息列表办法二、也可以遍历本地消息,用元素替换掉当前消息即可办法二效果肯定好一些,毕竟不需要等http回调一、鼠标右键弹出 撤回 按钮消息列表 <li class="tal" v-for="(item,index) in showMesDatas原创 2020-09-09 11:03:56 · 1883 阅读 · 0 评论 -
vue分页功能
<el-pagination layout="prev, pager, next" @current-change="changePageNum" :current-page="pageNum" :page-size="pageSize" :total="total"></el-pagination>data(){return{ tableData: [], total: 0,//总数 p原创 2020-09-08 15:23:17 · 349 阅读 · 0 评论 -
vue计算属性和监听器区别
区别计算属性可以简化差值表达式写法计算属性变量定义在computed中,可以直接使用在{}中的,跟methods中函数类似,只不过有利于缓存,性能更好计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。例如:解决element-ui分页中删除页面最后一条数据时,currentPage没有减一,页面列表为空问题时,就可以用到监听属性监听页面的总条数,并对总条数进行判断。从而刷新列表<el-pagination layout="prev, page原创 2020-09-08 14:32:15 · 3123 阅读 · 0 评论 -
删除页面最后一条数据时,currentPage没有减一,页面列表为空
思路:监听页面的总条数,并对总条数进行判断。当页面总条数 = (当前页数-1)*当前页条数,currentPage减1,重新获取列表watch:{ total(){ if(this.total==(this.currentPage-1)*this.pageSize&& this.total!=0){ this.currentPage-=1; getDiscountList(this);//获取列表数据 }原创 2020-09-08 11:50:11 · 363 阅读 · 1 评论 -
vue每次点击弹框重新加载子组件
需求:每次点击重新加载子组件,传入参数,进行选人的校验父组件使用v-if="showIntercomGroup"控制,每次打开弹框都重新加载组件<div v-if="showIntercomGroup"> <el-dialog title="选择 " class="el-dialogStyle" :visible.sync="showIntercomGroup" width="70%" center原创 2020-09-08 09:17:06 · 4922 阅读 · 0 评论 -
vue聊天功能模块(七)js文件名过长部分显示
需求:消息文件名过长,显示部分写一个函数,获取字符串长度,截取部分function getFileName(fileName){ var showFileName =''; var disLength = fileName.length; var substringC = 6; var nameLength = 0; var cutIndex = 0; for(var i=0; i<disLength; i++) { if(escap原创 2020-09-04 16:44:29 · 591 阅读 · 0 评论 -
vue覆盖elementui样式的几种方式
使用/deep/ 或者 >>> 深度作用选择器<style scoped> /* >>>.el-checkbox__input > .el-checkbox__inner { display: none; } >>> .is-leaf +.el-checkbox .el-checkbox__inner { display: inline-block; }*/ /d原创 2020-09-03 16:07:21 · 4800 阅读 · 0 评论 -
vue聊天功能模块
需求:聊天模块,可以实现发送文字、表情、图片、文件布局分为三部分左侧会话列表中部聊天列表右侧群组成员列表先来看看效果布局:左边固定大小,中间宽75%,可右展开聊天布局:左消息,撤回消息,右消息,用text-align控制布局 <!--聊天界面--> <div class="messagesBox-BigRight-down80"> &原创 2020-08-26 17:00:48 · 6636 阅读 · 13 评论 -
vue-cli3+vant+vantRem适配方案项目搭建
安装vue-cli3脚手架安装脚手架 npm install -g @vue/cli创建项目 vue create my-project安装vantnpm install vant -S安装babel-plugin-import插件(按需加载)# 安装插件npm i babel-plugin-import -D`babel.config.js文件里配置// 对于使用 babel7 的用户,可以在 babel.config.js 中配置module.exports = { pr.转载 2020-08-26 15:59:29 · 359 阅读 · 0 评论 -
vue项目PC端屏幕分辨率与窗口大小自适应
一、npm安装依赖项目基础配置使用 vue-cli 生成自适应方案核心: 阿里可伸缩布局方案 lib-flexiblepx转rem:px2rem,它有webpack的loader px2remnpm i lib-flexible -Snpm i px2rem-loader -D二、在vue.config.js配置,这里我是按照1920*1080缩放 css: { loaderOptions: { postcss: { plugins: [原创 2020-08-26 14:49:12 · 11106 阅读 · 10 评论 -
element-ui表格格式化时间
<el-table :data="taskList.tableTaskList" v-if="taskList.show" style="width: 100%" header-cell-style="height:30px;padding: 2px 0; text-align:center;background:#D0D0D0" cell-style="height:30px;padding: 2px 0;"> <el-table-c原创 2020-08-25 09:04:23 · 1709 阅读 · 0 评论 -
vue3.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法
需求:手动上传图片,非JPG、PNG格式无法选择 <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :auto-upload="false" ref='uploadPhoto' :multiple="false"原创 2020-08-14 18:00:00 · 4436 阅读 · 0 评论 -
vue 监听键盘回车事件
方法一:keyup.enter使用:vue文档提供了一种按键修饰符的方法: 方法二:document.onkeydown事件获取点击事件,判断一下即可 document.onkeydown = (e)=> { //按下回车提交 let key = window.event.keyCode; //事件中keycode=13为回车事件 if (key == 13) { this.Initialize(); }原创 2020-08-05 09:51:35 · 3164 阅读 · 0 评论 -
vue同步异步处理
https://blog.csdn.net/github_37847992/article/details/89923959转载 2020-07-14 15:11:36 · 1633 阅读 · 1 评论 -
vue注册局部组件拖拽指令
一、使用注册指令然后可以直接使用v-drag实现拖拽效果 directives: { drag (el) { let oDiv = el //当前元素 oDiv.onmousedown = function (e) { //鼠标按下,计算当前元素距离可视区的距离 let disX = e.clientX - oDiv.offsetLeft let disY = e.clientY - oDiv.o原创 2020-07-02 14:20:44 · 609 阅读 · 0 评论 -
cli3.0+总是报错:Expected indentation of 0 spaces but found 2如何解决
cli3.0+总是报错:Expected indentation of 0 spaces but found 2如何解决方法一在index.js修改usesEslint,将true改成false方法二、(适用于cli2)在webpack.base.conf.js中将module中的usesEslint注释掉方法三、.eslintrc.js新增 “indent”: [“off”,2]rules: { 'no-console': process.env.NODE_ENV === 'produ原创 2020-06-06 17:52:34 · 500 阅读 · 1 评论 -
vue-cli4.4.1+elementUI搭建后台系统
这里写自定义目录标题vue-cli4.4.1+elementUI搭建后台系统vue-cli4.4.1+elementUI搭建后台系统原创 2020-06-06 09:39:51 · 1238 阅读 · 0 评论