Actions and Events
The @eventName is used to install event handlers on elements. The events are supported depend on the element.
The value for the syntax is a simple form:
@eventName="targetId.methodName[(arg1=value, arg2=value2, ...)]"See the table below for descriptions of each part of the syntax:
| Parameter | Description | Required |
|---|---|---|
| eventName | Indicates the name of the event that an element exposes | Yes |
| targetId | Indicates the DOM id for the element | Yes |
| methodName | Indicates elements with default actions. This is the method that the target element (referenced by targetId) exposes and you’d like to execute when the event is triggered |
Yes |
| arg=value | Some actions, if documented, may accept arguments. The arguments are defined between parentheses in key=value notation |
No |
Example
跳转到“Example”The spz-lightbox has a open action.
Every element has a tap event that is triggered when the element is clicked.
The spz-lightbox will be open when the user clicks the button.
<spz-lightbox id="lightbox" layout="nodisplay">
<!-- ... -->
</spz-lightbox>
<button @tap="lightbox.open" type="button">Open lightbox</button>Handling multiple events
跳转到“Handling multiple events”You can listen to multiple events on an element. Just like adding multiple attributes to an element, separate them with a space .
@tap="button.goToSlice(index=1);" @finish="render-container.rerender(data=event);"
Multiple actions in one event
跳转到“Multiple actions in one event”You can execute multiple actions on one event by sperating the actions with a semicolon ;.
@mounted="button.goToSlice(index=1);render-container.rerender(data=event);"
Element-specifiec events
跳转到“Element-specifiec events”tap
跳转到“tap”Fired when the element is clicked/tapped.
Input elements
跳转到“Input elements”change
Fired when the value of the element is changed and committed. It supports input, input[type="radio"], input[type="checkbox"], and `select.
<div id="text">Not yet selected</div>
<select @change="text.toggleClass(class='hidden', force=true);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>input-debounced
Fired when the value of the element is changed. This is similar to the standard change event, but it only fires when 300ms have passed after the value of the input has stopped changing. It supports that elements can fire input event.
input-throttled
Fired when the value of the element is changed. This is similar to the standard change event, but it is throttled to firing at most once every 100ms while the value of the input is changing. It supports that elements can fire input event.
form
跳转到“form”submit
Fired when the element is submitted.
Element-specifiec actions
跳转到“Element-specifiec actions”toggleClass
跳转到“toggleClass”toggleClass(class=<string>, force=<boolean>)
Toggles class of the target element. The force parameter is optional, and if defined, it ensures that class would only be added but not removed if set to true, and only removed but not added if set to false.
scrollTo
跳转到“scrollTo”scrollTo(position=<"top" | "center" | "bottom">[, target-id=<string>, duration=<number>])
Scroll to specify position. The target-id parameter is optional, and if defined, it will be scrolled to the specific position of the element.
focus
跳转到“focus”Sets focus on the specified element.