el-dialog el-tabs结合样式改造

el-dialog el-tabs结合 样式改造

效果：

dialog.vue (封装好的组件)

<template>
  <div>
    <el-dialog :visible.sync="dialogVisibles" class="theme1" @close="$emit('update:show', false)">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="item.label" :name="'first'+index" v-for="(item,index) in panes" :key="index">
          <div class="el-tab-pane-box" :style="'height:'+height+'px;'">
            <slot name="pane" :data="index+1">{{item.label}}</slot>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'dialogTheme',
  components: {

  },

  props: {
    panes: {
      type: Array,
      default: () => ([])
    },
    height: {
      type: Number,
      default: 300
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: 'first0',
      dialogVisibles: this.show
    }
  },

  created() {

  },

  mounted() {

  },

  methods: {
    handleClick(item) {
      this.$emit('tab-click', item)
    }
  },
  watch: {
    show() {
      this.dialogVisibles = this.show
    }
  }

}
</script>

common.scss

// 组件样式调整
.theme1{
    .el-dialog {
         background-color: rgba(0, 0, 0, 0);
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);
       }
       .el-dialog__header {
         padding: 0;
       }
       .el-dialog__headerbtn {
         top: 64px;
         z-index: 9999;
         .el-dialog__close {
           color: #000;
         }
       }
       .el-dialog__body {
         padding: 0;
       }
       .el-tabs--card>.el-tabs__header .el-tabs__nav {
         border: none;
       }
       .el-tabs__header {
         margin: 0;
       }
       .el-tabs__content {
         background-color: #fff;
         padding: 20px;
       }
       .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
         border-bottom: 1px solid transparent;
         background: #fff;
       }
       .el-tabs--card>.el-tabs__header .el-tabs__item {
         border-bottom: 1px solid #a3a7af;
         border-left: 1px solid #a3a7af;
         background: #ddd;
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         &:first-child {
           border-left: 1px solid transparent;
         }
       }
       .el-tabs__item:focus.is-active.is-focus:not(:active) {
         box-shadow: none;
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
       }
   }

组件使用：
index.vue

<template>
  <div class="app-container">
    <button class="pan-btn yellow-btn" @click="OpenDialogVisible">点击打开 Dialog</button>
    <dialog-theme :height="height" :panes="panes" @tab-click="tabClick" :show.sync="show">
      <div slot="pane" slot-scope="{data}">
        <component :is="currentComponent[data]"></component>
      </div>
    </dialog-theme>
  </div>
</template>

<script>
import One from './demo01'
import Two from './demo02'
import Three from './demo03'
import Four from './demo04'
import DialogTheme from './dialog'
export default {
  name: 'dialogUse',
  components: {
    DialogTheme,
    One,
    Two,
    Three,
    Four
  },
  data() {
    return {
      panes: [
        { label: '用户管理' },
        { label: '配置管理' },
        { label: '角色管理' },
        { label: '定时任务补偿' }
      ], // 传入tabs的名字
      height: 300, // 弹框高度
      show: false, // 弹框显示
      currentComponent: {
        1: 'One',
        2: 'Two',
        3: 'Three',
        4: 'Four'
      } // 当前tab页现实的组件，组件名对应tab窗口1,2,3。。。
    }
  },

  created() {

  },

  mounted() {

  },

  methods: {
    OpenDialogVisible() {
      this.show = true
    },
    // 点击tab切换事件
    tabClick(item) {
      console.log(item)
    }
  }

}
</script>

<style lang="scss" scoped>
</style>

特别提示：silot是可以多级传递的