fix encoding apostrophes/some components change to new template

pull/2/head
SkyAo 2016-08-25 18:24:51 +08:00
parent 315ba8c2ab
commit 2e0a141943
21 changed files with 253 additions and 566 deletions

View File

@ -44,7 +44,8 @@
font-size: 14px;
line-height: 1.5;
color: #5e6d82;
word-break: break-word;
p {
margin: 0;
}

View File

@ -117,7 +117,7 @@
</li>
<li class="nav-item">
<router-link
active-class="active"
active-class="active"
to="/resource"
exact>资源
</router-link>

View File

@ -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 {

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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 值 |

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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>
```
:::
## 图标集合

View File

@ -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 |

View File

@ -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>
```
:::

View File

@ -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>
```
:::
## 全局方法

View File

@ -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>
```
:::
## 全局方法

View File

@ -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 状态发生变化时的回调函数 | |

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -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",

View File

@ -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);
},

View File

@ -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>

View File

@ -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){

27
src/utils/strip-tags.js Normal file
View File

@ -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();
};