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?

Vue.js
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>

Previous: How to deal with URLSearchParams compatibility?

Next: OBS, can you push the rtsp stream to easydarwin?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu