Merge pull request #65 from Leopoldthecoder/master

update popover/tooltip docs

CHANGELOG.md

@@ -7,6 +7,9 @@
 - 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
 - 修复 TimePicker 时间选择可滚动
 
+#### 非兼容性更新
+- Select 组件样式的 `display` 属性默认值修改为 `block`
+
 ### 1.0.0-rc.3
 
 *2016-09-09*

examples/docs/button.md

@@ -38,7 +38,7 @@
     }
   }
 
-  .demo-button .intro-block {
+  .demo-box.demo-button .intro-block {
     padding: 0;
   }
 

examples/docs/datetime-picker.md

@@ -168,7 +168,7 @@
       v-model="value3"
       type="datetimerange"
       placeholder="选择时间范围"
-      style="width:340px">
+      style="width:260px">
     </el-date-picker>
   </div>
   <div class="block">
@@ -178,7 +178,7 @@
       type="datetimerange"
       :picker-options="pickerOptions2"
       placeholder="选择时间范围"
-      style="width:340px">
+      style="width:260px">
     </el-date-picker>
   </div>
 </template>

examples/docs/input.md

@@ -605,7 +605,7 @@
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type         | 同原生的 input 的 type 属性，如果为textarea则显示为extarea   | string  | — | — |
+| type         | 同原生的 input 的 type 属性，如果为 textarea 则显示为 textarea   | string  | — | — |
 | value         | 绑定值           | string, number  | — | — |
 | maxlength     | 最大输入长度      | number          |  —  | — |
 | minlength     | 最小输入长度      | number          | — | — |

examples/docs/popover.md

@@ -153,7 +153,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 
 ### 嵌套信息
 
-嵌套表格的例子：
+可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
 
 :::demo 利用分发取代`content`属性
 ```html

examples/docs/select.md

@@ -115,6 +115,13 @@
   };
 </script>
 
+<style>
+  .demo-select .el-select {
+    display: inline-block;
+    width: 240px;
+  }
+</style>
+
 ## Select 选择器
 
 当选项过多时，使用下拉菜单展示并选择内容。

examples/docs/tooltip.md

@@ -9,13 +9,13 @@
 </script>
 ## Tooltips 文字提示
 
-### 基础用法
+常用于展示鼠标 hover 时的提示信息。
 
-Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。
+### 基础用法
 
-下面是完整的九个示例，可以通过该示例来理解，选择你要的效果：
+在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
 
-:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-箭头方位`；四个方向：`top`、`left`、`right`、`bottom`；三种箭头方位：`start`, `end`，默认为空。如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
+:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
 
 ```html
 <style>
@@ -44,52 +44,57 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
     .item {
       margin: 4px;
     }
+    
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
   }
 </style>
 
 <div class="box">
   <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-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
     </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-tooltip>
   </div>
   <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-tooltip>
     <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
       <el-button>左边</el-button>
     </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-tooltip>
   </div>
 
   <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-tooltip>
     <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
       <el-button>右边</el-button>
     </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-tooltip>
   </div>
   <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-tooltip>
     <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
       <el-button>下边</el-button>
     </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-tooltip>
   </div>

packages/select/src/select.vue

@@ -154,7 +154,7 @@
         selected: {},
         isSelect: true,
         inputLength: 20,
-        inputWidth: 180,
+        inputWidth: 0,
         valueChangeBySelected: false,
         cachedPlaceHolder: '',
         optionsCount: 0,

packages/theme-default/src/select.css

@@ -9,7 +9,7 @@
 @component-namespace el {
 
   @b select {
-    display: inline-block;
+    display: block;
     position: relative;
 
     @when small {
@@ -47,9 +47,6 @@
     }
 
     & .el-input {
-      width: 180px;
-      display: inline-block;
-
       & .el-input__icon {
         color: #c0ccda;
         font-size: 12px;
@@ -99,10 +96,6 @@
     }
 
     @when multiple {
-      & .el-input {
-        width: 220px;
-      }
-
       & .el-select-dropdown__item.selected {
         color: #20A0FF;
         background-color: #fff;

packages/theme-default/src/slider.css

@@ -3,6 +3,7 @@
 
 @component-namespace el {
   @b slider {
+    @utils-clearfix;
     @e runway {
       width: 100%;
       height: 4px;
@@ -21,7 +22,7 @@
 
     @e input {
       float: right;
-      margin-top: -10px;
+      margin-top: 7px;
 
       & .el-input {
         width: 130px;