mirror of https://github.com/ElemeFE/element
fix encoding apostrophes/some components change to new template
parent
315ba8c2ab
commit
2e0a141943
|
@ -44,7 +44,8 @@
|
|||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #5e6d82;
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -117,7 +117,7 @@
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
active-class="active"
|
||||
active-class="active"
|
||||
to="/resource"
|
||||
exact>资源
|
||||
</router-link>
|
||||
|
|
|
@ -1,30 +1,7 @@
|
|||
## 基础用法
|
||||
Badge 组件可以在右上角展示标记,最常见的用法是用于展示消息数,定义`value`属性,它接受`Number`或者`String`。
|
||||
Badge 组件可以在右上角展示标记,最常见的用法是用于展示消息数。
|
||||
|
||||
下面是一个样例,我们在 Badge 组件内嵌入 Button 组件:
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item class="clearfix">
|
||||
评论
|
||||
<el-badge class="mark" :value="12" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="clearfix">
|
||||
回复
|
||||
<el-badge class="mark" :value="3" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
:::demo 定义`value`属性,它接受`Number`或者`String`。
|
||||
|
||||
```html
|
||||
<el-badge :value="12" class="item">
|
||||
|
@ -45,22 +22,12 @@ Badge 组件可以在右上角展示标记,最常见的用法是用于展示
|
|||
</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
## 最大值
|
||||
为了方便使用,Badge 组件可以自定义显示的最大值,由`max`属性定义,它接受一个`Number`,需要注意的是,只有当`value`为`Number`时,它才会生效。
|
||||
为了方便使用,Badge 组件可以自定义显示的最大值。
|
||||
|
||||
下面是一个样例:
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
</el-col>
|
||||
</el-row>
|
||||
:::demo 由`max`属性定义,它接受一个`Number`,需要注意的是,只有当`value`为`Number`时,它才会生效。
|
||||
|
||||
```html
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
|
@ -70,23 +37,13 @@ Badge 组件可以在右上角展示标记,最常见的用法是用于展示
|
|||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 自定义内容
|
||||
|
||||
定义`value`为`String`类型是时可以用于显示自定义文本,下面是两个样例,它们可以启发你在适时的情况使用 Badge:
|
||||
下面是两个样例,它们可以启发你在适时的情况使用 Badge:
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
</el-col>
|
||||
</el-row>
|
||||
:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
|
||||
|
||||
```html
|
||||
<el-badge value="new" class="item">
|
||||
|
@ -96,18 +53,13 @@ Badge 组件可以在右上角展示标记,最常见的用法是用于展示
|
|||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
```
|
||||
:::
|
||||
|
||||
## 小红点
|
||||
除了数字外,设置`is-dot`属性,它接受一个`Boolean`。可以使badge组件显示为一个小红点,来提醒用户需要关注的内容,此时设置其他属性均无效。
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-badge is-dot class="item">数据查询</el-badge>
|
||||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
</el-col>
|
||||
</el-row>
|
||||
可以使 Badge 组件显示为一个小红点,来提醒用户需要关注的内容,此时设置其他属性均无效。
|
||||
|
||||
:::demo 除了数字外,设置`is-dot`属性,它接受一个`Boolean`。
|
||||
|
||||
```html
|
||||
<el-badge is-dot class="item">数据查询</el-badge>
|
||||
|
@ -115,6 +67,7 @@ Badge 组件可以在右上角展示标记,最常见的用法是用于展示
|
|||
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
```
|
||||
:::
|
||||
|
||||
<style scoped>
|
||||
.share-button {
|
||||
|
|
|
@ -2,19 +2,7 @@
|
|||
|
||||
Breadcrumb,面包屑导航,用于提供给用户一个回溯到首页的路径,最后一级即为当前位置。
|
||||
|
||||
在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。
|
||||
|
||||
Element 提供了一个`separator`属性,在`el-breadcrumb`标签中设置它来决定分隔符,它只能是字符串,默认为斜杠`/`。
|
||||
|
||||
<div>
|
||||
<el-breadcrumb separator="//">
|
||||
<el-breadcrumb-item>Home</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性,在`el-breadcrumb`标签中设置它来决定分隔符,它只能是字符串,默认为斜杠`/`。
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator="//">
|
||||
|
@ -24,6 +12,7 @@ Element 提供了一个`separator`属性,在`el-breadcrumb`标签中设置它
|
|||
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -31,26 +31,7 @@
|
|||
|
||||
## 基础用法
|
||||
|
||||
Button 组件默认提供7种主题,由`type`属性来定义,默认为`default`:
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">primary</el-button>
|
||||
<el-button type="success">success</el-button>
|
||||
<el-button type="warning">warning</el-button>
|
||||
<el-button type="danger">danger</el-button>
|
||||
<el-button type="info">info</el-button>
|
||||
<el-button type="text">text button</el-button>
|
||||
</div>
|
||||
|
||||
你可以使用`disabled`属性来定义按钮是否可用,它接受一个`Boolean`值:
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button>Default</el-button>
|
||||
<el-button :disabled="true">disabled</el-button>
|
||||
</div>
|
||||
|
||||
下面是他们的样例代码:
|
||||
:::demo Button 组件默认提供7种主题,由`type`属性来定义,默认为`default`。
|
||||
|
||||
```html
|
||||
<el-button>Default</el-button>
|
||||
|
@ -60,26 +41,20 @@ Button 组件默认提供7种主题,由`type`属性来定义,默认为`defau
|
|||
<el-button type="danger">danger</el-button>
|
||||
<el-button type="info">info</el-button>
|
||||
<el-button type="text">text button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
:::demo 你可以使用`disabled`属性来定义按钮是否可用,它接受一个`Boolean`值。
|
||||
|
||||
```html
|
||||
<el-button :disabled="true">disabled</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## Plain Button
|
||||
默认的`Default`主题,我们称之为朴素按钮(Plain Button),你可以 hover 在样例上进行预览。
|
||||
|
||||
默认的`Default`主题,我们称之为朴素按钮(Plain Button),朴素按钮同样设置了不同的`type`属性对应的样式(可选值同上),默认为`info`。
|
||||
|
||||
设置`plain`属性,它接受一个`Boolean`。
|
||||
|
||||
注意,在该情况下,`type`虽然可以为`text`,但是是没有意义的,会显示为`text button`的样式。
|
||||
|
||||
你可以 Hover 在样例上进行预览:
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button :plain="true">Default</el-button>
|
||||
<el-button :plain="true" type="success">success</el-button>
|
||||
<el-button :plain="true" type="warning">warning</el-button>
|
||||
<el-button :plain="true" type="danger">danger</el-button>
|
||||
<el-button :plain="true" :disabled="true">disabled</el-button>
|
||||
</div>
|
||||
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式(可选值同上),默认为`info`。设置`plain`属性,它接受一个`Boolean`。注意,在该情况下,`type`虽然可以为`text`,但是是没有意义的,会显示为`text button`的样式。
|
||||
|
||||
```html
|
||||
<el-button :plain="true">Default</el-button>
|
||||
|
@ -88,17 +63,13 @@ Button 组件默认提供7种主题,由`type`属性来定义,默认为`defau
|
|||
<el-button :plain="true" type="danger">danger</el-button>
|
||||
<el-button :plain="true" :disabled="true">disabled</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## 尺寸
|
||||
|
||||
Button 组件提供除了默认值以外的三种尺寸:`large`、`small`、`mini`来满足不同的需求,通过设置`size`属性来配置它们。
|
||||
Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" size="large">large</el-button>
|
||||
<el-button type="primary">Default</el-button>
|
||||
<el-button type="primary" size="small">small</el-button>
|
||||
<el-button type="primary" size="mini">mini</el-button>
|
||||
</div>
|
||||
:::demo 额外的尺寸:`large`、`small`、`mini`,通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<el-button type="primary" size="large">large</el-button>
|
||||
|
@ -106,21 +77,13 @@ Button 组件提供除了默认值以外的三种尺寸:`large`、`small`、`m
|
|||
<el-button type="primary" size="small">small</el-button>
|
||||
<el-button type="primary" size="mini">mini</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## Loading
|
||||
|
||||
Button 组件提供的`loading`属性可以方便的让你处理 loading 状态,它接受一个`Boolean`,要设置为 loading 状态,只要设置`loading`属性为`true`即可,下面是一个样例:
|
||||
可以方便的处理 loading 状态,点击下面的按钮预览效果。
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
</div>
|
||||
|
||||
点击后变成 loading 状态的样例,尝试点击它:
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
|
||||
<el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
|
||||
</div>
|
||||
:::demo 要设置为 loading 状态,只要设置`loading`属性为`true`即可。
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
|
@ -128,45 +91,26 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
|
|||
<el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
|
||||
<el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## 图标按钮
|
||||
|
||||
理所当然的,Element 也支持图标按钮,设置`icon`属性即可,icon 的列表可以参考 Element 的 icon 组件,下面是简单的预览:
|
||||
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
</div>
|
||||
|
||||
除此以外,你也可以设置在文字右边的 icon ,只要使用`i`标签即可,使用图标组件来实现它,由此,你可以使用自己的图标了:
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
</div>
|
||||
:::demo 设置`icon`属性即可,icon 的列表可以参考 Element 的 icon 组件,也可以设置在文字右边的 icon ,只要使用`i`标签即可,可以使用自定义图标。
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
## 按钮组
|
||||
|
||||
如果你需要多个并列的按钮,按钮组可以帮你轻松的实现它,使用`<el-button-group>`标签来嵌套你的按钮即可。
|
||||
如果你需要多个并列的按钮,按钮组可以帮你轻松的实现它。
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button-group>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
|
@ -181,6 +125,7 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
|
|||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -45,24 +45,10 @@
|
|||
|
||||
## 基础用法
|
||||
|
||||
Card 组件包括`header`和`body`部分,`header`部分需要有显式具名 slot 分发,同时他也是可选的。
|
||||
|
||||
下面是一个带有标题、内容和操作(按钮)的 Card 组件示例,需要注意的是,部分样式需要你自己填入,下例中我们使用了布局来限制卡片的宽度:
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="line-height: 36px;">卡片名称</span>
|
||||
<el-button style="float: right;" type="primary">操作按钮</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
下面是一个带有标题、内容和操作(按钮)的 Card 组件示例,需要注意的是,部分样式需要你自己填入。
|
||||
|
||||
:::demo Card 组件包括`header`和`body`部分,`header`部分需要有显式具名 slot 分发,同时也是可选的。
|
||||
```html
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
|
@ -74,21 +60,13 @@ Card 组件包括`header`和`body`部分,`header`部分需要有显式具名 s
|
|||
</div>
|
||||
</el-card>
|
||||
```
|
||||
:::
|
||||
|
||||
## 简单卡片
|
||||
|
||||
如上述所言,Card 组件可以只有`body`区域,下面是一个没有定义`header`的 Card 组件。
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div v-for="o in 4" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
卡片可以只有内容区域。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-card>
|
||||
<div v-for="o in 4" class="text item">
|
||||
|
@ -96,15 +74,15 @@ Card 组件包括`header`和`body`部分,`header`部分需要有显式具名 s
|
|||
</div>
|
||||
</el-card>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 进阶使用
|
||||
配置`body-style`属性来自定义`body`部分的`style`。
|
||||
|
||||
可以让你的卡片极大程度的被个性化,为更丰富的内容展示服务。。
|
||||
可以让你的卡片极大程度的被个性化,为更丰富的内容展示服务。
|
||||
|
||||
下例是一个带图片的示例,能帮助你更好地理解`body-style`配合分发内容自定义样式的强大:
|
||||
|
||||
:::demo 配置`body-style`属性来自定义`body`部分的`style`,我们还使用了布局组件。
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
|
@ -119,19 +97,8 @@ Card 组件包括`header`和`body`部分,`header`部分需要有显式具名 s
|
|||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
```html
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>好吃的汉堡</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">操作按钮</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -28,29 +28,27 @@
|
|||
|
||||
## 基础用法
|
||||
|
||||
### 单个勾选框,逻辑值
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
|
||||
</div>
|
||||
:::demo 在`el-checkbox`元素中定义`v-model`绑定变量,单一的`checkbox`中,默认绑定变量的值会是`Boolean`,选中为`true`。
|
||||
|
||||
```html
|
||||
<el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
|
||||
<template>
|
||||
<el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 多个勾选框,绑定到同一个数组
|
||||
## 多选框组
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<p>{{ checkList }}</p>
|
||||
:::demo `checkbox-group`元素能把多个 checkbox 管理为一组,只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可,`label`属性除了改变 checkbox 按钮后的介绍外,同时也是该 checkbox 对应的值,`label`与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -61,6 +59,9 @@
|
|||
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<p>{{ checkList }}</p>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -68,15 +69,19 @@
|
|||
data () {
|
||||
return {
|
||||
checkList: ['选中且禁用','复选框 A']
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 绑定 value:
|
||||
## 绑定 value 的多选框
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
:::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值,可以为`String`或`Number`类型。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox
|
||||
class="checkbox"
|
||||
v-model="name"
|
||||
|
@ -84,42 +89,30 @@
|
|||
:false-label="b">
|
||||
{{name}}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-checkbox
|
||||
class="checkbox"
|
||||
v-model="name"
|
||||
:true-label="a"
|
||||
:false-label="b">
|
||||
{{name}}
|
||||
</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Jonny',
|
||||
a: 'Jonny',
|
||||
b: 'Lara'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
```js
|
||||
vm.a = 'Jonny';
|
||||
vm.b = 'Lara';
|
||||
// 当选中时
|
||||
vm.name === vm.a
|
||||
// 当没有选中时
|
||||
vm.name === vm.b
|
||||
```
|
||||
|
||||
## checkbox API
|
||||
## Checkbox Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||
| label | 真实值 | string | | |
|
||||
| true-label | 选中时的真实值 | string | | |
|
||||
| true-label | 没有选中时的真实值 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| label | 选中状态的值(只有在`checkbox-group`下有意义) | string | | |
|
||||
| true-label | 选中时的值 | string, number | | |
|
||||
| false-label | 没有选中时的值 | string, number | | |
|
||||
| disabled | 按钮禁用 | boolean | | false |
|
||||
|
||||
## checkbox group API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||
|
||||
## checkbox group 事件
|
||||
## Checkbox-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | (value: string) |
|
||||
| change | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
|
||||
|
|
|
@ -68,23 +68,7 @@
|
|||
|
||||
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">
|
||||
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
:::demo 需要设置`v-model`属性,它接收`Boolean`,当为`true`时显示 Dialog。Dialog 分为两个部分:`body`和`footer`,`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题,它是可选的,默认值为空。
|
||||
|
||||
```html
|
||||
<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
@ -97,24 +81,14 @@ Dialog 分为两个部分:`body`和`footer`,`footer`需要具名为`footer`
|
|||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
:::
|
||||
|
||||
## 设置尺寸
|
||||
|
||||
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">
|
||||
<span>这是一段内容</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogTinyVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
:::demo 提供四种尺寸:`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
|
||||
|
||||
```html
|
||||
<!-- tiny -->
|
||||
<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
|
||||
|
@ -124,66 +98,24 @@ Dialog 组件提供四种尺寸:`tiny`, `small`, `large`, `full`。通过`size
|
|||
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
下面是一个全屏幕 Dialog 的样例:
|
||||
|
||||
<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
|
||||
<img src="http://placekitten.com/1920/1280" class="full-image">
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<!-- 全屏幕Dialog -->
|
||||
<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
|
||||
|
||||
在默认条件下,你可以通过 ESC 和点击背后的遮罩层关闭 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="提示"
|
||||
v-model="dialogStubbornVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog,点击 modal 或按下 esc 关闭无法将其关闭</el-button>
|
||||
|
||||
<el-dialog title="提示"
|
||||
v-model="dialogStubbornVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
|
||||
</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>
|
||||
:::demo 使用实例`open`和`close`方法,不用显式改变`v-modal`的值。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click.native="openDialog()">使用Dialog方法</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
|
||||
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
|
||||
</el-dialog>
|
||||
|
@ -203,46 +135,15 @@ Dialog 组件提供四种尺寸:`tiny`, `small`, `large`, `full`。通过`size
|
|||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义内容
|
||||
|
||||
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">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="收货地址" v-model="dialogFormVisible">
|
||||
<el-form :models="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input :model.sync="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例,除此以外,它们并没有什么特殊之处。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" v-model="dialogTableVisible">
|
||||
|
@ -253,6 +154,7 @@ Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单
|
|||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" v-model="dialogFormVisible">
|
||||
|
@ -273,6 +175,7 @@ Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单
|
|||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -54,21 +54,15 @@
|
|||
|
||||
## 使用方法
|
||||
|
||||
直接通过设置类名为`el-icon-iconName`来使用即可。例如:
|
||||
|
||||
<div><i class="el-icon-search"></i></div>
|
||||
直接通过设置类名为`el-icon-iconName`来使用即可。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<i class="el-icon-search"></i>
|
||||
```
|
||||
|
||||
也可以在按钮组件中使用图标,更多地使用方式可以在按钮组件的文档中看到。
|
||||
|
||||
<div><el-button type="primary" icon="search">搜索</el-button></div>
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="search">搜索</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
## 图标集合
|
||||
|
||||
|
|
|
@ -3,7 +3,8 @@
|
|||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1
|
||||
num2: 1,
|
||||
num3: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -18,54 +19,67 @@
|
|||
|
||||
## 基础使用
|
||||
|
||||
<p>当我们需要标准的数字值时可以用到这个组件,它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
|
||||
需要标准的数字值时可以用到 Input Number 组件,你提供了数值输入提供了范围控制和递增递减的步数控制。
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
</div>
|
||||
值得一提的是,你可以不用通过连续点击增减,可以直接输入数字或者长按按钮进行数字的改变。
|
||||
|
||||
|
||||
:::demo 要使用它,只需要在`el-input-number`元素中使用`v-model`绑定变量即可,变量的初始值即为默认值。
|
||||
```html
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
<template>
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number v-model="num1" :disabled="true"></el-input-number>
|
||||
</div>
|
||||
:::demo `disabled`属性接受一个`Boolean`,设置为`true`即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置`min`属性和`max`属性,不设置`min`和`max`时,最小值为 0。
|
||||
|
||||
```html
|
||||
<el-input-number v-model="num1" :disabled="true"></el-input-number>
|
||||
<el-input-number v-model="num3" :min="5" :max="10"></el-input-number>
|
||||
```
|
||||
:::
|
||||
|
||||
## 步数
|
||||
## 步长
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number v-model="num2" :step="2"></el-input-number>
|
||||
</div>
|
||||
让组件按照步长来增减。
|
||||
|
||||
:::demo 设置`step`属性可以控制步长,接受一个`Number`。
|
||||
|
||||
```html
|
||||
<el-input-number v-model="num2" :step="2"></el-input-number>
|
||||
```
|
||||
:::
|
||||
|
||||
## 尺寸
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number v-model="num1" size="large"></el-input-number>
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
<el-input-number v-model="num1" size="small"></el-input-number>
|
||||
</div>
|
||||
和其他组件一样,Input Number 同样具有不同的尺寸。
|
||||
|
||||
:::demo 三种尺寸:`large`,`small`以及默认,只需要设置`size`属性即可。
|
||||
|
||||
```html
|
||||
<el-input-number v-model="num1" size="large"></el-input-number>
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
<el-input-number v-model="num1" size="small"></el-input-number>
|
||||
```
|
||||
:::
|
||||
|
||||
## API
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
| model | 绑定值 | number | | |
|
||||
| step | 步数 | number | | 1 |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
| disabled | 是否禁用 | boolean | true, false | false |
|
||||
| min | 设置计数器允许的最小值 | number | | 0 |
|
||||
| max | 设置计数器允许的最大值 | number | | Infinity |
|
||||
| step | 计数器步长 | number | | 1 |
|
||||
| size | 计数器尺寸 | string | large, small | |
|
||||
| disabled | 是否禁用计数器 | boolean | | false |
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
border: solid 1px #999;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
|
@ -64,13 +65,7 @@
|
|||
|
||||
## 基本用法
|
||||
|
||||
在 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>
|
||||
:::demo 在 Loading 组件中,Element 准备了自定义命令`v-loading`,只需要绑定`Boolean`即可,默认状况下,Loading 遮罩会插入到绑定元素的子节点。
|
||||
|
||||
```html
|
||||
<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
|
@ -79,37 +74,28 @@
|
|||
<p>点击上面的按钮,本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
## 修饰符
|
||||
|
||||
Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符,可以使遮罩插入至 DOM 中的 body 上。
|
||||
通过修饰符,我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
|
||||
|
||||
<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" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮,本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
当需要全屏遮罩时,可使用 `fullscreen` 修饰符(此时遮罩会插入至 body 上)
|
||||
|
||||
<el-button :plain="true" @click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
|
||||
:::demo Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符,可以使遮罩插入至 DOM 中的 body 上。当需要全屏遮罩时,可使用 `fullscreen` 修饰符(此时遮罩会插入至 body 上)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<el-button
|
||||
:plain="true"
|
||||
@click.native="openFullScreen"
|
||||
v-loading.fullscreen="fullscreenLoading">
|
||||
打开全屏 loading
|
||||
</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮,本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -130,3 +116,4 @@ Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
|
|
@ -66,15 +66,13 @@
|
|||
|
||||
MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能:`$msgbox`,`$alert`,`$confirm`以及`$prompt`。
|
||||
|
||||
在本页文档中一一介绍它们,首先看最简单的示例,我们使用`$alert`,它接收了两个参数,`message`和`title`。
|
||||
在本页文档中一一介绍它们,首先看最简单的示例,我们使用`$alert`。
|
||||
|
||||
值得一提的是,窗口被关闭后,它会返回一个`Promise`对象便于进行后续操作的处理。
|
||||
|
||||
<el-button @click.native="open">打开 Alert</el-button>
|
||||
:::demo 它接收了两个参数,`message`和`title`。值得一提的是,窗口被关闭后,它会返回一个`Promise`对象便于进行后续操作的处理。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click.native="open">打开 Message Box</el-button>
|
||||
<el-button @click.native="open">打开 Alert</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -87,16 +85,13 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 配置项
|
||||
|
||||
MessageBox 组件也拥有极高的定制性,我们可以传入`options`作为第三个参数,它是一个字面量对象。
|
||||
|
||||
下例是一个包含图标的 alert 框,需要注意的是,第二个参数`title`必须定义为`String`类型,如果是`Object`,会被理解为`options`。
|
||||
|
||||
`type`字段表明消息类型,可以为`success`,`error`,`info`和`warning`,无效的设置将会被忽略。
|
||||
|
||||
<el-button @click.native="open2">打开 alert</el-button>
|
||||
:::demo 第二个参数`title`必须定义为`String`类型,如果是`Object`,会被理解为`options`。`type`字段表明消息类型,可以为`success`,`error`,`info`和`warning`,无效的设置将会被忽略。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -115,10 +110,11 @@ MessageBox 组件也拥有极高的定制性,我们可以传入`options`作为
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
下面是一个 confirm 框,在这里我们用了`Promise`来处理后续响应。
|
||||
下面是一个 confirm 框。
|
||||
|
||||
<el-button @click.native="open3">打开 confirm</el-button>
|
||||
:::demo 在这里我们用了`Promise`来处理后续响应。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -147,12 +143,11 @@ MessageBox 组件也拥有极高的定制性,我们可以传入`options`作为
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
Prompt 框功能强大,可以处理简单的输入,甚至你可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验为通过,`String`相当于定义了`inputErrorMessage`字段。
|
||||
Prompt 框功能强大,可以处理简单的输入。
|
||||
|
||||
此外,你可以用`inputPlaceholder`字段来定义输入框的占位符。
|
||||
|
||||
<el-button @click.native="open4">打开 prompt</el-button>
|
||||
:::demo 可以用`inputPattern`字段自己规定匹配模式,或者用`inputValidator`规定校验函数,可以返回`Boolean`或`String`,`Boolean`为`false`或字符串时均表示校验为通过,`String`相当于定义了`inputErrorMessage`字段。此外,可以用`inputPlaceholder`字段来定义输入框的占位符。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -182,12 +177,11 @@ Prompt 框功能强大,可以处理简单的输入,甚至你可以用`inputP
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
Msgbox 框是最基本的弹框,与 Alert 的区别在于 Alert 无法通过 ESC 和 点击框外关闭。
|
||||
|
||||
此例中我们使用了`showCancelButton`字段,用于显示取消按钮,同时使用`cancelButtonClass`可以自定义样式,`cancelButtonText`来自定义按钮文本,Confirm 按钮也具有相同的字段,在文末的字段说明中有完整的字段列表。
|
||||
|
||||
<el-button @click.native="open5">打开 Message Box</el-button>
|
||||
:::demo 使用了`showCancelButton`字段,用于显示取消按钮,同时使用`cancelButtonClass`可以自定义样式,`cancelButtonText`来自定义按钮文本,Confirm 按钮也具有相同的字段,在文末的字段说明中有完整的字段列表。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -213,6 +207,7 @@ Msgbox 框是最基本的弹框,与 Alert 的区别在于 Alert 无法通过 E
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 全局方法
|
||||
|
||||
|
|
|
@ -74,11 +74,7 @@
|
|||
|
||||
Message 系统了反馈提示,它比 Notification 更为小巧,可以根据需要来使用它们,在配置上,它们非常类似,所以部分 Notification 的 options 我们不会做详尽解释,文末有 options 列表,可以结合 Notification 的文档理解它们。
|
||||
|
||||
Element 注册了一个`$message`方法用于调用,Message 同样接收一个`options`字面量,`message`参数能定义正文内容,下面是最简单的样例:
|
||||
|
||||
<div class="demo-box demo-message">
|
||||
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
|
||||
</div>
|
||||
:::demo Element 注册了一个`$message`方法用于调用,Message 同样接收一个`options`字面量,`message`参数能定义正文内容。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -97,19 +93,15 @@ Element 注册了一个`$message`方法用于调用,Message 同样接收一个
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 不同状态
|
||||
|
||||
Message 同样提供了四种类型:`success`,`info`,`warning`,`error`,由不同图标表示,设置`type`字段来定义它们,默认为`info`,如果设置其他值将被忽略。
|
||||
Message 同样提供了四种类型:`success`,`info`,`warning`,`error`,由不同图标表示。
|
||||
|
||||
你可以通过下面的按钮来体验它们:
|
||||
|
||||
<div class="demo-box demo-message">
|
||||
<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>
|
||||
|
||||
:::demo 设置`type`字段来定义它们,默认为`info`,如果设置其他值将被忽略。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open2">成功</el-button>
|
||||
|
@ -144,20 +136,15 @@ Message 同样提供了四种类型:`success`,`info`,`warning`,`error`
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 可关闭
|
||||
|
||||
默认的 Message 是不可以被人工关闭的,如果需要可关闭的 Message,可以使用`showClose`字段,它接受一个`Boolean`,`true`为允许关闭。
|
||||
默认的 Message 是不可以被人工关闭的,如果需要可关闭的 Message,可以使用`showClose`字段。
|
||||
|
||||
注意:和 Notification 一样,Message 拥有可控的`duration`,设置`0`为不会被自动关闭,默认为 3000 毫秒。
|
||||
|
||||
<div class="demo-box demo-message">
|
||||
<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>
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open5">消息</el-button>
|
||||
|
@ -203,6 +190,7 @@ Message 同样提供了四种类型:`success`,`info`,`warning`,`error`
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 全局方法
|
||||
|
||||
|
|
|
@ -21,22 +21,18 @@
|
|||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
</div>
|
||||
Switch 组件提供了平滑的开关。
|
||||
|
||||
:::demo 只需要`el-switch`元素绑定`v-model`到一个变量即可完成状态改变,状态是一个`Boolean`。
|
||||
|
||||
```html
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch disabled></el-switch>
|
||||
<el-switch disabled :value="false"></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
||||
</div>
|
||||
:::demo 设置`disabled`属性,接受一个`Boolean`,设置`true`即可禁用,此例中我们使用了`on-text`属性与`off-text`属性来设置开关旁的描述,`value`属性用于定义无需双向绑定情况的开关值。
|
||||
|
||||
```html
|
||||
<el-switch disabled></el-switch>
|
||||
|
@ -44,24 +40,23 @@
|
|||
<el-switch on-text="" off-text="" disabled></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义颜色
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
|
||||
</div>
|
||||
:::demo 使用`on-color`和`off-color`属性,可以自定义开关颜色。`on-icon-class`定义了开关时的图标,具体图标可以参见 Icon 组件文档,当设置了 Icon 后,text 值将被忽略。
|
||||
|
||||
```html
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## API
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | switch 的选中状态 | boolean | | true |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| disabled | 是否禁用 | boolean | | false |
|
||||
| width | switch 的宽度(像素) | number | | 58(有文字)/ 46(无文字) |
|
||||
| on-icon-class | switch 打开时所显示图标的类名 | string | | |
|
||||
| off-icon-class | switch 关闭时所显示图标的类名 | string | | |
|
||||
|
@ -69,5 +64,9 @@
|
|||
| off-text | switch 关闭时的文字 | string | | 'OFF' |
|
||||
| on-color | switch 打开时的背景色 | string | | |
|
||||
| off-color | switch 关闭时的背景色 | string | | |
|
||||
| name | 对应 input 的 name 属性 | string | | |
|
||||
| change | value 发生变化时的回调函数 | function | | |
|
||||
| name | switch 对应的 name 属性 | string | | |
|
||||
|
||||
## Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | switch 状态发生变化时的回调函数 | |
|
||||
|
|
|
@ -37,20 +37,7 @@
|
|||
|
||||
## 基础使用
|
||||
|
||||
Tabs 组件提供了选项卡功能,只需要使用`el-tabs`和子元素`el-tab-pane`即可,在两个元素中,我们分别提供了一系列的属性来方便使用,`el-tab-pane`中`label`决定了选项卡标题,标签内部写入内容即可。
|
||||
|
||||
在下例中我们在`el-tabs`中设置了`active-name`属性,接受一个`String`值,表明选中的选项卡,在`el-tab-pane`中可以设置对应的`name`属性,如果没有设置`name`,则默认值为顺序的`1`/`2`/`3`/`4`。
|
||||
|
||||
下例会选中选项卡2,如果不设置`name`,将`active-name`设为`2`,可以达成相同效果。
|
||||
|
||||
<div>
|
||||
<el-tabs :active-name="activeName">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
:::demo Tabs 组件提供了选项卡功能,只需要使用`el-tabs`和子元素`el-tab-pane`即可,在两个元素中,我们分别提供了一系列的属性来方便使用,`el-tab-pane`中`label`决定了选项卡标题,标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性,接受一个`String`值,表明选中的选项卡,在`el-tab-pane`中可以设置对应的`name`属性,如果没有设置`name`,则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2,如果不设置`name`,将`active-name`设为`2`,可以达成相同效果。
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
@ -71,20 +58,13 @@ Tabs 组件提供了选项卡功能,只需要使用`el-tabs`和子元素`el-ta
|
|||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 多种风格
|
||||
|
||||
除了上例中的风格外,我们还提供了标签和卡片两种风格,只需要设置`type`属性即可,如果需要标签风格,将其设置为`card`,卡片风格,则为`border-card`。
|
||||
|
||||
<div>
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
除了上例中的风格外,我们还提供了标签和卡片两种风格。
|
||||
|
||||
:::demo 只需要设置`type`属性即可,如果需要标签风格,将其设置为`card`,卡片风格,则为`border-card`。
|
||||
```html
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
|
@ -92,44 +72,23 @@ Tabs 组件提供了选项卡功能,只需要使用`el-tabs`和子元素`el-ta
|
|||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
<div>
|
||||
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
## 可关闭的标签
|
||||
|
||||
在`el-tabs`中设置`closable`属性,接受一个`Boolean`,设置为`true`时为可关闭。
|
||||
|
||||
除此以外,我们在`el-tabs`中准备了两个钩子,用于在 Tab 被选中时和被删除时自定义属性:`on-click`和`on-remove`,接受`Function`,它们都提供一个参数`tab`,为操作的目标标签。
|
||||
|
||||
<div>
|
||||
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
:::demo 在`el-tabs`中设置`closable`属性,接受一个`Boolean`,设置为`true`时为可关闭。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
|
||||
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
|
@ -149,6 +108,7 @@ Tabs 组件提供了选项卡功能,只需要使用`el-tabs`和子元素`el-ta
|
|||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -30,16 +30,9 @@
|
|||
|
||||
## 基础使用
|
||||
|
||||
Tag 组件提供了六种主题,由`type`属性来定义,该属性可选填:
|
||||
Tag 组件提供了六种主题。
|
||||
|
||||
<div class="demo-box demo-tag">
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="gray">标签二</el-tag>
|
||||
<el-tag type="primary">标签三</el-tag>
|
||||
<el-tag type="success">标签四</el-tag>
|
||||
<el-tag type="warning">标签五</el-tag>
|
||||
<el-tag type="danger">标签六</el-tag>
|
||||
</div>
|
||||
:::demo 由`type`属性来定义,该属性可选填。
|
||||
|
||||
```html
|
||||
<el-tag>标签一</el-tag>
|
||||
|
@ -49,43 +42,21 @@ Tag 组件提供了六种主题,由`type`属性来定义,该属性可选填
|
|||
<el-tag type="warning">标签五</el-tag>
|
||||
<el-tag type="danger">标签六</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
## 描边
|
||||
|
||||
`hit`属性可以设置描边,接受一个`Boolean`,默认为`false`。
|
||||
|
||||
借此可以定义 hover 时的效果,下面是一个`hit`为`true`时的效果:
|
||||
|
||||
<div class="demo-box demo-tag">
|
||||
<el-tag type="primary" :hit="true">标签</el-tag>
|
||||
</div>
|
||||
借此可以定义 hover 时的效果。
|
||||
|
||||
:::demo `hit`属性可以设置描边。
|
||||
```html
|
||||
<el-tag type="primary" :hit="true">标签</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
## 可移除的标签
|
||||
|
||||
设置`closable`属性来定义一个可移除的标签,接受一个`Boolean`,设置为`true`即可。
|
||||
|
||||
此外,默认的标签移除时会附带渐变动画,如果不想使用,可以设置`close-transition`属性,它接受一个`Boolean`,true 为关闭。
|
||||
|
||||
设置`close`事件可以处理关闭后的回调函数。
|
||||
|
||||
下面是一个综合应用他们的样例:
|
||||
|
||||
<div class="demo-box demo-tag">
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
:key="tag"
|
||||
:close-transition="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
</div>
|
||||
:::demo 设置`closable`属性来定义一个可移除的标签,接受一个`Boolean`,设置为`true`即可。默认的标签移除时会附带渐变动画,如果不想使用,可以设置`close-transition`属性,它接受一个`Boolean`,true 为关闭。设置`close`事件可以处理关闭后的回调函数。
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
|
@ -121,6 +92,7 @@ Tag 组件提供了六种主题,由`type`属性来定义,该属性可选填
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
"oui-dom-events": "^0.2.1",
|
||||
"postcss": "^5.0.21",
|
||||
"purecss": "^0.6.0",
|
||||
"strip-tags": "^0.1.1",
|
||||
"cheerio": "^0.18.0",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"vue": "^2.0.0-rc.2",
|
||||
"vue-loader": "^9.3.2",
|
||||
|
|
|
@ -161,7 +161,7 @@
|
|||
|
||||
onSliderClick(event) {
|
||||
var currentX = event.clientX;
|
||||
var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
|
||||
var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
|
||||
var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
|
||||
this.setPosition(newPos);
|
||||
},
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
@click="handleMiscClick"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[onIconClass]" v-if="onIconClass"></i>
|
||||
<span v-if="onText">{{ onText }}</span>
|
||||
<span v-if="!onIconClass && onText">{{ onText }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="label-fade">
|
||||
|
@ -22,7 +22,7 @@
|
|||
@click="handleMiscClick"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[offIconClass]" v-if="offIconClass"></i>
|
||||
<span v-if="offText">{{ offText }}</span>
|
||||
<span v-if="!offIconClass && offText">{{ offText }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@ var cooking = require('cooking');
|
|||
var path = require('path');
|
||||
var md = require('markdown-it')();
|
||||
var Components = require('../components.json');
|
||||
var striptags = require('strip-tags');
|
||||
var striptags = require('../src/utils/strip-tags');
|
||||
|
||||
function convert(str){
|
||||
str = str.replace(/(&#x)(\w{4});/gi,function($0){
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
/*!
|
||||
* strip-tags <https://github.com/jonschlinkert/strip-tags>
|
||||
*
|
||||
* Copyright (c) 2015 Jon Schlinkert, contributors.
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var cheerio = require('cheerio');
|
||||
|
||||
module.exports = function (str, tags) {
|
||||
var $ = cheerio.load(str, {decodeEntities: false});
|
||||
|
||||
if (!tags || tags.length === 0) {
|
||||
return str;
|
||||
}
|
||||
|
||||
tags = !Array.isArray(tags) ? [tags] : tags;
|
||||
var len = tags.length;
|
||||
|
||||
while (len--) {
|
||||
$(tags[len]).remove();
|
||||
}
|
||||
|
||||
return $.html();
|
||||
};
|
Loading…
Reference in New Issue