This function is suitable for browsers
Writing a web app, often using comfirm, for the overall consistency of the UI, or want to write a component.
For the first time, it felt like a failure.
Method 1
The code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .mdtransition-enter-active, .mdtransition-leave-active { transition: all 0.8s; } .mdtransition-enter, .mdtransition-leave-active { opacity: 0; } </style> </head> <body> <div id="example"> <pop-up :ishow="isShow" @hide="showDialog" @del="del" style="position:absolute;"></pop-up> <button @click="showDialog">show del !</button> </div> <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script> <script> var popUpComponent = Vue.component('pop-up', { props: ['ishow'], template: ` <transition appear name="mdtransition" > <div style=" height:100vh; width:100vw; background-color:rgba(0,0,0,0.3); display: flex; justify-content:center; align-items:center; " @click="hide" v-if="ishow" > <div style=" background-color:#fff; padding:10px; " @click="del" >Are you sure to delete this item?</div> </div> </transition> `, data:function(){ return { } }, methods:{ hide:function(){ this.$emit('hide'); }, del:function(){ this.$emit('del'); } } }) var vm = new Vue({ el: '#example', data:{ isShow:false }, methods:{ showDialog:function(){ this.isShow = !this.isShow; }, del:function(){ console.log('del'); } } }) </script> </body> </html>
Interacting with subcomponents, I first thought about using props
Dynamic binding isShow to props of sub-components-ishow
<pop-up :ishow="isShow"></pop-up>
By doing so, we can easily change isShow in the parent component to make dialog display.
But how to make dialog disappear?
The scope of component instances is isolated. This means that data from the parent component cannot (and should not) be directly referenced within the template of the child component. To make the child component use the data of the parent component, we need to pass the props option of the child component.
The above comes from Official website
It's a bit cumbersome that you can't change prop directly in subcomponents.
You need to use this.$emit('hide') to trigger hide events, then @hide="showDialog" on the component to listen for hide events, and then trigger the showDialog method of the parent component.
If you have two options, repeat the above steps again
It's totally beyond my expectation. I wanted to reuse it, but how can I reuse so many things at a time?
So find another way to do it OTL
Method two
The code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ margin: 0;padding: 0; } .mdtransition-enter-active, .mdtransition-leave-active { transition: all 0.8s; } .mdtransition-enter, .mdtransition-leave-active { opacity: 0; } </style> </head> <body> <div id="example"> <modal ref="modal" style="position:absolute;" word="Yes Or No?"></modal> <button @click="showDialog">show del !</button> </div> <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script> <script> Vue.component('modal', { template: ` <transition appear name="mdtransition" > <div style=" height:100vh; width:100vw; background-color:rgba(0,0,0,0.3); display: flex; justify-content:center; align-items:center; flex-direction: column; " @click="hide" v-if="isShow" > <div style=" background-color:#fff; padding:10px; " > <p>{{ word }}</p> <div style=" display: flex; justify-content:Space-around; "> <button @click="yes">Y</button> <button @click="no">N</button> </div> </div> </div> </transition> `, props:['word'], data:function(){ return { isShow:false, yescb:'', nocb:'' } }, methods:{ hide:function(){ this.isShow = false; }, show:function(yescb,nocb){ this.isShow = true; this.yescb = yescb; this.nocb = nocb; }, yes:function(){ this.yescb(); }, no:function(){ this.nocb(); } } }) var vm = new Vue({ el: '#example', methods:{ showDialog:function(){ this.$refs.modal.show(function(){ console.log('yes'); },function(){ console.log('no'); }); } } }) </script> </body> </html>
Later, I found that there was this thing!!
Despite props and events, it is sometimes necessary to access subcomponents directly in JavaScript. For this purpose, ref can be used to specify an index ID for subcomponents.
ref is used to register reference information for elements or subcomponents. Reference information will be registered on the $refs object of the parent component. If used on common DOM elements, references point to DOM elements; if used on subcomponents, references point to component instances.
The above comes from Official website
<modal ref="modal"></modal>
this.$refs.modal
How can you directly access the subcomponents! ____________ It's better to deal with everything directly in the sub-components.
Click on the function that triggers the dialog to look like this
this.$refs.modal.show(function(){ console.log('yes');//This is the callback function for selecting yes },function(){ console.log('no');//This is a callback function that chooses no. });
The rest of the sub-components solve themselves!
hide:function(){ this.isShow = false; }, show:function(yescb,nocb){ this.isShow = true; this.yescb = yescb; this.nocb = nocb; }, yes:function(){ this.yescb(); }, no:function(){ this.nocb(); }
It's not perfect yet. I hope you can give some suggestions on OTL.
PS: This self-used comfirm, in order to write less when it is introduced, I try to write css into the elements.