仿dy网页版的header（vue组件）

最新推荐文章于 2024-09-01 08:49:03 发布

我是梦磊OL

最新推荐文章于 2024-09-01 08:49:03 发布

阅读量161

点赞数

分类专栏： vue自己做的组件文章标签： vue.js 数学建模前端

本文链接：https://blog.csdn.net/m0_68094390/article/details/130902029

版权

vue自己做的组件专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1，截图

homeWl.vue截图

在这里插入图片描述

personCenter.vue截图

在这里插入图片描述

chatList.vue截图

在这里插入图片描述

2,源码

链接：https://pan.baidu.com/s/1fEo3p5NyBxFZkk4FdbdQyQ?pwd=twg9
提取码：twg9
–来自百度网盘超级会员V4的分享

3，视频演示

【仿抖音header】 https://www.bilibili.com/video/BV1cu411s7oG/?share_source=copy_web&vd_source=58607fc67d165b8caff1ed8bfcefd35b

4，代码

在这里插入图片描述

chatList.vue

<template>
  <div class="wrapper" :style="{'--width':width,'--height':height,'--oneofonerow':oneofonerow,'--oneoftworow':oneoftworow,
'--oneofoneofonecol':oneofoneofonecol,'--oneofoneoftwocol':oneofoneoftwocol,'--oneofoneoftwocolofonerow':oneofoneoftwocolofonerow,
'--oneofoneoftwocoloftworow':oneofoneoftwocoloftworow}">
    <div class="one">
      <div class="oneofonerow">
        <div class="oneofoneofonecol">
          <el-image
              fit="cover"
              style="border-radius: 50%"
              :style="{'width':oneofoneofonecol,'height':oneofoneofonecol}"
              :src="url1"
              :preview-src-list="[url1]">
          </el-image>
        </div>
        <div class="oneofoneoftwocol">
          <div class="oneofoneoftwocolofonerow" :style="{'font-size':fontsize}" style="padding-left: 5px;padding-top: 5px">
            {{title1}}
          </div>
          <div class="oneofoneoftwocoloftworow" :style="{'font-size':fontsize1}" style="padding-left: 5px;padding-top: 5px">
            {{subtitle1}}
          </div>
        </div>
      </div>

    </div>



  </div>
</template>

<script>
export default {
  name: "chatList",
  data(){
    return{
      //  公用列width
      width:'',
      //公用行的height(共有4行，每行的height都一样)
      height:'',
      //第一行中的第一行的height
      oneofonerow:'',
      //第一行中的第二行的height
      oneoftworow:'',
      //第一行中的第一行中的第一列的width
      oneofoneofonecol:'',
      //第一行中的第一行中的第二列的width
      oneofoneoftwocol:'',
      /*  第一行中的第一行中的第二列的第一行的height*/
      oneofoneoftwocolofonerow:'',
      /*  第一行中的第一行中的第二列的第一行的字体大小*/
      fontsize:'',
      /*  第一行中的第一行中的第二列的第二行的heigh*/
      oneofoneoftwocoloftworow:'',
      /*  第一行中的第一行中的第二列的第二行的字体大小*/
      fontsize1:'',
      url1:'http://127.0.0.1:3000/image/44.jpg',
      title1:'rapper',
      subtitle1:'我买了一张飞机票',
      url2:'http://127.0.0.1:3000/image/11.jpg',
      title2:'白菜',
      subtitle2:'我不会留你，我知道你有你的理由；',
      url3:'http://127.0.0.1:3000/image/33.png',
      title3:'山茶花',
      subtitle3:'我会停住脚步，凝视你远去的背影',
      url4:'http://127.0.0.1:3000/image/55.jpg',
      title4:'玫瑰',
      subtitle4:'流水冻了，我在河畔等你。\n' +
          '\n',

    }
  },

  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      //公用列width
      this.width = parseInt(windowwidth/6)+'px'
      console.log("chatlist的width",this.width)
      //第一行中的第一行中的第一列的width
      this.oneofoneofonecol = parseInt(windowwidth/9/6)+'px'
      //第一行中的第一行中的第二列的width
      this.oneofoneoftwocol = parseInt(windowwidth/9/6*3)+'px'

    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      this.height = parseInt(windowheight/16)+'px'
      //第一行中的第一行的height
      this.oneofonerow = parseInt(windowheight/17/5*4)+'px'
      //第一行中的第二行的height
      this.oneoftworow = parseInt(windowheight/17/5)+'px'
      /*  第一行中的第一行中的第二列的第一行的height*/
      this.oneofoneoftwocolofonerow = parseInt(windowheight/14/5*4/4*2)+'px'
      /*  第一行中的第一行中的第二列的第一行的字体大小*/
      this.fontsize = parseInt(windowheight/14/5*4/8*2)+'px'
      /*  第一行中的第一行中的第二列的第二行的heigh*/
      this.oneofoneoftwocoloftworow = parseInt(windowheight/15/5*4/4)+'px'
      /*  第一行中的第一行中的第二列的第二行的字体大小*/
      this.fontsize1 = parseInt(windowheight/15/6*4/4)+'px'
    }
  },

}
</script>

