mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-19 12:04:02 +08:00
misc doc updates
This commit is contained in:
@@ -130,8 +130,8 @@
|
||||
<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 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 type="primary" icon="search">搜索</el-button>
|
||||
<el-button type="primary">上传<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -161,7 +161,7 @@
|
||||
:::demo 要设置为 loading 状态,只要设置`loading`属性为`true`即可。
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
<el-button type="primary" :loading="true">加载中</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -172,10 +172,10 @@ Button 组件提供除了默认值以外的三种尺寸,可以在不同场景
|
||||
:::demo 额外的尺寸:`large`、`small`、`mini`,通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<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>
|
||||
<el-button type="primary" size="large">大型按钮</el-button>
|
||||
<el-button type="primary">正常按钮</el-button>
|
||||
<el-button type="primary" size="small">小型按钮</el-button>
|
||||
<el-button type="primary" size="mini">超小按钮</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -68,9 +68,9 @@
|
||||
|
||||
### 基本用法
|
||||
|
||||
Dialog 弹出一个对话框,适合需要定制性更大的场景,如果只是弹出框,可以尝试 MessageBox 组件。
|
||||
Dialog 弹出一个对话框,适合需要定制性更大的场景。
|
||||
|
||||
:::demo 需要设置`v-model`属性,它接收`Boolean`,当为`true`时显示 Dialog。Dialog 分为两个部分:`body`和`footer`,`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题,它是可选的,默认值为空。
|
||||
:::demo 需要设置`v-model`属性,它接收`Boolean`,当为`true`时显示 Dialog。Dialog 分为两个部分:`body`和`footer`,`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题,它是可选的,默认值为空。本例通过显式改变`v-model`的值来打开 Dialog,此外我们还为 Dialog 实例提供了`open`和`close`方法,可以通过调用它们来打开/关闭 Dialog。
|
||||
|
||||
```html
|
||||
<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
@@ -85,38 +85,9 @@ Dialog 弹出一个对话框,适合需要定制性更大的场景,如果只
|
||||
```
|
||||
:::
|
||||
|
||||
### 使用 Dialog 方法打开
|
||||
|
||||
:::demo 使用实例`open`和`close`方法,不用显式改变`v-modal`的值。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="openDialog()">使用Dialog方法</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
|
||||
<span>这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息,这是一段信息</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogBindVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$refs.dialogBind.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
|
||||
Dialog 组件的正文标题可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。
|
||||
Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下面是应用了 Element Table 和 Form 组件的两个样例。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
## 快速上手
|
||||
|
||||
element 是为饿了么定制的一套 Vue.js 后台组件库。帮助你更轻松更快速的开发后台项目。
|
||||
element 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。
|
||||
|
||||
### 安装
|
||||
|
||||
@@ -21,7 +21,7 @@ Vue.use(Element)
|
||||
|
||||
或者只引入你需要的组件
|
||||
|
||||
**use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
|
||||
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
|
||||
|
||||
```javascript
|
||||
import {
|
||||
@@ -30,25 +30,25 @@ import {
|
||||
// ...
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.component(Select.name, ElSelect)
|
||||
Vue.component(Select.name, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
(roughly) to
|
||||
将会被翻译成
|
||||
|
||||
```javascript
|
||||
import Select from 'element-ui/lib/select';
|
||||
import Select from 'element-ui/lib/theme-default/select.css';
|
||||
import 'element-ui/lib/theme-default/select.css';
|
||||
import Button from 'element-ui/lib/button';
|
||||
import Button from 'element-ui/lib/theme-default/button.css';
|
||||
import 'element-ui/lib/theme-default/button.css';
|
||||
|
||||
Vue.component(Select.name, ElSelect)
|
||||
Vue.component(Select.name, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
### babel-plugin-component
|
||||
|
||||
.babelrc
|
||||
配置 .babelrc
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user