vue公共组件示例

下边是公用的table组件

<template>
  <div class="table_box">
    <table width="100%">
      <thead>
        <slot name="tablebox_head"></slot>
      </thead>
    </table>
    <div class="table_box_list" :class="{ 'classBg': isBackGround }">
      <table width="100%">
        <slot name="tablebox_body"></slot>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isBackGround: true
      }
    }
  }
</script>
<style scoped>
  .table_box{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
  }
  table {
    color: #1b222d;
    font-size:14px;
    line-height: 36px;
    text-align: center;
    background: #fff;
  }
  table thead {
    /*font-weight: bold;*/
    color: #1b222d;
    background: #b8cde1;
    word-break: keep-all;
    white-space:nowrap;
    overflow: hidden;
  }
  table tbody tr{
    border-bottom:#dde2e6 solid 1px;
  }
  table tbody tr:last-child{
    border-bottom: none;
  }
  table tbody tr:hover{
    background:#eff5fb;
  }
  table span{
    padding:0 5px;
  }
  .table_box_list{
    /*box-shadow: -1px 1px 3px #697d98;*/
    border:1px solid #b8cde1;
    position: absolute;
    left:0;
    bottom:0px;
    top:36px;
    right:0;
    overflow-y:auto;
  }
  .summaryBox .table_box_list{
    /*box-shadow: -1px 1px 3px #697d98;*/
    border:1px solid #b8cde1;
    position: absolute;
    left:0;
    bottom:12px;
    top:36px;
    right:0;
    overflow-y:auto;
  }
  .light {
    color: #63a2ff;
    cursor: pointer;
  }
  .classBg{
    background:#fff url(../../assets/icon/empty1.png) no-repeat center !important;
  }
  .red{}
</style>

下边是公用的弹出框组件

<!-- 引用方法
<commModal :modalIsShow.sync="modalIsShow" :width='466' :height='633'>
  <s slot="modalTitle">设备设施运行状态</s>
  <div slot="modalText">
    详情
  </div>
</commModal>
-->
<template>
  <div class="modal_box">
    <div class="modal_container" v-if="modalIsShow">
      <div class="modal_main" v-bind:style="{ width:width + 'px',height:height + 'px' }">
        <div class="modal_main_box">
          <h4 class="modal_title">
            <slot name="modalTitle"></slot>
            <span @click="close"></span>
          </h4>
          <div class="modal_text">
            <slot name="modalText"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
      data () {
        return {
        }
      },
      props: {
        modalIsShow: {
          default: false
        },
        width: {
          default: '348'
        },
        height: {
          default: '405'
        }
      },
      methods: {
        close () {
          this.$emit('update:modalIsShow', false)
        }
      }
    }
</script>
<style scoped>
  .modal_container{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
  }
  .modal_main{
    height: 348px;
    width: 405px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: #282828;
    background: rgba(0, 0, 0, 0.6);
  }
  .modal_main_box{
    position: absolute;
    top:9px;
    left:12px;
    right:12px;
    bottom:12px;
    background: #fff;
  }
  .modal_title{
    line-height:45px;
    padding:0 15px;
    background: #f0f9ff;
    border-bottom: #c5e0f8 solid 1px;
    font-weight: bold;
    font-size: 14px;
  }
  .modal_title span {
    display:block;
    height: 15px;
    width: 15px;
    background:url("../../assets/commModal_close.png");
    cursor: pointer;
    float:right;
    margin:15px 0;
  }
  .modal_text{
    padding: 10px 15px;
  }
</style>