Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
Element
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
CI / CD Analytics
Repository Analytics
Value Stream Analytics
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
林焕东
Element
Commits
0dba1da9
Commit
0dba1da9
authored
Sep 12, 2016
by
Leopoldthecoder
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
misc doc updates
parent
001584e4
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
30 additions
and
52 deletions
+30
-52
CHANGELOG.md
CHANGELOG.md
+6
-0
README.md
README.md
+2
-2
examples/docs/button.md
examples/docs/button.md
+7
-7
examples/docs/dialog.md
examples/docs/dialog.md
+3
-32
examples/docs/quickstart.md
examples/docs/quickstart.md
+8
-8
examples/pages/nav.vue
examples/pages/nav.vue
+1
-1
packages/select/src/select.vue
packages/select/src/select.vue
+1
-0
packages/switch/src/component.vue
packages/switch/src/component.vue
+2
-2
No files found.
CHANGELOG.md
View file @
0dba1da9
## 更新日志
### 1.0.0-rc.4(待发布)
*2016-XX-XX*
-
修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
### 1.0.0-rc.3
*2016-09-09*
...
...
README.md
View file @
0dba1da9
...
...
@@ -46,9 +46,9 @@ Vue.use(Element)
// or
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
,
Select
)
Vue
.
component
(
Button
.
name
,
Button
)
...
...
examples/docs/button.md
View file @
0dba1da9
...
...
@@ -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>
```
:::
...
...
examples/docs/dialog.md
View file @
0dba1da9
...
...
@@ -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
...
...
examples/docs/quickstart.md
View file @
0dba1da9
## 快速上手
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
,
El
Select
)
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
,
El
Select
)
Vue
.
component
(
Select
.
name
,
Select
)
Vue
.
component
(
Button
.
name
,
Button
)
```
### babel-plugin-component
.babelrc
配置
.babelrc
```
json
{
...
...
examples/pages/nav.vue
View file @
0dba1da9
...
...
@@ -68,7 +68,7 @@
<div>
<h2>
导航
</h2>
<div
class=
"block"
>
<p>
导航可以解决用户在访问页面时:在哪里,去哪里,怎
p
去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。
</p>
<p>
导航可以解决用户在访问页面时:在哪里,去哪里,怎
样
去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。
</p>
</div>
<div
class=
"block"
>
<h3>
选择合适的导航
</h3>
...
...
packages/select/src/select.vue
View file @
0dba1da9
...
...
@@ -190,6 +190,7 @@
});
this
.
selectedInit
=
true
;
this
.
selected
=
[];
this
.
currentPlaceholder
=
this
.
cachedPlaceHolder
;
val
.
forEach
(
item
=>
{
let
option
=
this
.
options
.
filter
(
option
=>
option
.
value
===
item
)[
0
];
if
(
option
)
{
...
...
packages/switch/src/component.vue
View file @
0dba1da9
...
...
@@ -84,12 +84,12 @@
}
},
watch
:
{
value
()
{
value
(
val
)
{
if
(
this
.
onColor
||
this
.
offColor
)
{
this
.
handleCoreColor
();
}
this
.
handleButtonTransform
();
this
.
$emit
(
'
change
'
);
this
.
$emit
(
'
change
'
,
val
);
}
},
methods
:
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment