VUE2 event-driven pop-up window example and vue2 event pop-up window example

VUE2 event-driven pop-up window example and vue2 event pop-up window example

I want to know how to write the pop-up window component for vue a few days ago.

There are two recommended methods:

1. Status management if the pop-up component is placed in the root component, vuex is used to manage the show and hide components. Put it in the component and control it by adding v-show or v-if. You can define the pop-up window for different requirements based on the slot.

2. Event Management registers a global event to open the pop-up window, and transmits the text to be displayed and related logic control. It can be combined with promise to Implement Asynchronous

I think it is better to use pop-up windows like confirme and propmt than event-driven windows. It is best to use promise callback.

So I wrote one for the itch. The following is the code.

Propmt. js

Import Vue from 'vue 'import promptComponent from '. /prompt. vue '// introduce the vue file const promptConstructor = Vue. extend (promptComponent); // register the component let instance = new promptConstructor (). $ mount (''); // obtain the instance document of the component. body. appendChild (instance. $ el); // Insert the component element to the body. const Alert = (text, okText) =>{ if (instance. show === true) {// prevent multiple calls to return;} // assign an instance to the data in the pop-up window. show = true; instance. isAlert = true; instance. okText = okText | 'true'; instance. message = text; // return a promise object and add event listening for the button return new Promise (function (resolve, reject) {instance. $ refs. okBtn. addEventListener ('click', function () {instance. show = false; resolve (true) ;})}; const Confirm = (text, okText, cancelText) =>{ if (instance. show = true) {return;} instance. show = true; instance. okText = okText | 'true'; instance. cancelText = cancelText | 'cancel'; instance. message = text; return new Promise (function (resolve, reject) {instance. $ refs. cancelBtn. addEventListener ('click', function () {instance. show = false; resolve (false) ;}); instance. $ refs. okBtn. addEventListener ('click', function () {instance. show = false; resolve (true) ;})}; const Prompt = (text, okText, inputType, defaultValue) =>{ if (instance. show = true) {return;} instance. show = true; instance. isPrompt = true; instance. okText = okText | 'true'; instance. message = text; instance. inputType = inputType | 'text'; instance. inputValue = defaultValue | ''; return new Promise (function (resolve, reject) {instance. $ refs. okBtn. addEventListener ('click', function () {instance. show = false; resolve (instance. inputValue) ;}})}; export {Alert, Confirm, Prompt}

Prompt. vue

<Style lang = "less" scoped>. confirm-enter-active {transition: all. 2 s ;}. confirm-leave-active {transition: opacity. 2 s ;}. confirm-leave-to {opacity: 0 ;}. confirm-enter {opacity: 0 ;}. confirm {position: relative; font-family: PingFangSC-Regular; font-size: 17px;-webkit-user-select: none; // mask layer style. masker {position: fixed; top: 0; left: 0; width: 100%; height: 100%; back Ground-color: rgba (0, 0, 0 ,. 4);-webkit-transition: opacity. 1 s linear; transition: opacity. 1 s linear; z-index: 100;} // incorrect format of incoming data. box {position: absolute; top: 50%; left: 50%; width: 72%;-webkit-transform: translate (-50%,-50%); transform: translate (-50%, -50%); text-align: center; border-radius: 12px; background-color: # fff ;. message {height: 97px; line-height: 24px; font-family: PingFangS C-Regular; font-size: 17px; vertical-align: middle; color: #999; letter-spacing:-0.41px; p {margin: 20px auto 0 auto; vertical-align: middle ;}&:: after {content: ''; height: 100% ;}}. prompt {margin: 20px 0; width: 100%; p {margin: 5px auto; font-size: 17px; line-height: 24px;} input {margin: 5px auto; border: 1px solid #333; border-radius: 6px; width: 100px; height: 30px; font-size: 14px; Line-height: 20px; text-align: center ;}}. buttons-group {a {width: calc (50%-0.5px); text-align: center; font-size: 17px; line-height: 43px; color: blue ;}. max-width {width: 100%! Important ;;}}}} </style> <template> <transition name = "confirm"> <div class = "confirm" v-show = "show"> <div class = "masker" @ touchmove. prevent> <div class = "box"> <div class = "message" v-if = "! IsPrompt "> <p >{{ message }}</p> </div> <div class =" prompt "v-if =" isPrompt "> <p >{{ message }}</p> <input type = "text" v-model = "inputValue" v-if = "inputType = 'text'" ref = "inputEl"> <input type = "tel" v-model.number = "inputValue" @ keydown = "enterCheck" v-if = "inputType = 'tel '" ref = "inputEl"> </div> <div class = "button-group clearfix bd-top"> <a class = "bd-right fl" ref = "cancelBtn" v-show = "! IsAlert &&! IsPrompt ">{{ cancelText }}</a> <a class =" fr "ref =" okBtn ": class =" {'max-width ': isAlert | isPrompt} ">{{ okText }}</a> </div> </transition> </template> <script type = "text/ecmascript-6"> import {mapState} from 'vuex' export default {data () {return {show: false, message: 'Enter the prompt ', okText: 'true', cancelText: 'cancel', isAlert: false, isPrompt: false, inputValue :'', inputType: ''}}, methods: {// The amount input box verifies enterCheck (event) {// you can only enter numbers, Delete keys, and 11-digit if (event. keyCode = 46 | event. keyCode = 8) {return;} if (event. keyCode <47 | event. keyCode> 58 | event. keyCode === 190) {event. returnValue = false ;}},}, watch: {show () {if (this. show) {this. $ nextTick () => {console. log (this. $ refs. inputEl); console. log (this. inputType); this. $ refs. inputEl. focus () ;}}}}</script>

Main. js

Import {Alert, Prompt, Confirm} from '.. /lib/components/prompt. js 'vue. prototype. alert = function (text, okText) {return Alert (text, okText)}; Vue. prototype. confirm = function (text, okText, cancelText) {return Confirm (text, okText, cancelText)}; Vue. prototype. prompt = function (text, okText, inputType, defaultValue) {return Prompt (text, okText, inputType, defaultValue)}; component. vue: inputName () {this. prompt ('Enter the name', 'confirmed', 'text '). then (res = >{// do something use res });},

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.