对话框编写

雨幕下的漫步

于 2023-10-24 11:08:43 发布

阅读量151

点赞数

分类专栏： vue 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_42888568/article/details/123483488

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<template>
  <div class="shadow-wrapper" v-if="visible" @click.stop ref="mask"><!-- 遮罩层 -->
    <div class="dialog-wrapper">                                    <!-- 对话框 -->
      <div class="info-wrapper">                                    <!-- 对话框内容部分 -->
        <!-- <img class="icon" :src="require(`../common/images/${icon}-circle.png`)"> -->
        <div class="text">{{info}}</div>
      </div>
      <div class="btn-wrapper">                                     <!-- 对话框按钮部分 -->
        <div class="btn" @click="onCancel">{{cancelText}}</div>
        <div class="btn" @click="onOk">{{okText}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mask: { /* 控制遮罩 */
      type: Boolean,
      default: false
    },
    icon: { /* 图标类型 */
      type: String,
      default: 'info'
    },
    info: { /* 文字内容 */
      type: String,
      default: '内容'
    },
    cancelText: { /* 取消按钮文字 */
      type: String,
      default: ''
    },
    okText: { /* 确认按钮文字 */
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: true /* 控制对话框显示 */
    }
  },
  mounted () {
    setTimeout(() => { /* 确保能获取到mask修改其背景属性 */
      if (this.mask) {
        this.$refs.mask.style.background = 'rgba(0,0,0,.3)'
      }
    }, 20)
  },
  methods: {
    show () { /* 打开对话框 */
      this.visible = true
    },
    hidden () { /* 关闭对话框 */
      this.visible = false
    },
    onCancel () { /* 点击取消 */
      this.$emit('cancel')
      this.hidden()
    },
    onOk () { /* 点击确认 */
      this.$emit('ok')
      this.hidden()
    }
  }
}
</script>
<style scoped>
.shadow-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.3)
}                  /* 覆盖整个页面 */
  
.dialog-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  background: #ffffff;
  border: solid 1px #ccc;
  border-radius: 10px;
  box-shadow: 0 0 5px #ccc;
  color: #777777;
}                  /* 垂直居中 */
.info-wrapper {
  min-height: 80px;              /* dialog随内容撑开高度 */
  text-align: center;
  font-weight: bold;
  margin-bottom: 50px;
}  
    
      
.icon {
  margin-top: 10px;
  height: 30px;
  width: 30px;
}
      
  /* .text
    line-height 30px
    color #666
.btn-wrapper
  position absolute
  display flex
  height 40px
  width 100%
  bottom 0 */
        
</style>