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

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

button

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

属性说明

属性名类型默认值必填说明
sizestringdefault否按钮的大小
typestringdefault否按钮的样式类型
plainbooleanfalse否是否镂空
disabledbooleanfalse否是否禁用
loadingbooleanfalse否是否带 loading 图标
form-typestring否用于嵌在 form 组件中，控制 submit/reset
hover-classstringty-button-hover否点击状态的样式类
hover-start-timenumber20否按住后多久出现点击态，单位毫秒
hover-stay-timenumber70否手指松开后点击态保留时间，单位毫秒

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

多选项目。

属性说明

属性名类型默认值必填说明
valuestring否checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value
disabledbooleanfalse否是否禁用
checkedbooleanfalse否当前是否选中，可用来设置默认选中
colorstring#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 组成。

属性说明

属性名类型默认值必填说明
namestring否用于 <form /> 组件，在表单提交事件中作为提交数据的 key 值
bind:changeeventhandle否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:submiteventhandle否携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值
bind:reseteventhandle否表单重置时会触发 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 section-title">input</text><view class="tyui-cell"><input class="tyui-input" name="input" placeholder="请输入" /></view></view><view class="item-wrap"><text class="page-section-title section-title">textarea</text><view class="textarea-wrap"><textarea name="textarea" class="txtarea-box" bind:input="handleTextareaInput"></textarea></view></view><view class="btns-wrap"><view class="btn-line"><button form-type="submit" id="triggerBtn" data-info="提交的按钮" type="primary" class="submit-btn">提交</button></view><view class="btn-line"><button form-type="reset" id="resetBtn" data-info="reset的按钮" class="reset-btn">重置</button></view></view></form><view class="result-wrap"><view ty:for="{{resultData}}" ty:key="{{item.name}}" class="result-item"><text class="result-name">{{item.name}}: </text><text>{{item.value}}</text></view></view></view>
</view>
JS
Page({data: {resultContent: '',resultData: [{name: 'switch',value: '',},{name: 'slider',value: '',},{name: 'CheckboxGroup',value: '',},{name: 'RadioGroup',value: '',},{name: 'input',value: '',},{name: 'textarea',value: '',},],},onLoad: () => {},handleSubmit(ev) {const value = ev.detail.value;const resultData = [];for (let name in value) {resultData.push({name,value: value[name],});}this.setData({resultData,});},handleReset(ev) {const value = ev.detail.value;const resultData = [];for (let name in value) {resultData.push({name,value: value[name],});}this.setData({resultData,});},handleTextareaInput(ev) {console.log('textarea input event ', ev);},
});

常见问题（FAQ）

小程序 form 表单可以静默触发吗？

不支持，需要用户点击触发。

input 

输入框组件，用于键盘交互。

属性说明

属性名类型默认值必填说明备注
valuestring''是输入框的初始值。如果想在键盘输入时改变 input 框的值，可以直接在 bindinput 回调里 return 指定值
typestringtext否input 的类型
passwordbooleanfalse否是否是密码类型
placeholderstring是输入框为空时占位字符
placeholderStylestring否指定 placeholder 的样式
disabledbooleanfalse否是否禁用
maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度
confirm-typestringdone否设置键盘右下角按钮的文字, 支持 send(发送) search（搜索） next（下一项）go（前往）done（完成），具体右下角按钮文字以输入法显示为准iOS 仅 13.1 以上版本支持
bind:inputeventhandle是键盘输入时触发，event.detail = { value }
bind:focuseventhandle是输入框聚焦时触发，event.detail = { value }
bind:blureventhandle是输入框失去焦点时触发，event.detail = {value: value}
bind:confirmeventhandle是ios 点击换行按钮时触发，安卓点击完成按钮时触发，event.detail = { value }

type 的合法值

值说明备注
text文本输入键盘
number数字输入键盘

示例代码

