## 组件说明文档 #### 所支持的组件 - [输入框 w-field](#w-field) - [多选框 w-checkbox](#w-checkbox) - [单选框 w-radio](#w-radio) - [搜索框 w-search](#w-search) - [对话框 w-dialog](#w-dialog) - [单个/多个选择器 w-picker](#w-picker) - [带搜索选择器 w-search-picker](#w-search-picker) - [省市区选择器 w-area](#w-area) - [时间选择器 w-datetime-picker](#w-datetime-picker) - [空状态 w-empty](#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 | 图片下方的描述文字 |