mirror of https://github.com/ElemeFE/element
JSFiddle: add missing <style> and <script>
Leopoldthecoder
cinwell.li
parent
fa334a09d4
commit
353dab8c55
|
|
@ -31,6 +31,13 @@ Displays the amount of new messages.
|
|||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -47,6 +54,13 @@ You can customize the max value.
|
|||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -63,6 +77,13 @@ Displays text content other than numbers.
|
|||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -77,6 +98,13 @@ Use a red dot to mark content that needs to be noticed.
|
|||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,29 @@ Card includes title, content and operations.
|
|||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -78,6 +101,20 @@ The header part can be omitted.
|
|||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -101,6 +138,48 @@ Display richer content by adding some configs.
|
|||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -162,6 +162,18 @@ You can choose week, month or year by extending the standard date picker compone
|
|||
placeholder="Pick a year">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@
|
|||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
dialogVisible: false,
|
||||
dialogTinyVisible: false,
|
||||
dialogFullVisible: false,
|
||||
dialogStubbornVisible: false,
|
||||
dialogTableVisible: false,
|
||||
dialogBindVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
|
|
@ -60,13 +56,23 @@ Dialog pops up a dialog box, and it's quite customizable.
|
|||
```html
|
||||
<el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog title="tips" v-model="dialogVisible" size="tiny">
|
||||
<el-dialog title="Tips" v-model="dialogVisible" size="tiny">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -108,6 +114,45 @@ The content of Dialog can be anything, even a table or a form. This example show
|
|||
<el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -718,6 +718,7 @@ Form component allows you to verify your data, helping you find and correct erro
|
|||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Delete or add form items dynamically
|
||||
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ Input numerical values with a customizable range.
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.num1)
|
||||
}
|
||||
handleChange(value) {
|
||||
console.log(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
<style>
|
||||
.demo-input.demo-en-US {
|
||||
.el-select .el-input {
|
||||
width: 100px;
|
||||
width: 120px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
|
|
@ -166,6 +166,16 @@ Input data using mouse or keyboard.
|
|||
placeholder="Please input"
|
||||
v-model="input">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -179,6 +189,16 @@ Input data using mouse or keyboard.
|
|||
v-model="input1"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -195,6 +215,21 @@ Add an icon to indicate input type.
|
|||
v-model="input2"
|
||||
@click="handleIconClick">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -211,7 +246,19 @@ Resizable for entering multiple lines of text information.
|
|||
placeholder="Please input"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Mixed input
|
||||
|
||||
Prepend or append an element, generally a label or a button.
|
||||
|
|
@ -226,13 +273,32 @@ Prepend or append an element, generally a label or a button.
|
|||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
|
||||
<el-select v-model="select" slot="prepend">
|
||||
<el-option label="restaurant" value="1"></el-option>
|
||||
<el-option label="order number" value="2"></el-option>
|
||||
<el-option label="tel" value="3"></el-option>
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
<el-option label="Tel" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="search"></el-button>
|
||||
</el-input>
|
||||
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -261,6 +327,19 @@ Prepend or append an element, generally a label or a button.
|
|||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -350,8 +429,25 @@ Customize how suggestions are displayed.
|
|||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
|
||||
<style>
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var Vue = require('vue');
|
||||
Vue.component('my-item-en', {
|
||||
functional: true,
|
||||
render: function (h, ctx) {
|
||||
|
|
@ -466,7 +562,7 @@ Search data from server-side.
|
|||
```
|
||||
:::
|
||||
|
||||
### Input API
|
||||
### Input Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----| ----| ----| ---- | ----- |
|
||||
|
|
@ -494,7 +590,7 @@ Search data from server-side.
|
|||
|----| ----| ----|
|
||||
|click | triggers when the icon inside Input is clicked | event object |
|
||||
|
||||
### Autocomplete API
|
||||
### Autocomplete Attributes
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
|----| ----| ----| ---- | -----|
|
||||
|
|
|
|||
|
|
@ -34,6 +34,35 @@ Create basic grid layout using columns.
|
|||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -49,6 +78,35 @@ Column spacing is supported.
|
|||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -73,6 +131,35 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
|
|||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -94,6 +181,35 @@ You can specify column offsets.
|
|||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -128,6 +244,35 @@ Flexible alignment of columns.
|
|||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,12 @@ Displays animation in a container (such as a table) while loading data.
|
|||
</el-table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleopen(key, keyPath) {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleclose(key, keyPath) {
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleselect(key, keyPath) {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ Top bar NavMenu can be used in a variety of scenarios.
|
|||
|
||||
::: demo
|
||||
```html
|
||||
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
|
|
@ -35,7 +35,7 @@ Top bar NavMenu can be used in a variety of scenarios.
|
|||
<el-menu-item index="3">Orders</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
|
|
@ -45,8 +45,17 @@ Top bar NavMenu can be used in a variety of scenarios.
|
|||
</el-submenu>
|
||||
<el-menu-item index="3">Orders </el-menu-item>
|
||||
</el-menu>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Side bar
|
||||
|
|
@ -58,7 +67,7 @@ Vertical NavMenu with sub-menus.
|
|||
<el-row class="tac">
|
||||
<el-col :span="8">
|
||||
<h5>With icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
|
|
@ -75,7 +84,7 @@ Vertical NavMenu with sub-menus.
|
|||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>Without icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" theme="dark">
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">Navigator One</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
|
|
@ -114,6 +123,19 @@ Vertical NavMenu with sub-menus.
|
|||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -79,22 +79,6 @@
|
|||
multipleSelection: [],
|
||||
model: ''
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
singleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
},
|
||||
|
||||
multipleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
handleClick(row) {
|
||||
console.log('you clicked ', row);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -159,6 +143,32 @@ Other components can be nested in popover. Following is an example of nested tab
|
|||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -181,6 +191,16 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ Radio should not have too many options. Otherwise, use the Select component inst
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: ''
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -73,6 +73,16 @@ Suitable for choosing from some mutually exclusive options.
|
|||
<el-radio :label="6">optionB</el-radio>
|
||||
<el-radio :label="9">optionC</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ Used for rating
|
|||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -63,6 +64,7 @@ Using text to indicate rating score
|
|||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -88,6 +90,7 @@ You can use different icons to distinguish different rate components.
|
|||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -114,6 +117,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
|
|||
text-color="#ff9900"
|
||||
text-template="{value} points">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -29,8 +29,18 @@ Switch is used for switching between two opposing states.
|
|||
on-color="#13ce66"
|
||||
off-color="#ff4949">
|
||||
</el-switch>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
|
@ -48,8 +58,17 @@ Switch is used for switching between two opposing states.
|
|||
v-model="value3"
|
||||
disabled>
|
||||
</el-switch>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
|
|
|||
|
|
@ -17,6 +17,16 @@ Provide a list of fixed time for users to choose.
|
|||
}"
|
||||
placeholder="Select time">
|
||||
</el-time-select>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -39,44 +39,6 @@ Tooltip has 9 placements.
|
|||
|
||||
:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
|
||||
```html
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
|
||||
|
|
@ -124,6 +86,44 @@ Tooltip has 9 placements.
|
|||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,13 @@
|
|||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -51,6 +58,13 @@
|
|||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -66,6 +80,13 @@
|
|||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -79,6 +100,13 @@
|
|||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,29 @@
|
|||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -79,6 +102,20 @@
|
|||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -102,6 +139,48 @@
|
|||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -199,6 +199,18 @@
|
|||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@
|
|||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogVisible: false,
|
||||
dialogTinyVisible: false,
|
||||
dialogFullVisible: false,
|
||||
dialogStubbornVisible: false,
|
||||
dialogTableVisible: false,
|
||||
dialogBindVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
|
|
@ -88,6 +84,16 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
|
|||
<el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -128,6 +134,45 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
|
|||
<el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
<style>
|
||||
.demo-input.demo-zh-CN {
|
||||
.el-select .el-input {
|
||||
width: 100px;
|
||||
width: 110px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
|
|
@ -315,7 +315,7 @@ export default {
|
|||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
|
||||
<el-select v-model="select" slot="prepend">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
|
|
@ -732,7 +732,7 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### Input API
|
||||
### Input Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
|
|
@ -760,7 +760,7 @@ export default {
|
|||
| blur | 在 Input 失去焦点时触发 | event |
|
||||
| focus | 在 Input 或得焦点时触发 | event |
|
||||
|
||||
### Autocomplete API
|
||||
### Autocomplete Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
|
|
|
|||
|
|
@ -65,6 +65,35 @@
|
|||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -80,6 +109,35 @@
|
|||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -104,6 +162,35 @@
|
|||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -124,6 +211,35 @@
|
|||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -158,6 +274,35 @@
|
|||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,12 @@
|
|||
</el-table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleopen(key, keyPath) {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleclose(key, keyPath) {
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleselect(key, keyPath) {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
::: demo
|
||||
```html
|
||||
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<el-menu-item index="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
|
|
@ -75,6 +75,16 @@
|
|||
</el-submenu>
|
||||
<el-menu-item index="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -87,7 +97,7 @@
|
|||
<el-row class="tac">
|
||||
<el-col :span="8">
|
||||
<h5>带 icon</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
||||
<el-menu-item-group title="分组一">
|
||||
|
|
@ -104,7 +114,7 @@
|
|||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>不带 icon</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" theme="dark">
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">导航一</template>
|
||||
<el-menu-item-group title="分组一">
|
||||
|
|
@ -143,6 +153,19 @@
|
|||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -170,6 +170,32 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -192,6 +218,16 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -57,6 +57,17 @@
|
|||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -70,6 +81,16 @@
|
|||
v-model="value3"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -85,6 +106,16 @@
|
|||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -101,6 +132,16 @@
|
|||
text-color="#ff9900"
|
||||
text-template="{value}">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,17 @@
|
|||
on-color="#13ce66"
|
||||
off-color="#ff4949">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -55,6 +66,16 @@
|
|||
v-model="value3"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,16 @@
|
|||
}"
|
||||
placeholder="选择时间">
|
||||
</el-time-select>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -107,6 +107,40 @@
|
|||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"hide-text": "隐藏代码",
|
||||
"show-text": "显示代码",
|
||||
"button-text": "在线运行",
|
||||
"tooltip-text": "前往 jsfiddle.net 运行此实例"
|
||||
"tooltip-text": "前往 jsfiddle.net 运行此示例"
|
||||
},
|
||||
"footer": {
|
||||
"feedback": "反馈建议",
|
||||
|
|
|
|||
Loading…
Reference in New Issue