ectron仿制qq(3) 主界面制作(2)

摘要：接着上一个的制作今天少写点代码吧首页增加如下代码给增加自适应高度首页这里解释下顶部的高度底部的高度写法很多不过达到效果就行了在窗口拉伸的时候可以自适应高度模板代码样式会话列表界面模板代码老李最近好吗样式代码

接着上一个的制作!

今天少写点代码吧!
首页增加如下代码 给main 增加自适应高度

data(){
mainHeight: parseInt(document.documentElement.clientHeight) - 140 - 40,
}

mounted() {
      window.onresize = () => {
       this.mainHeight = parseInt(document.documentElement.clientHeight) - 140 - 40;
     }
},

这里解释下 -顶部header的高度(140) 底部的高度(40) 写法很多 不过达到效果就行了 在窗口拉伸的时候可以自适应高度

    main
            position: fixed
            overflow-y: hidden
    width: 100%

 

            

                

                    

                    

                        
Hello 老李
                        
最近好吗
                    
                
            
        

        main
            position: fixed
            overflow-y: hidden
            width: 100%
            li
                height: 60px
                border-bottom: 1px solid #CCC
                display: flex
                cursor: pointer
                &:hover
                    background-color: #B8CBD5
                .face
                    width: 40px
                    padding-top: 10px
                    height: 40px
                    padding-left: 10px
                    img
                        border-radius: 50%
                        width: 100%
                        height: 100%
                .info
                    padding-top: 8px
                    padding-left: 10px
                    p.nickname
                        color: #FF0000
                        font-size: 15px
                    .msg
                        font-size: 12px
                        padding-top: 3px

::-webkit-scrollbar { /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    background: rgba(20, 20, 50, 0.6);
}

::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}

以上模板代码中有一个

 :class="{showScroll:isShowScroll}" @mouseenter="showScrolls"
              @mouseleave="hideScroll"

我们只需要在data 中定义一个 isShowScroll:fase

之后再创建一个showScroll 类

.showScroll {
    overflow-y: scroll !important
}

hideScroll() {
    this.isShowScroll = false
 },
showScroll() {
   this.isShowScroll = true
},

这样就解决了滚动条显示隐藏

.menu
  width: 180px
  background-color: rgba(255,255,255,0.8)
  border-radius: 4px
  box-shadow: #FFFFFF 0 0 10px
  position: absolute
  top: 150px
  left: 100px
  font-family: "微软雅黑"
  font-size: 14px
  padding: 10px 0
  li
    list-style: none
    height: 30px
    line-height: 30px
    cursor: pointer
    padding-left: 30px
    position: relative
    &:hover
      background-color: #E9EBEC
    i
      position: absolute
      margin-right: 10px
      left: 10px
    &.line
      border-bottom: 1px solid #E8EAEB

在main 中增加 contextmenu 将点击的坐标传到menu组件中 之后显示就行了

    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            },
            position:{
                type: Object
            }
        }
    }

对于坐标的计算目前有一定的小问题 之后再解决 天色很晚了