dialog组件如何使用

发布时间:2022-03-24 17:47:35 作者:iii
来源:亿速云 阅读:167

这篇文章主要讲解了“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组件如何使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. Vant Weapp的dialog组件在mpvue小程序中使
  2. android之Dialog的使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

dialog

上一篇:怎么隔离docker容器中的用户

下一篇:docker搭建Mysql集群的方法是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》