1. 踩坑1 · vue.js

[TOC] ### 1. 表格中插槽的使用 ~~~ <el-table :data="allDataSource" style="width: 100%" height="100%" stripe border> <el-table-column label="時間" min-width="20%"> <template slot-scope="scope"> <p>修改時間：{{ scope.row.lastTime }}</p> <p>注冊日期：{{ scope.row.createTime }}</p>  </template> </el-table> //若不使用插槽 <el-table-column prop="createTime" label="時間" min-width="20%"> ~~~ ### 2. 修改餓了么ui中的默認樣式 ~~~ 1. 在控制臺找到元素對應的類名 2. 復制類名在代碼中進行修改樣式（使用less進行css樣式編寫，使用嵌套，能夠優化渲染效率） 3. 復制出來的類名是所有相同元素的（全局樣式）。解決方式：通過div將元素包裹，使用/deep/來實現定制化樣式 ~~~ ### 3. 在component中定義了很多組件中頁面中使用組件一個一個引用很麻煩 #### 解決方式： 1. 在component中新建一個index.js文件 2. 文件內容： ~~~ import Vue from 'vue' // 檢索目錄下的模塊 const req = require.context('.', true, /\.vue$/) req.keys().forEach(fileName => { // require模塊 const componentConfig = req(fileName) const name = fileName.name || fileName .replace(/^\.\/.*\//, '') .replace(/\.vue$/, '') .toLowerCase() Vue.component(name, componentConfig.default || componentConfig) }) ~~~ 3. 使用模板及傳遞參數（在模板中定義參數類型，值再要使用的頁面傳遞） ~~~  <dme-dir-manage dialogTitle="模型目錄管理" :typeData="modelTypes" :visibleType="dialogTypeVisible" :handleAdd="addModelType" :handleDelete="deleteModelType" :handleEdit="updateModelType" :handleRefresh="refreshType" @handle-close="handleCloseType" ></dme-dir-manage> ~~~ 模板文件如下： ~~~  <template> <div class="type-container">  <el-dialog :title="dialogTitle" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" id="type-dialog" width="400px" > <div class="dialog-type-body"> <div class="close-dialog"><span class="el-icon-close" @click="handleClose"></span></div> <div class="dialog-body-content" ref="dialogBody"> <el-tree class="tree-type" :data="typeList" :props="defaultProps" :default-expand-all="true" @node-contextmenu="handleRightClick" @node-click="handleLeftClick" > <span class="custom-tree-node" slot-scope="{ node }"> <span> <i class="iconfont icon-file"></i> {{ node.label }} </span> </span> </el-tree> <div ref="popover" class="popover-container"> <el-popover placement="right" width="150px" trigger="manual" v-model="popoverVisible"> <div @click="addType"><i class="iconfont icon-add"></i>添加</div> <div @click="deleteType"><i class="iconfont icon-delete"></i>刪除</div> <div @click="editType"><i class="iconfont icon-edit"></i>編輯</div> </el-popover> </div> <div class="tip-dialog-container"> <el-dialog title="提示" class="popover-tip-dialog" :visible.sync="tipVisible" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true" width="260px" > <div class="dialog-choose-body">  <div class="delete-single" v-if="oper === 'delete'"><p>確認刪除？</p></div>  <div class="add-type" v-if="oper === 'add'"> <span>目錄名稱：</span> <el-input type="text" size="mini" v-model="addTypeName"></el-input> </div>  <div class="edit-type" v-if="oper === 'edit'"> 目錄名稱： <el-input type="text" size="mini" v-model="updateTypeName"></el-input> </div> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="tipVisible = false">取消</el-button> <el-button size="small" type="primary" @click="confirm">確定</el-button> </span> </div> </el-dialog> </div> </div> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleClose">確定</el-button> </span> </el-dialog> </div> </template> <script> export default { name: 'dme-dir-manage', props: { // type 框名稱 dialogTitle: String, // type 數據 typeData: Array, // 控制 type 框 visibleType: Boolean, // 添加接口 handleAdd: Function, // 刪除接口 handleDelete: Function, // 編輯接口 handleEdit: Function, // 刷新類型接口 handleRefresh: Function }, inheritAttrs: false, data() { return { // type 數據 typeList: null, visible: false, // 目錄彈窗是否彈出 popoverVisible: false, // 右鍵菜單 tipVisible: false, // 提示框 oper: null, // 操作類型 currentNodeData: null, // 當前操作節點數據 addTypeName: null, // 添加模型類型 updateTypeName: null, // 更行模型類型 // 數據默認字段 defaultProps: { label: 'name', children: 'children' } } }, created() { this.typeList = this.typeData }, watch: { typeData(newVal) { this.typeList = newVal }, visibleType(newVal) { this.visible = newVal } }, mounted() {}, methods: { // 左鍵關閉popover handleLeftClick() { this.popoverVisible = false }, // 右鍵控制popover位置 handleRightClick(event, data) { this.popoverVisible = true this.currentNodeData = data const poTop = event.clientY - this.getElementTop(this.$refs.dialogBody) const poLeft = event.clientX - this.getElementLeft(this.$refs.dialogBody) this.$refs.popover.style.left = `${poLeft}px` this.$refs.popover.style.top = `${poTop}px` }, // 獲取容器的絕對位置Left getElementLeft(element) { let actualLeft = element.offsetLeft let current = element.offsetParent while (current !== null) { actualLeft += current.offsetLeft current = current.offsetParent } return actualLeft }, // 獲取容器的絕對位置Top getElementTop(element) { let actualTop = element.offsetTop let current = element.offsetParent while (current !== null) { actualTop += current.offsetTop current = current.offsetParent } return actualTop }, // 彈框頂端關閉按鈕 handleClose() { this.$emit('handle-close') }, // 添加類型 addType() { this.tipVisible = true this.oper = 'add' }, // 刪除類型 deleteType() { this.tipVisible = true this.oper = 'delete' }, // 編輯類型 editType() { this.tipVisible = true this.oper = 'edit' }, // 確認操作 confirm() { let data = null // 取得數據 switch (this.oper) { case 'add': if (!this.addTypeName) { break } console.log(data) data = { parentId: this.currentNodeData.id, name: this.addTypeName, previousId: this.currentNodeData.id, nextId: this.currentNodeData.id + 1 } this.handleAdd(data).then(() => { this.$message({ message: '添加類型成功', type: 'success' }) this.handleRefresh() }) break case 'delete': data = this.currentNodeData.sysCode console.log(data) this.handleDelete(data).then(() => { this.$message({ message: '刪除類型成功', type: 'success' }) this.handleRefresh() }) break case 'edit': if (!this.updateTypeName) { break } data = { sysCode: this.currentNodeData.sysCode, newName: this.updateTypeName } console.log(data) this.handleEdit(data).then(() => { this.$message({ message: '修改名稱成功', type: 'success' }) this.handleRefresh() }) break default: break } this.tipVisible = false this.popoverVisible = false // 順便關閉右鍵菜單 } } } </script> <style lang="scss" scoped> .type-container { #type-dialog { /deep/ .el-dialog { .el-dialog__header { background: #0085f6; span { color: #ffffff; } } .el-dialog__body { padding: 5px 0px; .dialog-type-body { .close-dialog { position: absolute; top: 5px; right: 5px; &:hover { color: #ffffff; } span { font-size: x-large; } } .dialog-body-content { position: relative; .el-tree.tree-type { height: 400px; overflow-y: scroll; .custom-tree-node { span { &:hover { color: white; background: #0085f6; } i { color: #fbd076; } } } } .popover-container { position: absolute; .el-popover { div { padding: 5px 10px; i { margin-right: 10px; } &:hover { color: #ffffff; background: #0085f6; cursor: pointer; } } } } } } } .el-dialog__footer { padding: 0px; .dialog-footer { display: inline-block; width: 100%; .el-button { width: 100%; margin: 0; border-radius: 0; } } } } } } </style> ~~~ ### 4. input輸入框中通過回車觸發事件 ~~~ <el-input placeholder="請輸入內容" suffix-icon="el-icon-search" v-model="input1" @keyup.enter.native="searchMode()" > </el-input> ~~~ ### 5. 點擊顯示與隱藏性能優化（vue中操作dom節點） ~~~ 1. 通過給父元素一個min-height 2. 當點擊時使height：auto實現顯示隱藏 <div class="more" @click="handleMore(item.moreCode)">顯示更多</div> handleMore(e) { // console.log(e) // console.log('this.modelsAll',this.modelsAll) const contentHeight = document.getElementsByClassName('page-cover-content') const moreText = document.getElementsByClassName('more') if (moreText.length !== 1) { if (moreText[e].innerHTML === '顯示更多') { contentHeight[e].style.cssText = 'height:auto' moreText[e].innerHTML = '收起更多' } else { contentHeight[e].style.cssText = 'height:236px' moreText[e].innerHTML = '顯示更多' } } if (moreText.length === 1) { if (moreText[0].innerHTML === '顯示更多') { contentHeight[0].style.cssText = 'height:auto' moreText[0].innerHTML = '收起更多' } else { contentHeight[0].style.cssText = 'height:236px' moreText[0].innerHTML = '顯示更多' } } }, ~~~ ### 6. 表格中實現選框 ### 7. 表格中實現排序 ### 8. 原生布局實現一排擺放幾個div（bootstarp實現原理） ~~~ 1. 最外層container容器使用margin-right: auto;margin-left: auto;實現自適應實現等間距排列 2. row行使用偽元素清楚浮動 3. 子元素通過%實現寬度，然后通過浮動實現布局 4. 最終實現響應式 5. 在實際開發中不使用原生的實現方案，過于繁瑣，開發實現方案： 5.1 使用bootstrap（用的少） 5.2 使用前端UI庫中的layout布局組件實現響應式 ~~~ ### 9.響應式布局比較 ~~~ 1. flex可實現響應式，缺點是多出來的元素排兩邊有點難看 2. grid可以實現響應式，缺點在元素個數未知的情況下不能定義行數自適應 3. 使用前端UI庫能很好的實現 ~~~ ### 10. 餓了么中tree結構問題（實現，自定義） ~~~ <el-tree ref="modelTree" //每個節點對應key唯一 node-key="id" //默認展開的數節點的key值可以是變量（數組），然后在下面代碼中添加值 :default-expanded-keys="[111111]" highlight-current //要渲染的數結構數據 :data="allDataSourceType" //修改樹結構中默認的值（重點，項目中的數據不能跟默認的相同，通過這個屬性實現數據名的替換）（defaultProps: {label: 'name',children: 'children' }, // el-tree組件執行數據名） :props="defaultProps" //默認是否全部展開 :default-expand-all="false" :render-after-expand="false" //節點點擊事件 @node-click="onClickNodes" > //tree中默認的是將data中的數據進行顯示，如果要定制化則使用卡槽實現定制化：使用方法如下 <span class="custom-tree-node" slot-scope="{ node }"> <span> <i :class="node.icon"></i> {{ node.label }} </span> </span> </el-tree> ~~~