diff --git a/examples/docs/alert.md b/examples/docs/alert.md index b6ce5b321..6e758c1e3 100644 --- a/examples/docs/alert.md +++ b/examples/docs/alert.md @@ -15,7 +15,7 @@ ## 基本用法 -alert组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。 +Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。
@@ -91,7 +91,7 @@ alert组件提供四种主题，由`type`属性指定，默认值为`info`，下 ## 带有 icon 和辅助性文字介绍 -最后，这是一个同时具有icon和辅助性文字的样例。 +最后，这是一个同时具有 icon 和辅助性文字的样例。
@@ -137,11 +137,11 @@ alert组件提供四种主题，由`type`属性指定，默认值为`info`，下 | type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' | | description | 辅助性文字 | string | | | | closable | 是否可关闭 | boolean | | true | -| closeText | 关闭按钮自定义文本 | string | | | +| close-text | 关闭按钮自定义文本 | string | | | | showIcon | 是否显示图标 | boolean | | false | ## Events -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -|---------- |-------------- |---------- |-------------------------------- |-------- | -| close | 关闭时的回调函数 | function | | | +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| close | 关闭alert时触发的事件 | | diff --git a/examples/docs/badge.md b/examples/docs/badge.md index 0935abe02..f789b8a36 100644 --- a/examples/docs/badge.md +++ b/examples/docs/badge.md @@ -1,5 +1,7 @@ ## 基础用法 -展示新消息数量 +Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数，定义`value`属性，它接受`Number`或者`String`。 + +下面是一个样例，我们在 Badge 组件内嵌入 Button 组件： @@ -45,7 +47,9 @@ ``` ## 最大值 -可自定义最大值 +为了方便使用，Badge 组件可以自定义显示的最大值，由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。 + +下面是一个样例： @@ -69,7 +73,9 @@ ## 自定义内容 -可以显示数字外的文本内容 + +定义`value`为`String`类型是时可以用于显示自定义文本，下面是两个样例，它们可以启发你在适时的情况使用 Badge： + @@ -92,7 +98,7 @@ ``` ## 小红点 -以红点的形式标注需要关注的内容 +除了数字外，设置`is-dot`属性，它接受一个`Boolean`。可以使badge组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。 @@ -131,7 +137,7 @@ } -## API +## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | value | 显示值 | string, number | | | diff --git a/examples/docs/button.md b/examples/docs/button.md index 18f45c342..771b04635 100644 --- a/examples/docs/button.md +++ b/examples/docs/button.md @@ -31,7 +31,7 @@ ## 基础用法 -button组件默认提供7种主题，由`type`属性来定义，默认为`default`： +Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`：
Default @@ -71,7 +71,7 @@ button组件默认提供7种主题，由`type`属性来定义，默认为`defaul 注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。 -你可以Hover在样例上进行预览： +你可以 Hover 在样例上进行预览：
Default @@ -91,7 +91,7 @@ button组件默认提供7种主题，由`type`属性来定义，默认为`defaul ## 尺寸 -button组件提供除了默认值以外的三种尺寸：`large`、`small`、`mini`来满足不同的需求，通过设置`size`属性来配置它们。 +Button 组件提供除了默认值以外的三种尺寸：`large`、`small`、`mini`来满足不同的需求，通过设置`size`属性来配置它们。
large @@ -109,7 +109,7 @@ button组件提供除了默认值以外的三种尺寸：`large`、`small`、`mi ## Loading -button组件提供的`loading`属性可以方便的让你处理 loading 状态，它接受一个`Boolean`，要设置为 loading 状态，只要设置`loading`属性为`true`即可，下面是一个样例： +Button 组件提供的`loading`属性可以方便的让你处理 loading 状态，它接受一个`Boolean`，要设置为 loading 状态，只要设置`loading`属性为`true`即可，下面是一个样例：
Button @@ -131,14 +131,14 @@ button组件提供的`loading`属性可以方便的让你处理 loading 状态 ## 图标按钮 -理所当然的，Element也支持图标按钮，设置`icon`属性即可，icon的列表可以参考Element的icon组件，下面是简单的预览： +理所当然的，Element 也支持图标按钮，设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，下面是简单的预览：
Search
-除此以外，你也可以设置在文字右边的icon，只要使用`i`标签即可，使用图标组件来实现它： +除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它：
Upload diff --git a/examples/docs/card.md b/examples/docs/card.md index a9a81fb6c..58a72fd6c 100644 --- a/examples/docs/card.md +++ b/examples/docs/card.md @@ -44,7 +44,10 @@ ## 基础用法 -包含标题, 内容和操作 + +Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时他也是可选的。 + +下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入，下例中我们使用了布局来限制卡片的宽度： @@ -73,7 +76,8 @@ ``` ## 简单卡片 -卡片可以只有内容区域 + +如上述所言，Card 组件可以只有`body`区域，下面是一个没有定义`header`的 Card 组件。 @@ -94,8 +98,12 @@ ``` -## 带图片 -可配置定义更丰富的内容展示 +## 进阶使用 +配置`body-style`属性来自定义`body`部分的`style`。 + +可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。。 + +下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大： @@ -125,7 +133,7 @@ ``` -## API +## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| | | diff --git a/examples/docs/icon.md b/examples/docs/icon.md index a93d4be7e..918051553 100644 --- a/examples/docs/icon.md +++ b/examples/docs/icon.md @@ -50,11 +50,11 @@ ## icon-font 图标 -我们为你提供了一套常用的图标集合。 +提供了一套常用的图标集合。 ## 使用方法 -直接通过`el-icon-iconName`的类名来使用即可。例如： +直接通过设置类名为`el-icon-iconName`来使用即可。例如：
@@ -62,7 +62,7 @@ ``` -也可以在按钮组件中使用图标: +也可以在按钮组件中使用图标，更多地使用方式可以在按钮组件的文档中看到。
搜索
@@ -72,6 +72,8 @@ ## 图标集合 +下面是目前 Element 所有的图标集合： +
  • diff --git a/examples/docs/message-box.md b/examples/docs/message-box.md index 58ae7a845..b116785f9 100644 --- a/examples/docs/message-box.md +++ b/examples/docs/message-box.md @@ -4,13 +4,13 @@ open() { this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息'); }, - + open2() { this.$alert('操作失败, 请稍后重试', '提示', { type: 'error' }); }, - + open3() { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' @@ -26,7 +26,7 @@ }); }); }, - + open4() { this.$prompt('请输入邮箱', '提示', { inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, @@ -38,8 +38,8 @@ this.$msgbox('', '取消输入'); }); }, - - + + open5() { this.$msgbox({ title: '消息', @@ -48,23 +48,20 @@ }).then(action => { this.$msgbox('', 'action: ' + action); }); - }, - - open6() { - this.$msgbox({ - title: '消息', - message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', - showCancelButton: true, - showClose: false, - confirmButtonText: '知道了', - type: 'success' - }); } + } }; ## 基本用法 + +MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。 + +在本页文档中一一介绍它们，首先看最简单的示例，我们使用`$alert`，它接收了两个参数，`message`和`title`。 + +值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。 + 打开 Alert ```html @@ -83,7 +80,13 @@ ``` -## 返回 Promise +## 配置项 + +MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。 + +下例是一个包含图标的 alert 框，需要注意的是，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。 + +`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。 打开 alert @@ -105,6 +108,8 @@ ``` +下面是一个 confirm 框，在这里我们用了`Promise`来处理后续响应。 + 打开 confirm ```html @@ -132,6 +137,11 @@ } ``` + +Prompt 框功能强大，可以处理简单的输入，甚至你可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验为通过，`String`相当于定义了`inputErrorMessage`字段。 + +此外，你可以用`inputPlaceholder`字段来定义输入框的占位符。 + 打开 prompt ```html @@ -157,6 +167,10 @@ ``` +Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 ESC 和 点击框外关闭。 + +此例中我们使用了`showCancelButton`字段，用于显示取消按钮，同时使用`cancelButtonClass`可以自定义样式，`cancelButtonText`来自定义按钮文本，Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。 + 打开 Message Box ```html @@ -181,35 +195,9 @@ ``` -## 更多配置项 - -打开 Message Box - -```html - - - -``` - ## 全局方法 -element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。 +Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。 ## 单独引用 @@ -221,13 +209,13 @@ import { MessageBox } from 'element-ui'; 对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。 -## API +## Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | -| title | 标题 | string | | | -| message | 消息内容 | string | | | -| type | 消息类型 | string | 'success', 'info', 'warning', 'error' | | +| title | MessageBox标题 | string | | | +| message | MessageBox消息正文内容 | string | | | +| type | 消息类型，用于显示图标 | string | 'success', 'info', 'warning', 'error' | | | showCancelButton | 是否显示取消按钮 | boolean | | false（以 confirm 和 prompt 方式调用时为 true） | | showConfirmButton | 是否显示确定按钮 | boolean | | true | | cancelButtonText | 取消按钮的文本内容 | string | | '取消' | @@ -235,8 +223,7 @@ import { MessageBox } from 'element-ui'; | cancelButtonClass | 取消按钮的自定义类名 | string | | | | confirmButtonClass | 确定按钮的自定义类名 | string | | | | showInput | 是否显示输入框 | boolean | | false（以 prompt 方式调用时为 true）| -| inputValue | 输入框的值 | string | | | | inputPlaceholder | 输入框的占位符 | string | | | | inputPattern | 输入框的校验表达式 | regexp | | | -| inputValidator | 输入框的校验函数。若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | | | +| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | | | | inputErrorMessage | 校验未通过时的提示文本 | string | | '输入的数据不合法!' | diff --git a/examples/docs/tag.md b/examples/docs/tag.md index 4e699b893..b38b6f8a9 100644 --- a/examples/docs/tag.md +++ b/examples/docs/tag.md @@ -30,6 +30,8 @@ ## 基础使用 +Tag 组件提供了六种主题，由`type`属性来定义，该属性可选填： +
    标签一 标签二 @@ -48,14 +50,37 @@ 标签六 ``` +## 描边 + +`hit`属性可以设置描边，接受一个`Boolean`，默认为`false`。 + +借此可以定义 hover 时的效果，下面是一个`hit`为`true`时的效果： + +
    + 标签 +
    + +```html +标签 +``` + ## 可移除的标签 +设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。 + +此外，默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。 + +设置`close`事件可以处理关闭后的回调函数。 + +下面是一个综合应用他们的样例： +
    {{tag.name}} @@ -67,6 +92,8 @@ v-for="tag in tags" :closable="true" :type="tag.type" + :key="tag" + :close-transition="false" @close="handleClose(tag)" > {{tag.name}} @@ -94,3 +121,17 @@ } ``` + +## Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' | | +| closable | 是否可关闭 | boolean | | false | +| close-transition | 是否禁用关闭时的渐变动画 | boolean | | false | +| hit | 是否有边框描边 | boolean | | false | + + +## Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| close | 关闭tag时触发的事件 | | diff --git a/examples/docs/tooltip.md b/examples/docs/tooltip.md index 0f4ec16f9..429d2b621 100644 --- a/examples/docs/tooltip.md +++ b/examples/docs/tooltip.md @@ -1,5 +1,29 @@ + ## 基础用法 -鼠标 hover 的时候显示,可选择提示出现的位置。 + +Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们提供9种不同的展示方式。 + +使用`content`属性来决定`hover`时的提示信息。 + +由`placement`属性决定展示效果： + +`placement`属性值为：`方向-箭头方位` + +四个方向：`top`、`left`、`right`、`bottom` + +三种箭头方位：`start`, `end`，默认为空 + +如`top center`即`placement="top"`，`left top`即`placement="left-start"`。 + +下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果： + +
    + + 点击关闭 tooltip 功能 + +
    + +```html + + 点击关闭 tooltip 功能 + + + +``` + +## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------------|----------------------------------------------------------|-------------------|-------------|--------| -| effect | 默认提供的样式 | String | `dark`, `light` | dark | -| content | 显示的内容 | String | | | -| placement | 出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom | +| effect | 默认提供的主题 | String | `dark`, `light` | dark | +| content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | | | +| placement | Tooltip 的出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom | | visible | 初始状态是否可见 | Boolean | | false | -| disabled | 控制是否不可见 | Boolean | | false | -| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } | +| disabled | Tooltip 是否可用 | Boolean | | false | +| transition | 定义渐变动画 | String | | `fade-in-linear` | +| visibleArrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | | true | +| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` | diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue index 4463d9cd1..f0d936aba 100644 --- a/packages/message-box/src/main.vue +++ b/packages/message-box/src/main.vue @@ -8,10 +8,10 @@
    -

    {{ message }}

    +

    {{ message }}

    -
    {{editorErrorMessage}}
    +
    {{ editorErrorMessage }}
    @@ -56,14 +56,14 @@ computed: { typeClass() { - return this.type ? `el-icon-${ typeMap[this.type] }` : ''; + return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : ''; }, confirmButtonClasses() { - return 'el-button el-button-primary ' + this.confirmButtonClass; + return `el-button el-button-primary ${ this.confirmButtonClass }`; }, cancelButtonClasses() { - return 'el-button el-button-default ' + this.cancelButtonClass; + return `el-button el-button-default ${ this.cancelButtonClass }`; } },