dialog组件如何使用

这篇文章主要讲解了“dialog组件如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“dialog组件如何使用”吧！

<template>

  <el-dialog

    :before-close="handleClose"

    :show="show"

    :show-close="false"

    :title="title"

    :top="dialogTop"

    :visible.sync="visible"

    :width="dialogWidth"

    :modal-append-to-body="false"

    center

    v-loading="loading"

  >

    <div class="capsule-btn">

      <fy-ripple-button :value="$_text['text.confirm']" @click="confirmOperation" size="medium"></fy-ripple-button>

      <fy-ripple-large-button :value="$_text['text.cancel']" @click="cancelOperation" size="medium"></fy-ripple-large-button>

    </div>

    <div :style="{height:slotHeight}" class="slot-wrap">

      <slot></slot>

    </div>

  </el-dialog>

</template>

<script>

export default {

  props: {

    // 点击确定是否立马关闭

    closeImmediately: {

      type: Boolean,

      default: true,

    },

    title: {

      type: String,

      default: '',

    },

    show: {

      type: Boolean,

      default: false,

    },

    dialogWidth: {

      type: String,

      default: '300px',

    },

    dialogTop: {

      type: String,

      default: '15vh',

    },

    slotHeight: {

      type: String,

      default: '',

    },

  },

  data() {

    return {

      visible: this.show,

      loading: false,

    }

  },

  methods: {

    confirmOperation() {

      if (this.closeImmediately === true) {

        this.$emit('update:show', false)

      }

      this.$emit('confim')

    },

    cancelOperation() {

      this.$emit('update:show', false)

      this.$emit('close')

    },

    // 关闭前的回调

    handleClose() {

      if (this.closeImmediately === true) {

        this.$emit('update:show', false)

      }

      this.$emit('close')

    },

  },

  watch: {

    show() {

      this.visible = this.show

    },

  },

}

</script>

<style lang="sCSS" scoped>

.slot-wrap {

  padding: 10px 0 30px 10px;

}

</style>

感谢各位的阅读，以上就是“dialog组件如何使用”的内容了，经过本文的学习后，相信大家对dialog组件如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！