- N +

vue.js之使用v-if判断是否显示div

原标题:vue.js之使用v-if判断是否显示div

导读:

1、使用element组件中的MessageBox 弹框嵌套使用类名使用MessageBox 弹框// 点击按钮之后弹出下图<el-button ...

文章目录 [+]

1、使用element组件中的MessageBox 弹框嵌套使用类名

使用MessageBox 弹框
// 点击按钮之后弹出下图
<el-button type="danger" round @click="confirmReceipt">确认收货</el-button>

// 效果代码如下
methods: {
  // 调用按钮点击事件名称
    confirmReceipt () {
      // MessageBox 弹框组件
      this.$confirm('是否确认收货?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        roundButton: true
      })
      // 点击确定之后的回调函数
        .then(() => {
        
        })
      // 点击取消之后的回调函数
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收货'
          })
        })
    }
  }


需求:点击上面的弹窗确定之后,弹出页面的图片如下:

two.jpg

<!-- 上面图片的HTML加css样式代码,使用v-if控制该框框是否显示 -->
 <div class="lucency" v-if="lucency">
    <div class="achieve">
        <div class="achieveImg"><img src="@/assets/sucess.png" alt=""></div>
        <p>已完成收货</p>
    </div>
</div>
<!-- css代码 -->
<style lang="scss">
 .lucency {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .achieve {
    width: 250px;
    height: 250px;
    border-radius: 25px;
    background-color: #000;
    .achieveImg {
      width: 50px;
      height: 50px;
      margin: 74px 100px 20px 100px;
    }
    p {
      color: #fff;
      font-size: 24px;
      margin: 0 65px;
    }
  }
}
</style>
export default {
  data () {
    return {
      // 让该div一开始隐藏
      lucency: false
    }
  },
  methods: {
    confirmReceipt () {
      this.$confirm('是否确认收货?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        roundButton: true
      })
      // 点击确定之后调用
        .then(() => {
        // 点击确定之后显示
          this.lucency = true
        // 使用定时器,让其5秒钟之后,自动消失
          setTimeout(() => {
            this.lucency = false
          }, 5000)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收货'
          })
        })
    }
  }
}

2、直接使用v-if控制隐藏和显示div

<!-- 提醒商家发货提示 -->
<div class="lucency" v-if="shipments">
     <div class="achieve">
         <div class="achieveImg"><img src="@/assets/sucess.png" alt=""></div>
         <p class="shipment">已提醒商家发货</p>
     </div>
 </div>
export default {
  data () {
    return {
      shipments: false
    }
  },
  methods: {
    remind () {
      this.shipments = true
      setTimeout(() => {
        this.shipments = false
      }, 5000)
    }
  }
}


有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

0

0
返回列表
下一篇:

发表评论中国互联网举报中心

快捷回复:

验证码

    评论列表 (暂无评论,共3110人参与)参与讨论

    还没有评论,来说两句吧...