vue項目問題總結

篇文章主要總結了一些在項目中遇到的一些小問題以及對應的解決方案，避免日后踩坑，后續補充中，如果你對這些問題有不同的解答，歡迎評論

1. 輸入框使用v-model 綁定值，但是不能改變

// 第一種情況
<el-input v-model="form.title"></el-input>
// 初始化
data () {
 return {
 form: {}
 }
}
// 賦值,其中formData為父組件傳過來的數據
mounted (){
 this.form.title = this.formData.title
}
// 感覺并沒有什么問題，但是就是不好用，解決辦法就是單獨賦值
data () {
 return {
 form: {},
 title: ''
 }
}
// 第二種情況
在表單中使用時，用:model=""給輸入框賦值
<el-form :model="formData">
 <el-form-item>
 <el-input placeholder="請輸入" :model="formData.value" size="small"/>
 </el-form-item>
</el-form>
// 解決方案，改為
<el-input placeholder="請輸入" v-model="formData.value" size="small"/>
復制代碼

2. 文本內容不對html標簽轉譯

我想要輸入下面的內容，但是保存數據后，就變成了aaa

解決辦法：如果是html內容、javascript、xml或其他特殊內容，使用<xmp></xmp>
如果是有空格和回車這樣的特殊字符的簡單文本在文本外加<pre></pre> 標簽

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 時，禁用部分復選框

<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column>
復制代碼

官網上有這樣一個操作 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'
})
// 頁面中使用
<viewer>
<img :src="scope.row.content "/>
</viewer>
復制代碼

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. 表格的全選和反選

<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table>
// tableData 是表格數據
<div>
 <el-button @click="toggleSelect(tableData)">全選</el-button>
 <el-button @click="reverseSelect(tableData)">反選</el-button>
</div>
// 全選
 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的值
<el-table-column label="操作" align="center"
 width="200">
 <template slot-scope="scope">
 <el-button size="small" v-if="editColorShow !== scope.$index" type="primary" @click="editColor(scope.$index, scope.row)">編輯</el-button>
 <el-button size="small" v-if="editColorShow === scope.$index" type="primary" @click="submitSettingOperation(scope.$index, scope.row)">保存</el-button>
 </template>
 </el-table-column>
 // 方法中這樣
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中使用
<download-excel
 class = "btn btn-default"
 :data = "json_data"
 :fields = "json_fields"
 worksheet = "My Worksheet"
 name = "filename.xls">
</download-excel>
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屬性置空，這樣就可以解決了

融界2024年3月30日消息，據國家知識產權局公告，上海聯影醫療科技股份有限公司申請一項名為“網頁轉譯方法、裝置、應用商店系統、設備和介質“，公開號CN117786256A，申請日期為2023年12月。

專利摘要顯示，本申請涉及一種網頁轉譯方法、裝置、應用商店系統、設備和介質，包括：獲取html頁面數據；其中，html頁面數據包含文本節點的樣式標簽、圖片存儲路徑、文本和圖片的分組信息；根據文本和圖片的分組信息，圖形在用戶界面的窗體中生成容器控件；根據文本節點的樣式標簽，生成文本樣式列表，并將文本樣式列表和相應文本加入對應容器控件；根據圖片存儲路徑獲取圖片，并將圖片加入對應容器控件；執行容器控件，并在圖形用戶界面的窗體中以WPF格式呈現容器控件的執行結果。通過在圖形用戶界面的窗體生成容器控件，使WPF端中文本和圖像的位置準確且格式一致，解決了網頁端內容轉換為WPF格式后，WPF端呈現內容還原度低的問題。

本文源自金融界

何在前端JavaScript開發中使用ES新特性？babel是什么？.babelrc文件又是干什么用的？文件中的presets和plugins又是什么鬼？本文將解答上述疑問。

babel是什么

babel是一個JavaScript編譯器

為什么要babel

ES規范今年來更新較為頻繁，近幾個版本推出很多新的特性，而用戶的瀏覽器版本眾多，很多用戶用的是老版本瀏覽器，老版本瀏覽器不支持ES新特（nodejs也存在同樣問題，參見），babel就是用來讓你可以使用ES新特性，又可以使代碼運行在老版本瀏覽器上。

Babel 通過語法轉換器支持最新版本的 JavaScript 。語法轉換插件允許你立刻使用新語法，無需等待瀏覽器支持。

babel工作流程簡介

解析-->轉換-->生成代碼

解析生成AST語法樹
根據插件對AST樹進行遍歷轉譯并得到新的AST樹（新特性轉譯）
生成代碼

babel使用

1.在構建工具中（以webpack為例）使用：

// 在webpack.config.js中增加babel-loader，如下所示
module: {
 rules: [
 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

2.在babel-cli中使用

npm install -g babel-cli
babel src -d lib // 將src中的代碼轉譯并將生成的文件放到lib目錄下
復制代碼

babel的配置

babel的配置是要告訴babel工具使用哪些插件轉譯代碼，主要作用于babel工作的第二階段（轉譯）

babel工作前會從.babelrc文件讀取配置，根據配置對JavaScript進行轉譯。

下面以.babelrc文件的配置方式為例介紹，配置項主要有兩個，presets，plugins；

{
 "presets": ["env"],
 "plugins": ["babel-plugin-transform-object-assign"]
}

plugins配置具體插件，而對于ES新特性需要配置的插件多達幾十個，如果一一配置就太麻煩來，于是babel給我們提供一些插件集，插件集配置在presets配置項中，目前官方提供的插件集有：

env
react
flow

其中 env（babel-preset-env）相當于 es2015 ，es2016 ，es2017 及最新版本。

4. stage-X

Stage-x preset 中的任何轉換都是對未被批準為 JavaScript 版本一部分的語言的變化(如 es6 / es2015 )，其分為以下5各階段：

Stage 0 - 稻草人: 只是一個想法，可能是 babel 插件。
Stage 1 - 提案: 初步嘗試。
Stage 2 - 初稿: 完成初步規范。
Stage 3 - 候選: 完成規范和瀏覽器初步實現。
Stage 4 - 完成: 將被添加到下一年度發布。

上述配置的插件和插件集也是需要通過npm安裝的

npm install babel-preset-env --save-dev
npm install babel-plugin-transform-object-assign --save-dev

babel presets(轉換插件集)配置

"presets": ["env"] // 默認將運行所有transfrom和集成所有的polyfill

也可以僅僅配置項目所支持瀏覽器所需的polyfill和transform。只編譯所需的代碼會使你的代碼包更小。如下所示，該轉換只支持每個瀏覽器最后兩個版本和safari大于等于7的版本所需的polyfill和代碼轉換。

在線咨詢

上一篇：誰的鍋？頻繁殺后臺惹怒VLC播放器，華為多款新機型被列入黑名單
下一篇：HTML5基礎入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。