vue web前端開發問題記錄
阿新 • • 發佈：2018-12-25
1、彈出框不能寫在迴圈中，否則每個item都會生成一個彈出框。
2、<img :src="path"> vue中src作為屬性繫結後,使用本地圖片時，path需要用require引入
imageUrl: "http://**********.png"
path: require("./images/**.png")
<img :src="imageUrl?imageUrl:path">
3、減少後臺介面請求，表單資訊提交成功後可以自動更新DOM。
4、父元件給子元件傳參，在子元件中用prop接收後，可以使用watch監聽引數變化。
元件列表在元件的初始化中獲取
5、子元件通過事件向父元件傳遞訊息，父元件沒有收到，因為只能在子元件上監聽該事件
<子元件 @事件=“方法”></子元件>
6、頁面注意解析度適應問題
7、空字串會提示undefined，注意初始化格式為[{}]的情況
8、圖片重疊，顯示最上面圖片方法：position為相同位置，上層圖片增加圖層（放在<div>中並設定為半透明opacity：50%）
9、vue網頁開發，在<el-row>上監聽點選事件需要@click.native，另外還有@scroll.native等等
10、實現滾動條滾動到底觸發資料更新方法：
@scroll="scrollMethod" data() { pageData: { currentPage: 1, pageSize: 10 }, isLoading: true, rowCount: 16 } scrollMethod() { let tpScrollTop = document.getElementById('listPaper').scrollTop let scrollHeight = document.getElementById('listPaper').scrollHeight let clientHeight = document.getElementById('listPaper').clientHeight let height = tpScrollTop + clientHeight if(height === scrollHeight && this.isLoading === false){ this.isLoading = true if((this.pageData.pageNum*this.rowCount) >= this.total){ this.$message.info("沒有更多資料了") return false } this.pageData.currentPage ++ this.getList() } }
data() {
pageData: {
currentPage: 1,
pageSize: 10
},
isLoading: true,
rowCount: 16
}
scrollMethod() {
let tpScrollTop = document.getElementById('listPaper').scrollTop let scrollHeight = document.getElementById('listPaper').scrollHeight let clientHeight = document.getElementById('listPaper').clientHeight let height = tpScrollTop + clientHeight if(height === scrollHeight && this.isLoading === false){ this.isLoading = true if((this.pageData.pageNum*this.rowCount) >= this.total){ this.$message.info("沒有更多資料了") return false } this.pageData.currentPage ++ this.getList() }
}