diff --git a/CHANGELOG.md b/CHANGELOG.md index fd84762d8..b2447e4a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,18 @@ > 1. 修订号：当你做了向下兼容的问题修正。 > 先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。 +## 1.2.0 +- 新增：` + - + + + + + + + + + + + + + + + + + + ) diff --git a/docs/zh-CN/grid.md b/docs/zh-CN/grid.md index 7bbd91838..2b0c0b841 100644 --- a/docs/zh-CN/grid.md +++ b/docs/zh-CN/grid.md @@ -10,8 +10,8 @@ ```js render(){ - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return (
@@ -43,8 +43,8 @@ render(){ ```js render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return ( @@ -75,8 +75,8 @@ render() { ```js render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return (
@@ -120,8 +120,8 @@ render() { ```js render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return ( @@ -158,8 +158,8 @@ render() { ```js render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return (
diff --git a/docs/zh-CN/i18n.md b/docs/zh-CN/i18n.md index dfaa881d6..2773c0a94 100644 --- a/docs/zh-CN/i18n.md +++ b/docs/zh-CN/i18n.md @@ -28,8 +28,8 @@ constructor(props) { } render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col return (
diff --git a/docs/zh-CN/input.md b/docs/zh-CN/input.md index a2fcf34e0..944943c7c 100644 --- a/docs/zh-CN/input.md +++ b/docs/zh-CN/input.md @@ -217,6 +217,91 @@ render() { ::: + +### 前置元素 + +:::demo + +国际号码 + +```js +constructor () { + super() + this.state = { + tel: '', + value: '', + selectValue: '86', + singleList: [ + { name:'+86', id:'86' }, + { name:'+1', id:'1' }, + { name:'+33', id:'33' }, + { name:'+91', id:'91' }, + ] + } +} +render() { + const { + value, + selectValue, + singleList + } = this.state + + return ( +
+ this.setState({value: e.target.value})} + prepend={ + 搜索} + placeholder="请输入邮箱(数字、字母、下划线)" + style={{width: '250px'}} + /> +
+ ) +} +``` +::: + + ### 多行文本 :::demo @@ -249,6 +334,8 @@ render() { | required | 是否必填 | string | true/false | false | | prefix | 前缀 | string | - | - | | suffix | 后缀 | string | - | - | +| prepend | 前置元素 | Element | - | - | +| append | 后置元素 | Element | - | - | ### Input Events diff --git a/docs/zh-CN/loading.md b/docs/zh-CN/loading.md index 38b201b21..400b0a37f 100644 --- a/docs/zh-CN/loading.md +++ b/docs/zh-CN/loading.md @@ -81,6 +81,7 @@ clickEvent () { showLoading: true }) this.mockTableData().then(res => { + this.setState({ showLoading: false, list: res, @@ -131,6 +132,55 @@ render () { ``` ::: + +### 接口调用 +:::demo + +```js +constructor () { + super() + this.state = { + open: false + } + this.el = null +} + +demoEvent1 () { + const l = Loading.open() + setTimeout(() => { + l.close() + }, 3000) +} +demoEvent2 () { + const l = Loading.open({ + target: this.el, + tip: '加载中...' + }) + setTimeout(() => { + l.close() + }, 3000) +} +render () { + return
+ + +
{this.el = el}} style={{margin: 20}}> + + + 我是标题 +
+ } + > +

Panel content

+ +
+
+} +``` +::: + ### Loading Attributes | 参数 | 说明 | 类型 | 可选值 |默认值 | @@ -138,4 +188,5 @@ render () { | size | 组件大小 | string | large default small | default | | tip | 自定义的旋转动画下的文字 | string | - | | | full | 是否全屏 | bool | - | false | -| show | 是否显示加载动画 | boolean | true false | false | \ No newline at end of file +| show | 是否显示加载动画 | boolean | true false | false | +| target | 用于指令调用时,Loading 遮罩的元素，为空时将整页遮罩 | Element、ReactElement | | | \ No newline at end of file diff --git a/docs/zh-CN/modal.md b/docs/zh-CN/modal.md index 798afc35e..e8253d785 100755 --- a/docs/zh-CN/modal.md +++ b/docs/zh-CN/modal.md @@ -25,7 +25,6 @@ {console.log('自定义确定事件')}} onCancel={this.cancelEvent.bind(this)} > @@ -36,6 +35,75 @@
) } +``` +::: + +### 自定义尺寸 + + +:::demo + +- 通过 size 自定义尺寸，可使用 `large`、`nomal`、`small`，默认为 `normal` + +```js + constructor (props) { + super(props) + this.state = { + show: false, + size: 'normal', + sizeList: [ + { + name: '标准', + id: 'normal' + }, + { + name: '大', + id: 'large' + }, + { + name: '小', + id: 'small' + } + ], + sizeListActive: 0 + } + } + cancelEvent () { + this.setState({ + show: false + }) + console.log("关闭事件") + } + render(){ + return( +
+ { + this.setState({ + size: data, + sizeListActive: index + }) + }} + /> + + 关闭 + ]} + > + 一些消息 + 一些消息 + + +
+ ) + } ``` @@ -45,8 +113,10 @@ :::demo -> 通过 footers自定义底部的按钮，并执行对应自定义事件
-> 通过 closeBtn 取消右上角关闭按钮
+ +- 通过 footers自定义底部的按钮，并执行对应自定义事件 +- 通过 closeBtn 取消右上角关闭按钮 + ```js constructor (props) { super(props) @@ -68,15 +138,13 @@ title="提示消息" closeBtn={false} show={this.state.show} - backDrop={true} onConfirm={()=>{console.log('自定义确定事件')}} onCancel={this.cancelEvent.bind(this)} - // width={800} footers={[ - , - , - , - + , + , + , + ]} > 一些消息 @@ -94,8 +162,10 @@ ### 嵌套用法 :::demo -> 未传入title 及 closeBtn 为 false，可取消 title 部分
-> footers 传入空数组，可取消底部按钮 + +- 未传入title 及 closeBtn 为 false，可取消 title 部分 +- footers 传入空数组，可取消底部按钮 + ```js constructor (props) { super(props) @@ -186,8 +256,6 @@
) } - - ``` ::: @@ -195,15 +263,14 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----- | ---- | ---- | ---- | -| confirmType | 确定按钮类型 | string（同 button 组件的 type 属性） | - | primary | -| cancelType | 取消按钮类型 | string（同 button 组件的 type 属性）| - | default | | title | 标题 | string
Node
React.Component | - | 无 | | onConfirm | 点击确定的回调 | function | - | 无 | | onCancel | 点击遮罩或者右上角取消或者取消按钮的回调 | function | - | 无 | | confirmText | 确定按钮文字 | string | - | 确定 | | cancelText | 取消按钮文字 | string | - | 取消 | | backDrop | 点击黑色背景部分是否隐藏弹框 | boolean | true / false | true | -| width | 自定义弹窗宽度 | number
string | - | 540px | +| size | 定义弹窗尺寸 | string | normal, large, small | normal | +| width | 自定义弹窗宽度 | number
string | - | 600px | | closeBtn | 是否显示右上角关闭按钮 | bool | - | true | | footers | 自定义底部按钮数组（传入空数组将取消底部按钮） | array | - | - | | show | 弹窗是否显示 | bool | true / false | false | diff --git a/docs/zh-CN/radio.md b/docs/zh-CN/radio.md index c9ec598c7..8d9b9ae26 100644 --- a/docs/zh-CN/radio.md +++ b/docs/zh-CN/radio.md @@ -62,6 +62,9 @@ render() { list={this.state.play} onChange={(data)=>{ console.log(data) + this.setState({ + people: [] + }) }} checked={1} disabled={1} diff --git a/docs/zh-CN/select.md b/docs/zh-CN/select.md index 7db505b24..dd9a5cd1e 100644 --- a/docs/zh-CN/select.md +++ b/docs/zh-CN/select.md @@ -29,6 +29,7 @@ render () {
this.setState({from: e.target.value})} /> + + + + + + { + let {data: {data, page: {pageSize, totalNum, pageNum}}} = res + return { + data, + columns: this.columns, + page: { + pageSize, + total: totalNum, + current: pageNum + } + } + }, + error: () => { + + } + }} + /> + + ) + } +``` +::: ### Table Attributes | 参数 | 说明 | 类型 | 默认值 | diff --git a/docs/zh-CN/theme.md b/docs/zh-CN/theme.md index eef935001..fa6dd7d57 100644 --- a/docs/zh-CN/theme.md +++ b/docs/zh-CN/theme.md @@ -20,8 +20,8 @@ import { ThemeContext } from '@hi-ui/hiui/es/context' ```js render() { - const Row = Layout.Row - const Col = Layout.Col + const Row = Grid.Row + const Col = Grid.Col const stepperList = [ { diff --git a/package.json b/package.json index d4d2d9a6a..669e904b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "1.1.5", + "version": "1.2.0", "description": "HIUI for React", "scripts": { "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",