<style scoped>
:root{
  /*  公用列width*/
  --width:'';
  /*  公用行height(共有4行，每行的高度一样)*/
  --height:'';
  /*  第一行中的第一行的height*/
  --oneofonerow:'';
  /*  第一行中的第二行的height*/
  --oneoftworow:'';
  /*  第一行中的第一行中的第一列的width*/
  --oneofoneofonecol:'';
  /*  第一行中的第一行中的第二列的width*/
  --oneofoneoftwocol:'';
  /*  第一行中的第一行中的第二列的第一行的height*/
  --oneofoneoftwocolofonerow:'' ;
  /*  第一行中的第一行中的第二列的第二行的heigh*/
  --oneofoneoftwocoloftworow:'';
}
.wrapper{
  display: grid;

  grid-template-columns: var(--width);
  grid-template-rows: var(--height) var(--height) var(--height) var(--height);

}
.one{
  padding-top: 10px;
  display: grid;
  grid-template-rows: var(--oneofonerow) var(--oneoftworow);


}
.one:hover{
  background-color: rgb(237,237,237);
}
.oneofonerow{
  display: grid;
  grid-template-columns: var(--oneofoneofonecol) var(--oneofoneoftwocol);

}
.oneofoneofonecol{
  padding-top: 10px;
}
.oneofoneoftwocol{
  display: grid;
  grid-template-rows: var(--oneofoneoftwocolofonerow) var(--oneofoneoftwocoloftworow);

}
.oneofoneoftwocolofonerow{
    color: #222222;
}
.oneofoneoftwocoloftworow{
  color: gray;
}

</style>

headerWl.vue

<template>
<div class="wrapper" :style="{'--width':width,'--onerowofonecol':onerowofonecol,
'--onerowofonecolpadding':onerowofonecolpadding,'--onerowoffourcolpadding':onerowoffourcolpadding}">

  <div class="one">
<!--    第一行的第一列-->
    <div class="onerowofonecol">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon-yichang"></use>
        </svg>
      </div>
      <div>
        <el-popover
            placement="top-end"
            title=""
            width="150"
            trigger="hover"
        >
          <div class="hovertxt">
            <div class="hovertxtofonerow">点赞通知</div>
            <div class="hovertxtoftworow">信息通知</div>
            <div class="hovertxtofthreerow">评论通知</div>
          </div>
          <div slot="reference">通知</div>
        </el-popover>
      </div>
    </div>
<!--第一行的第二列-->
    <div class="onerowoftwocol">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sixin"></use>
        </svg>
      </div>

      <div>
        <el-popover
            placement="top-end"
            title=""
            width="150"
            trigger="hover"
        >
          <div>
            <chat-list></chat-list>
            <chat-list></chat-list>
          </div>
          <div slot="reference">私信</div>
        </el-popover>
      </div>
    </div>