TYML
<view class="page-section"><view class="page-section-title l-r-padding">控制最大输入长度的input</view><view class="tyui-cell"><inputclass="tyui-input"maxlength="{{10}}"placeholder="{{placeholder}}"/></view>
</view>
<view class="page-section"><view class="page-section-title l-r-padding">实时获取输入值：{{inputValue}}</view><view class="tyui-cell"><input class="tyui-input"  bind:input="bindKeyInput" bind:blur="bindKeyBlur" bind:focus="bindKeyFocus" placeholder="输入同步到view中"/></view>
</view>
<view class="page-section"><view class="page-section-title l-r-padding">数字输入的input</view><view class="tyui-cell"><input class="tyui-input" type="number" placeholder="这是一个数字输入框" /></view>
</view>
<view class="page-section"><view class="page-section-title l-r-padding">密码输入的input</view><view class="tyui-cell"><input class="tyui-input" password="{{true}}" type="text" placeholder="这是一个密码输入框" /></view>
</view>
JS
Page({data: {inputValue: '',placeholder: '最大输入长度为10',placeholderStyle: 'color:green',},bindKeyInput: function (e) {console.log('demo bindKeyInput', e.detail.value, e.detail);this.setData({inputValue: e.detail.value,});},bindKeyFocus: function (e) {console.log('demo bindKeyFocus', e.detail.value, e.detail);},bindKeyBlur: function (e) {console.log('demo bindKeyBlur', e.detail.value, e.detail);},
});
TYSS
.page-section {width: 100%;margin-bottom: 20px;
}
.page-section-title {color: rgba(0, 0, 0, 0.9);
}
.tyui-cell {font-size: 17px;padding: 0 16px;background-color: #fff;position: relative;display: flex;align-items: center;height: 56px;margin-top: 10px;
}
.tyui-input {width: 100%;border: 0;outline: 0;font-size: 17px;
}

常见问题（FAQ）

输入框是否支持点击事件，比如 tap、touch？

支持，所有的组件都支持 tap、touch 事件。

input 如何用 js 代码清空数据？

通过setData 给属性 value 设置为空，需要保证setData数值有变化。

input 内容跳动、延迟如何处理？

可以使用防抖函数。避免 bind:input的时候频繁更新。

iOS 在输入中文的时候出现丢焦情况，怎么办？

iOS的input在bind:Input中执行setData会导致在输入中文的时候丢焦。① 可对setData执行防抖操作 ②bind:Input的时候将数据存储在this下，避免一直 触发setData操作。

label

用来改进表单组件的可用性。

使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 checkbox, radio, switch。

标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。 将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。 另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，联系已隐含存在。

属性说明

属性名类型默认值必填说明
forstring否绑定控件的 id

示例代码

TYML
<label class="flex-algin-center"><checkbox value="test"></checkbox><text class="label-1__text">选项1</text>
</label>

picker

从底部弹起的滚动选择器，支持四种选择器，通过 mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，默认是 selector 普通选择器。

属性说明

属性名类型默认值必填说明
modestringselector否选择器类型
disabledbooleanfalse否是否禁用
confirm-textstring确定否确定按钮的文字
cancel-textstring取消否取消按钮的文字
bind:canceleventhandle否取消选择时触发

mode 的合法值

值说明
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器

除了上述通用的属性，对于不同的 mode，picker拥有不同的属性，见下方。

普通选择器：mode = selector

属性名类型默认值说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuearray[]表示选择了 range 中的第几个（下标从 0 开始）
bind:changeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

多列选择器：mode = multiSelector

属性名类型默认值说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuearray[]表示选择了 range 中的第几个（下标从 0 开始）
bind:changeeventhandlevalue 改变时触发 change 事件，event.detail = {value}
bind:columnchangeeventhandle列改变时触发

时间选择器：mode = time

属性名类型默认值说明
valuestring表示选中的时间，格式为"hh:mm"
startstring表示有效时间范围的开始，字符串格式为"hh:mm"
endstring表示有效时间范围的结束，字符串格式为"hh:mm"
bind:changeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

时间选择器：mode = date

属性名类型默认值说明
valuestring当天表示选中的日期，格式为"YYYY-MM-DD"
startstring表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
endstring表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fieldsstringday有效值 year,month,day，表示选择器的粒度
bind:changeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

fields 有效值：

值说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

示例代码

