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

Source: Internet
Author: User

Tags: imp delete maxlength skin exp HTTP BOOL AST type

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="[' OK to use ', ' discard ']": Content="' Welcome to Vue2-layer-mobile '"></layer>Use slots to customize layers of different stylesThe extended support slot is an issue that does not support the Vue feature when the generated content is passed in the plugin form, via the Content property<layer V-model="Showlayer"@sure="YESFN": BTN="[' OK to use ', ' discard ']": Content="' Welcome to Vue2-layer-mobile '"><divClass="Input-pwd-layer"><h2Class="F16 Gray"> Enter your payment password</h2><divClass="Int-pwd-outer"><input @input= Changefn ($event) = "Password" class=< Span class= "Pl-pds" > "Int-pwd" Maxlength=  "6" > < /div> </div> </layer>export default {data () {return {showlayer: true}}               
Plugin form Call
Inquiry LayerConstIndex=This.$layer.Open ({btn: [' Confirm‘,' Cancel'],content:' Hello Word', ClassName:' Good Luck1', Shade:TrueSuccessLayer) {Console.Log' Layer ID is:‘,Layer.ID)},YesIndex$layer) {Console.LogArgumentsfunction return False to prevent the layer from automatically shutting down and need to be closed manuallyreturn false;},End () {Console.Log' End‘)}})Close LayerThis.$layer.Close (Index)Loading layerConstIndex=This.$layer.Open ({type:2,content:' Loading in ...‘,SuccessLayer) {Console.Log' Layer ID is:‘,Layer.ID)},End () {Console.Log' End‘)}})Bottom dialog boxThis.$layer.Open ({content:' This is a bottom popup asking for hints', BTN: [' Delete‘,' Cancel'],skin:' Footer‘,Yes: (Index= = {This.$layer.Open ({content: ' execute delete operation '})} )//page layer this .  $layer. open ({type: 1,content: ' can pass in any content, support HTML. Generally used in mobile phone pages ', Anim: ' Up ',//special Note that this style property is a little bit different from Layer-mobile and adds a s, because styles are reserved in Vue. : ' 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)

This. $layer. confirm (' Are you sure you want to delete it? alert (' Yesalert ')= = {this.  $layer. + )           
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

这些事件不适用于以插件形式调用的事件监听处理(它有自己的处理事件方法见以上api如yes、no等)

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

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.

Tags Index: