当前位置:   article > 正文

el-dialog的再封装(头部,尾部)_el-dialog__header

el-dialog__header

一.实现效果如下:(完整代码见底部)

 db38347094b84494ab3d69379f9626b5.png

 二.入参和反参

  1. 入参:
  2. title:标题
  3. show:控制显示和隐藏
  4. customFooter:是否自定义底部操作栏
  5. width:宽度
  6. ----可根据实际需求继续扩展----
  1. 反参:
  2. this.$emit("openDlg"); 提供打开窗口的钩子openDlg
  3. this.$emit("staticCloseDlg"); 提供关闭窗口的钩子staticCloseDlg
  4. this.$emit("confirm"); 提供点击确定的钩子confirm

 三.引用

  1. <e-dialog
  2. @confirm="backAccConfirm"
  3. @staticCloseDlg="staticCloseDlg"
  4. :title="diaTitle"
  5. :show.sync="dialogVisible"
  6. >
  7. <bank-acc-form
  8. @closeDlg="closeDlg"
  9. ref="backAccForm"
  10. slot="content"
  11. :oriForm="oriForm"
  12. ></bank-acc-form>
  13. </e-dialog>

四.完整代码

  1. <template>
  2. <div class="e-dialog">
  3. <el-dialog
  4. :title="title"
  5. @close="staticCloseDlg"
  6. :width="width"
  7. :visible.sync="display"
  8. :close-on-click-modal="false"
  9. >
  10. <transition name="slide-fade" mode="out-in">
  11. <slot name="content" v-if="display"></slot>
  12. </transition>
  13. <!-- footer -->
  14. <div slot="footer" v-if="!customFooter">
  15. <el-button size="small" type="primary" icon="el-icon-check" @click="confirm">确定</el-button>
  16. <el-button size="small" class="cancel-btn" icon="el-icon-close" @click="cancel"
  17. >取消</el-button
  18. >
  19. </div>
  20. <div v-else slot="footer">
  21. <slot name="footer"></slot>
  22. </div>
  23. </el-dialog>
  24. </div>
  25. </template>
  26. <script>
  27. export default {
  28. name: "e-dialog",
  29. props: {
  30. title: {
  31. //标题
  32. type: String,
  33. default: "title",
  34. },
  35. show: {
  36. //显隐
  37. type: Boolean,
  38. default: false,
  39. },
  40. customFooter: {
  41. //是否自定义footer
  42. type: Boolean,
  43. default: false,
  44. },
  45. width: {
  46. //是否自定义footer
  47. type: String,
  48. default: "50%",
  49. },
  50. },
  51. watch: {
  52. show: function (newValue) {
  53. this.display = newValue; // show改变是同步子组件display的值
  54. if (newValue) {
  55. this.$emit("openDlg"); //打开弹窗的时候,抛出一个钩子用于外部组件预处理
  56. }
  57. },
  58. display: function (newValue) {
  59. this.$emit("update:show", newValue); // display改变时同步父组件show的值
  60. },
  61. },
  62. data() {
  63. return {
  64. display: false,
  65. };
  66. },
  67. methods: {
  68. cancel() {
  69. this.display = false;
  70. },
  71. staticCloseDlg() {
  72. this.$emit("staticCloseDlg");
  73. },
  74. confirm() {
  75. //点击确定的关闭事件是通过父节点进行处理
  76. this.$emit("confirm");
  77. },
  78. },
  79. };
  80. </script>
  81. <style scoped lang="scss">
  82. .e-dialog {
  83. .slide-fade-enter-active {
  84. transition: all 0.3s ease;
  85. }
  86. .slide-fade-leave-active {
  87. transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  88. }
  89. .slide-fade-enter, .slide-fade-leave-to
  90. /* .slide-fade-leave-active for below version 2.1.8 */ {
  91. // transform: translateX(100px);
  92. opacity: 0;
  93. }
  94. /deep/.el-dialog {
  95. border-radius: 8px;
  96. }
  97. /deep/.el-dialog__body {
  98. padding: 10px 40px !important;
  99. }
  100. /deep/.el-dialog__header {
  101. background: #1d78d5;
  102. border-top-left-radius: 6px;
  103. border-top-right-radius: 6px;
  104. }
  105. /deep/.el-dialog__title {
  106. color: white;
  107. }
  108. /deep/.el-dialog__headerbtn .el-dialog__close {
  109. color: white !important;
  110. }
  111. }
  112. </style>

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/86113
推荐阅读
相关标签
  

闽ICP备14008679号