<!--第一行的第三列-->
    <div class="onerowofthreecol">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shipin"></use>
        </svg>
      </div>
      <div>
        <el-popover
            placement="top-end"
            title=""
            width="150"
            trigger="hover"
           >
          <div class="hovertxt">
            <div class="hovertxtofonerow">发布视频</div>
            <div class="hovertxtoftworow">视频管理</div>
            <div class="hovertxtofthreerow">作品数据</div>
          </div>
          <div slot="reference">投稿</div>
        </el-popover>

      </div>
    </div>
<!--第一行的第四列-->
    <div class="onerowoffourcol">


      <el-popover
          placement="bottom-end"
          title=""
          width="340"
          trigger="hover"
      >
        <div>
          <person-center></person-center>
        </div>
        <div slot="reference">
          <el-image
              style="border-radius: 50%"
              :style="{'width':onerowofonecol,'height':onerowofonecol}"
              fit="cover"
              :src="url"
              :preview-src-list="[url]">
          </el-image>
        </div>
      </el-popover>
    </div>
  </div>

</div>
</template>

<script>
import "@/icon/iconfont"

import ChatList from "@/components/chatList/chatList";
import PersonCenter from "@/components/personcenter/personCenter";


export default {
  name: "headerWl",
  components: {PersonCenter, ChatList},
  data(){
    return{
      url:'http://127.0.0.1:3000/image/44.jpg',
    //  公用列的width
      width:'',
      //第一行的第一列的width
      onerowofonecol:'',
    /*  第一行的第一列的paddingtop(其他比如第二列，第三列都用这个paddingtop)*/
    onerowofonecolpadding:'',
    /*  第一行的第四列的paddingtop*/
    onerowoffourcolpadding:'',
    }
  },
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      //公用列的width
      this.width = parseInt(windowwidth/6)+'px'
      //第一行的第一列的width
      this.onerowofonecol = parseInt(windowwidth/7/4)+'px'
      /*  第一行的第一列的paddingtop(其他比如第二列，第三列都用这个paddingtop)*/
      this.onerowofonecolpadding = parseInt(windowwidth/7/4/4)+'px'
      /*  第一行的第四列的paddingtop*/
      this.onerowoffourcolpadding = parseInt(windowwidth/7/5/6)+'px'
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      console.log(windowheight)

    }
  },

}
</script>

<style scoped>
:root{
/*  公用列width*/
  --width:'';
/*第一行的第一列的col*/
  --onerowofonecol:'';
  /*  第一行的第一列的paddingtop(其他比如第二列，第三列都用这个paddingtop)*/
  --onerowofonecolpadding:'';
  /*  第一行的第四列的paddingtop*/
  --onerowoffourcolpadding:'';
}
.wrapper{
  display: flex;
  font-weight: bold;
  width: var(--width);

}
/*第一行*/
.one{
  width: var(--width);
  display: flex;

}
/*第一行的第一列*/
.onerowofonecol{
  display: flex;
  flex-direction: column;
  padding-top: var(--onerowofonecolpadding);
  background-color: cornflowerblue;
  flex-grow: 1;
}
/*第一行的第二列*/
.onerowoftwocol{
  padding-top: var(--onerowofonecolpadding);
  background-color: cornflowerblue;
  flex-grow: 1;
}
/*第一行的第三列*/
.onerowofthreecol{
  padding-top: var(--onerowofonecolpadding);
  flex-grow: 1;
  background-color: cornflowerblue;
}
/*第一行的第四列*/
.onerowoffourcol{
  padding-top: var(--onerowoffourcolpadding);
  flex-grow: 1;
  background-color: cornflowerblue;
}

.icon {
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  fill: currentColor;

  transition: transform 0.3s ease;
}
.icon:hover{
  transform: scale(1.3);
}

.hovertxt{
  padding: 0;
}
.hovertxtofonerow{
  margin: 8px;
}
.hovertxtofonerow:hover{
  background-color: rgb(237, 237, 237);
}

.hovertxtoftworow{
  margin: 8px;
}
.hovertxtoftworow:hover{
  background-color: rgb(237, 237, 237);
}
.hovertxtofthreerow{
  margin: 8px;
}
.hovertxtofthreerow:hover{
  background-color: rgb(237, 237, 237);
}

