spz-variants 商品变体

展示商品变体块。

布局

container

何时使用

需要展示商品变体并可以进行选择时，一般用在商品详情页、快速加购弹窗等。

代码演示

基本用法

仅支持 fieldset 和 select 元素作为单个变体块，它们需要带有一个 name 属性，值为变体名称，表示当前是哪个变体块。
变体块内部使用原生表单控件来实现变体选中。
单个变体选项元素需要带有 option 属性，它的值与 value 属性值一致，表示当前变体选项值。

<script id="product-json" type="application/json">
  {
    "product": "...",
    "selected": "..."
  }
</script>

<spz-variants layout="container" src="script:product-json" manual interference inherit-url-variant>
  <fieldset name="Color">
    <legend class="w-full">
      <span>Color</span>
    </legend>
    <div>
      <label>
        <input type="radio" option="DarkKhaki" name="product-info-variant-Color" value="DarkKhaki">
        <span>DarkKhaki</span>
      </label>
      <label>
        <input type="radio" option="SteelBlue" name="product-info-variant-Color" value="SteelBlue">
        <span>SteelBlue</span>
      </label>
    </div>
  </fieldset>
  <fieldset name="Size">
    <legend class="w-full">
      <span>Size</span>
    </legend>
    <div>
      <label>
        <input type="radio" option="S" name="product-info-variant-Size" value="S">
        <span>S</span>
      </label>
      <label>
        <input type="radio" option="M" name="product-info-variant-Size" value="M">
        <span>M</span>
      </label>
    </div>
  </fieldset>
</spz-variants>

属性

属性名	说明	类型	默认值	是否必需
src	获取数据的路径	string	-	否
manual	如果该属性存在，组件挂载时不立即渲染（或不立即请求数据）	-	-	-
inherit-url-variant	如果该属性存在，当没有默认变体时，从URL获取`variant`字段的值作为默认变体；当有变体切换时，会将当前选中的变体ID写入URL的`variant`字段	-	-	-
disabled-default-value	如果该属性存在，初始默认不选中任何变体	-	-	-
switch-slide	变体名称数组，当切换了配置的变体时，配置的 `slide` 轮播图也会切换到变体对应的图片	Array	-	否
slide	`spz-carousel`元素ID，当有多个ID时用`;`分隔	string	-	否
interact	当鼠标滑入或滑出变体选项时，自动触发 `mouseout` 或 `[variantName]mouseover` 事件，可选：`hover`	string	-	否
interference	如果该属性存在，当切换变体组合时，会去判断当前变体组合里的变体选项与其他变体选项组合时否可以选中	-	-	-
template	指定一个模版	string	-	否

src 数据来源方式

有两种获取数据的方式：

通过接口api获取数据
script:<scriptId>：通过 script 脚本获取数据

方法

variantsRender

渲染变体。

参数名	说明	类型	是否必需
product	商品数据。如果是数组，取第一个数组元素	Object \| Array	是

事件

event 对象数据

属性名	说明	类型
value	当前操作的变体`option`值	string
selectData	已选择的变体数据，仅当 `mouseout` 事件时才有数据	Object \| null

mouseout

当鼠标滑出变体选项时该事件会自动触发。

[variantName]mouseover

当鼠标滑入对应变体名称的选项时，会自动触发对应变体名称的mouseover事件。例如：有一个color的变体，当鼠标滑入它的变体选项时，会触发colormouseover事件。