guairena的博客

需求：点击批量导入按钮，弹出弹窗。下载模板如图二上传后，如果有错误，会弹出提示，如图三点击查看失败原因，会自动下载失败的excel如图四。请求参数和返回结果1. vue项目导出表格功能实现步骤npm install file-saver@2.0.2npm install xlsx@0.16.0需要的页面引入详细看src/utils/exportExcel.js2. 页面实现<template> <div> <el-button type

点击小图可以放大，放大后，通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。代码父组件：子组件base/image/image-viewer.vuedom.js/util.js/types.js

升级element-ui版本后报非常多错，后面又降回原老版本，并通过其他方式实现图片放大功能。

需求：请求到后端数据，渲染成表格，通过打印机打印出来代码实现：list.vue<template> <div> <div class="printBox"> <div> <el-button type="primary" @click="printBtn" size="small">打印</el-button> </div> <div ref=

需求：列表有上下架状态的一列，在数据过多的时候需要，统一修改。1、点击批量上下架按钮2、弹出批量导入弹框，如图13、点击下载模版，如图2，该模版是由前端定义的两个字段4、点击请选择文件，可选择本机相关文件，如图35、点击导入，会把上传的excel读取校验每一行数据是否合格，然后转化成数组作为参数传给后台，如图46、后端会返回一个文件流，前端直接下载到本地excel涉及知识：1、使用js-xlsx库，前端读取Excel报表文件2、读取本地文件理解FileReader对象的方法和事件以及上传

需求：表格上方有一个导出按钮，点击后，调用后台接口，后台返回数据流，下载成功后并在本地可以打开excel。代码实现：<el-button type="primary" size="mini" icon="el-icon-download" @click="formatExportFile">金税格式数据导出</el-button>import Storage from '@/utils/localStorage'import ApiUrlconfig from '@/

场景：element中的 input远程搜索el-autocomplete组件 使用如图，当输入商家编码时，会根据输入的内容发起接口请求，请求数据展示在搜索下拉列表里；当点击选中某个编码时，回显对应的商家名称。具体在下面代码中有实现。问题：在关闭弹框时，需要清空内容。此时直接清空了form对象，在选中商家编码后，商家名称没有进行回显，打印后却有值。vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图.

Error:Loading PostCSS Plugin failed: Cannot find module ‘postcss-pxtorem‘报错解决

场景：  在列表的上方总会有一个模糊查询的搜索框，通过输入内容，点击搜索按钮，对列表进行查询并更新内容。思路：使用的是ui组件库是element ui，首先复制一个基本的input和一个button组成上面的搜索框。input输入框v-model绑定的值即是从父组件列表页传过来的需要搜索的值；button按钮则@click绑定搜索事件，将搜索值通过该事件发射到父组件页面，父组件页面通过接收该事件，并给参数赋值，调用接口刷新页面。在main.js中将该组件注册为全局组件，供该项目任一页.

需求：  前端请求到后端返回的数据，涉及到一些敏感的数据，需要进行加密处理，前端进行解密。思路：水印通过变量进行赋值，登录成功后，将用户名及手机号后四位拼接。均匀平铺在页面上，通过文章发现有三种方案，分别是：div/css、canvas、svg。还有明水印、暗水印的区分及破解。问题：除了登录页，其余页面都要展示水印。点击系统右上角的退出按钮，退出到登录页后，登录页存在水印。token失效后，跳转登录页，登录页存在水印。登录成功到首页后，点击菜单切换后，点击退出按钮，登录页存在水印

需求：  PC端和小程序。思路：列表页主要有标题、日期时间切换、列表表头在滚动的时候是不能动的，只有表体的数据内容可以区域滚动。表体的内容写在<scroll-view></scroll-view>组件里。在列表页还可以切换到图表页；图表页的头部和列表共用，相当于筛选条件是一样的。图表需要滚动的也要放到<scroll-view></scroll-view>组件里。问题：列表页的区域滚动到最下方数据有遮挡；及图表的区域滚动最下方是有遮挡且图表不

需求：  vue项目H5页面列表页可以向上滑动加载下一页；当点击跳转详情页时，保留列表页的滚动位置；当从详情页点击跳转二级页面时，保存详情页的滚动位置。思路：列表页的滚动使用的是vux组件库中的Scroller组件，通过观察发现没有滚动条，而是通过样式transform实现的；当跳转详情页的时候缓存列表页可以记录当前位置和数据。详情页页面未使用组件，而是通过原生的div平铺下来的内容，超出屏幕可视区域后自动生成滚动条，当跳转子表单页面的时候缓存详情页的数据及位置，发现此时详情页的数据缓存了，但是滚

需求：  vue项目PC端详情页内容过多，在右侧或左侧加一个导航栏，通过点击某一项，页面平滑滚动到具体的内容上。并把这个功能封装成组件。思路：封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；插值表达式打印v-if里的数据，是true是true为什么不显示，后面typeof之后发现Boolean类型通过跳转回来后变成了String类型由于跳转筛选页的时候，将该值通过query传参的方式，传了过去，当返回列表页的时候，又通过query传参的方式带了回来。导致 true 变成了 ‘tru

背景：  列表页跳转筛选页，从筛选页再跳转回列表页，此时列表页的元素不显示思路：将v-if改成v-show，不行。插值表达式打印v-if里的数据，是true是true为什么不显示，后面typeof之后发现Boolean类型通过跳转回来后变成了String类型由于跳转筛选页的时候，将该值通过query传参的方式，传了过去，当返回列表页的时候，又通过query传参的方式带了回来。导致 true 变成了 ‘true’解决办法：在当前列表页created中将携带的参数转成布尔类型就可以了th

背景：  登录后，进入首页，后面点击进一个页面，这个页面下的时间线部分样式错位，通过刷新浏览器后恢复正常。思路：样式本身的问题，以为是定位有问题导致的，后面发现不是。页面样式过多，导致的冲突，后面发现不是。scoped的问题解决办法：通过定位样式错乱的类名，全局搜索，发现home页面也有这个类名，并且home页面的style样式下未有scoped<style lang="less" scoped></style> 这样样式就正常了参考文章：vue，页面跳转

就看见

数据状态管理器（vuex）作用：管理数据和状态Vuex有五个核心概念：state, getters, mutations, actions, modules使用（和 vue-router 一样）下载包 vuex npm i vuex引入包 vuexVue 实例上注册 Vue.use(vuex)创造一个仓库实例 const store = new Vuex.Store()把创...

在index.html中head标签中引入<script src="//g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

1、父传子（props down)就是把父组件中的数据拿到子组件中使用在子组件中直接使用 传递过来的数据进行页面渲染父组件要做的事： 导入子组件、注册、在页面使用 有数据 在自己的template里的 标签上绑定属性子组件要做的事： 通过props: [ ] 进行接收 接收到的数据可直接拿到页面中使用（同data中的属性一样 ）//parent.vue&lt...

vuex的映射语法state (mapState)之前的写法computed: { // 获取state中三个值 data () { return this.$store.state.data }, data1 () { return this.$store.state.data1 }, data2 () { retur...