Shulou(Shulou.com)06/02 Report--

This article introduces what is the method of dynamically creating dialog according to the file name in vue+el-element. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Background

The common way to use a dialog box in a project is to encapsulate the dialog box into a component, introduce it where it is used, and then add it to template, use visible.sync to control the display / hiding of the dialog box, and listen for confirm events to handle user click determination. As follows:

Within the encapsulated dialog, you also need to update the visible when it is closed, and trigger the confirm event when it is determined:

Methods: {close () {this.$emit ("update:visible", false);}, confirm () {this.close (); this.$emit ("confirm");}}

This not only leads to the introduction of all dialog components during page initialization, which affects the loading speed, but also makes the page very messy when many dialogs are introduced into the page: you need to insert a html for each dialog box, maintain a separate visible variable for each dialog box, and add confirm event listeners for each dialog box.

Most of these operations are business-independent, and these operations are very similar.

So, is there a way to create dialog dynamically through js?

CreateDialog ("confirm-dialog.vue")

As above, you can open a dialog box based on the file name, without defining visible and adding a bunch of html and event callbacks, or even introducing dialog components first!

Isn't it easy! Are you moved? Just watch.

Realize

1. Encapsulated / utils/dialogControl.js

Import Vue from 'vue'async function createDialog (fileName, data) {const dialogsContext = require.context ('.. / components', / / define the scope of the lookup file true, / ([a-zA-Z\-0-9] +)\ .vue$/ / / define the file name rule 'lazy') / / find the file with the passed name and load the file let match = dialogsContext.keys (). Find ((key) = > key.includes (fileName)) if (! match) return let componentContext = await dialogsContext (match) let temp = componentContext.default return new Promise (function (resolve, reject) {/ / initialization configuration parameter let opt = {data} let component = Object.assign ({}) Temp) let initData = {visible: true} Object.assign (initData, component.data ()) opt.data & & Object.assign (initData JSON.parse (JSON.stringify (opt.data)) component.data = function () {return initData} / / create constructor create instance mount let DialogC = Vue.extend (component) let dialog = new DialogC () / / close event let _ onClose = dialog.$options.methods.onClose dialog.onClose = function () {resolve () dialog.$destroy () _ onClose & _ onClose.call (dialog) document.body.removeChild (dialog.$el)} / / callback event let _ onCallback = dialog.$options.methods.onCallback dialog.onCallback = function (... arg) {try {_ onCallback & & _ onCallback () resolve (arg) dialog.$destroy () _ onClose & & _ onClose.call (dialog) document.body .removeChild (dialog.$el)} catch (e) {console.log (e)}} dialog.$mount () / / changes visible dialog.$watch ('visible') when you click the close button Function (n, o) {dialog = false & & dialog.onClose () document.body.appendChild (dialog.$el)})} export {createDialog}

Description:

1. You need to specify the path to find the file and the regular expression that matches the name, so that you can filter out some unwanted files

two。 Receive a fileName parameter to match the dialog box file to be opened. The data parameter is the data passed to the dialog box and will be merged into the component's data.

3. Use visible variables to control the display / hiding of dialog boxes

4. An onClose method is defined to close the dialog box, which can be used to close the dialog box

The 5.onCallback method is used to pass a value to the parent component of the calling dialog box, such as when the OK button is clicked.

2.dialog file definition

For example, / components/ConfirmDialog.vue, use the visible variable to control show / hide, onClose handles the close event, and make sure that the callback of the button is onCallback (as defined in dialogControl.js).

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quis perspiciatis fugiat molestiae provident accusantium repudiandae fugit minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium minus incidunt esse! Cancel the deterministic export default {data () {return {}}, methods: {}} 3. Use

The createDialog method in dialogControl is introduced, which can be opened by passing in the file name directly.

If there are other properties, the second parameter is placed as a key-value pair, and these properties are merged into the data of the dialog box component, so they can be used directly in the dialog box component.

The createDialog method gets a promise object, and its then method can get the result returned by confirm.

This is an show page opens import {createDialog} from "@ / utils/dialogControl"; export default {methods: {openDialog () {let dialog = createDialog ("confirm-dialog.vue"); dialog.then ((v) = > {if (v) {console.info ("OK");});},},}

The effect is as follows:

What is the method of dynamically creating dialog according to the file name in vue+el-element is shared here. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.