Skip to content

E
Element
Commit 066c8f72 authored by SkyAo's avatar SkyAo
Browse files
Options

finish documents of basic & fix bug

parent a0726953
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 115 deletions
examples/docs/button.md
View file @ 066c8f72
......@@ -138,7 +138,7 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
<el-button type="primary" icon="search">Search</el-button>
</div>
除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它：
除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它，由此，你可以使用自己的图标了：
<div class="demo-box demo-button">
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
......
examples/docs/dialog.md
View file @ 066c8f72
......@@ -24,6 +24,7 @@
dialogFullVisible: false,
dialogStubbornVisible: false,
dialogTableVisible: false,
dialogBindVisible: false,
dialogFormVisible: false,
form: {
name: '',
......@@ -37,6 +38,11 @@
},
formLabelWidth: '80px'
};
},
methods: {
openDialog() {
this.$refs.dialogBind.open();
}
}
};
</script>
......@@ -51,7 +57,7 @@
}
.el-dialog__wrapper {
margin: 0;
}
}
.el-input {
width: 300px;
}
......@@ -60,7 +66,15 @@
## 基本用法
<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。
要使用 Dialog 组件，首先你需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。
Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。
`title`属性用于定义标题，它是可选的，默认值为空，下面是一个最简单的用例：
<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogVisible">
......@@ -73,7 +87,7 @@
</div>
```html
<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
......@@ -86,7 +100,9 @@
## 设置尺寸
<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置，下面是一个 tiny 的例子。
<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
......@@ -99,7 +115,7 @@
</div>
```html
<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span>
......@@ -110,7 +126,9 @@
</el-dialog>
```
<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
下面是一个全屏幕 Dialog 的样例：
<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
......@@ -119,16 +137,18 @@
</div>
```html
<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280">
</el-dialog>
```
## 设置能否通过点击modal或按下esc关闭dialog
## 设置能否通过点击modal或按下esc关闭Dialog
<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
在默认条件下，你可以通过 ESC 和点击 modal 关闭 Dialog，但是可以通过设置`close-on-click-modal`属性和`close-on-press-escape`属性来关闭这一功能，它们接收`Boolean`，默认均为`true`。
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示"
......@@ -140,7 +160,7 @@
</div>
```html
<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-dialog title="提示"
v-model="dialogStubbornVisible"
......@@ -150,9 +170,45 @@
</el-dialog>
```
## 使用 Dialog 方法打开
使用`v-model`确实是一个不错的做法，为了一些特殊需求，我们暴露了实例`open`和`close`方法，你可以不用显式改变`v-modal`的值了：
<el-button @click.native="openDialog()">使用Dialog方法</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog>
</div>
```html
<template>
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogBindVisible: false
}
},
methods: {
openDialog() {
this.$refs.dialogBind.open();
}
}
};
</script>
```
## 自定义内容
<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处：
<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="收货地址" v-model="dialogTableVisible">
......@@ -164,7 +220,7 @@
</el-dialog>
</div>
<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="收货地址" v-model="dialogFormVisible">
......@@ -187,7 +243,7 @@
</div>
```html
<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData">
......@@ -197,7 +253,7 @@
</el-table>
</el-dialog>
<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form">
......@@ -218,23 +274,24 @@
</el-dialog>
```
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | dialog 的标题 | string | | |
| size | dialog 的大小 | string | 'tiny', 'small', 'large', 'full' | 'small' |
| customClass | dialog 的自定义类名 | string | | |
| closeOnClickModal | 是否可以通过点击 modal 关闭 dialog | boolean | | true |
| closeOnPressEscape | 是否可以通过按下 esc 关闭 dialog | boolean | | true |
| title | Dialog 的标题 | string | | |
| size | Dialog 的大小 | string | 'tiny', 'small', 'large', 'full' | 'small' |
| modal | 是否需要遮罩层 | boolean | | true |
| customClass | Dialog 的自定义类名 | string | | |
| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | | true |
| closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean | | true |
## Slot
| name | 说明 |
|------|--------|
| - | dialog 的内容 |
| footer | dialog 按钮操作区的内容 |
| - | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
## 方法
每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
......
examples/docs/loading.md
View file @ 066c8f72
......@@ -3,7 +3,7 @@
border: solid 1px #999;
padding: 10px;
text-align: center;
p {
font-size: 30px;
color: #999;
......@@ -43,7 +43,7 @@
}]
}
},
methods: {
loadTable() {
this.tableLoading = true;
......@@ -51,7 +51,7 @@
this.tableLoading = false;
}, 2000);
},
openFullScreen() {
this.fullscreenLoading = true;
setTimeout(() => {
......@@ -64,14 +64,16 @@
## 基本用法
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
<div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>
```html
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
<div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
......@@ -80,16 +82,16 @@
## 修饰符
loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上
Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>
```html
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
......@@ -98,13 +100,13 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
<el-button :plain="true" v-on:click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
<el-button :plain="true" @click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
```html
<template>
<el-button
:plain="true"
v-on:click.native="openFullScreen"
@click.native="openFullScreen"
v-loading.fullscreen="fullscreenLoading">
打开全屏 loading
</el-button>
......@@ -127,4 +129,4 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
}
}
</script>
```
\ No newline at end of file
```
examples/docs/message.md
View file @ 066c8f72
......@@ -6,35 +6,35 @@
message: '这是一条消息提示'
});
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
......@@ -42,22 +42,22 @@
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
type: 'warning'
});
},
open8() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
}
};
</script>
......@@ -72,13 +72,17 @@
## 基本用法
Message 系统了反馈提示，它比 Notification 更为小巧，可以根据需要来使用它们，在配置上，它们非常类似，所以部分 Notification 的 options 我们不会做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。
Element 注册了一个`$message`方法用于调用，Message 同样接收一个`options`字面量，`message`参数能定义正文内容，下面是最简单的样例：
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
</template>
<script>
......@@ -95,17 +99,22 @@
```
## 不同状态
Message 同样提供了四种类型：`success`，`info`，`warning`，`error`，由不同图标表示，设置`type`字段来定义它们，默认为`info`，如果设置其他值将被忽略。
你可以通过下面的按钮来体验它们：
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">错误</el-button>
</template>
<script>
......@@ -117,14 +126,14 @@
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
......@@ -137,19 +146,24 @@
```
## 可关闭
默认的 Message 是不可以被人工关闭的，如果需要可关闭的 Message，可以使用`showClose`字段，它接受一个`Boolean`，`true`为允许关闭。
注意：和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
<el-button :plain="true" @click.native="open5">消息</el-button>
<el-button :plain="true" @click.native="open6">成功</el-button>
<el-button :plain="true" @click.native="open7">警告</el-button>
<el-button :plain="true" @click.native="open8">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
<el-button :plain="true" @click.native="open5">消息</el-button>
<el-button :plain="true" @click.native="open6">成功</el-button>
<el-button :plain="true" @click.native="open7">警告</el-button>
<el-button :plain="true" @click.native="open8">错误</el-button>
</template>
<script>
......@@ -161,7 +175,7 @@
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
......@@ -169,7 +183,7 @@
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
......@@ -177,7 +191,7 @@
type: 'error'
});
},
open8() {
this.$message({
showClose: true,
......@@ -204,7 +218,7 @@ import { Message } from 'element-ui';
此时调用方法为 `Message(options)`。
## API
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | | |
......
examples/docs/notification.md
View file @ 066c8f72
......@@ -7,7 +7,7 @@
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
});
},
open2() {
this.$notify({
title: '成功',
......@@ -15,7 +15,7 @@
type: 'success'
});
},
open3() {
this.$notify({
title: '警告',
......@@ -23,7 +23,7 @@
type: 'warning'
});
},
open4() {
this.$notify({
title: '消息',
......@@ -31,7 +31,7 @@
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
......@@ -39,7 +39,7 @@
type: 'error'
});
},
open6() {
this.$notify({
title: '提示',
......@@ -47,7 +47,7 @@
duration: 0
});
},
open7() {
this.$notify({
title: '提示',
......@@ -55,7 +55,7 @@
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
......@@ -73,13 +73,15 @@
## 基本用法
Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</template>
<script>
......@@ -98,19 +100,23 @@
## 带有 icon
Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。
通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</template>
<script>
......@@ -120,10 +126,10 @@
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success'
type: 'success',
});
},
open3() {
this.$notify({
title: '警告',
......@@ -131,7 +137,7 @@
type: 'warning'
});
},
open4() {
this.$notify({
title: '消息',
......@@ -139,7 +145,7 @@
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
......@@ -153,13 +159,18 @@
```
## 不会自动关闭
默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例：
注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</template>
<script>
......@@ -178,13 +189,16 @@
```
## 回调函数
Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</template>
<script>
......@@ -197,7 +211,7 @@
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
......@@ -208,7 +222,7 @@
## 全局方法
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
## 单独引用
......@@ -220,11 +234,11 @@ import { Notification } from 'element-ui';
此时调用方法为 `Notification(options)`。
## API
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | | |
| message | 说明文字 | string | | |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
| type | 主题样式，如果不在可选值内将被忽略 | string | 'success', 'warning', 'info', 'error' | |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
| onClose | 关闭时的回调函数 | function | | |
examples/docs/popover.md
View file @ 066c8f72
......@@ -113,7 +113,11 @@
</style>
## 基础用法
可选择提示出现的位置。
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
要使用它，必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。
`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`，下面是样例，一些没有做解释的属性是与 Tooltip 一致的。
<div class="demo-box demo-popover">
<el-popover
......@@ -184,7 +188,8 @@
```
## 嵌套信息
可以嵌套表格等多种信息。
和其他组件一样，Popover 组件也可以利用分发取代`content`属性，下面我们嵌套了一个表格：
<div class="demo-box demo-popover">
<el-popover
......@@ -220,7 +225,8 @@
## 嵌套操作
常用于确认操作中,比 Dialog 更加轻量。
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
<div class="demo-box demo-popover">
<el-popover
......@@ -230,8 +236,8 @@
:visible.sync="visible2">
<p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
......@@ -246,8 +252,8 @@
:visible.sync="visible2">
<p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
......@@ -259,15 +265,16 @@
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
| title | 标题 | String | | |
| content | 显示的内容 | String | | |
| content | 显示的内容，也可以通过 `slot#` 传入 DOM | String | | |
| width | 宽度 | String, Number | | 最小宽度 150px |
| placement | 出现位置 | 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 |
| offset | 出现位置的偏移量 | Number, String | | 0 |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
| offset | 出现位置的偏移量 | Number | | 0 |
| 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 }` |
## Slot
| 参数 | 说明 |
|--- | ---|
| - | 触发 popover 显示的元素|
| content | 显示的 HTML 内容 |
| - | Popover内嵌HTML文本 |
examples/docs/tooltip.md
View file @ 066c8f72
......@@ -178,9 +178,11 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
</div>
```html
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
</el-tooltip>
<template>
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
</el-tooltip>
</template>
<style>
.slide-fade-enter-active {
......@@ -204,6 +206,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
| 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 | Tooltip 是否可用 | Boolean | | false |
| offset | 出现位置的偏移量 | Number | | 0 |
| 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 }` |
examples/icon.json
View file @ 066c8f72
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]
\ No newline at end of file
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"]
\ No newline at end of file
packages/message/src/main.vue
View file @ 066c8f72
......@@ -35,7 +35,7 @@
computed: {
typeClass() {
return `el-icon-${ typeMap[this.type] }`;
return typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : 'el-icon-information';
}
},
......
packages/notification/src/main.vue
View file @ 066c8f72
......@@ -2,7 +2,7 @@
<transition name="el-notification-fade">
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<div class="el-notification__group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
<span>{{ title }}</span>
<p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
......@@ -28,7 +28,6 @@
duration: 4500,
type: '',
onClose: null,
closed: false,
top: null,
timer: null
......@@ -37,7 +36,7 @@
computed: {
typeClass() {
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
}
},
......
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