iconfont 图标宽高出问题_vue项目问题总结

这篇文章主要总结了一些在项目中遇到的一些小问题以及对应的解决方案，避免日后踩坑，后续补充中，如果你对这些问题有不同的解答，欢迎评论

1. 输入框使用v-model 绑定值，但是不能改变

// 第一种情况// 初始化data () { return { form: {} }}// 赋值,其中formData为父组件传过来的数据mounted (){ this.form.title = this.formData.title}// 感觉并没有什么问题，但是就是不好用，解决办法就是单独赋值data () { return { form: {}, title: '' }}// 第二种情况在表单中使用时，用:model=""给输入框赋值// 解决方案，改为复制代码

2. 文本内容不对html标签转译

我想要输入下面的内容，但是保存数据后，就变成了aaa

解决办法： 如果是html内容、javascript、xml或其他特殊内容，使用

如果是有空格和回车这样的特殊字符的简单文本 在文本外加

 标签

3. 基础导出功能

SensitiveOperationExport(params).then(res => { if (res.data.code === '200') { // 这里是导出 window.location.href = res.data.data.path this.$message({ message: '导出成功！', type: 'success' }) } else { this.$message.error({message: '导出失败！'}) } })复制代码

4. 使用element table 时，禁用部分复选框

复制代码

官网上有这样一个操作 selectable, 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

5.接口返回的数据为json类型，展示到表格中时，可以这样转换

// 数据结构 content: "{'title': '这是标题'}"this.title = JSON.parse(content).title复制代码

6. 列表中点击图片放大功能

安装viewer，可支持图片的切换，旋转，放大等功能，具体操作文档可百度查看，使用在页面中也非常简单，第一步，全局配置

// main.js 中引入配置Viewer.setDefaults({ 'zIndex': 9999, 'inline': false, // 是否默认展示缩略图 'button': true, // 右上角按钮 'navbar': true, // 底部缩略图 'title': true, // 当前图片标题 'toolbar': true, // 底部工具栏 'tooltip': true, // 显示缩放百分比 'movable': false, // 是否可以移动 'zoomable': true, // 是否可以缩放 'rotatable': true, // 是否可旋转 'scalable': true, // 是否可翻转 'transition': true, // 使用 CSS3 过度 'fullscreen': true, // 播放时是否全屏 'keyboard': true, // 是否支持键盘 'url': 'data-source'})// 页面中使用复制代码

7. 上移和下移操作

一般来说，上移和下移是掉接口操作的，但是也有不掉接口的

/ 上移moveUp (index, row) { if (index > 0) { let upDate = this.tableData[index - 1] this.tableData.splice(index - 1, 1) this.tableData.splice(index, 0, upDate) }},// 下移moveDown (index, row) { if ((index + 1) === this.tableData.length) { console.log('已经是最后一条，不可下移') } else { let downDate = this.tableData[index + 1] this.tableData.splice(index + 1, 1) this.tableData.splice(index, 0, downDate) }}复制代码

8. 表格的全选和反选

// tableData 是表格数据

全选反选

// 全选 toggleSelect (rows) { if (rows) { rows.forEach(row => { this.$refs.form.toggleRowSelection(row, !this.allSelect) }) this.allSelect = !this.allSelect } }, // 反选 reverseSelect (rows) { let checked = this.data if (rows) { rows.map(row => { checked && checked.map(item => { if (row.index !== item.index) { this.$refs.form.toggleRowSelection(item, false) this.$refs.form.toggleRowSelection(row, true) } else { this.$refs.form.toggleRowSelection(row, false) } }) }) if (checked.length === 0) { rows.forEach(row => { this.$refs.form.toggleRowSelection(row, true) }) } } }, // 获取选择的数据 changeFun (val) { this.data = val }复制代码

9. 按住说话功能

这个功能依赖于recorder.js, 上一篇文章已经介绍过用法了，这里就不在细说

10. 表格编辑和保存切换

// editColorShow: '' // 设置敏感操作默认显示编辑// clearEdit: '000' // 替换editColorShow的值编辑保存 // 方法中这样editColor (index, row) { this.editColorShow = index},submitSettingOperation (index, data) { this.editColorShow = this.clearEdit }复制代码

11. 深拷贝

第一种：

function copy(arr) { var newObj = arr.constructor === Array ? [] : {} if (typeof arr === 'object') { for (var i in arr) { if (typeof arr[i] === 'object') { newObj[i] = copy(arr[i]) } newObj[i] = arr[i] } return newObj } else { return }}复制代码

第二种

function copy (obj) { var newObj = obj.constructor === Array ? [] : {} newObj = JSON.parse(JSON.stringify(obj)) return newObj}复制代码

12.表单重置问题

之前重置表单的时候都是this.form.xx='',如果是一两个还好，但是如果表单很多的话就不是很适用了，发现了一个很便捷的操作，只要一行代码就搞定了

this.$refs['infoForm'].resetFields() // 前提是要重置的输入框必须设置prop属性才可以复制代码

13. txt文件导出，有两种方式

第一种 纯前端下载

fetch('https://xxxxx.com/' + item.path).then(res => res.blob().then(blob => { var a = document.createElement('a') var url = window.URL.createObjectURL(blob) var filename = 'text.txt' a.href = url a.download = filename a.click() window.URL.revokeObjectURL(url)}))复制代码

第二种 获取到txt的内容后下载

createDownload (fileName, content) { var blob = new Blob([content]) var link = document.createElement('a') var bodyEle = document.getElementsByTagName('body')[0] link.innerHTML = fileName link.download = fileName link.href = URL.createObjectURL(blob) bodyEle.appendChild(link) link.click() bodyEle.removeChild(link) }复制代码

虽然两种都可以实现下载，但是要保证下载的接口可以在页面中访问到，不会有跨域等问题

14. 导出exel

导出表格这里提供两种方法，第一种依赖第三方，首先下载三个依赖

下载Blob.js和Export2Excel.js 两个文件，引入文件中

// npm install file-saver xlsx script-loader --save// 导出 onExportExcel (formName) { import('@/vendor/Export2Excel').then(excel => {// 表格的title const tHeader = ['订单编号', '姓名', '员工编号', '手机号', '公司']// 对应的字段  const filterVal = ['sn', 'user_name', 'user_no', 'user_phone', 'user_company'] const data = this.formatJson(filterVal, this.dataTable) excel.export_json_to_excel({ header: tHeader, data, filename: `订单列表` }) }) }, formatJson (filterVal, jsonData) { let arr = jsonData.map(v => filterVal.map(j => v[j])) return arr }复制代码

第二种 通过vue-json-excel，具体细节可参考vue-json-excel

// 安装 npm install vue-json-excel，引入// vue中使用data(){ return {// 要导出的字段 json_fields: { 'Complete name': 'name', 'City': 'city', 'Telephone': 'phone.mobile', 'Telephone 2' : { field: 'phone.landline', callback: (value) => { return `Landline Phone - ${value}`; } }, },// 要导出的数据 json_data: [ { 'name': 'Tony Peña', 'city': 'New York', 'country': 'United States', 'birthdate': '1978-03-15', 'phone': { 'mobile': '1-541-754-3010', 'landline': '(541) 754-3010' } }, { 'name': 'Thessaloniki', 'city': 'Athens', 'country': 'Greece', 'birthdate': '1987-11-23', 'phone': { 'mobile': '+1 855 275 5071', 'landline': '(2741) 2621-244' } } ], json_meta: [ [ { 'key': 'charset', 'value': 'utf-8' } ] ]}}复制代码

15.导航栏中使用iconfont，选中不变色问题

先来看看对比

项目是基于element-ui开发的，避免不了使用到图标，所以阿里图库是个很好的选择，这里遇到的问题是左侧导航栏选中后，文字颜色发生变化，但是图标却一直不变，一般来说引用阿里图库有三种方式：Unicode、Font Class 、symbol；我用的是symbol方式引用，具体如下

1.图标选用的是svg格式，选择要使用的图标，下载svg格式

2.创建icon文件夹用于存放图标，创建svgIcon文件夹用于使用图标，使用如下

3.这里导致图标不变色的原因是下载的图标本身就是带有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，可以将图标中fill属性置空，这样就可以解决了