SoFunction
Updated on 2025-03-04

Methods of using vue-layer pop-up plug-in in vue project

vue-layer pop-up frame plugin

Install

npm i --save vue-layer

Quote

import layer from 'vue-layer'
.$layer = layer(Vue);

Parameter description

{
 type: 0, //0 (information box, default) 1 (page layer) 2 (iframe layer) 3 (loading layer) 4 (tips layer) title: 'information',
 content: '',
 area: 'auto',
 offset: 'auto',
 icon: -1,
 btn: 'Sure',
 time: 0,
 shade: true,//Whether to display the mask yes: '',
 cancel: '',
 tips: [0,{}],//Support four directions: upper, right, lower and left. Direction setting is performed by 1-4. You can set tips: [1, '#c00'] tipsMore: false,//Is multiple tips allowed shadeClose: true,//Click on whether the mask is closed}

method

 (content, [options, yes]);
 // options and yes can be omitted. If you are unwilling to write options, you can directly write a function that determines the button, i.e. yes // content can be html
(content, [options, yes, cancel]);
 // options, yes and cancel can be omitted. If you are unwilling to write options, you can directly write a function that determines the button, i.e. yes, or override the default cancel method.  PS: Yes and cancel methods cannot be interchanged //content can be html
(content, [options, end]);
 // options and end can be omitted. If you are unwilling to write options, you can directly write a callback with expired time, that is, the end method // The default msg shutdown time is 1.5 seconds // content can be html
(content, follow, options);
//content can be html//Follow css selector, used to locate the target
({
 content: {
  content: componentName, //The passed component object  parent: this,//The current vue object  data:{}//props
 },
 area:['800px','600px'],
 title: 'title'
});
// The data parameter can be considered as componentName props. At the same time, this method will automatically add a value with a key layerid. This value is the id of the creation layer, which can be directly used to close the layer.// optionsWrite the parameters directly tojsonJust inside,for exampletitle

(options);

(id);

(type);

Other Instructions

The css of this package starts with vl-Notice. You need to rewrite the css style and overwrite it.

Summarize

This is the article about how to use the vue-layer pop-up plug-in in the vue project. For more related contents of vue vue-layer pop-up plug-in, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!