TYML
<view class="section"><text class="page__desc">普通选择器</text><picker bind:change="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择：{{array[index]}}</view></picker>
</view>
<view class="section"><view class="page__desc">普通objectArray选择器</view><picker bind:change="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key="{{'id'}}"><view class="picker">当前选择：{{array[index]}}</view></picker>
</view>
<view class="section"><view class="page__desc">多列选择器</view><picker mode="multiSelector" bind:change="bindMultiPickerChange" bind:columnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view></picker>
</view>
</view>
<view class="section"><view class="page__desc">多列ObjectArray选择器</view><picker mode="multiSelector" bind:change="bindMultiPickerChange" bind:columnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'id'}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view></picker>
</view>
<view class="section"><view class="page__desc">时间选择器</view><picker mode="time" value="{{time}}" start="09:01" end="21:01" bind:change="bindTimeChange"><view class="picker">当前选择: {{time}}</view></picker>
</view><view class="section"><view class="page__desc">日期选择器</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bind:change="bindDateChange"><view class="picker">当前选择: {{date}}</view></picker>
</view>
JS
Page({data: {array: ['美国','中国','巴西','日本','印度','英国','澳大利亚','美国','中国','巴西','日本','印度','英国','澳大利亚',],objectArray: [{id: 0,name: '美国',},{id: 1,name: '中国',},{id: 2,name: '巴西',},{id: 3,name: '日本',},],index: 0,multiArray: [['无脊柱动物', '脊柱动物'],['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],['猪肉绦虫', '吸血虫'],],objectMultiArray: [[{id: 0,name: '无脊柱动物',},{id: 1,name: '脊柱动物',},],[{id: 0,name: '扁性动物',},{id: 1,name: '线形动物',},{id: 2,name: '环节动物',},{id: 3,name: '软体动物',},{id: 4,name: '节肢动物',},],[{id: 0,name: '猪肉绦虫',},{id: 1,name: '吸血虫',},],],multiIndex: [0, 0, 0],date: '2016-09-01',time: '12:01',customItem: '全部',},bindPickerChange: function (e) {console.log('picker 发送选择改变，携带值为', e.detail.value);this.setData({index: e.detail.value,});},bindMultiPickerChange: function (e) {console.log('picker 发送选择改变，携带值为', e.detail.value);this.setData({multiIndex: e.detail.value,});},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, '，值为', e.detail.value);var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex,};data.multiIndex[e.detail.column] = e.detail.value;switch (e.detail.column) {case 0:switch (data.multiIndex[0]) {case 0:data.multiArray[1] = ['扁性动物','线形动物','环节动物','软体动物','节肢动物',];data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];data.multiArray[2] = ['鲫鱼', '带鱼'];break;}data.multiIndex[1] = 0;data.multiIndex[2] = 0;break;case 1:switch (data.multiIndex[0]) {case 0:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['猪肉绦虫', '吸血虫'];break;case 1:data.multiArray[2] = ['蛔虫'];break;case 2:data.multiArray[2] = ['蚂蚁', '蚂蟥'];break;case 3:data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];break;case 4:data.multiArray[2] = ['昆虫','甲壳动物','蛛形动物','多足动物',];break;}break;case 1:switch (data.multiIndex[1]) {case 0:data.multiArray[2] = ['鲫鱼', '带鱼'];break;case 1:data.multiArray[2] = ['青蛙', '娃娃鱼'];break;case 2:data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];break;}break;}data.multiIndex[2] = 0;break;}this.setData(data);},bindDateChange: function (e) {console.log('picker 发送选择改变，携带值为', e.detail.value);this.setData({date: e.detail.value,});},bindTimeChange: function (e) {console.log('picker 发送选择改变，携带值为', e.detail.value);this.setData({time: e.detail.value,});},
});

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column 组件，其它节点不会显示。

属性说明

属性名类型默认值必填说明
valueArray<number>否数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-stylestring否设置选择器中间选中框的样式
mask-stylestring否设置蒙层的样式
bind:changeeventhandle否滚动选择时触发 change 事件，event.detail = {value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
bind:pickstarteventhandle否当滚动选择开始时候触发事件
bind:pickendeventhandle否当滚动选择结束时候触发事件

picker-view-column

滚动选择器子项。需要配合 <picker-view /> 使用, 仅可放置于 picker-view 中，其高度会自动设置成与 picker-view 的选中框的高度一致

示例代码

请参考 picker-view 组件。

radio

单选项目。

属性说明

属性名类型默认值必填说明
valuestring否radio 标识。当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value
checkedbooleanfalse否当前是否选中
disabledbooleanfalse否是否禁用
colorstring#007AFF否radio 的颜色，同 css 的 color

radio-group

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

属性说明

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

示例代码

TYML
<radio-group class="radio-group" bind:change="radioChange"><view ty:for="{{items}}" ty:key="name"><label><radio class="radio" value="{{item.name}}" checked="{{item.checked}}"></radio><text class="text">{{item.value}}</text></label></view>
</radio-group>
JS
Page({data: {items: [{ name: 'USA', value: '美国' },{ name: 'CHN', value: '中国', checked: 'true' },{ name: 'BRA', value: '巴西' },{ name: 'JPN', value: '日本' },{ name: 'ENG', value: '英国' },{ name: 'FRA', value: '法国' },],},radioChange: function (e) {console.log('radio发生change事件，携带value值为：', e.detail.value);},
});

slider

滑动选择器。

属性说明

属性名类型默认值必填说明
minnumber0否最小值
maxnumber100否最大值
stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除
disabledbooleanfalse否是否禁用
valuenumber0否当前取值
active-colorcolor#007aff否已选择的颜色
background-colorcolorrgba(0,0,0,.2)否背景条的颜色
block-sizenumber28否滑块的大小，取值范围为 12 - 28
block-colorcolor#ffffff否滑块的颜色
show-valuebooleanfalse否是否显示当前 value
bind:changeeventhandle否完成一次拖动后触发的事件，event.detail = {value}
bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value}

示例代码

TYML
<view class="page l-r-padding"><view class="page__bd"><view class="section"><text class="section__title">基础</text><view class="body-view"><slider value="{{30}}"  bind:changing="slider1changing" bind:change="slider1change" /></view></view><view class="section"><text class="section__title">设置step</text><view class="body-view"><slider  bind:change="slider2change" step="{{5}}"/></view></view><view class="section"><text class="section__title">显示当前value</text><view class="body-view"><slider bind:change="slider3change" showValue="{{true}}" /></view></view><view class="section"><text class="section__title">设置最小/最大值</text><view class="body-view"><slider bind:change="slider4change" min="{{50}}" max="{{200}}" /></view></view></view>
</view>
JS
var pageData = {};
for (var i = 1; i < 5; ++i) {(function (index) {pageData[`slider${index}change`] = function (e) {console.log(`slider${index}发生change事件，携带值为`, e.detail.value);};})(i);
}
Page(pageData);
TYSS
.section {margin-bottom: 30px;
}
.section__title {font-size: 14px;color: #999;margin-bottom: 5px;
}

switch

开关选择器。

属性说明

属性名类型默认值必填说明
checkedbooleanfalse否是否选中
disabledbooleanfalse否是否禁用
typestringswitch否样式，有效值：switch, checkbox
colorcolor#007AFF否switch 的颜色，同 css 的 color
bind:changeeventhandle否checked 改变时触发 change 事件，event.detail={ value:checked }

示例代码

TYML
<view><view><view>默认选中：</view><switch checked="{{isChecked}}" bind:change="handleSwitchChange"></switch></view><view><view>disabled：</view><switch disabled="true" bind:change="handleSwitchChange"></switch></view><view><view>type：</view><switch type="checkbox" bind:change="handleSwitchChange"></switch></view><view><view>color:</view><switch color="var(--ty-native-warn-color)" bind:change="handleSwitchChange"></switch></view>
</view>

textarea

多行文本输入框。

属性说明

属性名类型默认值必填说明备注
valuestring--否输入框的内容
placeholderstring--否输入框为空时占位符
placeholder-stylestring--否指定 placeholder 的样式
disabledbooleanfalse否是否禁用
maxlengthnumber-1否最大输入长度，设置为 -1 的时候不限制最大长度
auto-heightbooleanfalse否是否自动增高，设置 auto-height 时，设置 height 样式不生效
bind:inputeventhandler--否键盘输入时触发，e.detail={value}
bind:focuseventhandler--否输入框聚焦时触发，event.detail={value}
bind:blureventhandler--否输入框失去焦点时触发，event.detail={value}
bind:linechangeeventhandler--否输入框行数变化时调用，event.detail = {height: 0, lineCount: 0}

示例代码

TYML
<view class="page-body"><view class="page-section"><view class="page-section-title l-r-padding">输入区域高度自适应，不会出现滚动条</view><view class="textarea-wrp"><textareaclass="textarea-box"auto-height="true"bind:input="bindTextAreainput"bind:focus="bindTextAreaFocus"bind:blur="bindTextAreaBlur"bind:linechange="linechange"/></view></view>
</view>
JS
Page({data: {value: '',},bindTextAreainput: function (e) {console.log('demo bindTextAreainput', e.detail.value, e.detail);this.setData({value: e.detail.value,});},bindTextAreaFocus: function (e) {console.log('demo bindTextAreaFocus', e.detail.value, e.detail);},bindTextAreaBlur: function (e) {console.log('demo bindTextAreaBlur', e.detail.value, e.detail);},linechange: function (e) {console.log('demo linechange', e.detail);},
});
TYSS
.textarea-box {width: 100%;padding: 12px 0;
}
.page-section {width: 100%;margin-top: 30px;
}
.textarea-wrp {padding: 0 12px;background-color: #fff;margin: 10px 20px;
}
.placeholder {color: red;font-size: 20px;background: goldenrod;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/628771.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

opencv_角点检测

opencv_角点检测

文章内容 一个opencv检测角点的程序 运行效果 #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream>using namespace cv; using namespace std;void detectCorners(M…
阅读更多...
低代码-详情页组件设计

低代码-详情页组件设计

详情页数据结构定义 layout:{// 按钮数据buttonLayout:{headButton:[], // 页头按钮footButton:[] // 页脚按钮},// 详情页表单配置config:{}, // 配置组件列表detailLayout:[]}默认行为 进表单初始化&#xff0c;只展示表单属性&#xff0c;隐藏通用、数据、事件tab项。 配…
阅读更多...
低代码自动化平台| 游戏规则改变者

低代码自动化平台| 游戏规则改变者

自动化测试对于软件开发公司起着非常重要的作用。它在公司及其客户之间建立了对优质产品的信任。此外&#xff0c;它还使软件开发人员更加自信&#xff0c;因为他们可以在其他模块上工作&#xff0c;而不必担心应用程序的任何现有功能是否存在错误。在软件测试中融入自动化是必…
阅读更多...
数据分析-Pandas如何整合多张数据表

数据分析-Pandas如何整合多张数据表

数据分析-Pandas如何整合多张数据表 数据表&#xff0c;时间序列数据在数据分析建模中很常见&#xff0c;例如天气预报&#xff0c;空气状态监测&#xff0c;股票交易等金融场景。数据分析过程中重新调整&#xff0c;重塑数据表是很重要的技巧&#xff0c;此处选择Titanic数据…
阅读更多...
多测师肖sir___ui自动化测试po框架（升级）

多测师肖sir___ui自动化测试po框架（升级）

ui自动化测试po框架&#xff08;升级&#xff09; po框架 一、ui自动化po框架介绍 &#xff08;1&#xff09;PO是Page Object的缩写&#xff08;pom模型&#xff09; &#xff08;2&#xff09;业务流程与页面元素操作分离的模式&#xff0c;可以简单理解为每个页面下面都有一…
阅读更多...
【linux】visudo

【linux】visudo

碎碎念 visudo命令是用来修改一个叫做 /etc/sudoers 的文件的&#xff0c;用来设置哪些 用户 和 组 可以使用sudo命令。并且使用visudo而不是使用 vi /etc/sudoers 的原因在于&#xff1a;visudo自带了检查功能&#xff0c;可以判断是否存在语法问题&#xff0c;所以更加安全 …
阅读更多...
深入探讨 Go 语言中的 Map 类型（续）

深入探讨 Go 语言中的 Map 类型（续）

深入探讨 Go 语言中的 Map 类型&#xff08;续&#xff09; 在上一篇博客中&#xff0c;我们已经讨论了 Go 语言中 map 类型的基本概念、特性以及最佳实践。本篇继续深入&#xff0c;讨论一些更高级的 map 用法和技巧&#xff0c;以及一些注意事项。 更高级的 Map 用法 1. m…
阅读更多...
7.评价预测模型——C指数，NRI，IDI计算

7.评价预测模型——C指数，NRI，IDI计算

目录 基本知识 1. C指数 2. NRI、IDI 二分类资料 1. C指数 C指数计算 比较两个模型C指数 2. NRI 3. IDI 生存资料 1. rms包拟合的生存曲线 C指数 比较两个模型的C指数 2. survival包拟合的生存曲线 C指数 NRI计算 IDI 基本知识 1. C指数 C指数&#xff1a; …
阅读更多...
给VScode 挪挪窝

给VScode 挪挪窝

给VSCode 挪挪窝 vscode platoformio 写一些代码&#xff0c;导致笔记本c盘满满当当的&#xff0c; 挪了几次都不成功&#xff0c;今天学了一招&#xff0c;给这俩挪到另外一个盘去 复制文件 cp -R c:\users\user\.vscode d:\work\tools\PIO\.vscode cp -R c:\users\user…
阅读更多...
stm32 - 基础架构

stm32 - 基础架构

stm32 - 基础架构 基础架构外设概念系统结构引脚定义晶振工程 基础架构 外设概念 NVIC &#xff08;内核外设&#xff09; SysTick &#xff08;内核外设&#xff09; 其他是片上外设 系统结构 内核引出三条总线 ICode 指令总线&#xff1a; 连接Flash闪存&#xff08;编写的…
阅读更多...
C# wpf 获取控件刷新的时机

C# wpf 获取控件刷新的时机

文章目录 前言一、为何要获取刷新时机&#xff1f;例子一、隐藏控件后截屏例子二、修改控件大小后做计算 二、如何实现&#xff1f;1.使用动画2.使用TaskCompletionSource 三、完整代码四、使用示例1、隐藏工具条截屏2、修改宽高后获取ActualWidth、ActualHeight 总结 前言 做…
阅读更多...
【算法题】58. 最后一个单词的长度

【算法题】58. 最后一个单词的长度

题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1&#xff1a; 输入&#xff1a;s "Hello World" 输出&#…
阅读更多...
计算机网络（超详解！） 第二节 数据链路层（上）

计算机网络（超详解！） 第二节 数据链路层（上）

1.数据链路层使用的信道 数据链路层使用的信道主要有以下两种类型&#xff1a; 1.点对点信道&#xff1a;这种信道使用一对一的点对点通信方式。 2.广播信道&#xff1a;这种信道使用一对多的广播通信方式&#xff0c;因此过程比较复杂。广播信道上连接的主机很多&#xff0…
阅读更多...
力扣刷MySQL-第二弹（详细解析）

力扣刷MySQL-第二弹（详细解析）

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…
阅读更多...
Laya寻路在构建过程中阻塞页面加载问题处理

Laya寻路在构建过程中阻塞页面加载问题处理

如果json文件有三四百kb以上&#xff0c;那么构建寻路的时候会非常卡&#xff0c;甚至阻塞模型加载&#xff0c;这时候可以使用worker来构建新的线程避免阻塞页面的模型 使用worker处理阻塞问题 navWorker.js: 这个文件放在src中在运行的时候会报错找不到&#xff0c;所以worke…
阅读更多...
华为设备VRRP配置

华为设备VRRP配置

核心代码&#xff1a; 需要对所有虚拟路由器设置&#xff08;要进入到对应的端口&#xff09; vrrp vrid 38 virtual-ip 192.168.10.254 vrrp vrid 38 priority 120 vrrp vrid 38 track int g0/0/1 reduced 30①mac由vrid生成 ②指定虚拟ip ③虚拟ip作为内部主机的网关&#x…
阅读更多...
如何在云端加速缓存构建

如何在云端加速缓存构建

缓存是指将某类数据存储起来以便以后重复使用的过程&#xff0c;它的运用在开发场景中非常普遍。类似于你习惯把最常用的调料放在厨房台面上&#xff0c;而不是橱柜里&#xff0c;这样你在准备大餐时就可以轻松取用。 但对于一个更为技术性、更精确的用例&#xff0c;比如像谷…
阅读更多...
js中如何从tree数据中找出某一项以及父级和祖先级

js中如何从tree数据中找出某一项以及父级和祖先级

js中如何从tree数据中找出某一项以及父级和祖先级 递归方法迭代方法&#xff1a;深度优先搜索&#xff08;DFS&#xff09;广度优先搜索&#xff08;BFS&#xff09; 扩展&#xff1a; js中迭代方法主要有哪些 js中如何从tree数据中找出某一项以及父级和祖先级 在JavaScript中…
阅读更多...
云服务器基于Centos创建个人云盘实践经验分享

云服务器基于Centos创建个人云盘实践经验分享

文章目录 安装运行Cloudreve安装ossfscentos更换yum源 配置ossfs挂载oss存储配置开机启动 配置cloudreve推荐阅读 安装运行Cloudreve 执行如下命令&#xff0c;下载cloudreve安装包。 wget https://labfileapp.oss-cn-hangzhou.aliyuncs.com/cloudreve_3.3.1_linux_amd64.tar…
阅读更多...
C#/WPF 设置和启动Windows屏保程序

C#/WPF 设置和启动Windows屏保程序

前言 我们平时电脑启动的屏保程序其本质也是应用程序&#xff0c;只是后缀名为.scr。所以我们只需要把应用程序后缀改为.scr&#xff0c;然后右键选择安装即可启动我们自己的屏保程序。 屏保注册表参数 设置电脑屏保参数&#xff0c;在个性化设置>锁屏界面>屏幕保护程序设…
阅读更多...
最新文章

Copyright @ 2022~2023