|
|
@@ -0,0 +1,263 @@
|
|
|
+## 组件说明文档
|
|
|
+
|
|
|
+#### 所支持的组件
|
|
|
+- [输入框 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)
|
|
|
+
|
|
|
+#### 组件说明
|
|
|
+
|
|
|
+----
|
|
|
+
|
|
|
+#### <span id="w-field">输入框 w-field</span>
|
|
|
+
|
|
|
+##### 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 | 输入内容时触发 | 当前输入值 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-checkbox">多选框 w-checkbox </span>
|
|
|
+
|
|
|
+
|
|
|
+##### Props
|
|
|
+
|
|
|
+| 属性名 | 注释 |
|
|
|
+| --------- | ------------------------------------------ |
|
|
|
+| value | 值 **不支持简单双向绑定** |
|
|
|
+| options | 显示对象，例：[{ label: xxx, value: xxx }] |
|
|
|
+| direction | 排列方向，可选值为 vertical horizontal |
|
|
|
+
|
|
|
+##### EVENT
|
|
|
+
|
|
|
+| 事件名 | 说明 | 回调参数 |
|
|
|
+| ----------- | -------------- | :--------- |
|
|
|
+| bind:change | 选择内容时触发 | 当前选择值 |
|
|
|
+
|
|
|
+**注意：只能使用change事件获取选中的值**
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-radio">单选框 w-radio </span>
|
|
|
+
|
|
|
+##### Props
|
|
|
+
|
|
|
+| 属性名 | 注释 |
|
|
|
+| --------- | ------------------------------------------ |
|
|
|
+| value | 值 支持简单双向绑定 |
|
|
|
+| options | 显示对象，例：[{ label: xxx, value: xxx }] |
|
|
|
+| direction | 排列方向，可选值为 vertical horizontal |
|
|
|
+
|
|
|
+##### EVENT
|
|
|
+
|
|
|
+| 事件名 | 说明 | 回调参数 |
|
|
|
+| ----------- | -------------- |:---------- |
|
|
|
+| bind:input | 选择内容时触发 | 当前选择值 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-search">搜索框 w-search </span>
|
|
|
+
|
|
|
+##### Props
|
|
|
+
|
|
|
+| 属性名 | 注释 |
|
|
|
+| ---------------- | --------------------------------------- |
|
|
|
+| value | 值 支持简单双向绑定 |
|
|
|
+| placeholder | 搜索框的占位符 |
|
|
|
+| placeholderStyle | 搜索框的占位符样式，默认： #BDBDBD |
|
|
|
+| searchButtonText | 搜索按钮文字，默认：搜索 |
|
|
|
+| backgroundClass | 输入框的背景色 - 默认白色, [white gray] |
|
|
|
+
|
|
|
+
|
|
|
+##### EVENT
|
|
|
+
|
|
|
+| 事件名 | 说明 | 回调参数 |
|
|
|
+| ----------- | ---------------- |:---------- |
|
|
|
+| bind:change | 输入内容时触发 | 当前输入值 |
|
|
|
+| bind:search | 点击搜索按钮触发 | 当前输入值 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-dialog">对话框 w-dialog </span>
|
|
|
+
|
|
|
+##### 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 | 点击遮罩层触发 | -- |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-picker">单个/多个选择器 w-picker </span>
|
|
|
+
|
|
|
+##### 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事件来获取信息**
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-search-picker">带搜索选择器 w-search-picker </span>
|
|
|
+
|
|
|
+##### 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 | 输入内容时除法 | 当前输入值 |
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-area">省市区选择器 w-area </span>
|
|
|
+
|
|
|
+##### 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 | 点击取消按钮时触发 | -- |
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+#### <span id="w-datetime-picker">时间选择器 w-datetime-picker </span>
|
|
|
+
|
|
|
+##### Props
|
|
|
+
|
|
|
+| 属性名 | 注释 |
|
|
|
+| ---------------- | -------------------------------------------------- |
|
|
|
+| show | 是否显示 |
|
|
|
+| value | 值 不支持简单双向绑定 |
|
|
|
+| type | 类型，可选值为 date time year-month 不建议动态修改 |
|
|
|
+| zIndex | 层级 |
|
|
|
+| minDate | 可选的最小时间，数值 |
|
|
|
+| maxDate | 可选的最大时间 |
|
|
|
+| visibleItemCount | 可见的选项个数 |
|
|
|
+| itemHeight | 选项高度 |
|
|
|
+
|
|
|
+##### EVENT
|
|
|
+
|
|
|
+| 事件名 | 说明 | 回调参数 |
|
|
|
+| ------------ | ------------------ |:----------------------- |
|
|
|
+| bind:confirm | 点击完成按钮时触发 | 所有列选中对应label的值 |
|
|
|
+| bind:input | 点击完成按钮时触发 | 所有列选中值 |
|
|
|
+| bind:cancel | 点击取消按钮时触发 | -- |
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+#### <span id="w-empty">空状态 w-empty </span>
|
|
|
+
|
|
|
+##### Props
|
|
|
+
|
|
|
+| 属性名 | 注释 |
|
|
|
+| ------ | ---- |
|
|
|
+| image | 图片 |
|
|
|
+| text | 图片下方的描述文字 |
|
|
|
+
|
