[Vuejs] vue2.0-layer-mobile mobile End bomb layer

Vue2.0-layer-mobile Mobile End bomb layer

This component upgrade supports the Slot content distribution feature, enabling highly customizable content-style shells

Installation method

NPM Install vue2-layer-S  

Initialization

' Vue2-layer-mobile'Vue.  Use (layer)  

This component is based on the open source plugin layer-mobile with Vue re-rewritten, and extended a number of convenient methods specific API and Layer-mobile height to maintain a value, you can rest assured that the use of

Component usage

 
// Normal use
<layer v-model="showLayer" @sure="yesFn" :btn="[‘Use ‘, ‘Abandon ’]” :content="‘Welcome to vue2-layer-mobile'"></layer>

// Use slot to customize the different layers of the elastic layer
// Extended support slot is to solve the problem that the content generated by the content property does not support the vue feature when it is in the form of plugin
<layer v-model="showLayer" @sure="yesFn" :btn="[‘Use ‘, ‘Abandon ’]” :content="‘Welcome to vue2-layer-mobile'">
    <div class="input-pwd-layer">
         <h2 class="f16 gray">Please enter your payment password</h2>
         <div class="int-pwd-outer">
             <input @input="changeFn($event)" type="password" class="int-pwd" maxlength="6">
         </div>
     </div>
</layer>


Export default {
     Data() {
         Return {
             showLayer: true
         }
     }
}

Plugin form Call

 
// inquiry layer
Const index = this.$layer.open({
    Btn: [‘confirm ‘, ‘can’’,
Content: ‘hello word‘,
className: ‘good luck1’,
Shade: true,
Success(layer) {
Console.log(‘layer id is:‘,layer.id)
},
Yes(index, $layer) {
Console.log(arguments)
// The function returns false to prevent the bullet layer from automatically closing and needs to be manually closed.
// return false;
},
End() {
Console.log(‘end‘)
}
})

// close the layer
This.$layer.close(index)

// loading layer
Const index = this.$layer.open({
Type: 2,
Content: ‘Loading...’,
Success(layer) {
Console.log(‘layer id is:‘,layer.id)
},
End() {
Console.log(‘end‘)
}
})

// bottom dialog
This.$layer.open({
Content: ‘This is a query prompt ‘ at the bottom,
Btn: [‘Delete ‘, ‘Can’’],
Skin: ‘footer’,
Yes: (index) => {
This.$layer.open({content: ‘Execute delete operation ‘})
}
})

// page layer
This.$layer.open({
Type: 1,
Content: ‘You can pass in any content and support html. Generally used in mobile phone pages, ‘
Anim: ‘up‘,
// Special note that this styles attribute is a little different from layer-mobile plus s because style is reserved in vue.
Styles: ‘position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;‘
})

Extension methods

The following methods can be implemented by this $layer. Open method.

Cue layer (msg)

This. $layer. msg (' Hello Worldconsole '.  Log (' END!!! '))      

Information Layer (ALERT)

This. $layer. alert (' Are you sure you want to refresh the page?   Location. Reload ())     

Inquiry Layer (confirm)

 
const index = this.$layer.confirm(‘Are you sure you want to delete it？‘, () => alert(‘yes‘), () => alert(‘no‘))

setTimeout(() => {
	this.$layer.close(index)
}, 3000)

Apiprops

Parameters	Description	type	Optional Values	Default Value
Type	Type of the projectile layer	Number	0 represents the message box, 1 represents the page layer, and 2 indicates the load layer	0
Content	Bullet Layer Content	String	Required Parameters	No
Title	Bullet Layer Title	String or array	Value can be a string or an array
Time	The number of seconds to control the automatic shutdown layer	Number	Integers and floating-point numbers	Default does not turn on
Styles	Styles for custom layers	String	such as ' Border:none; Color: #fff; '
Skin	Layer Display Style	String	Footer (i.e. bottom dialog style), MSG (common hint)
ClassName	Customizing a CSS Class	String	Custom-class
Btn	Button	String/array	String or array (currently supports up to two)
Anim	Type of animation	String/boolean	Scale (default), Up (eject from bottom up), False if no start picture is opened	Scale (default)
Shade	Control mask Display	Boolean	True/false	True
Shadeclose	Whether to close the layer when the mask is clicked	Boolean	True/false	True
Fixed	Whether the position of the fixed layer	Boolean	True/false	True
Top	Ordinate of the control layer	Number	Integers and floating-point numbers, which are generally not required, because the layers are always centered vertically horizontally, only if top is active when Fixed:false	No
Success	The callback for the layer's successful popup layer (as long as it is used in plug-in form), which returns a parameter as the current layer element object	Function	Function/null	Null
Yes	Click OK button to trigger the callback function, return a parameter is the index of the current layer (as long as the plug-in form to use only valid)	Function	Function/null	Null
No	Click the Cancel button to trigger the callback function (as long as the plug-in form to use only valid)	Function	Function/null	Null
End	Layer is completely destroyed after the callback function (as long as the plug-in form to use only valid)	Function	Function/null	Null

Slots

name	Description
Default	Pop-up box contents

Events

name	Description	Callback Parameters
Sure	Trigger when the Confirm button is clicked	No
Cancel	Trigger when the Cancel button is clicked	No
Show	Trigger when the pop-up window is visible	No
Close	triggered when the popup window is closed	No

These events do not apply to event listener processing called in plugin form (it has its own processing event method see above api such as yes, no, etc.)

Built-in methods/properties in plug-in form

Returns the currently used layer mobile version number

This. $layer. v 

Used to close a specific layer, index for that particular layer

Layer. Close (Index)

Close the layer of all layers on the page

Layer. CloseAll ()

Description

1. Parameters (Options)

style changed tostyles

Shade does not support custom transparency and background color

In particular, this style property has a little bit more to do with the layer-mobile, because styles are reserved in Vue.

2. Extension method [MSG, alert, confirm] only when you call the extension method above , will automatically add a CSS class ' layui-m-' + method name [MSG, alert, confirm]

Using slots to customize the projectile layer

Information Bomb layer

Tips

Bottom tip bounce Layer

Ask the bomb layer

[Vuejs] vue2.0-layer-mobile mobile End bomb layer