vue web前端开发问题记录

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()
}

}