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

Source: Internet
Author: User
Tags event listener reserved

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  

' 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">

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) {
// The function returns false to prevent the bullet layer from automatically closing and needs to be manually closed.
// return false;
End() {

// close the layer

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

// bottom dialog
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
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(() => {
}, 3000)
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
name Description
Default Pop-up box contents
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 ()

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


Bottom tip bounce Layer

Ask the bomb layer

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.