攻城喵小猫的博客

关于vue项目中js实现轮播功能。由于项目要求，ui组件库实现不好要的效果，所以，手动写了一个。先看效果吧这里左右箭头是可以点击滑动的，类似轮播样式，这里是由于后台返回数据list，一次加载3条实现方法主要下面介绍首先是静态页面 <div class="process-box" ref='processBox'> <p>员工历程</...

js上传文件的完整写法(本地用的是vue的环境)1.在项目中经常会用到需要上传头像,附件的地方,那么我们如何进行上传呢,今天跟大家分享一下,来自项目中的一些上传文件的个人总结2.首先我们需要在页面中使用一个 input 按钮,并将它的type属性设置为’file’,关于上传按钮美化的操作,我已经在上一篇博客中详细的讲解了.下面直接贴出代码截图若项目中需要支持上传多文件,只需要在input标...

element-ui 上传图片后清空图片显示使用element-ui，使用el-upload上传图片，上传图片后再次打开还是会有原来的图片，想要清空原来上传的图片，只需要在组件上绑定ref，在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。具体如下：<el-upload ref='upload' class="uplo...

关于vue+element上传文件post请求由于项目要求这里要实现点击上传文件首先，我们需要写个上传组件 <el-upload class="upload-demo" :action="doupload()" :before-upload="before_Upload" ref="newupload"...

关于后台返回文档流的文件下载<template> <i @click="downLoad(data)" class="downLoad">下载</i></template> //下载 downLoad(val) { let url = val.httpUrl let ...

Vue PC商城项目开发笔记与问题汇总负责PC端商城项目，这也是人生第一个真正的项目。刚做了一天，就遇到不少问题，在这里列出自己的问题与解决办法，与大家交流，提升自己，希望以后不会掉进同一个坑里。一、使用vue-cli创建项目上次逛论坛遇到一张图，出处忘记了，借送给大家，从搭建到项目结构，一张图解决好多疑问，好优秀二、Element-ui安装应用1.安装到项目 $ cnpm inst...

Vue+Element动态生成新表单并添加验证首先，有这样一个需求，表单中默认有表单项，点击新增，会多出一项。点击之后官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果代码如下 <div class="item_tit"&...

我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下：vue-cli默认已经安装以上三个插件：pos...

vuejs开发H5页面总结关于布局方案当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / ...

**webpack打包路径问题，生成相对路径**这里用我们用vue-cli脚手架生成项目举例，go=>1,找到config文件夹下面的index.js3,把箭头所指的/去掉 —–搞定对于所有webpack的同理，只要把打包输出路径的/去掉就可以了...

关于前端vue项目设置请求头权限问题新建一个公共js文件。如： lp.js.//设置请求消息头export function headers(contentType,token){let headers={};headers['Content-Type'] = contentType ? contentType : 'application/json;charset=utf-8'; ...

关于vuex状态管理系统应用实例应用场景：由于项目中需要监控一些状态值，所以统一管理下；首先安装vuex,npm install vuex --save在store.js文件中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { ...

web前端总结之文本超出显示省略号当网页中显示文字过多时，会出现如下样式的文字文字显示为省略号，当鼠标移上去时显示文字。 这就是文本超出显示省略号。 主要用到了： text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在标签中添加title=“被省略的文字”，实现鼠标移动到省略号上显示被省略的文字。 效果：...