mirror of https://github.com/ElemeFE/element
commit
ed79d85379
|
@ -7,6 +7,9 @@
|
||||||
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
||||||
- 修复 TimePicker 时间选择可滚动
|
- 修复 TimePicker 时间选择可滚动
|
||||||
|
|
||||||
|
#### 非兼容性更新
|
||||||
|
- Select 组件样式的 `display` 属性默认值修改为 `block`
|
||||||
|
|
||||||
### 1.0.0-rc.3
|
### 1.0.0-rc.3
|
||||||
|
|
||||||
*2016-09-09*
|
*2016-09-09*
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-button .intro-block {
|
.demo-box.demo-button .intro-block {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -168,7 +168,7 @@
|
||||||
v-model="value3"
|
v-model="value3"
|
||||||
type="datetimerange"
|
type="datetimerange"
|
||||||
placeholder="选择时间范围"
|
placeholder="选择时间范围"
|
||||||
style="width:340px">
|
style="width:260px">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
|
@ -178,7 +178,7 @@
|
||||||
type="datetimerange"
|
type="datetimerange"
|
||||||
:picker-options="pickerOptions2"
|
:picker-options="pickerOptions2"
|
||||||
placeholder="选择时间范围"
|
placeholder="选择时间范围"
|
||||||
style="width:340px">
|
style="width:260px">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -605,7 +605,7 @@
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||||
| type | 同原生的 input 的 type 属性,如果为textarea则显示为extarea | string | — | — |
|
| type | 同原生的 input 的 type 属性,如果为 textarea 则显示为 textarea | string | — | — |
|
||||||
| value | 绑定值 | string, number | — | — |
|
| value | 绑定值 | string, number | — | — |
|
||||||
| maxlength | 最大输入长度 | number | — | — |
|
| maxlength | 最大输入长度 | number | — | — |
|
||||||
| minlength | 最小输入长度 | number | — | — |
|
| minlength | 最小输入长度 | number | — | — |
|
||||||
|
|
|
@ -153,7 +153,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
|
||||||
|
|
||||||
### 嵌套信息
|
### 嵌套信息
|
||||||
|
|
||||||
嵌套表格的例子:
|
可以在 Popover 中嵌套多种类型信息,以下为嵌套表格的例子。
|
||||||
|
|
||||||
:::demo 利用分发取代`content`属性
|
:::demo 利用分发取代`content`属性
|
||||||
```html
|
```html
|
||||||
|
|
|
@ -115,6 +115,13 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-select .el-select {
|
||||||
|
display: inline-block;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
## Select 选择器
|
## Select 选择器
|
||||||
|
|
||||||
当选项过多时,使用下拉菜单展示并选择内容。
|
当选项过多时,使用下拉菜单展示并选择内容。
|
||||||
|
|
|
@ -9,13 +9,13 @@
|
||||||
</script>
|
</script>
|
||||||
## Tooltips 文字提示
|
## Tooltips 文字提示
|
||||||
|
|
||||||
|
常用于展示鼠标 hover 时的提示信息。
|
||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
Tooltip 组件常用于展示鼠标 hover 时的提示信息,在这里我们提供9种不同的展示方式。
|
在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。
|
||||||
|
|
||||||
下面是完整的九个示例,可以通过该示例来理解,选择你要的效果:
|
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果:`placement`属性值为:`方向-对齐位置`;四个方向:`top`、`left`、`right`、`bottom`;三种对齐位置:`start`, `end`,默认为空。如`placement="left-end"`,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。
|
||||||
|
|
||||||
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果:`placement`属性值为:`方向-箭头方位`;四个方向:`top`、`left`、`right`、`bottom`;三种箭头方位:`start`, `end`,默认为空。如`top center`即`placement="top"`,`left top`即`placement="left-end"`。
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<style>
|
<style>
|
||||||
|
@ -44,52 +44,57 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息,在这里我们
|
||||||
.item {
|
.item {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left .el-tooltip__popper,
|
||||||
|
.right .el-tooltip__popper {
|
||||||
|
padding: 8px 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-end">
|
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||||
<el-button>上左</el-button>
|
<el-button>上左</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||||
<el-button>上边</el-button>
|
<el-button>上边</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-start">
|
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||||
<el-button>上右</el-button>
|
<el-button>上右</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-end">
|
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||||
<el-button>左上</el-button>
|
<el-button>左上</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||||
<el-button>左边</el-button>
|
<el-button>左边</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-start">
|
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||||
<el-button>左下</el-button>
|
<el-button>左下</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-end">
|
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||||
<el-button>右上</el-button>
|
<el-button>右上</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||||
<el-button>右边</el-button>
|
<el-button>右边</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-start">
|
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||||
<el-button>右下</el-button>
|
<el-button>右下</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-end">
|
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||||
<el-button>下左</el-button>
|
<el-button>下左</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||||
<el-button>下边</el-button>
|
<el-button>下边</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-start">
|
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||||
<el-button>下右</el-button>
|
<el-button>下右</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -154,7 +154,7 @@
|
||||||
selected: {},
|
selected: {},
|
||||||
isSelect: true,
|
isSelect: true,
|
||||||
inputLength: 20,
|
inputLength: 20,
|
||||||
inputWidth: 180,
|
inputWidth: 0,
|
||||||
valueChangeBySelected: false,
|
valueChangeBySelected: false,
|
||||||
cachedPlaceHolder: '',
|
cachedPlaceHolder: '',
|
||||||
optionsCount: 0,
|
optionsCount: 0,
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
@component-namespace el {
|
@component-namespace el {
|
||||||
|
|
||||||
@b select {
|
@b select {
|
||||||
display: inline-block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@when small {
|
@when small {
|
||||||
|
@ -47,9 +47,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .el-input {
|
& .el-input {
|
||||||
width: 180px;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
& .el-input__icon {
|
& .el-input__icon {
|
||||||
color: #c0ccda;
|
color: #c0ccda;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -99,10 +96,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@when multiple {
|
@when multiple {
|
||||||
& .el-input {
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .el-select-dropdown__item.selected {
|
& .el-select-dropdown__item.selected {
|
||||||
color: #20A0FF;
|
color: #20A0FF;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
@component-namespace el {
|
@component-namespace el {
|
||||||
@b slider {
|
@b slider {
|
||||||
|
@utils-clearfix;
|
||||||
@e runway {
|
@e runway {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
|
@ -21,7 +22,7 @@
|
||||||
|
|
||||||
@e input {
|
@e input {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: -10px;
|
margin-top: 7px;
|
||||||
|
|
||||||
& .el-input {
|
& .el-input {
|
||||||
width: 130px;
|
width: 130px;
|
||||||
|
|
Loading…
Reference in New Issue