spz-selector

Represents a control that presents a menu of options and lets the user choose from it.

布局

Usage

All child elements of the spz-selector must have an option attribute.
A child element has a selected attribute when it is selected.

<spz-selector name="selector" layout="fixed-height" height="48">
  <spz-img option="0" layout="fixed" width="48" height="48" src="./images/1.jpg"></spz-img>
  <spz-img option="1" layout="fixed" width="48" height="48" src="./images/2.jpg"></spz-img>
  <spz-img option="2" layout="fixed" width="48" height="48" src="./images/3.jpg"></spz-img>
</spz-selector>

Attributes

name

This attribute is used to specify the name of the control.

disabled

This attribute indicates that the user cannot interact with the control. If this attribute is present, then the control is enabled, and vice versa.

multiple

If this attribute is present, indicates that multiple options can be selected in the list.

default-value

Specifies a selected option with the given default value. It is necessary when the variant-id is existing.

variant-id

Specifies the spz-variant id.

Actions

update

update(data=<Object>)

Use the passed data to render the template content when the element has a template. It has a parameter:

data: required. A Object attribute. Re-render the template data.

clear

Remove all selected options. No parameter required.

<button type="button" @tap="selector.clear">Clear All options</button>

toggle

toggle(option=<Number>[, value=<Boolean>])

The option specified by toggle is between selection and non-selection.

option: required. A option value that specifies the element currently to be toggled.
value: Specify whether to selected. If its value is true, select the element of the current option.

<button type="button" id="button" @tap="selector.toggle(option=2)">Toggle the second option</button>

Events

event object data

{
  "eventName": "mouseover", // the current trigger event name
  "name": "image-selector", // the current name attribute value
  "targetOption": "2", // the current option value
  "selectedOptions": [], // the current selected options
  "defaultValue": null,
  "originData": { // original data
    // ...
  }
}

mounted

Be automatically triggered when the element is mounted, and the default-value is present.

select

Be automatically triggered when selecting an option.

mouseover

Be automatically triggered when a user is an option to the mouse over.

<spz-render id="render" layout="container" manual>
  <template>
    <div>
      <span>The selected option is ${data.targetOption}</span>
    </div>
  </template>
</spz-render>

<spz-selector
  name="image-selector"
  layout="fixed-height"
  height="48"
  @mouseover="render.rerender(data=event);"
>
  <spz-img option="0" layout="fixed" width="48" height="48" src="./images/1.jpg"></spz-img>
  <spz-img option="1" layout="fixed" width="48" height="48" src="./images/2.jpg"></spz-img>
  <spz-img option="2" layout="fixed" width="48" height="48" src="./images/3.jpg"></spz-img>
</spz-selector>

mouseout

Be automatically triggered when a user is an option to the mouse out.