A small problem encountered by vue.js

there is such a requirement,

if there is a div element, when he clicks on it, he will trigger his click event and then hide

.

if he clicks somewhere else, he should also hide

needs to be implemented in vue. Do you have any good ideas?

Mar.02,2021

<template>
<div>
  <el-button type="primary" v-if="buttonShow" @click="onClickButton1">button1</el-button>
  <el-button type="primary" @click="buttonShow=false">click to hide button1</el-button>
</div>
</template>

<script>
export default {
  data() {
    return {
      buttonShow: true
    };
  },
  methods: {
    onClickButton1() {
      alert("button1 clicked");
    }
  }
};
</script>


Hidden and written on the outermost click is written on the div you mentioned. The event is bubbling


isn't this the requirement of the pop-up layer?
this thing is usually done with instructions. In the global dom , listen for a click event, and hide it when you find that it is not an element that binds the instruction. So remember that modal also has a mask, and you add the same dismiss event to both the mask and the button to hide your content.


I guess you want to implement a modal box.

<body>
    <div id="app">
      <div @click="btnShow = false" style="width: 100vw;height: 100vh; background-color: rgba(100,100,100,0.2);" v-show="btnShow">
        <button @click.stop="doAndThenHide"></button>
      </div>
    </div>
<script>
    let app = new Vue({
        el: '-sharpapp',
        data: {
          btnShow: true
        },
        methods: {
          doAndThenHide (ev){
            console.log(ev.target.nodeName);
            this.btnShow = false;
          }
        }
    })
</script>

I have an idea like this:

 <body>
        <div id="app">
          <div @click="isShow = false" style="padding:100px;background:-sharpededed;" class="other">
            {{text}} <!--  -->
            <button @click.stop="doHide"  v-show="isShow" class="self"><!--  --></button>
          </div>
        </div>
    </body>
<script>
    let app = new Vue({
        el: '-sharpapp',
        data: {
          isShow: true,
          text:""
        },
        methods: {
          doHide (e){
            this.text = ""
            this.isShow = false;
          }
        }
    })
</script>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b86a-2baa8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b86a-2baa8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?