/*chatlist组件 没有hover的时候*/
.chatlisthover{
  display: none;
}
.chathover{}
/*chatlist组件 hover的时候*/
.chathover:hover .chatlisthover{
  display: block;
}
</style>

personCenter.vue

<template>
  <div class="wrapper" :style="{'--width':width,'--twopaddingleft':twopaddingleft}">
    <!--  第一行-->
    <div class="one">
      <div>ikun</div>
      <div class="oneoftwocol" :style="{'width':oneoftwocolwidth}"></div>
      <div>保存登录</div>
      <div>
        <el-switch
            v-model="value"
        >
        </el-switch>
      </div>

    </div>

    <!--  第二行-->
    <div class="two">
      <!--    第二行的第一列-->
      <div class="twoofonecol">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shipin"></use>
        </svg>
        <div style="padding-left: 10px">11</div>
        <div >我的作品</div>
      </div>
      <!--    第二行的第二列-->
      <div class="twooftwocol">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-daochu1024-23"></use>
        </svg>
        <div style="padding-left: 10px">11</div>
        <div >我的作品</div>
      </div>
      <!--    第二行的第三列-->
      <div class="twoofthreecol">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiaxingshoucang"></use>
        </svg>
        <div style="padding-left: 15px">11</div>
        <div >我的作品</div>
      </div>
      <!--    第二行的第四列-->
      <div class="twooffourcol">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shijian"></use>
        </svg>
        <div style="padding-left: 15px">11</div>
        <div >我的作品</div>
      </div>
    </div>

    <!--  第三行-->
    <div class="three">
      <!--    第三行的第一列-->
      <div class="threeofonecol">
        个人主页
      </div>

      <!--    第三行的第二列-->
      <div class="threeoftwocol">
        抖币充值
      </div>

      <!--    第三行的第三列-->
      <div class="threeofthreecol">
        直播伴侣
      </div>

      <!--    第三行的第四列-->
      <div class="threeoffourcol">
        退出登录
      </div>


    </div>
  </div>
</template>

<script>

export default {
  name: "personCenter",
  data(){
    return{
      width:'',
      value:'',
      //  第一行第二列的width
      oneoftwocolwidth:'',
      /*  第二行的paddingleft*/
      twopaddingleft:'',
      /*  第二行的paddingtop*/
      twopaddingtop:''

    }
  },
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      this.width = parseInt(windowwidth/2/3)+'px'
      //  第一行的第二列的width
      this.oneoftwocolwidth = parseInt(windowwidth/13)+'px'
      /*  第二行的paddingleft*/
      this.twopaddingleft = parseInt(windowwidth/13/12)+'px'
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      console.log(windowheight)

    }
  },

}
</script>

<style scoped>
:root{
  /*  共用列width*/
  --width:'';
  /*  第二行的paddingleft*/
  --twopaddingleft:'';
  /*  第二行的paddingtop*/
  --twopaddingtop:'';
}
.wrapper{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: var(--width);
  background-color: rgb(237, 237, 237);
  font-weight: 550;
}
.one{
  display: flex;
  padding: 10px;
  gap: 5px;

}
/*第一行第二列*/
.oneoftwocol{

}

.two{

  display: flex;

  padding-left: var(--twopaddingleft);
  padding-top: var(--twopaddingtop);
}
.twoofonecol{

  flex-grow: 1;
}
.twooftwocol{
  flex-grow: 1;
}
.twoofthreecol{
  flex-grow: 1;
}
.twooffourcol{
  flex-grow: 1;
}

.three{
  padding: 15px;
  display: flex;

}
.threeofonecol{
  flex-grow: 1;
}
.threeoftwocol{
  flex-grow: 1;
}
.threeofthreecol{
  flex-grow: 1;
}
.threeoffourcol{
  flex-grow: 1;
}


.icon {
  padding-left: 5px;
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  transition: transform 0.3s ease;

}

.icon:hover{
  transform: scale(1.5);
}
</style>