mirror of https://github.com/ElemeFE/element
Changelog: update for 2.0.0-alpha.1 (#7303)
* minor updates & fixes * Changelog: update for 2.0.0-alpha.1 * update zh installation doc * update demo block scrollpull/7313/head
杨奕
Black Wayne
parent
bf76a7d941
commit
e089516e36
|
|
@ -1,5 +1,122 @@
|
|||
## Changelog
|
||||
|
||||
### 2.0.0-alpha.1
|
||||
|
||||
*2017-09-30*
|
||||
|
||||
#### New features
|
||||
- General
|
||||
- A new theme: `theme-chalk`
|
||||
- Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
|
||||
- Layout components: Container, Header, Aside, Main, Footer
|
||||
- Button
|
||||
- Added `round` attribute. It's used for round-cornered Buttons #6643
|
||||
- TimeSelect
|
||||
- Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023
|
||||
- TimePicker
|
||||
- Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050
|
||||
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
|
||||
- Tree
|
||||
- Now child nodes don't render before the first expand #6257
|
||||
- Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node
|
||||
in `lazy` mode #6235
|
||||
- Tag
|
||||
- Added `size` attribute #7203
|
||||
- Datepicker
|
||||
- Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052
|
||||
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
|
||||
- MessageBox
|
||||
- Added `closeOnHashChange` attribute #6043
|
||||
- Added `center` attribute so that the content can be centered #7029
|
||||
- Added `roundButton` attribute to display round Buttons #7029
|
||||
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043
|
||||
- Dialog
|
||||
- Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested
|
||||
- Added `center` attribute so that the content can be centered #7042
|
||||
- Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511
|
||||
- ColorPicker
|
||||
- Now you can type colors in the input box #6167
|
||||
- Added `size` and `disabled` attributes #7026
|
||||
- Message
|
||||
- Now color of the icons can be overridden by CSS #6207
|
||||
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207
|
||||
- Added `center` attribute so that the content can be centered #6875
|
||||
- Notification
|
||||
- Added `position` attribute to configure where Notification pops up #6231
|
||||
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231
|
||||
- Added `showClose` attribute to hide the close button #6402
|
||||
- Rate
|
||||
- Added `show-score` attribute to determine if current score is displayed #6295
|
||||
- Tabs
|
||||
- Added `tab-position` attribute #6096
|
||||
- Radio
|
||||
- Improved accessibility #6101
|
||||
- Added `border` and `size` attributes #6690
|
||||
- Checkbox
|
||||
- Added `border` and `size` attributes #6690
|
||||
- Alert
|
||||
- Added `center` attribute so that the content can be centered #6876
|
||||
- Menu
|
||||
- Added `background-color`, `text-color` and `active-text-color` attributes #7064
|
||||
- Form
|
||||
- Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032
|
||||
- Added `status-icon` attribute to display a feedback icon when validated #7032
|
||||
- Input
|
||||
- Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032
|
||||
- Breadcrumb
|
||||
- Added `separator-class` attribute to support icons as item separators #7203
|
||||
- Steps
|
||||
- Added `simple` attribute to activate simple-styled Steps #7274
|
||||
|
||||
#### Bug fixes
|
||||
- DatePicker
|
||||
- Fixed `v-model` returning the second day of the selected week in week mode #6038
|
||||
- Fixed the first input being cleared in `daterange` type #6021
|
||||
- DateTimePicker
|
||||
- Fixed DateTimePicker and TimePicker affecting each other when picked #6090
|
||||
- Fixed hour and second can be beyond limit when selecting time #6076
|
||||
- TimePicker
|
||||
- Fixed `v-model` not update correctly when blurred #6023
|
||||
- Dialog
|
||||
- Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
|
||||
- Select
|
||||
- Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
|
||||
|
||||
#### Breaking changes
|
||||
- General
|
||||
- Removed `theme-default`
|
||||
- `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
|
||||
- `size` attribute of Button and form components can no longer be set to `large`. Now they accept `medium`, `small` and `mini`
|
||||
- To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name
|
||||
- Dialog
|
||||
- Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`
|
||||
- Now the visibility of Dialog cannot be controlled by `v-model`
|
||||
- Rate
|
||||
- `text-template` is renamed to `score-template`
|
||||
- Dropdown
|
||||
- `menu-align` is renamed to `placement`. Now it supports more positions
|
||||
- Transfer
|
||||
- `footer-format` is renamed to `format`
|
||||
- Switch
|
||||
- `on-text` and `off-text` attributes now don't have default values
|
||||
- Tag
|
||||
- `type` attribute now accepts `success`, `info`, `warning` and `danger`
|
||||
- Menu
|
||||
- Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`
|
||||
- Input
|
||||
- Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
|
||||
- Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
|
||||
- Autocomplete
|
||||
- Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
|
||||
- Table
|
||||
- Removed support for customizing column template using `inline-template`
|
||||
- Steps
|
||||
- Removed `center` attribute
|
||||
- Now the Steps will fill its parent container by default
|
||||
|
||||
##
|
||||
<i><sup>*</sup> Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.</i>
|
||||
|
||||
### 1.4.6
|
||||
|
||||
*2017-09-27*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,120 @@
|
|||
## 更新日志
|
||||
|
||||
### 2.0.0-alpha.1
|
||||
*2017-09-30*
|
||||
|
||||
#### 新特性
|
||||
- 综合
|
||||
- 新增 `theme-chalk` 主题
|
||||
- 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload
|
||||
- 新增布局组件 Container、Header、Aside、Main 和 Footer
|
||||
- Button
|
||||
- 新增 `round` 属性，用于圆角按钮 #6643
|
||||
- TimeSelect
|
||||
- 可以用 `Up`、`Down` 导航，用 `Enter` 选中时间 #6023
|
||||
- TimePicker
|
||||
- 可以用方向键导航，用 `Enter` 选中时间 #6050
|
||||
- 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
|
||||
- Tree
|
||||
- 子节点在首次被展开之前不进行渲染 #6257
|
||||
- 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235
|
||||
- Tag
|
||||
- 新增 `size` 属性 #7203
|
||||
- Datepicker
|
||||
- type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052
|
||||
- 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
|
||||
- MessageBox
|
||||
- 新增 `closeOnHashChange` 属性 #6043
|
||||
- 新增 `center` 属性，提供居中布局 #7029
|
||||
- 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029
|
||||
- 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043
|
||||
- Dialog
|
||||
- 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用
|
||||
- 新增 `center` 属性，提供居中布局 #7042
|
||||
- 新增 `focus-after-closed`、`focus-after-open`属性，支持无障碍访问 #6511
|
||||
- ColorPicker
|
||||
- 增加手动输入色值的支持 #6167
|
||||
- 新增 `size` 属性，用于控制组件的大小 #7026
|
||||
- 新增 `disabled` 属性，用于禁用组件 #7026
|
||||
- Message
|
||||
- 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207
|
||||
- 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207
|
||||
- 新增 `center` 属性，提供居中布局 #6875
|
||||
- Notification
|
||||
- 新增 `position` 属性，用于配置 Notification 出现的位置 #6231
|
||||
- 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6231
|
||||
- 新增 `showClose` 属性，用于隐藏关闭按钮 #6402
|
||||
- Rate
|
||||
- 新增 `show-score` 属性，控制是否在右侧显示当前分数 #6295
|
||||
- Tabs
|
||||
- 新增 `tab-position` 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096
|
||||
- Radio
|
||||
- 增加 `border` 属性和 `size` 属性 #6690
|
||||
- Checkbox
|
||||
- 增加 `border` 属性和 `size` 属性 #6690
|
||||
- Alert
|
||||
- 新增 `center` 属性，提供居中布局 #6876
|
||||
- Menu
|
||||
- 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064
|
||||
- Form
|
||||
- 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032
|
||||
- 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032
|
||||
- Input
|
||||
- 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032
|
||||
- Breadcrumb
|
||||
- 新增 `separator-class` 属性，可使用图标作为分隔符 #7203
|
||||
- Steps
|
||||
- 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274
|
||||
|
||||
#### 修复
|
||||
- DatePicker
|
||||
- 选择周数时，`v-model` 结果返回该周第二天的问题 #6038
|
||||
- 在 `daterange` 类型中，第一次的输入会被清空的问题 #6021
|
||||
- DateTimePicker
|
||||
- 和 TimePicker 相互影响的问题 #6090
|
||||
- 选择时间小时和秒可超出限制的问题 #6076
|
||||
- TimePicker
|
||||
- 失去焦点时无法正确改变 `v-model` 值的问题 #6023
|
||||
- Dialog
|
||||
- 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088
|
||||
- Select
|
||||
- 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
|
||||
|
||||
#### 非兼容性更新
|
||||
- 综合
|
||||
- 移除 `theme-default`
|
||||
- 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互
|
||||
- Button 和表单组件的 `size` 属性不再接受 `large` 值，可接受 `medium`、`small` 和 `mini`
|
||||
- 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名
|
||||
- Dialog
|
||||
- 移除 `size` 属性。现在 Dialog 的尺寸由 `width` 和 `fullscreen` 控制
|
||||
- 移除通过 `v-model` 控制 Dialog 显示和隐藏的功能
|
||||
- Rate
|
||||
- `text-template` 属性更名为 `score-template`
|
||||
- Dropdown
|
||||
- `menu-align` 属性变更为 `placement`，增加更多方位属性
|
||||
- Transfer
|
||||
- `footer-format` 属性更名为 `format`
|
||||
- Switch
|
||||
- `on-text` 和 `off-text` 属性不再有默认值
|
||||
- Tag
|
||||
- `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值
|
||||
- Menu
|
||||
- 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义
|
||||
- Input
|
||||
- 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
|
||||
- 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
|
||||
- Autocomplete
|
||||
- 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
|
||||
- Table
|
||||
- 移除通过 `inline-template` 自定义列模板的功能
|
||||
- Steps
|
||||
- 移除 `center` 属性
|
||||
- 现在步骤条将默认充满父容器
|
||||
|
||||
##
|
||||
<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>
|
||||
|
||||
### 1.4.6
|
||||
*2017-09-27*
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,10 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -182,7 +182,8 @@
|
|||
return {
|
||||
hovering: false,
|
||||
isExpanded: false,
|
||||
fixedControl: false
|
||||
fixedControl: false,
|
||||
scrollParent: null
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -239,7 +240,7 @@
|
|||
},
|
||||
|
||||
removeScrollHandler() {
|
||||
document.removeEventListener('scroll', this.scrollHandler);
|
||||
this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -287,7 +288,8 @@
|
|||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
document.addEventListener('scroll', this.scrollHandler);
|
||||
this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
|
||||
this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
|
||||
this.scrollHandler();
|
||||
}, 200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<p class="footer-main-title">Element {{ version }} Boron</p>
|
||||
<p class="footer-main-title">Element {{ version && version.slice(0, 3) }} Carbon</p>
|
||||
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
|
||||
<a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
|
||||
<a :href="`https://eleme.github.io/element-react/#/${ lang }/quick-start`" class="footer-main-link" target="_blank">Element-React</a>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
|
||||
#code-sponsor-widget {
|
||||
margin: 50px 0 0 -20px;
|
||||
margin: 0 0 0 -20px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown-list {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui@
|
|||
```
|
||||
|
||||
### Hello world
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -31,7 +31,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
|
|||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ npm i element-ui@next -S
|
|||
```
|
||||
|
||||
### Hello world
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -31,7 +31,7 @@ npm i element-ui@next -S
|
|||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">按钮</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>欢迎使用 Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -86,6 +86,11 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin:0;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
<script type="text/babel">
|
||||
import { getRangeHours } from '../util';
|
||||
import ElScrollbar from 'element-ui/packages/scrollbar';
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
|
||||
export default {
|
||||
components: { ElScrollbar },
|
||||
|
|
@ -131,10 +130,6 @@
|
|||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.debounceAdjustElTop = debounce(200, type => this.adjustElTop(type, this[`${type}s`]));
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.bindScrollEvent();
|
||||
|
|
@ -155,10 +150,16 @@
|
|||
emitSelectRange(type) {
|
||||
if (type === 'hours') {
|
||||
this.$emit('select-range', 0, 2);
|
||||
this.adjustElTop('minute', this.minutes);
|
||||
this.adjustElTop('second', this.seconds);
|
||||
} else if (type === 'minutes') {
|
||||
this.$emit('select-range', 3, 5);
|
||||
this.adjustElTop('hour', this.hours);
|
||||
this.adjustElTop('second', this.seconds);
|
||||
} else if (type === 'seconds') {
|
||||
this.$emit('select-range', 6, 8);
|
||||
this.adjustElTop('minute', this.minutes);
|
||||
this.adjustElTop('hour', this.hours);
|
||||
}
|
||||
this.currentScrollbar = type;
|
||||
},
|
||||
|
|
@ -177,7 +178,6 @@
|
|||
handleScroll(type) {
|
||||
const adjust = {};
|
||||
adjust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
|
||||
this.debounceAdjustElTop(type);
|
||||
this.$emit('change', adjust);
|
||||
},
|
||||
|
||||
|
|
@ -188,6 +188,7 @@
|
|||
},
|
||||
|
||||
adjustElTop(type, value) {
|
||||
if (!this[`${type}El`]) return;
|
||||
this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -185,6 +185,9 @@
|
|||
}
|
||||
@include when(active) {
|
||||
color: $--color-primary;
|
||||
i {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -169,8 +169,8 @@
|
|||
font-weight: normal;
|
||||
|
||||
span {
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
color: $--color-text-secondary;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue