Skip to content

E
Element
Commit 519a64b6 authored by qingwei.li's avatar qingwei.li
Browse files
Options

Fix conflict

parents bca756d8 37ebca5b
Hide whitespace changes
Inline Side-by-side
Showing with 745 additions and 224 deletions
bin/build-entry.js
View file @ 519a64b6
...@@ -21,6 +21,7 @@ const install = function(Vue) { ...@@ -21,6 +21,7 @@ const install = function(Vue) {
Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification; Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
}; };
// auto install // auto install
......
components.json
View file @ 519a64b6
{ {
"group": [
"./packages/group/index.js"
],
"select-dropdown": [ "select-dropdown": [
"./packages/select-dropdown/index.js" "./packages/select-dropdown/index.js"
], ],
...@@ -148,5 +145,8 @@ ...@@ -148,5 +145,8 @@
], ],
"spinner": [ "spinner": [
"./packages/spinner/index.js" "./packages/spinner/index.js"
],
"message": [
"./packages/message/index.js"
] ]
} }
examples/docs/checkbox.md
View file @ 519a64b6
...@@ -41,22 +41,26 @@ ...@@ -41,22 +41,26 @@
### 多个勾选框，绑定到同一个数组 ### 多个勾选框，绑定到同一个数组
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox> <el-checkbox-group v-model="checkList">
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
</div> </div>
<p>{{ checkList }}</p> <p>{{ checkList }}</p>
```html ```html
<template> <template>
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox> <el-checkbox-group v-model="checkList">
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
</template> </template>
<script> <script>
...@@ -101,10 +105,21 @@ vm.name === vm.a ...@@ -101,10 +105,21 @@ vm.name === vm.a
vm.name === vm.b vm.name === vm.b
``` ```
## API ## checkbox API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| model | 绑定值 | string\|string[]\|boolean | | | | value | 绑定值 | string\|string[]\|boolean | | |
| value | 真实值 | string | | | | label | 真实值 | string | | |
| label | 显示值，不填则显示 value | string | | | | true-label | 选中时的真实值 | string | | |
| true-label | 没有选中时的真实值 | string | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
## checkbox group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string\|string[]\|boolean | | |
## checkbox group 事件
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | (value: string) |
examples/docs/message.md 0 → 100644
View file @ 519a64b6
<script>
module.exports = {
methods: {
open() {
this.$message({
message: '这是一条消息提示'
});
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open8() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
};
</script>
<style>
.demo-box.demo-message {
.el-button + .el-button {
margin-left: 10px;
}
}
</style>
## 基本用法
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message({
message: '这是一条消息提示'
});
}
}
}
</script>
```
## 不同状态
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
</template>
<script>
export default {
methods: {
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
}
</script>
```
## 可关闭
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
</template>
<script>
export default {
methods: {
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open8() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
}
</script>
```
## 全局方法
element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
## 单独引用
单独引入 `Message`：
```javascript
import { Message } from 'element-ui';
```
此时调用方法为 `Message(options)`。
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | | |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 3000 |
| showClose | 是否显示关闭按钮 | boolean | | false |
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | | |
examples/docs/pagination.md
View file @ 519a64b6
...@@ -50,8 +50,8 @@ ...@@ -50,8 +50,8 @@
<el-pagination <el-pagination
@size-change="handleSizeChange" @sizechange="handleSizeChange"
@current-change="handleCurrentChange" @currentchange="handleCurrentChange"
layout="sizes, prev, pager, next, jumper, total" layout="sizes, prev, pager, next, jumper, total"
:total="1000"> :total="1000">
</el-pagination> </el-pagination>
...@@ -85,6 +85,10 @@ ...@@ -85,6 +85,10 @@
| current-page | 当前页数 | Number | | 0| | current-page | 当前页数 | Number | | 0|
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' | | layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' |
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] | | page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] |
| size-change | pageSize 改变时会触发的事件 | Function | | |
| current-change | currentPage 改变时会触发的事件 | Function | | | ## 事件
| 事件名称 | 说明 | 回调函数 |
|---------|--------|---------|
| sizechange | pageSize 改变时会触发 | `size` |
| currentchange | currentPage 改变时会触发 | `currentPage` |
examples/docs/radio.md
View file @ 519a64b6
...@@ -16,16 +16,16 @@ ...@@ -16,16 +16,16 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
</div> </div>
```html ```html
<template> <template>
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio> <el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
</template> </template>
<script> <script>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
## Radio Group ## Radio Group
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio-group :value.sync="radio2"> <el-radio-group v-model="radio2">
<el-radio :label="9"></el-radio> <el-radio :label="9"></el-radio>
<el-radio :label="6"></el-radio> <el-radio :label="6"></el-radio>
<el-radio :label="3"></el-radio> <el-radio :label="3"></el-radio>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</div> </div>
```html ```html
<el-radio-group :value.sync="radio2"> <el-radio-group v-model="radio2">
<el-radio :label="9"></el-radio> <el-radio :label="9"></el-radio>
<el-radio :label="6"></el-radio> <el-radio :label="6"></el-radio>
<el-radio :label="3"></el-radio> <el-radio :label="3"></el-radio>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
## Radio Group Button ## Radio Group Button
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio31" size="large"> <el-radio-group v-model="radio31" size="large">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio32"> <el-radio-group v-model="radio32">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="demo"> <div class="demo">
<el-radio-group :value.sync="radio33" size="small"> <el-radio-group v-model="radio33" size="small">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
...@@ -85,19 +85,19 @@ ...@@ -85,19 +85,19 @@
</div> </div>
```html ```html
<el-radio-group :value.sync="radio31" size="large"> <el-radio-group v-model="radio31" size="large">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button> <el-radio-button label="深圳"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-radio-group :value.sync="radio32"> <el-radio-group v-model="radio32">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button> <el-radio-button label="深圳"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-radio-group :value.sync="radio33" size="small"> <el-radio-group v-model="radio33" size="small">
<el-radio-button label="上海"></el-radio-button> <el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button> <el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州" :disabled="true"></el-radio-button> <el-radio-button label="广州" :disabled="true"></el-radio-button>
...@@ -108,31 +108,32 @@ ...@@ -108,31 +108,32 @@
## 禁用 ## 禁用
<div class="demo-box demo-radio"> <div class="demo-box demo-radio">
<el-radio disabled :value.sync="radio" label="禁用"></el-radio> <el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio> <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
</div> </div>
```html ```html
<el-radio disabled :value.sync="radio" label="禁用"></el-radio> <el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio> <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
``` ```
## Radio API ## Radio API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string | | | | value | 绑定值 | string,number | | |
| label | 真实值 | string | | | | label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
## Radio Group API ## Radio Group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string | | | | value | 绑定值 | string,number | | |
| size | 尺寸 | string | large, small | | | size | 尺寸 | string | large, small | |
| change | 绑定值变化时触发的事件 | Function(value) | | |
## Radio Button API ## Radio Button API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 真实值 | string | | | | label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
examples/docs/select.md
View file @ 519a64b6
...@@ -4,36 +4,36 @@ ...@@ -4,36 +4,36 @@
return { return {
options: [{ options: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2' label: '双皮奶'
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}], }],
options2: [{ options2: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2', label: '双皮奶',
disabled: true disabled: true
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}], }],
options3: [{ options3: [{
label: '分组1', label: '分组1',
...@@ -59,39 +59,58 @@ ...@@ -59,39 +59,58 @@
}], }],
options4: [{ options4: [{
value: '选项1', value: '选项1',
label: '标签1' label: '黄金糕'
}, { }, {
value: '选项2', value: '选项2',
label: '标签2' label: '双皮奶'
}, { }, {
value: '选项3', value: '选项3',
label: '标签3' label: '蚵仔煎'
}, { }, {
value: '选项4', value: '选项4',
label: '标签4' label: '龙须面'
}, { }, {
value: '选项5', value: '选项5',
label: '标签5' label: '北京烤鸭'
}, { }, {
value: '选项6', value: '选项6',
label: '标签6' label: '炸酱面'
}, { }, {
value: '选项7', value: '选项7',
label: '标签7' label: '羊蝎子'
}, { }, {
value: '选项8', value: '选项8',
label: '标签8' label: '肉夹馍'
}, { }, {
value: '选项9', value: '选项9',
label: '标签9' label: '回锅肉'
}, { }, {
value: '选项10', value: '选项10',
label: '标签10' label: '小笼包'
}, { }, {
value: '选项11', value: '选项11',
label: '标签11' label: '红烧肉'
}], }],
options5: [], options5: [],
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: '', value: '',
value2: '', value2: '',
value3: '', value3: '',
...@@ -392,10 +411,11 @@ ...@@ -392,10 +411,11 @@
<el-select v-model="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in cities"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
<span>label: {{ item.label }}, value: {{ item.value }}</span> <span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
...@@ -403,10 +423,11 @@ ...@@ -403,10 +423,11 @@
<template> <template>
<el-select v-model="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in cities"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
<span>label: {{ item.label }}, value: {{ item.value }}</span> <span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
...@@ -415,21 +436,24 @@ ...@@ -415,21 +436,24 @@
export default { export default {
data() { data() {
return { return {
options: [{ cities: [{
value: '选项1', value: 'Beijing',
label: '标签1' label: '北京'
}, { }, {
value: '选项2', value: 'Shanghai',
label: '标签2' label: '上海'
}, { }, {
value: '选项3', value: 'Nanjing',
label: '标签3' label: '南京'
}, { }, {
value: '选项4', value: 'Chengdu',
label: '标签4' label: '成都'
}, { }, {
value: '选项5', value: 'Shenzhen',
label: '标签5' label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}], }],
value6: '' value6: ''
} }
...@@ -755,7 +779,11 @@ ...@@ -755,7 +779,11 @@
| remote | 是否为远程搜索 | boolean | | false | | remote | 是否为远程搜索 | boolean | | false |
| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | | | remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | |
| loading | 是否正在从远程获取数据 | boolean | | false | | loading | 是否正在从远程获取数据 | boolean | | false |
| change | value 发生变化时的回调函数，参数为 value 的值 | function | | |
### el-select 事件
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| change | value 发生变化| `value` |
### el-option-group ### el-option-group
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/tabs.md
View file @ 519a64b6
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
title: '选项卡四', title: '选项卡四',
content: '选项卡四内容' content: '选项卡四内容'
}], }],
activeKey: '3', activeName: '3',
activeKey2: '' activeName2: ''
} }
} }
} }
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
## 基础使用 ## 基础使用
<div> <div>
<el-tabs :active-key="activeKey"> <el-tabs :active-name="activeName">
<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-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</div> </div>
```html ```html
<el-tabs :active-key="activeKey"> <el-tabs :active-name="activeName">
<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-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane> <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
{{activeKey2}} {{activeName2}}
```html ```html
<el-tabs type="card" :closable="true"> <el-tabs type="card" :closable="true">
...@@ -113,8 +113,8 @@ ...@@ -113,8 +113,8 @@
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card, border-card | | | type | 风格类型 | string | card, border-card | |
| closable | 真实值 | boolean | true, false | false | | closable | 真实值 | boolean | true, false | false |
| defaultActiveKey | 如果没有设置 activeKey, 则使用该值 | string | | 第一个面板 | | defaultActiveName | 如果没有设置 activeName, 则使用该值 | string | | 第一个面板 |
| activeKey | 当前选中面板的key | string | | | | activeName | 当前选中面板的 name | string | | |
| tab.click | tab 被点击的回调 | string | | | | tab.click | tab 被点击的回调 | string | | |
| tab.remove | tab 被删除的回调 | string | | | | tab.remove | tab 被删除的回调 | string | | |
...@@ -122,4 +122,4 @@ ...@@ -122,4 +122,4 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | | | | label | 选项卡标题 | string | | |
| key | 与选项卡activeKey对应的标识符 | string | | 该选项卡在选项卡中的index值，如第一个选项卡则为'1' | | name | 与选项卡 activeName 对应的标识符 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
examples/nav.config.json
View file @ 519a64b6
...@@ -81,6 +81,12 @@ ...@@ -81,6 +81,12 @@
"title": "notification 通知", "title": "notification 通知",
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息" "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
}, },
{
"path": "/message",
"name": "消息提示 (message)",
"title": "message 消息提示",
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
},
{ {
"path": "/loading", "path": "/loading",
"name": "加载 (loading)", "name": "加载 (loading)",
......
packages/checkbox/src/checkbox-group.vue
View file @ 519a64b6
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value);
this.dispatch('form-item', 'el.form.change', value); this.dispatch('form-item', 'el.form.change', value);
} }
} }
......
packages/checkbox/src/checkbox.vue
View file @ 519a64b6
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<span class="el-checkbox__input"> <span class="el-checkbox__input">
<span class="el-checkbox__inner" <span class="el-checkbox__inner"
:class="{ :class="{
'is-disabled': isLimit || disabled, 'is-disabled': disabled,
'is-checked': checked, 'is-checked': checked,
'is-indeterminate': indeterminate, 'is-indeterminate': indeterminate,
'is-focus': focus 'is-focus': focus
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
type="checkbox" type="checkbox"
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
:disabled="isLimit || disabled" :disabled="disabled"
ref="checkbox"> ref="checkbox">
<input <input
v-else v-else
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
type="checkbox" type="checkbox"
:disabled="isLimit || disabled"> :disabled="disabled">
</span> </span>
<span class="el-checkbox__label"> <span class="el-checkbox__label">
<slot></slot> <slot></slot>
...@@ -38,20 +38,7 @@ ...@@ -38,20 +38,7 @@
</template> </template>
<script> <script>
import Emitter from 'main/mixins/emitter'; import Emitter from 'main/mixins/emitter';
/**
* checkbox
* @module components/basic/checkbox
* @desc 多选按钮
* @param {string[]} value - 绑定值
* @param {string} value - 真实值
* @param {string} [label] - 显示值
* @param {boolean} [disabled=false] - 是否禁用
*
* @example
* <el-checkbox :value.sync="data" value="Jack"></el-checkbox>
* <el-checkbox :value.sync="data" value="John"></el-checkbox>
* <el-checkbox :value.sync="data" value="Mike" disabled></el-checkbox>
*/
export default { export default {
name: 'ElCheckbox', name: 'ElCheckbox',
...@@ -64,12 +51,8 @@ ...@@ -64,12 +51,8 @@
}, },
indeterminate: Boolean, indeterminate: Boolean,
disabled: Boolean, disabled: Boolean,
trueLabel: { trueLabel: [String, Number],
default: '' falseLabel: [String, Number]
},
falseLabel: {
default: ''
}
}, },
computed: { computed: {
...@@ -92,7 +75,7 @@ ...@@ -92,7 +75,7 @@
return this._value; return this._value;
} else if (type === '[object Array]') { } else if (type === '[object Array]') {
return this._value.indexOf(this.label) > -1; return this._value.indexOf(this.label) > -1;
} else if (type === '[object String]') { } else if (type === '[object String]' || type === '[object Number]') {
return this._value === this.trueLabel; return this._value === this.trueLabel;
} }
} }
...@@ -100,26 +83,14 @@ ...@@ -100,26 +83,14 @@
data() { data() {
return { return {
isLimit: false,
focus: false focus: false
}; };
}, },
watch: { watch: {
checked(sure) { checked(sure) {
this.$emit('on-change', sure); this.$emit('change', sure);
this.dispatch('element.checkbox', sure);
} }
},
created() {
this.$on('element.checkbox.disabled', () => {
if (this.checked) return;
this.isLimit = true;
});
this.$on('element.checkbox.enabled', () => {
this.isLimit = false;
});
} }
}; };
</script> </script>
packages/dialog/package.json
View file @ 519a64b6
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"vue-popup": "^0.2.1" "vue-popup": "^0.2.2"
} }
} }
packages/message-box/package.json
View file @ 519a64b6
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-popup": "^0.2.1" "vue-popup": "^0.2.2"
} }
} }
packages/message/cooking.conf.js 0 → 100644
View file @ 519a64b6
var cooking = require('cooking');
var path = require('path');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMessage',
extractCSS: 'style.css',
extends: ['vue', 'saladcss']
});
cooking.add('resolve.alias', {
'main': path.join(__dirname, '../../src'),
'packages': path.join(__dirname, '../../packages')
});
cooking.add('externals', {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
});
module.exports = cooking.resolve();
packages/message/index.js 0 → 100644
View file @ 519a64b6
import Message from './src/main.js';
module.exports = Message;
packages/message/package.json 0 → 100644
View file @ 519a64b6
{
"name": "el-message",
"version": "0.0.0",
"description": "A message component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/element-component/element/tree/master/packages/message",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
packages/message/src/main.js 0 → 100644
View file @ 519a64b6
import Vue from 'vue';
let MessageConstructor = Vue.extend(require('./main.vue'));
let instance;
let instances = [];
let seed = 1;
var Message = function(options) {
options = options || {};
let userOnClose = options.onClose;
let id = 'message_' + seed++;
options.onClose = function() {
Message.close(id, userOnClose);
};
instance = new MessageConstructor({
data: options
});
instance.id = id;
instance.vm = instance.$mount();
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
let topDist = 0;
for (let i = 0, len = instances.length; i < len; i++) {
topDist += instances[i].$el.offsetHeight + 20;
}
topDist += 20;
instance.top = topDist;
instances.push(instance);
};
Message.close = function(id, userOnClose) {
let index;
let removedHeight;
for (var i = 0, len = instances.length; i < len; i++) {
if (id === instances[i].id) {
if (typeof userOnClose === 'function') {
userOnClose(instances[i]);
}
index = i;
removedHeight = instances[i].dom.offsetHeight;
instances.splice(i, 1);
break;
}
}
if (len > 1) {
for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
}
}
};
export default Message;
packages/message/src/main.vue 0 → 100644
View file @ 519a64b6
<template>
<transition name="el-message-fade">
<div class="el-message" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer" @mouseleave="startTimer">
<i class="el-message__icon" :class="[ typeClass ]"></i>
<div class="el-message__group">
<p>{{ message }}</p>
<div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="handleClose"></div>
</div>
</div>
</transition>
</template>
<script type="text/babel">
let typeMap = {
success: 'circle-check',
info: 'information',
warning: 'warning',
error: 'circle-cross'
};
export default {
data() {
return {
visible: false,
message: '',
duration: 3000,
type: 'info',
onClose: null,
showClose: false,
closed: false,
top: null,
timer: null
};
},
computed: {
typeClass() {
return `el-icon-${ typeMap[this.type] }`;
}
},
watch: {
closed(newVal) {
if (newVal) {
this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
}
}
},
methods: {
handleClose() {
this.closed = true;
if (typeof this.onClose === 'function') {
this.onClose();
}
},
clearTimer() {
clearTimeout(this.timer);
},
startTimer() {
if (this.duration > 0) {
this.timer = setTimeout(() => {
if (!this.closed) {
this.handleClose();
}
}, this.duration);
}
}
},
mounted() {
this.startTimer();
}
};
</script>
\ No newline at end of file
packages/pagination/src/pager.vue
View file @ 519a64b6
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
} }
if (newPage !== currentPage) { if (newPage !== currentPage) {
this.$emit('currentChange', newPage); this.$emit('currentchange', newPage);
} }
} }
}, },
......
packages/pagination/src/pagination.js
View file @ 519a64b6
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
const TEMPLATE_MAP = { const TEMPLATE_MAP = {
prev: <prev></prev>, prev: <prev></prev>,
jumper: <jumper></jumper>, jumper: <jumper></jumper>,
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-currentChange={ this.handleCurrentChange }></pager>, pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-currentchange={ this.handleCurrentChange }></pager>,
next: <next></next>, next: <next></next>,
sizes: <sizes></sizes>, sizes: <sizes></sizes>,
slot: <slot></slot>, slot: <slot></slot>,
...@@ -114,6 +114,12 @@ export default { ...@@ -114,6 +114,12 @@ export default {
}, },
Sizes: { Sizes: {
created() {
if (Array.isArray(this.$parent.pageSizes)) {
this.$parent.internalPageSize = this.$parent.pageSizes[0];
}
},
render(h) { render(h) {
return ( return (
<span class="el-pagination__sizes"> <span class="el-pagination__sizes">
...@@ -144,7 +150,7 @@ export default { ...@@ -144,7 +150,7 @@ export default {
handleChange(val) { handleChange(val) {
if (val !== this.$parent.internalPageSize) { if (val !== this.$parent.internalPageSize) {
this.$parent.internalPageSize = val = parseInt(val, 10); this.$parent.internalPageSize = val = parseInt(val, 10);
this.$parent.$emit('size-change', val); this.$parent.$emit('sizechange', val);
} }
} }
} }
...@@ -167,7 +173,7 @@ export default { ...@@ -167,7 +173,7 @@ export default {
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value); this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
if (target.value !== this.oldValue && Number(target.value) === this.$parent.internalCurrentPage) { if (target.value !== this.oldValue && Number(target.value) === this.$parent.internalCurrentPage) {
this.$parent.$emit('current-change', this.$parent.internalCurrentPage); this.$parent.$emit('currentchange', this.$parent.internalCurrentPage);
} }
this.oldValue = null; this.oldValue = null;
...@@ -209,7 +215,7 @@ export default { ...@@ -209,7 +215,7 @@ export default {
methods: { methods: {
handleCurrentChange(val) { handleCurrentChange(val) {
this.internalCurrentPage = this.getValidCurrentPage(val); this.internalCurrentPage = this.getValidCurrentPage(val);
this.$emit('current-change', this.internalCurrentPage); this.$emit('currentchange', this.internalCurrentPage);
}, },
prev() { prev() {
...@@ -218,7 +224,7 @@ export default { ...@@ -218,7 +224,7 @@ export default {
this.internalCurrentPage = this.getValidCurrentPage(newVal); this.internalCurrentPage = this.getValidCurrentPage(newVal);
if (this.internalCurrentPage !== oldPage) { if (this.internalCurrentPage !== oldPage) {
this.$emit('current-change', this.internalCurrentPage); this.$emit('currentchange', this.internalCurrentPage);
} }
}, },
...@@ -228,7 +234,7 @@ export default { ...@@ -228,7 +234,7 @@ export default {
this.internalCurrentPage = this.getValidCurrentPage(newVal); this.internalCurrentPage = this.getValidCurrentPage(newVal);
if (this.internalCurrentPage !== oldPage) { if (this.internalCurrentPage !== oldPage) {
this.$emit('current-change', this.internalCurrentPage); this.$emit('currentchange', this.internalCurrentPage);
} }
}, },
...@@ -238,7 +244,7 @@ export default { ...@@ -238,7 +244,7 @@ export default {
this.internalCurrentPage = this.getValidCurrentPage(newVal); this.internalCurrentPage = this.getValidCurrentPage(newVal);
if (this.internalCurrentPage !== oldPage) { if (this.internalCurrentPage !== oldPage) {
this.$emit('current-change', this.internalCurrentPage); this.$emit('currentchange', this.internalCurrentPage);
} }
}, },
...@@ -248,7 +254,7 @@ export default { ...@@ -248,7 +254,7 @@ export default {
this.internalCurrentPage = this.getValidCurrentPage(newVal); this.internalCurrentPage = this.getValidCurrentPage(newVal);
if (this.internalCurrentPage !== oldPage) { if (this.internalCurrentPage !== oldPage) {
this.$emit('current-change', this.internalCurrentPage); this.$emit('currentchange', this.internalCurrentPage);
} }
}, },
......
packages/radio/src/radio-button.vue
View file @ 519a64b6
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
return this.$parent.value; return this.$parent.value;
}, },
set(newValue) { set(newValue) {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
}, },
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
:disabled="disabled"> :disabled="disabled">
<span class="el-radio-button__inner"> <span class="el-radio-button__inner">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>
packages/radio/src/radio-group.vue
View file @ 519a64b6
...@@ -4,18 +4,17 @@ ...@@ -4,18 +4,17 @@
export default { export default {
name: 'ElRadioGroup', name: 'ElRadioGroup',
componentName: 'radio-group',
mixins: [emitter], mixins: [emitter],
props: { props: {
value: { value: [String, Number],
default: '',
twoWay: true,
required: true
},
size: String size: String
}, },
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value);
this.dispatch('form-item', 'el.form.change', [this.value]); this.dispatch('form-item', 'el.form.change', [this.value]);
} }
} }
......
packages/radio/src/radio.vue
View file @ 519a64b6
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</span> </span>
<span class="el-radio__label"> <span class="el-radio__label">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>
...@@ -28,9 +28,7 @@ ...@@ -28,9 +28,7 @@
name: 'ElRadio', name: 'ElRadio',
props: { props: {
value: { value: [String, Number],
twoWay: true
},
label: { label: {
type: [String, Number], type: [String, Number],
required: true required: true
...@@ -43,11 +41,6 @@ ...@@ -43,11 +41,6 @@
focus: false focus: false
}; };
}, },
watch: {
value(value) {
this.$emit('onchange', value);
}
},
computed: { computed: {
_value: { _value: {
get() { get() {
...@@ -55,9 +48,9 @@ ...@@ -55,9 +48,9 @@
}, },
set(newValue) { set(newValue) {
if (this.value !== undefined) { if (this.value !== undefined) {
this.value = newValue; this.$emit('input', newValue);
} else { } else {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
} }
......
packages/select/src/select.vue
View file @ 519a64b6
...@@ -281,6 +281,7 @@ ...@@ -281,6 +281,7 @@
visible(val) { visible(val) {
if (!val) { if (!val) {
this.$refs.reference.$el.querySelector('input').blur();
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse'); this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
this.broadcast('select-dropdown', 'destroyPopper'); this.broadcast('select-dropdown', 'destroyPopper');
if (this.$refs.input) { if (this.$refs.input) {
...@@ -423,6 +424,9 @@ ...@@ -423,6 +424,9 @@
}, },
toggleMenu() { toggleMenu() {
if (this.filterable && this.query === '' && this.visible) {
return;
}
if (!this.disabled) { if (!this.disabled) {
this.visible = !this.visible; this.visible = !this.visible;
if (this.remote && this.visible) { if (this.remote && this.visible) {
...@@ -472,7 +476,9 @@ ...@@ -472,7 +476,9 @@
}, },
selectOption() { selectOption() {
this.handleOptionSelect(this.options[this.hoverIndex]); if (this.options[this.hoverIndex]) {
this.handleOptionSelect(this.options[this.hoverIndex]);
}
}, },
deleteSelected(event) { deleteSelected(event) {
......
packages/tabs/src/tab-pane.vue
View file @ 519a64b6
...@@ -7,9 +7,7 @@ ...@@ -7,9 +7,7 @@
type: String, type: String,
required: true required: true
}, },
key: { name: String
type: String
}
}, },
data() { data() {
...@@ -18,7 +16,8 @@ ...@@ -18,7 +16,8 @@
transition: '', transition: '',
paneStyle: { paneStyle: {
position: 'relative' position: 'relative'
} },
key: ''
}; };
}, },
...@@ -28,17 +27,20 @@ ...@@ -28,17 +27,20 @@
} }
}, },
events: {
},
computed: { computed: {
show() { show() {
return this.$parent.activeKey === this.key; return this.$parent.currentName === this.key;
} }
}, },
watch: { watch: {
'$parent.activeKey'(newValue, oldValue) { name: {
immediate: true,
handler(val) {
this.key = val;
}
},
'$parent.currentName'(newValue, oldValue) {
if (this.key === newValue) { if (this.key === newValue) {
this.transition = newValue > oldValue ? 'slideInRight' : 'slideInLeft'; this.transition = newValue > oldValue ? 'slideInRight' : 'slideInLeft';
} }
......
packages/tabs/src/tab.vue
View file @ 519a64b6
...@@ -8,20 +8,23 @@ ...@@ -8,20 +8,23 @@
required: true required: true
}, },
closable: Boolean closable: Boolean
},
data() {
return {
showClose: false
};
} }
}; };
</script> </script>
<template> <template>
<div class="el-tabs__item" <div
:class="{ class="el-tabs__item"
'is-active': $parent.activeKey === tab.key, :class="{
'is-disabled': tab.disabled, 'is-active': $parent.currentName === tab.key,
'is-closable': closable 'is-disabled': tab.disabled,
}">{{tab.label}}<span class="el-icon-close" v-if="closable" @click="$emit('onremove', tab, $event)"></span></div> 'is-closable': closable
}">
{{tab.label}}
<span
class="el-icon-close"
v-if="closable"
@click="$emit('onremove', tab, $event)">
</span>
</div>
</template> </template>
packages/tabs/src/tabs.vue
View file @ 519a64b6
...@@ -11,12 +11,8 @@ ...@@ -11,12 +11,8 @@
props: { props: {
type: String, type: String,
tabPosition: String, tabPosition: String,
defaultActiveKey: { defaultActiveName: String,
type: String activeName: String,
},
activeKey: {
type: String
},
closable: false, closable: false,
tabWidth: 0 tabWidth: 0
}, },
...@@ -25,34 +21,22 @@ ...@@ -25,34 +21,22 @@
return { return {
tabs: [], tabs: [],
children: null, children: null,
activeTab: null activeTab: null,
currentName: 0,
barStyle: ''
}; };
}, },
computed: { watch: {
barStyle: { activeName: {
cache: false, immediate: true,
get() { handler(val) {
if (this.type) return {}; this.currentName = val || 0;
var style = {};
var offset = 0;
var tabWidth = 0;
this.tabs.every((tab, index) => {
let $el = this.$refs.tabs[index].$el;
if (tab.key !== this.activeKey) {
offset += $el.clientWidth;
return true;
} else {
tabWidth = $el.clientWidth;
return false;
}
});
style.width = tabWidth + 'px';
style.transform = `translateX(${offset}px)`;
return style;
} }
},
'currentName'() {
this.calcBarStyle();
} }
}, },
...@@ -67,27 +51,49 @@ ...@@ -67,27 +51,49 @@
this.tabs.splice(index, 1); this.tabs.splice(index, 1);
} }
if (tab.key === this.activeKey) { if (tab.key === this.currentName) {
let deleteIndex = this.$children.indexOf(tab); let deleteIndex = this.$children.indexOf(tab);
let nextChild = this.$children[deleteIndex + 1]; let nextChild = this.$children[deleteIndex + 1];
let prevChild = this.$children[deleteIndex - 1]; let prevChild = this.$children[deleteIndex - 1];
this.activeKey = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1'; this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
} }
this.$emit('tab.remove', tab); this.$emit('tab.remove', tab);
}, },
handleTabClick(tab) { handleTabClick(tab) {
this.activeKey = tab.key; this.currentName = tab.key;
this.$emit('tab.click', tab); this.$emit('tab.click', tab);
},
calcBarStyle() {
if (this.type) return {};
var style = {};
var offset = 0;
var tabWidth = 0;
this.tabs.every((tab, index) => {
let $el = this.$refs.tabs[index].$el;
if (tab.key !== this.currentName) {
offset += $el.clientWidth;
return true;
} else {
tabWidth = $el.clientWidth;
return false;
}
});
style.width = tabWidth + 'px';
style.transform = `translateX(${offset}px)`;
this.barStyle = style;
} }
}, },
ready() {
if (!this.activeKey) { mounted() {
this.activeKey = this.defaultActiveKey || this.$children[0].key; if (!this.currentName) {
this.currentName = this.defaultActiveName || this.$children[0].key;
} }
this.$children.forEach(tab => { this.$children.forEach(tab => this.tabs.push(tab));
this.tabs.push(tab); this.$nextTick(() => this.calcBarStyle());
});
} }
}; };
</script> </script>
...@@ -97,13 +103,17 @@ ...@@ -97,13 +103,17 @@
<div class="el-tabs__header"> <div class="el-tabs__header">
<el-tab <el-tab
v-for="tab in tabs" v-for="tab in tabs"
v-ref:tabs ref="tabs"
:tab="tab" :tab="tab"
:closable="closable" :closable="closable"
@onremove="removeTab" @onremove="removeTab"
@click="handleTabClick(tab)" @click.native="handleTabClick(tab)">
></el-tab> </el-tab>
<div class="el-tabs__active-bar" v-bind:style="barStyle" v-if="!this.type && tabs.length > 0"></div> <div
class="el-tabs__active-bar"
:style="barStyle"
v-if="!this.type && tabs.length > 0">
</div>
</div> </div>
<div class="el-tabs__content"> <div class="el-tabs__content">
......
packages/theme-default/src/index.css
View file @ 519a64b6
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
@import "./popover.css"; @import "./popover.css";
@import "./tooltip.css"; @import "./tooltip.css";
@import "./autocomplete.css"; @import "./autocomplete.css";
@import "./message.css";
@import "./message-box.css"; @import "./message-box.css";
@import "./date-picker.css"; @import "./date-picker.css";
@import "./time-picker.css"; @import "./time-picker.css";
......
packages/theme-default/src/message.css 0 → 100644
View file @ 519a64b6
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b message {
box-shadow:0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
width: 300px;
padding: 10px 12px;
box-sizing: border-box;
border-radius: 2px;
position: fixed;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
transition: opacity 0.3s, top 0.4s;
overflow: hidden;
z-index: 1000;
@e group {
margin-left: 28px;
position: relative;
& p {
font-size: 14px;
line-height: 20px;
margin: 0 20px 0 0;
color: #8492a6;
text-align: justify;
}
}
@e icon {
size: 20px;
font-size: 20px;
float: left;
position: relative;
}
@e closeBtn {
position: absolute 3px 0 * *;
cursor: pointer;
color: #C0CCDA;
font-size: 14px;
&:hover {
color: #99A9BF;
}
}
& .el-icon-circle-check {
color: #13ce66;
}
& .el-icon-circle-cross {
color: #ff4949;
}
& .el-icon-information {
color: #50bfff;
}
& .el-icon-warning {
color: #f7ba2a;
}
}
.el-message-fade-enter,
.el-message-fade-leave-active {
opacity: 0;
}
}
packages/tree/src/tree-node.vue
View file @ 519a64b6
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<span class="el-tree-node__expand-icon" <span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }" :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span> ></span>
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox> <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @change="handleCheckChange"></el-checkbox>
<!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>--> <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
<span class="el-tree-node__label">{{ node.label }}</span> <span class="el-tree-node__label">{{ node.label }}</span>
</div> </div>
......
src/index.js
View file @ 519a64b6
import Group from '../packages/group/index.js';
import SelectDropdown from '../packages/select-dropdown/index.js'; import SelectDropdown from '../packages/select-dropdown/index.js';
import Pagination from '../packages/pagination/index.js'; import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js'; import Dialog from '../packages/dialog/index.js';
...@@ -48,11 +47,11 @@ import Col from '../packages/col/index.js'; ...@@ -48,11 +47,11 @@ import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js'; import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js'; import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js'; import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return; if (install.installed) return;
Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown); Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination); Vue.component(Pagination.name, Pagination);
Vue.component(Dialog.name, Dialog); Vue.component(Dialog.name, Dialog);
...@@ -99,6 +98,7 @@ const install = function(Vue) { ...@@ -99,6 +98,7 @@ const install = function(Vue) {
Vue.component(Upload.name, Upload); Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress); Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message);
Vue.use(Loading); Vue.use(Loading);
...@@ -107,6 +107,7 @@ const install = function(Vue) { ...@@ -107,6 +107,7 @@ const install = function(Vue) {
Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification; Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
}; };
// auto install // auto install
...@@ -116,7 +117,6 @@ if (typeof window !== 'undefined' && window.Vue) { ...@@ -116,7 +117,6 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = { module.exports = {
install, install,
Group,
SelectDropdown, SelectDropdown,
Pagination, Pagination,
Dialog, Dialog,
...@@ -165,5 +165,6 @@ module.exports = { ...@@ -165,5 +165,6 @@ module.exports = {
Col, Col,
Upload, Upload,
Progress, Progress,
Spinner Spinner,
Message
}; };
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