classroom-music-activation/miniprogram/common-components

组件说明文档

所支持的组件

• 输入框 w-field
• 多选框 w-checkbox
• 单选框 w-radio
• 搜索框 w-search
• 对话框 w-dialog
• 单个/多个选择器 w-picker
• 带搜索选择器 w-search-picker
• 省市区选择器 w-area
• 时间选择器 w-datetime-picker
• 空状态 w-empty

组件说明

---

输入框 w-field

Props

属性名	注释
value	值 支持简单双向绑定
label	标题
border	是否显示内边框
disabled	是否禁用输入框
readonly	是否只读
center	是否居中
clearable	是否启用清除控件
clickable	是否开启点击反馈
isLink	是否展示右侧箭头并开启点击反馈
inputAlign	输入框内容对齐方式，可选值为 center right, 默认 left
titleWidth	标题宽度 默认5.2em
type	可设置为任意原生类型, 如 number idcard textarea digit nickname, 默认 text
placeholder	占位符
placeholderStyle	指定 placeholder 的样式
autosize	是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度
showWordLimit	是否显示字数统计，需要设置maxlength属性
labelAlign	左侧文本对齐方式，可选值为 top, 默认 left

EVENT

事件名	说明	回调参数
bind:input	输入内容时触发	当前输入值
bind:blur	输入框失焦时触发	当前输入值
bind:change	输入内容时触发	当前输入值

---

多选框 w-checkbox

Props

属性名	注释
value	值 不支持简单双向绑定
options	显示对象，例：[{ label: xxx, value: xxx }]
direction	排列方向，可选值为 vertical horizontal

EVENT

事件名	说明	回调参数
bind:change	选择内容时触发	当前选择值

注意：只能使用change事件获取选中的值

---

单选框 w-radio

Props

属性名	注释
value	值 支持简单双向绑定
options	显示对象，例：[{ label: xxx, value: xxx }]
direction	排列方向，可选值为 vertical horizontal

EVENT

事件名	说明	回调参数
bind:input	选择内容时触发	当前选择值

---

搜索框 w-search

Props

属性名	注释
value	值 支持简单双向绑定
placeholder	搜索框的占位符
placeholderStyle	搜索框的占位符样式，默认： #BDBDBD
searchButtonText	搜索按钮文字，默认：搜索
backgroundClass	输入框的背景色 - 默认白色, [white gray]

EVENT

事件名	说明	回调参数
bind:change	输入内容时触发	当前输入值
bind:search	点击搜索按钮触发	当前输入值

---

对话框 w-dialog

Props

属性名	注释
show	是否显示
title	标题
message	文本内容
messageAlign	内容对齐方式，可选值为left right
theme	样式风格，可选值为round-button，默认：default
zIndex	层级
showConfirmButton	是否展示确认按钮
showCancelButton	是否展示取消按钮
confirmButtonText	确认按钮的文案
cancelButtonText	取消按钮的文案
overlay	是否展示遮罩层
closeOnClickOverlay	是否在点击遮罩层后关闭

EVENT

事件名	说明	回调参数
bind:close	点击取消按钮触发	--
bind:confirm	点击确认按钮触发	当前选中的值
bind:click-overlay	点击遮罩层触发	--

---

单个/多个选择器 w-picker

Props

属性名	注释
value	值 不支持简单双向绑定
show	是否显示
columns	列数据 单列 [{ text: a, value: 1 }]；多列 [{ values: [{ text: a, value: 1 }, { text: b, value: 2 }], defaultIndex: 0 }]
zIndex	层级
visibleItemCount	可见的选项个数
itemHeight	选项高度
placeholder	输入框占位提示文字

EVENT

事件名	说明	回调参数
bind:confirm	点击完成按钮时触发	所有列选中值，所有列选中值对应的索引
bind:input	点击完成按钮时触发	所有列选中值
bind:cancel	点击取消按钮时触发	--
bind:change	输入内容时触发	所有列选中值，所有列选中值对应的索引

注意：如果是多个选择器则需要使用confirm事件来获取信息

---

带搜索选择器 w-search-picker

Props

属性名	注释
value	值 不支持简单双向绑定
show	是否显示
columns	列数据 单列 [{ text: a, value: 1 }]；
zIndex	层级
visibleItemCount	可见的选项个数
itemHeight	选项高度
placeholder	输入框占位提示文字
searchValue	搜索框的值
searchLoading	点击搜索时的状态

EVENT

事件名	说明	回调参数
bind:confirm	点击完成按钮时触发	所有列选中值，所有列选中值对应的索引
bind:input	点击完成按钮时触发	所有列选中值
bind:cancel	点击取消按钮时触发	--
bind:change	输入内容时触发	所有列选中值，所有列选中值对应的索引
bind:search	点击搜索时触发	搜索框输入的值
bind:search-change	输入内容时除法	当前输入值

---

省市区选择器 w-area

Props

属性名	注释
show	是否显示
value	值 不支持简单双向绑定
columns	列数据 [{ id: xxx, code: xxx, name: xxx, area: [{ id: xxx ,code: xxx, name: xxx, area: [] }]
zIndex	层级
visibleItemCount	可见的选项个数
itemHeight	选项高度
separator	数据分隔符

EVENT

事件名	说明	回调参数
bind:confirm	点击完成按钮时触发	所有列选中值，及对应label的值
bind:input	点击完成按钮时触发	所有列选中值
bind:cancel	点击取消按钮时触发	--

---

时间选择器 w-datetime-picker

Props

属性名	注释
show	是否显示
value	值 不支持简单双向绑定
type	类型，可选值为 date time year-month 不建议动态修改
zIndex	层级
minDate	可选的最小时间，数值
maxDate	可选的最大时间
visibleItemCount	可见的选项个数
itemHeight	选项高度

EVENT

事件名	说明	回调参数
bind:confirm	点击完成按钮时触发	所有列选中对应label的值
bind:input	点击完成按钮时触发	所有列选中值
bind:cancel	点击取消按钮时触发	--

---

空状态 w-empty

Props

属性名	注释
image	图片
text	图片下方的描述文字