标签: Vue

Vue 实现从文件中获取文本信息的方法详解

本文实例讲述了Vue实现从文件中获取文本信息的方法。分享给大家供大家参考,具体如下:最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上。刚开始我使用的是File和FileReader...

JavaScript 2021-04-30 41 0 0 阅读全文

Vue开发移动端使用Better-Scroll时Click事件失效的解决方案

最近使用vue学习开发移动端的项目,使用了better-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native都不行,试了一下@touchstart是却是可以的,发现bett...

JavaScript 2021-07-09 40 0 0 阅读全文

Vue-Cli+Webpack项目打包到服务器后,TTF字体找不到的解决操作

vue-cli+webpack项目打包到服务器后,ttf字体找不到更改build/utils.js文件中ExtractTextPlugin插件的options配置:if(options.extract){returnExtractTextPlugin.extract({use:loaders,pub...

JavaScript 2021-05-20 65 0 0 阅读全文

Vue+Iview的菜单与页签的联动方式

最近在使用vue+iview开发一个后台管理类的系统,希望做一个点击左侧菜单右侧的页签与内容都能相对应的改变。但搞了好久的路由也没有实现这个功能。刚开始使用vue+iview不知道iview-admin可以直接拿来使用,布局之类的开箱即用,可是自己的demo已经写了好久不忍心放弃。一、使用iview...

JavaScript 2021-07-09 39 0 0 阅读全文

Vue Select 获取Value和Lable操作

vueselect控件在选择时需要把id和name两个值都获取到,实现方案如下:select控件代码{{item.dictionaryName}}change事件getVendorId:function(val){letthat=this;that.detailData.supplyType=val...

JavaScript 2021-05-20 55 0 0 阅读全文

Vue Data对象重新赋值无效(未更改)的解决方式

vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效这里是datadata(){return{model:{}};}这里是方法里的普通赋值afterUpload(response){this.model.icon=response.ur...

JavaScript 2021-05-27 59 0 0 阅读全文

Vue中多附件上传的实现示例

本篇主要记录在Vue项目中实现附件上传功能,可实现单/多附件上传,识别文件格式并用不同图标展示功能,及控制是否可编辑功能。内容简洁易懂,如有需要可自取。完整代码点击这里click核心代码上传附件openFileSelect(){//dispatchEvent向一个指定的事件目标派发一个事件this....

JavaScript 2021-04-16 45 0 0 阅读全文

Vue+Element Tabs选项卡分页效果

本文实例为大家分享了vue+elementtabs选项卡分页效果的具体代码,供大家参考,具体内容如下文件目录:功能展示:路由配置:{path:'/account',component:()=>import('../components/home/home.vue'),//布局页面redirec...

JavaScript 2021-04-28 52 0 0 阅读全文

JS基于VUE组件实现城市列表效果

用JS实现的VUE组件城市列表基本思想是,将城市列表数据缓存在本地然后在页面上用JS实现即时模糊查询和首字母定位查询等为了保护项目,删除了部分代码效果实现H5:全国{{key}}{{i.Name}}{{key}}{{tipString}}JS:import{GetCityList}from'serv...

JavaScript 2021-08-20 37 0 0 阅读全文

Design Vue 表格开启列排序的操作

开启排序1、本地数据排序column数据设置,需要开启的列设置sorter:(a,b)=>a.address.length-b.address.length,自定义排序方法2、服务端排序sorter设置true点击排序,表格触发change方法,接受参数change(pagination,fi...

JavaScript 2021-05-11 54 0 0 阅读全文

Ant Design Vue导航菜单与路由配置操作

此功能包含:1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由{{item.title}}{{subItem.text}}菜单栏路由配置:{title:'Dashboard',name:'/dashboard',icon:'dashboard',su...

JavaScript 2021-05-11 67 0 0 阅读全文

Vue.Js 带下拉选项的输入框(Textbox With Dropdown)组件

带下拉选项的输入框(TextboxwithDropdown)是既允许用户从下拉列表中选择输入又允许用户自由键入输入值。这算是比较常见的一种UI元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能。本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一...

JavaScript 2021-04-17 40 0 0 阅读全文

Vue 动态给每个页面添加Title、关键词和描述的方法

先在router.js里面配置我们的title、关键词和描述{path:'/train',name:'Train',component:()=>import('../components/page/Train.vue'),meta:{title:'教师培训-恩启官网',content:{key...

JavaScript 2021-05-20 43 0 0 阅读全文

Vue开发树形结构组件(组件递归)

需求一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类。要实现全选单选,子类被逐个全选父类也要标记选中。第一反应就是树形结构,和递归调用。曾经在做WPF时记得有现成的组件,也学着写过对应的后台。这次我要自己写一个前端的组件了。这只是我自己花了点时间写的一个vue组件,尚可优化...

JavaScript 2021-08-20 45 0 0 阅读全文

Vue-Cli+Iview项目打包上线之后图标不显示问题及解决方法

做vue项目使用的iviewUI库,打包上线之后发现icon都不显示,然后做了很多尝试,更改打包路径等,都没有太好的效果,最后还是在网上找到了方法:1.方法一:在build/utils.js下面找到这段代码,将其中publicPath改成…/…/,保存并重新打包。注意:这个路径不是绝对的,根绝自己的...

JavaScript 2021-04-30 70 0 0 阅读全文

Ant-Design-Vue实现表格内部字段验证

ant-design-vue实现表格内表单字段验证表格内column可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样下单数量内容不能为空下单数量必须输入正整数翻阅ant-design-vue官网并没有发现说表单内表格字段验证的方案,但是...

JavaScript 2021-07-06 64 0 0 阅读全文

Vue源码阅读—合并Options

vue里面,我们是可以自己传一些数据进去的。比如说varvm=newVue({el:'#app',data:{message:'HelloVue!'}})像这种的话,我们在newVue的时候传了一个对象。就是{el:'#app',data:{message:'HelloVue!'}}那么其实我们新建...

JavaScript 2021-07-22 51 0 0 阅读全文

Vue路由This.Route.Push跳转页面不刷新的解决方案

一、背景介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。案例:A页面:B页面:问题:当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数...

JavaScript 2021-07-09 46 0 0 阅读全文

Vue 虚拟列表的实战示例

序言现如今,我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。本篇讨论基于Vue.js的列表无限下拉实践。我们的目标就是:让列表下拉纵享丝滑,而不是像以往的下拉就loading等待的体验。译自BetterProgramming在线Demo设计咱还是...

JavaScript 2021-03-18 46 0 0 阅读全文

解决Vue单页面 回退页面 Keeplive 缓存问题

场景:项目中遇到vue点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新A页:B页:解决方法:利用keep-alive缓存需要缓存的页面1.在app.vue中改写router-view2.在router/index.js中添加路由元信息,设置需要缓存的页面...

JavaScript 2021-05-27 65 0 0 阅读全文