Skip to content

E
Element
Commit 7b860de9 authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

Merge pull request #111 from Leopoldthecoder/next 

Alert/Select/Notification/Table doc update
parents a37c361e ff9a5ba5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 544 additions and 436 deletions
examples/docs/alert.md
View file @ 7b860de9
......@@ -19,9 +19,13 @@
## Alert 警告
用于页面中展示重要的提示信息。
### 基本用法
::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
页面中的非浮层，不会自动消失
::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
```html
<template>
<el-alert
......@@ -46,7 +50,9 @@
### 自定义关闭按钮
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
自定义关闭按钮为文字或其他符号
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
```html
<template>
<el-alert
......@@ -80,7 +86,9 @@
### 带有 icon
::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
表示某种状态时提升可读性
::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
```html
<template>
<el-alert
......@@ -109,7 +117,9 @@
### 带有辅助性文字介绍
::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
包含标题和内容，解释更详细的警告
::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
```html
<template>
<el-alert
......
examples/docs/notification.md
View file @ 7b860de9
......@@ -9,6 +9,14 @@
},
open2() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
},
open3() {
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
......@@ -16,7 +24,7 @@
});
},
open3() {
open4() {
this.$notify({
title: '警告',
message: '这是一条警告的提示消息',
......@@ -24,7 +32,7 @@
});
},
open4() {
open5() {
this.$notify({
title: '消息',
message: '这是一条消息的提示消息',
......@@ -32,7 +40,7 @@
});
},
open5() {
open6() {
this.$notify({
title: '错误',
message: '这是一条错误的提示消息',
......@@ -40,22 +48,6 @@
});
},
open6() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
},
open7() {
this.$notify({
title: '提示',
message: '这是一条带有回调函数的消息',
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
......@@ -71,16 +63,27 @@
}
</style>
## 基本用法
## Notification 通知
::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
悬浮出现在页面右上角，显示全局的通知提醒消息。
### 基本用法
适用性广泛的通知栏
::: demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
```html
<template>
<el-button
plain
@click.native="open">
点击展示 Notification
可自动关闭
</el-button>
<el-button
plain
@click.native="open2">
不会自动关闭
</el-button>
</template>
<script>
......@@ -91,6 +94,14 @@
title: '标题名称',
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
});
},
open2() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
}
}
}
......@@ -98,29 +109,31 @@
```
:::
## 带有 icon
### 带有倾向性
::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。
```html
<template>
<el-button
plain
@click.native="open2">
@click.native="open3">
成功
</el-button>
<el-button
plain
@click.native="open3">
@click.native="open4">
警告
</el-button>
<el-button
plain
@click.native="open4">
@click.native="open5">
消息
</el-button>
<el-button
plain
@click.native="open5">
@click.native="open6">
错误
</el-button>
</template>
......@@ -128,7 +141,7 @@
<script>
export default {
methods: {
open2() {
open3() {
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
......@@ -136,7 +149,7 @@
});
},
open3() {
open4() {
this.$notify({
title: '警告',
message: '这是一条警告的提示消息',
......@@ -144,7 +157,7 @@
});
},
open4() {
open5() {
this.$notify({
title: '消息',
message: '这是一条消息的提示消息',
......@@ -152,7 +165,7 @@
});
},
open5() {
open6() {
this.$notify({
title: '错误',
message: '这是一条错误的提示消息',
......@@ -165,73 +178,13 @@
```
:::
## 不会自动关闭
::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
```html
<template>
<el-button
plain
@click.native="open6">
不会自动关闭的 Notification
</el-button>
</template>
<script>
export default {
methods: {
open6() {
this.$notify({
title: '提示',
message: '这是一条不会自动关闭的消息',
duration: 0
});
}
}
}
</script>
```
:::
## 回调函数
::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
```html
<template>
<el-button
plain
@click.native="open7">
带有回调函数的 Notification
</el-button>
</template>
<script>
export default {
methods: {
open7() {
this.$notify({
title: '提示',
message: '这是一条带有回调函数的消息',
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
}
}
</script>
```
:::
## 全局方法
### 全局方法
Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
## 单独引用
### 单独引用
单独引入 `Notification`：
单独引入 Notification：
```javascript
import { Notification } from 'element-ui';
......@@ -239,11 +192,11 @@ import { Notification } from 'element-ui';
此时调用方法为 `Notification(options)`。
## Options
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | | |
| message | 说明文字 | string | | |
| type | 主题样式，如果不在可选值内将被忽略 | string | 'success', 'warning', 'info', 'error' | |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
| onClose | 关闭时的回调函数 | function | | |
| title | 标题 | string | - | - |
| message | 说明文字 | string | - | - |
| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | - |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 4500 |
| onClose | 关闭时的回调函数 | function | - | - |
examples/docs/select.md
View file @ 7b860de9
This diff is collapsed.
examples/docs/table.md
View file @ 7b860de9
This diff is collapsed.
examples/nav.config.json
View file @ 7b860de9
......@@ -116,13 +116,13 @@
{
"path": "/date-picker",
"name": "日期选择器（date-picker）",
"title": "Date Picker",
"title": "Date Picker 日期选择器",
"description": "用于选择或输入时间"
},
{
"path": "/datetime-picker",
"name": "日期时间选择器",
"title": "Datetime Picker",
"title": "Datetime Picker 日期时间选择器",
"description": "用于选择或输入日期时间"
},
{
......
packages/select/src/select.vue
View file @ 7b860de9
......@@ -266,6 +266,7 @@
this.selected = {};
}
this.remoteMethod(val);
this.voidRemoteQuery = val === '';
} else if (typeof this.filterMethod === 'function') {
this.filterMethod(val);
} else {
......@@ -294,9 +295,6 @@
}
}
} else {
if (this.remote) {
this.voidRemoteQuery = true;
}
if (this.$el.querySelector('.el-input__icon')) {
this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
}
......@@ -519,6 +517,9 @@
this.selectedInit = true;
this.selected = [];
}
if (this.remote) {
this.voidRemoteQuery = true;
}
this.debouncedOnInputChange = debounce(this.debounce, () => {
this.onInputChange();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment