智能小程序小部件(Widget)表单组件属性说明+代码明细

在 Tuya MiniApp Tools 中，新建项目并选择小部件(Widget)对应模板即可自动创建小部件(Widget)项目。

button

按钮，用于强调操作并引导用户去点击。

属性说明

属性名	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	是否镂空
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	是否带 loading 图标
form-type	string		否	用于嵌在 form 组件中，控制 submit/reset
hover-class	string	ty-button-hover	否	点击状态的样式类
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒

size 取值范围

值	说明
default	默认大小
mini	小尺寸

type 取值范围

值	说明
primary	蓝色
default	白色
warn	红色

form-type 取值范围

值	说明
submit	提交表单
reset	重置表单

示例代码

TYML

<view class="button-page">
  <button type="primary" bind:tap="handleFirstBtnTap">主操作</button>
  <button type="primary" loading="true">主操作</button>
  <button type="primary" disabled="true">主操作</button>
 
  <button type="default">次要操作</button>
  <button type="default" disabled="true">次要操作</button>
 
  <button type="warn">警告操作</button>
  <button type="warn" disabled="true">警告操作</button>
 
  <button type="primary" plain="true">按钮</button>
  <button type="primary" disabled="true" plain="true">不可点击按钮</button>
 
  <button type="default" plain="true">按钮</button>
  <button type="default" disabled="true" plain="true">按钮</button>
 
  <view class="button-sp-area">
    <button class="mini-btn" type="primary" size="mini">按钮</button>
    <button class="mini-btn" type="default" size="mini">按钮</button>
    <button class="mini-btn" type="warn" size="mini">按钮</button>
  </view>
</view>

JS

Page({
  data: {
    isPlain: true,
    buttonText: '点击',
    count: 1,
  },
  handleFirstBtnTap() {
    this.setData({
      count: ++this.data.count,
    });
  },
});

常见问题（FAQ）

button 如何修改样式？

可直接给button设置class,直接进行样式覆盖。(2.X 小程序版本)。 button 默认宽度为 100%。

checkbox

多选项目。

属性说明

属性名	类型	默认值	必填	说明
value	string		否	checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value
disabled	boolean	false	否	是否禁用
checked	boolean	false	否	当前是否选中，可用来设置默认选中
color	string	#007AFF	否	checkbox 勾选符号的颜色，同 css 的 color

示例代码

TYML

<label>
  <checkbox class="checkItem" value="value1" disabled="true"></checkbox>选项 不可选
</label>

常见问题（FAQ）

如何通过 js 更改 checkbox 的选中状态？

可以直接 通过 setData checkbox的 checked 属性来控制checkbox的选中状态。

checkbox-group 

多项选择器组，内部由多个 checkbox 组成。

属性说明

属性名	类型	默认值	必填	说明
name	string		否	用于 <form /> 组件，在表单提交事件中作为提交数据的 key 值
bind:change	eventhandle		否	checkbox-group 中选中项发生改变时触发 change 事件，detail = {value:[选中的 checkbox 的 value 的数组]}

示例代码

TYML

<checkbox-group bind:change="checkboxChange">
  <view>
    <label>
      <checkbox class="checkItem" value="value1" disabled="true"></checkbox>选项1 不可选
    </label>
  </view>
  <view>
    <label>
      <checkbox class="checkItem" value="value2" ></checkbox>选项2
    </label>
  </view>
  <view>
    <label>
      <checkbox class="checkItem" value="value3"></checkbox>选项3
    </label>
  </view>
  <view>
    <label>
      <checkbox class="checkItem" value="value4" checked="true"></checkbox>选项4 默认选中
    </label>
  </view>
</checkbox-group>

JS

Page({
  data: {},
  checkboxChange(ev) {
    console.log(ev.detail.value);
  },
});

form 

表单。将组件内的用户输入的 input，textarea，checkbox-group，radio-group，picker，switch，slider 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

属性名	类型	默认值	必填	说明
bind:submit	eventhandle		否	携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值
bind:reset	eventhandle		否	表单重置时会触发 reset 事件

示例代码

TYML

<view class="form-page">
  <view class="page-section">
    <form bind:submit="handleSubmit" bind:reset="handleReset" id="formSelf">
      <view class="item-wrap">
        <text class="page-section-title section-title">switch</text>
        <switch name="switch"></switch>
      </view>
 
      <view class="item-wrap">
        <text class="page-section-title section-title">slider</text>
        <slider name="slider" show-value="{
  {true}}" value="{
  {42}}"></slider>
      </view>
 
      <view class="item-wrap">
        <text class="page-section-title section-title">checkbox</text>
        <checkbox-group name="CheckboxGroup">
          <checkbox class="radio" value="选项一">
            <text class="text">选项一</text>
          </checkbox>
          <checkbox class="radio" value="选项二">
            <text class="text">选项二</text>
          </checkbox>
        </checkbox-group>
      </view>
 
      <view class="item-wrap">
        <text class="page-section-title section-title">radio</text>
        <radio-group name="RadioGroup">
          <radio class="radio" value="单选一">
            <text class="text">单选一</text>
          </radio>
          <radio class="radio" value="单选二">
            <text class="text">单选二</text>
          </radio>
        </radio-group>
      </view>
 
      <view class="item-wrap">
        <text class=" page-section-title