elementUI 弹窗居中 并且tabs组件 tab-position=“left“时显示的样式优化

需求

项目需要自定义字段，但是有个样式不太好实现，记录一下。

最初效果

优化后效果

<template>
  <el-dialog title="新建字段" :visible.sync="visible" width="50%" :before-close="handleClose">
    <div class="tabs-box">
      <div class="tabs-title">
        <span class="tabs-title-type">选择字段类型span>
        <span class="tabs-title-stats">字段属性span>
      div>
      <el-tabs :tab-position="'left'" type="card" style="height: calc(100% - 50px);">
        <el-tab-pane label="单行文本">el-tab-pane>
        <el-tab-pane label="多行文本">多行文本el-tab-pane>
        <el-tab-pane label="下拉列表">下拉列表el-tab-pane>
        <el-tab-pane label="单选">单选el-tab-pane>
        <el-tab-pane label="多选">多选el-tab-pane>
        <el-tab-pane label="日期">日期el-tab-pane>
        <el-tab-pane label="数字">数字el-tab-pane>
        <el-tab-pane label="附件">附件el-tab-pane>
      el-tabs>
    div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消el-button>
      <el-button type="primary" @click="onSubmit">确 定el-button>
    span>
  el-dialog>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script>
export default {
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 确认
    onSubmit() {
      const data = {}
      this.$emit('submit', data)
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72