vue公共元件示例
阿新 • • 發佈:2018-11-09
下邊是公用的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>