vue简单组件封装

组件封装用于多个类似的样式或功能，直接封装组件减少代码重复率，提高维护效率

例如一个面板panel：

效果图：（手机端）

vue创建一个panel.vue

<template>
    <div class="panel">
      <div class="panel-wrapper">
        <div class="panel-content">
          <div class="panel-content-l">
            <div class="panel-content-title">
              {{leftTitle}}
            </div>
            <div class="panel-content-info">
              {{leftInfo}}
            </div>
          </div>
          <div class="panel-content-m">
            <div class="panel-content-title">
              {{centerTitle}}
            </div>
            <div class="panel-content-info">
              {{centerInfo}}
            </div>
          </div>
          <div class="panel-content-r">
            <div class="panel-content-title">
              {{rightTitle}}
            </div>
            <div class="panel-content-info">
              {{rightInfo}}
            </div>
          </div>

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

    export default {
      props: {// 要用到的值，用props传递
        leftTitle: '', 
        leftInfo: '',
        centerTitle: '',
        centerInfo: '',
        rightTitle: '',
        rightInfo: ''
      }
    }

<style scoped lang="scss"> /*用到Sass*/
.panel{
  margin: .24rem .25rem;
  position: relative;
  z-index: 10;
  .panel-wrapper{
    background-color: #fff;
    border-radius: 8px;
    .panel-content{
      display: flex;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.20);
      border-radius: 8px;
      position: relative;
      z-index: 1;
      .panel-content-l, .panel-content-m, .panel-content-r{
        flex: 1;
        text-align: center;
        margin: .28rem 0;
        position: relative;
        z-index: 9;
        overflow: visible;
        .panel-content-title{
          font-size: .24rem;
          color: #666;
        }
        .panel-content-info{
          margin: .06rem 0;
          font-size: .4rem;
          color: #5C84FD;
          font-weight: bolder;
        }
      }
      .panel-content-l, .panel-content-m{
        border-right: 1px dashed #bccdff;
      }
      .panel-content-l:after, .panel-content-m:after{
        position: absolute;
        right: -0.06rem;
        top: -.28rem;
        content: '';
        width: 0.1rem;
        height: 0.05rem;
        border-radius:0 0 0.1rem 0.1rem;
        background-color: #efeff4;
        z-index: 100;
      }
      .panel-content-l:before, .panel-content-m:before{
        position: absolute;
        right: -0.06rem;
        bottom: -.28rem;
        content: '';
        width: 0.1rem;
        height: 0.05rem;
        border-radius:0.1rem 0.1rem 0 0;
        background-color: #efeff4;
        z-index: 100;
      }
    }
  }
}
</style>

panel.vue完成，在需要的页面或组件中引入后即可

<Panel  leftTitle="左title" leftInfo="左信息123" 
        centerTitle="中间title" centerInfo="中间info" 
        rightTitle="右边title" rightInfo="80%">
</Panel>
// 动态数据就:leftTitle="leftTitle"