vue 弹框

最新推荐文章于 2024-08-29 10:04:34 发布

原创最新推荐文章于 2024-08-29 10:04:34 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue组件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建并使用弹框组件，包括组件的代码实现和在HTML及JS中的调用方法。

弹框

一、组件代码

<template>
  <div class="MisDialog">
    <el-dialog
      v-if="dialogVisible"
      :custom-class="className"
      :width="`${width}px`"
      :fullscreen="fullscreen"
      top="24vh"
      :visible.sync="dialogVisible"
      :title="title"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="beforeClose"
    >
      <slot />
      <template slot="footer">
        <slot
          name="footer"
          class="dialog-footer"
        />
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MisDialog',
  props: {
    title: { // 标题
      type: String,
      default: '弹框'
    },
    className: {
      type: String,
      default: 'mis-dialog'
    },
    width: { // 弹框宽度
      type: Number,
      default: 664
    },
    fullscreen: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: false // 弹框的显示
    }
  },
  watch: {
    dialogIsVisible (newV, oldV) {
      this.dialogVisible = newV
    }
  },
  methods: {
    beforeClose () {
      this.$emit('close')
      // this.dialogVisible = false
    },
    show () {
      this.dialogVisible = true
    },
    hide () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
$td-height: 50px; // 行高

.MisDialog {
	::v-deep {
		.el-dialog {
			@include scrollbar(0, 8px, #dddddd, #888888);
			.el-dialog__body {
				max-height: 66vh;
				overflow: auto;
				$td-height: 40px; // 行高
				padding: 30px;
				overflow-y: overlay;
				.el-table {
					.el-table__row {
						td {
							height: $td-height;
							line-height: $td-height;
							padding: 0px;
						}
					}
				}
			}
			.el-dialog__footer {
				padding: 20px 30px;
			}
		}
		.el-pagination {
			$pagination-size: 28px;
			li {
				min-width: $pagination-size !important;
				min-height: $pagination-size;
				line-height: $pagination-size;
			}

			button {
				width: $pagination-size;
				height: $pagination-size;
				min-width: $pagination-size;
			}
		}
		.dialog-footer {
			.cc-btn-x {
				border-color: #eeeeee;
				color: #555555;
				&:hover {
					box-shadow: none;
					border-color: #dddddd;
					background-color: #fafafa;
				}
			}
		}
	}
}
</style>

二、调用

HTML调用

<mis-dialog
  ref="addDialog"
  :title="ccDialog.title"
  :width="694"
  @close="closeDig"
>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="closeDig"
      >取 消</el-button>
      <el-button
        v-waves
        :loading="dialogOKLoading"
        class="cc-btn"
      >确 定</el-button>
    </span>
</mis-dialog>

JS调用

// 打开弹框
this.$refs['addDialog'].show()

// 关闭弹框
closeDig () { // 弹框关闭方法
    this.$refs['addDialog'].hide()
}