vue
文章平均质量分 52
scy_fighting
这个作者很懒,什么都没留下…
展开
-
vue项目打包部署上线,图片 css 等不正常显示的解决方式
vue项目打包部署的话,有时候访问图片会出现不能正常显示的情况,比如:404等,遇到这种情况需要改下配置文件,以下是我自己搜集以及整理的一些步骤,是自己实际项目中解决问题的,在此记录以下。本人小菜鸟一个,如有问题欢迎指正~。第一:找到build文件夹下的utils.js 文件,然后在这个文件中自己加上publicpath:'../../',是为了css和图片正常显示。主要是在这个地方:i...原创 2020-01-22 14:31:35 · 1551 阅读 · 0 评论 -
vue中的父子组件之间的通信
最近想总结一下vue父子组件之间的通信,所以记录一下。我只写部分伪代码,未写全部代码。简单的点击事件的传递值:见1,2的写法。复杂的点击事件的传递值:见3,4的写法。3,4的用法也可以用于兄弟组件之间的传值。注意,用在父子组件之间的传值与用在兄弟组件之前传值稍微有些不用。1、父组件向子组件传递数据,用props即可。具体例子:点击删除按钮,弹出来删除弹框父组件传递数据:&l...原创 2019-09-25 16:31:53 · 372 阅读 · 0 评论 -
ESLint Attribute ':isShow' must be hyphenated (vue/attribute-hyphenation)
好久木有更新博客啦,来记录一波~最近在接别人做的一半的项目,搭建这个项目的人 eslint 弄了好多限制。我在vue父组件给子组件传值时注意写的:<contact :isShow="isShowDialog" @show="parentShow" />然后就会有警告如下图所示:本来不想管这个警告,但是看着是在不舒服,最后给解决了。该问题产生的条件是:传参的时候由于使...原创 2019-09-18 14:13:27 · 11877 阅读 · 0 评论 -
element ui table的show-overflow-tooltip属性以及设置其宽度
用vue+element ui框架,用到table表格,如果每列显示的内容过长则可以使用该属性,即 :show-overflow-tooltip="true",该属性可以让内容在一行显示,如果显示不下时,显示...,并且鼠标划过时显示全部文字。通常会出现这样的效果:现在需求是:调整显示全部文字的宽度。样式代码如下:可以在全局添加这样全部生效,如果不想加在全局的话,可以单独加在页面当中,...原创 2019-02-20 14:36:08 · 48298 阅读 · 12 评论 -
vue项目本地开发环境设置代理解决跨域问题
跨域问题,在前后端连调过程中在所难免。有时后端可能暂时不会帮你解决,所以咱们前端的小姐姐们可以自己解决的。如果你是vue-cli搭建的环境:在config/index.js中找到proxyTable,并配置如下即可:proxyTable: {'/api': {target: 'http://172.14.205.18:9191/',changeOrigin: true,...原创 2019-01-02 14:54:32 · 3423 阅读 · 2 评论 -
input上传文件,前端判断文件的大小及类型
由于项目需要,需要实现该功能纪录如下。上传文件时,由前端判断文件的大小及类型。举例说明:要求上传的文件小于10MB的文件,并且文件类型必须为.txt类型。关键核心代码如下:html代码:<input type="file" @change="getFile($event)">js代码:getFile(event) { console.log(event) // ...原创 2018-12-13 15:01:22 · 4319 阅读 · 0 评论 -
vue+elementui 使用tabs 浏览器会卡死问题
最近在用vue+elementui开发后台管理系统,竟然出其不意的遇到了神坑(使用tabs 浏览器会卡死问题)。问遍了身边的前端工作者,表示木有任何一个来遇到该问题。于是,翻翻白眼,能怎么办。于是乎,暂时先放弃了,但是偶然之间发现了这个问题。原来是自己的问题,但是这个问题,也是需要注意的,就是 ,使用elementui里面的组件时,要用<el-row> <el-col :s...原创 2018-11-26 14:53:18 · 8973 阅读 · 15 评论 -
vue iview的小坑之icon不能直接加点击事件
最近因为项目新增需求,遇到了一个小坑,特此记录一下。主要是iview的坑。项目使用框架是:vue+iview要实现的功能是实现点击复制图标达到复制功能(完成ctrl+v的功能)。代码大概如下:页面: <span @click="clickCopy(item.to)"> item.to是循环出来的内容,这里写你要复制的内容 <Icon type="ios-...原创 2018-08-21 18:10:42 · 9923 阅读 · 0 评论 -
iview的Dropdown 下拉菜单之选中
由于项目需要,需要下拉菜单进行筛选,点击(筛选)后展示不同的页面。介于项目本身采用的技术是vue+iview,所以使用了iview自带的“Dropdown 下拉菜单”。但是自带的只展示样式,点击不同的选项,需要显示点击的选项,需要自己手动去编写。下面记录一下实现的代码:(这里在赘述一下要实现的是,点击abc,则显示abc。点击22222,显示222222)思路:声明个变量 用dropdown...原创 2018-08-23 18:54:18 · 18571 阅读 · 2 评论 -
vue项目兼容ie9 10不显示问题
因为工作原因,让我来解决整体网站的兼容问题。网站使用的框架是vue+iview。话不多说,直接说问题吧。下面记录一下我的经历:问题一:一开始整个网站在360极速模式及ie浏览器直接不显示,一片空白解决方式是:在package.json中引用babel-polyfill,并修改webpack.base.config.js的代码(可能解决方案不局限于我这一种哈),如下:entry:...原创 2018-08-15 15:28:16 · 4656 阅读 · 2 评论 -
vue项目使用swiper
1、首先在package.json中引入vue-awesome-swiper依赖,然后通过npm install 来安装即可。package.json中如图所示:2、安装成功后,在main.js中添加如下代码:import VueAwesomeSwiper from 'vue-awesome-swiper'require('swiper/dist/css/swiper.css')Vue.use...原创 2018-05-15 17:25:47 · 1114 阅读 · 0 评论