Skip to content

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

Merge pull request #105 from csvwolf/next 

input-number / checkbox docs & fix bug
parents 315ba8c2 2e0a1419
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 568 deletions
examples/components/demo-block.vue
View file @ c7a62813
......@@ -44,7 +44,8 @@
font-size: 14px;
line-height: 1.5;
color: #5e6d82;
word-break: break-word;
p {
margin: 0;
}
......
examples/components/header.vue
View file @ c7a62813
......@@ -117,7 +117,7 @@
</li>
<li class="nav-item">
<router-link
active-class="active"
active-class="active"
to="/resource"
exact>资源
</router-link>
......
examples/docs/badge.md
View file @ c7a62813
## 基础用法
Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数，定义`value`属性，它接受`Number`或者`String`。
下面是一个样例，我们在 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>
Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。
:::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 {
......
examples/docs/breadcrumb.md
View file @ c7a62813
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/button.md
View file @ c7a62813
......@@ -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>
<el-button :disabled="true">disabled</el-button>
```
:::
## Plain Button
默认的`Default`主题，我们称之为朴素按钮(Plain Button)，朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。
:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
设置`plain`属性，它接受一个`Boolean`。
注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
```html
<el-button :disabled="true">disabled</el-button>
```
:::
你可以 Hover 在样例上进行预览：
## Plain Button
默认的`Default`主题，我们称之为朴素按钮(Plain 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`即可，下面是一个样例：
<div class="demo-box demo-button">
<el-button type="primary" :loading="true">Button</el-button>
</div>
点击后变成 loading 状态的样例，尝试点击它：
可以方便的处理 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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/card.md
View file @ c7a62813
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/checkbox.md
View file @ c7a62813
......@@ -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：
:::demo 使用`true-label`和`false-label`可以自定义选中时和未选中时的值，可以为`String`或`Number`类型。
<div class="demo-box demo-checkbox">
```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>
```
```js
vm.a = 'Jonny';
vm.b = 'Lara';
// 当选中时
vm.name === vm.a
// 当没有选中时
vm.name === vm.b
</template>
<script>
export default {
data() {
return {
name: 'Jonny',
a: 'Jonny',
b: 'Lara'
};
}
};
</script>
```
:::
## checkbox API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string\|string[]\|boolean | | |
| label | 真实值 | string | | |
| true-label | 选中时的真实值 | string | | |
| true-label | 没有选中时的真实值 | string | | |
| disabled | 禁用 | boolean | true, false | false |
## checkbox group API
## Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string\|string[]\|boolean | | |
| label | 选中状态的值（只有在`checkbox-group`下有意义） | string | | |
| true-label | 选中时的值 | string, number | | |
| false-label | 没有选中时的值 | string, number | | |
| disabled | 按钮禁用 | boolean | | false |
## checkbox group 事件
## Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | (value: string) |
| change | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
examples/docs/dialog.md
View file @ c7a62813
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/icon.md
View file @ c7a62813
......@@ -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>
```
:::
## 图标集合
......
examples/docs/input-number.md
View file @ c7a62813
......@@ -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 |
examples/docs/loading.md
View file @ c7a62813
......@@ -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>
```
:::
examples/docs/message-box.md
View file @ c7a62813
......@@ -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>
```
:::
## 全局方法
......
examples/docs/message.md
View file @ c7a62813
......@@ -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>
```
:::
## 全局方法
......
examples/docs/switch.md
View file @ c7a62813
......@@ -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 状态发生变化时的回调函数 | |
examples/docs/tabs.md
View file @ c7a62813
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/tag.md
View file @ c7a62813
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
packages/slider/src/main.vue
View file @ c7a62813
......@@ -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);
},
......
packages/switch/src/component.vue
View file @ c7a62813
......@@ -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>
......
scripts/cooking.demo.js
View file @ c7a62813
......@@ -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){
......
src/utils/strip-tags.js 0 → 100644
View file @ c7a62813
/*!
* 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();
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment