This time I will bring you the vue component to implement the pop-up box click to show and hide the function (with code), and the vue component to implement the pop-up box to click to show and hide the function. What are the precautions ? The following is a practical case. Get up and take a look.
The example of this article shares with you the specific code of vue implementation of pop-up box click to display and hide for your reference. The specific content is as follows
The effect is as shown below
Since my change password pop-up box is a component referenced, it is hidden at the beginning. This requires setting v-show on the pop-up box component on the current page, but in When the pop-up box is displayed, the change button of the current page after the operation is completed has been covered by the pop-up box. Therefore, you can only click Cancel on the pop-up page to close the hidden pop-up box. In this way, two click events need to be written, but the two click events will conflict. It takes two clicks to display and hide the pop-up box. Then I used the following method, I hope it can help everyone! ! !
The code is as follows1. In the current page (main page)<template> ...... <ul> <li><span>更改密码</span></li> //点击事件 </ul> ...... //组件传一个点击事件@hidden="hiddenShow",而这个点击事件就是下面的hiddenShow()函数 <modifypassword> </modifypassword> //调用组件 </template> <script> import ModifyPassword from '@/components/pop-up/ModifyPassword.vue //引入组件 export default { data(){ return{ date:'', ModifyPassword_pop_up:false, history_pop_up:false } }, components:{ ModifyPassword //引用组件 }, methods:{ //更改密码弹出框显示(组件引用的弹出框) ModifyPassword(){ this.ModifyPassword_pop_up=true }, //更改密码弹出框隐藏(传给组件一个点击事件) hiddenShow(){ let that = this; that.ModifyPassword_pop_up = false } } } </script>
<template> ...... <p> <input> //在取消按钮这里调用点击事件 <input> </p> ...... </template> <script> export default { data(){ return{} }, methods:{ //本更改密码弹出框的显示隐藏事件 Hidden(){ //通过$emit引用组件传过来的hidden()事件 this.$emit('hidden') } } } </script>
Detailed explanation of Vue component use cases
Detailed explanation of the implementation steps of angular routing highlighting
The above is the detailed content of The vue component implements the pop-up box click to display and hide functions (with code). For more information, please follow other related articles on the PHP Chinese website!