mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
add footer and demo-block
This commit is contained in:
Leopoldthecoder
baiyaaaaa
parent
3d90f2a3c3
commit
1b63c03dd7
@ -12,10 +12,14 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pure-g {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
}
|
||||
|
||||
.pure-g [class *= "pure-u"] {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
}
|
||||
|
||||
BIN
examples/assets/images/qrcode.png
Normal file
BIN
examples/assets/images/qrcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
165
examples/components/demo-block.vue
Normal file
165
examples/components/demo-block.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="[blockClass, { 'hover': hovering }]"
|
||||
@mouseenter="hovering = true"
|
||||
@mouseleave="hovering = false">
|
||||
<slot></slot>
|
||||
<div class="demo-block-control" @click="isExpanded = !isExpanded">
|
||||
<i :class="iconClass"></i>
|
||||
<span v-show="hovering">{{ controlText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
|
||||
&.hover {
|
||||
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
|
||||
}
|
||||
|
||||
.source {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
background-color: #fbfcfd;
|
||||
border-top: solid 1px #eaeefb;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height .2s;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 18px 24px;
|
||||
width: 40%;
|
||||
box-sizing: border-box;
|
||||
border-left: solid 1px #eaeefb;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #5e6d82;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f4faff;
|
||||
border: solid 1px #eaeefb;
|
||||
margin: 0 4px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: 60%;
|
||||
border-right: solid 1px #eaeefb;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 18px 24px;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
background-color: #fbfcfd;
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-block-control {
|
||||
border-top: solid 1px #eaeefb;
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
text-align: center;
|
||||
margin-top: -1px;
|
||||
color: #d3dce6;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
background-color: rgba(32, 159, 255, .05);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hovering: false,
|
||||
isExpanded: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
blockClass() {
|
||||
return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
|
||||
},
|
||||
|
||||
iconClass() {
|
||||
return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
|
||||
},
|
||||
|
||||
controlText() {
|
||||
return this.isExpanded ? '隐藏代码' : '显示代码';
|
||||
},
|
||||
|
||||
codeArea() {
|
||||
return this.$el.getElementsByClassName('meta')[0];
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
if (this.$el.getElementsByClassName('description').length > 0) {
|
||||
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isExpanded(val) {
|
||||
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let highlight = this.$el.getElementsByClassName('highlight')[0];
|
||||
if (this.$el.getElementsByClassName('description').length === 0) {
|
||||
highlight.style.width = '100%';
|
||||
highlight.borderRight = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
133
examples/components/footer.vue
Normal file
133
examples/components/footer.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<p class="footer-main-title">Element 1.0 Hydrogen</p>
|
||||
<span class="footer-main-link">反馈建议</span>
|
||||
<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<el-popover
|
||||
ref="weixin"
|
||||
placement="top"
|
||||
width="120"
|
||||
class="footer-popover"
|
||||
trigger="hover">
|
||||
<div class="footer-popover-title">饿了么 UED</div>
|
||||
<img src="../assets/images/qrcode.png" alt="">
|
||||
</el-popover>
|
||||
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
|
||||
<a href="//github.com/elemefe" target="_blank">
|
||||
<i class="doc-icon-github elementdoc"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
height: 120px;
|
||||
background-color: #324057;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
|
||||
* {
|
||||
word-spacing: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
font-size: 0;
|
||||
padding-top: 40px;
|
||||
display: inline-block;
|
||||
|
||||
.footer-main-title {
|
||||
line-height: 1;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-main-link {
|
||||
display: inline-block;
|
||||
margin: 12px 18px 0 0;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
color: #8492a6;
|
||||
|
||||
a {
|
||||
color: #8492a6;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
float: right;
|
||||
line-height: 120px;
|
||||
|
||||
.footer-popover {
|
||||
padding: 0;
|
||||
min-width: 120px;
|
||||
line-height: normal;
|
||||
box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
|
||||
|
||||
.footer-popover-title {
|
||||
border-bottom: solid 1px #eaeefb;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #99a9bf;
|
||||
background-color: #f8f9fe;
|
||||
}
|
||||
|
||||
img {
|
||||
size: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.elementdoc {
|
||||
transition: .3s;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: #324057;
|
||||
background-color: #fff;
|
||||
size: 32px;
|
||||
border-radius: 50%;
|
||||
font-size: 22px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.doc-icon-weixin {
|
||||
margin-right: 36px;
|
||||
&:hover {
|
||||
background-color: #26CB72;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-icon-github {
|
||||
margin-right: 0;
|
||||
transform: translateY(8px);
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: -6px;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(8px) scale(1.2);
|
||||
background-color: #437AC0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,124 +11,146 @@
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-alert .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success"></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info"></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning"></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error"></el-alert>
|
||||
</div>
|
||||
|
||||
::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
|
||||
```html
|
||||
<el-alert title="成功提示的文案" type="success"></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info"></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning"></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error"></el-alert>
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义关闭按钮
|
||||
|
||||
在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。
|
||||
|
||||
`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。
|
||||
|
||||
你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。
|
||||
|
||||
设置`close`事件来设置关闭时的回调。
|
||||
|
||||
下面的示例展示了上述三种情况：
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="不可关闭的alert" type="success" :closable="false"></el-alert>
|
||||
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
|
||||
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
|
||||
</div>
|
||||
|
||||
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
|
||||
```html
|
||||
<el-alert title="不可关闭" type="success" :closable="false"></el-alert>
|
||||
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
|
||||
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
|
||||
<template>
|
||||
<el-alert
|
||||
title="不可关闭的 alert"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="自定义 close-text"
|
||||
type="info"
|
||||
close-text="知道了">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="设置了回调的 alert"
|
||||
type="warning"
|
||||
@close="hello">
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 带有 icon
|
||||
|
||||
通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
|
||||
</div>
|
||||
|
||||
::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
|
||||
```html
|
||||
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## 带有辅助性文字介绍
|
||||
|
||||
除了必填的`title`属性外，你可以设置`description`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
|
||||
</div>
|
||||
|
||||
::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
|
||||
```html
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
<template>
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## 带有 icon 和辅助性文字介绍
|
||||
|
||||
最后，这是一个同时具有 icon 和辅助性文字的样例。
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
</div>
|
||||
|
||||
::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
|
||||
```html
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
||||
@ -73,15 +73,14 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例：
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
|
||||
</div>
|
||||
|
||||
::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open">
|
||||
点击展示 Notification
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -97,26 +96,33 @@ Notification 组件提供通知功能，Element 注册了`$notify`方法，接
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 带有 icon
|
||||
|
||||
Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。
|
||||
|
||||
通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<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>
|
||||
|
||||
::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
|
||||
```html
|
||||
<template>
|
||||
<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>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open2">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open3">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open4">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open5">
|
||||
错误
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -157,20 +163,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 不会自动关闭
|
||||
|
||||
默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例：
|
||||
|
||||
注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open6">
|
||||
不会自动关闭的 Notification
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -187,18 +191,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 回调函数
|
||||
|
||||
Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open7">
|
||||
带有回调函数的 Notification
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -219,6 +223,7 @@ Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 全局方法
|
||||
|
||||
|
||||
@ -4,9 +4,11 @@ import VueRouter from 'vue-router';
|
||||
import configRouter from './route.config';
|
||||
import Element from 'main/index.js';
|
||||
import 'packages/theme-default/src/index.css';
|
||||
import demoBlock from './components/demo-block.vue';
|
||||
|
||||
Vue.use(Element);
|
||||
Vue.use(VueRouter);
|
||||
Vue.component('demo-block', demoBlock);
|
||||
|
||||
const router = new VueRouter({
|
||||
base: __dirname,
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_1471936010_8874195.css">
|
||||
<title>ELEMENT</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -4,6 +4,13 @@ var md = require('markdown-it')();
|
||||
var Components = require('../components.json');
|
||||
var striptags = require('strip-tags');
|
||||
|
||||
function convert(str){
|
||||
str = str.replace(/(&#x)(\w{4});/gi,function($0){
|
||||
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16));
|
||||
});
|
||||
return str;
|
||||
}
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
app: './examples/entry.js',
|
||||
@ -56,27 +63,24 @@ cooking.add('vueMarkdown', {
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s+(.*)$/);
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function (tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s+(.*)$/);
|
||||
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var html = striptags(tokens[idx + 1].content, 'script');
|
||||
|
||||
var html = convert(striptags(tokens[idx + 1].content, 'script'));
|
||||
var descriptionHTML = description
|
||||
? '<div class="description">' + md.render(description) + '</div>'
|
||||
: '';
|
||||
|
||||
return `<section class="demo">
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="source">${html}</div>
|
||||
<div class="meta">
|
||||
${descriptionHTML}
|
||||
<div class="highlight">`;
|
||||
}
|
||||
return '</section>\n';
|
||||
return '</div></div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user