欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue公共组件示例

程序员文章站 2022-05-25 19:47:20
...

下边是公用的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>


相关标签: 公共组件