vue自己做的组件（仿评论区）

1，效果

2，源码
链接：https://pan.baidu.com/s/1UM4vJv9wCBnB2PaWGIxf8Q?pwd=qkaa
提取码：qkaa
–来自百度网盘超级会员V4的分享
3，代码
目录

discuss.vue

<template>
<div class="wrapper" :style="{'--onepartheight':onepartheight,'--onepartwidth':onepartwidth,'--twopartheight':twopartheight,
'--twopartwidth':twopartwidth,'--twopartofoneheight':twopartofoneheight,'--twopartoftwoheight':twopartoftwoheight}">
  <div class="onepart">
    <el-avatar :src="url" :size="imgwidth" fit="fit">
    </el-avatar>
  </div>

  <div class="twopart">
    <div class="twopartofone">
      <span style="color: gray">{{name}}</span>
    </div>

    <div class="twopartoftwo">
      <p class="twopartfont">
        {{contentstxt}}
      </p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "discussWL",
  data(){
    return{
      // //网名
      // name:'',
      // //内容
      // contentstxt:'',
      // //图片
      // url:'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a9119f10a524c178207a4a6df500c00~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?',
      // //图片的width
      // imgwidth:'',
      // //第一列的height度
      // onepartheight:'',
      // //第一列的width度
      // onepartwidth:'',
      // //第二列的height度
      // twopartheight:'',
      // //第二列的width度
      // twopartwidth:'',
      // //第二列的第一行的height
      // twopartofoneheight:'',
      // //第二列的第二行的height
      // twopartoftwoheight:''
    }
  },
  props:['name','contentstxt','url','imgwidth','onepartheight','onepartwidth','twopartheight','twopartwidth','twopartofoneheight','twopartoftwoheight',],

}
</script>

<style scoped>
:root{
/*第一列的height度*/
  --onepartheight:'';
/*  第一列的width度*/
  --onepartwidth: '';
/*  第二列的height度*/
  --twopartheight:'';
/*  第二列的width度*/
  --twopartwidth:'';
/*  第二列的第一行的height*/
  --twopartofoneheight:'';
/*  第二列的第二行的height*/
  --twopartoftwoheight:'' ;
}
.wrapper {

  margin: 30px;
  display: grid;
  grid-template-columns: var(--onepartwidth) var(--twopartwidth);
  grid-gap: 5px;
  grid-template-rows: var(--onepartheight);
}

.onepart{
  padding: 10px;

}
.twopart{
  padding: 20px 0 0  0;
  display: grid;

  grid-template-rows: var(--twopartofoneheight) var(--twopartoftwoheight);

}
.twopartofone{

}
.twopartoftwo{

}
.twopartfont{
  font-size: 50%;
}
</style>

入口文件homeWL.vue

<template>
<div>
  <discuss-w-l :name="name" :contentstxt="contentstxt" :imgwidth="imgwidth" :onepartheight="onepartheight" :onepartwidth="onepartwidth" :twopartheight="twopartheight"
  :twopartofoneheight="twopartofoneheight" :twopartoftwoheight="twopartoftwoheight" :twopartwidth="twopartwidth" :url="url"></discuss-w-l>
</div>
</template>

<script>
import DiscussWL from "@/components/discuss/discuss";
export default {
  name: "homeWL",
  data(){
    return{
      //网名
      name:'wl',
      //内容
      contentstxt:'暗恋是一种美好而含蓄的情感，像一阵微风，悄悄地轻拂心间。在内心深处嘀咕着对那个人的好感，却不敢表露出来。暗恋，让人纯洁而又脆弱，它是一种美好的情感，无需任何呼喊，却能给人带来独有的感觉。',
      //图片
      url:'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a9119f10a524c178207a4a6df500c00~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?',
      //图片的width
      imgwidth:'',
      //第一列的height度
      onepartheight:'',
      //第一列的width度
      onepartwidth:'',
      //第二列的height度
      twopartheight:'',
      //第二列的width度
      twopartwidth:'',
      //第二列的第一行的height
      twopartofoneheight:'',
      //第二列的第二行的height
      twopartoftwoheight:''
    }
  },
  mounted() {

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

  methods: {
    //获得浏览器窗口的高度
    getWindowHeight() {
      var windowHeight = window.innerHeight;

      this.onepartheight = parseInt(windowHeight/5)+'px'
      //第二列的第一行的height
      this.twopartofoneheight = parseInt(windowHeight/5/7)+'px'
      //第二列的第二行的height
      this.twopartoftwoheight = parseInt(windowHeight/5/2+20)+'px'
    },
    // 获得浏览器窗口的宽度
    getWindowWidth(){
      var windowWidth = window.innerWidth;

      // 图片的width
      this.imgwidth = parseInt(windowWidth/35)
      //第一列的width
      this.onepartwidth = parseInt(windowWidth/29)+'px'
      //第二列的width
      this.twopartwidth = parseInt(windowWidth/8)+'px'
    }
  },
  components: {DiscussWL}
}
</script>

<style scoped>

</style>

参数说明

需要调参数的话，直接在methods中的两个函数中调即可，直接调百分比即可。
name 网名
contentstxt 评论区的文本内容