博客

vue实现遮罩层的简单使用（配合Element-ui dialog ）


实现效果展示

<template>
  <div>
    <el-button type="text" @click="customer = true">点击打开 Dialog</el-button>

    <el-dialog :visible.sync="customer" width="80%">
      <div class="demoTwo"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customer: false
    }
  },
  methods: {
    goOn() {
      console.log('点击事件注册成功')
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  width: 375px;
  .demoTwo {
    width: 100%;
    height: 300px;
    background: url('../assets/Popup/客服.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
}
</style>

坑！！！！！！！！！！！！当在页面中复用时，遮罩层会罩住所有的页面

加:modal-append-to-body=”false”即可

<el-dialog
        :visible.sync="dialogVisible"
        width="80%"
        :modal-append-to-body="false"
      >
      //......内容sth.........
</el-dialog>