mirror of https://github.com/ElemeFE/element
Fix conflict
qingwei.li
commit
519a64b667
|
|
@ -21,6 +21,7 @@ const install = function(Vue) {
|
|||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
};
|
||||
|
||||
// auto install
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
{
|
||||
"group": [
|
||||
"./packages/group/index.js"
|
||||
],
|
||||
"select-dropdown": [
|
||||
"./packages/select-dropdown/index.js"
|
||||
],
|
||||
|
|
@ -148,5 +145,8 @@
|
|||
],
|
||||
"spinner": [
|
||||
"./packages/spinner/index.js"
|
||||
],
|
||||
"message": [
|
||||
"./packages/message/index.js"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,22 +41,26 @@
|
|||
### 多个勾选框，绑定到同一个数组
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<p>{{ checkList }}</p>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -101,10 +105,21 @@ vm.name === vm.a
|
|||
vm.name === vm.b
|
||||
```
|
||||
|
||||
## API
|
||||
## checkbox API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model | 绑定值 | string\|string[]\|boolean | | |
|
||||
| value | 真实值 | string | | |
|
||||
| label | 显示值，不填则显示 value | string | | |
|
||||
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||
| label | 真实值 | string | | |
|
||||
| true-label | 选中时的真实值 | string | | |
|
||||
| true-label | 没有选中时的真实值 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
||||
## checkbox group API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||
|
||||
## checkbox group 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | (value: string) |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
<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 | | |
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
layout="sizes, prev, pager, next, jumper, total"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
|
|
@ -85,6 +85,10 @@
|
|||
| current-page | 当前页数 | Number | | 0|
|
||||
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' |
|
||||
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] |
|
||||
| size-change | pageSize 改变时会触发的事件 | Function | | |
|
||||
| current-change | currentPage 改变时会触发的事件 | Function | | |
|
||||
|
||||
## 事件
|
||||
| 事件名称 | 说明 | 回调函数 |
|
||||
|---------|--------|---------|
|
||||
| sizechange | pageSize 改变时会触发 | `size` |
|
||||
| currentchange | currentPage 改变时会触发 | `currentPage` |
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
## Radio Group
|
||||
|
||||
<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="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
|
||||
```html
|
||||
<el-radio-group :value.sync="radio2">
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="9"></el-radio>
|
||||
<el-radio :label="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
## Radio Group Button
|
||||
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
<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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -85,19 +85,19 @@
|
|||
</div>
|
||||
|
||||
```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="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</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="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</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="广州" :disabled="true"></el-radio-button>
|
||||
|
|
@ -108,31 +108,32 @@
|
|||
## 禁用
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
|
||||
```
|
||||
|
||||
|
||||
## Radio API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| label | 真实值 | string | | |
|
||||
| value | 绑定值 | string,number | | |
|
||||
| label | 真实值 | string,number | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
||||
## Radio Group API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| value | 绑定值 | string,number | | |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
| change | 绑定值变化时触发的事件 | Function(value) | | |
|
||||
|
||||
## Radio Button API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 真实值 | string | | |
|
||||
| label | 真实值 | string,number | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
|
|
|||
|
|
@ -4,36 +4,36 @@
|
|||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
options2: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2',
|
||||
label: '双皮奶',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
options3: [{
|
||||
label: '分组1',
|
||||
|
|
@ -59,39 +59,58 @@
|
|||
}],
|
||||
options4: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
label: '北京烤鸭'
|
||||
}, {
|
||||
value: '选项6',
|
||||
label: '标签6'
|
||||
label: '炸酱面'
|
||||
}, {
|
||||
value: '选项7',
|
||||
label: '标签7'
|
||||
label: '羊蝎子'
|
||||
}, {
|
||||
value: '选项8',
|
||||
label: '标签8'
|
||||
label: '肉夹馍'
|
||||
}, {
|
||||
value: '选项9',
|
||||
label: '标签9'
|
||||
label: '回锅肉'
|
||||
}, {
|
||||
value: '选项10',
|
||||
label: '标签10'
|
||||
label: '小笼包'
|
||||
}, {
|
||||
value: '选项11',
|
||||
label: '标签11'
|
||||
label: '红烧肉'
|
||||
}],
|
||||
options5: [],
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
|
|
@ -392,10 +411,11 @@
|
|||
|
||||
<el-select v-model="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in cities"
|
||||
:label="item.label"
|
||||
: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-select>
|
||||
|
||||
|
|
@ -403,10 +423,11 @@
|
|||
<template>
|
||||
<el-select v-model="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
v-for="item in cities"
|
||||
:label="item.label"
|
||||
: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-select>
|
||||
</template>
|
||||
|
|
@ -415,21 +436,24 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
|
|
@ -755,7 +779,11 @@
|
|||
| remote | 是否为远程搜索 | boolean | | false |
|
||||
| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | |
|
||||
| loading | 是否正在从远程获取数据 | boolean | | false |
|
||||
| change | value 发生变化时的回调函数，参数为 value 的值 | function | | |
|
||||
|
||||
### el-select 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | value 发生变化| `value` |
|
||||
|
||||
### el-option-group
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
title: '选项卡四',
|
||||
content: '选项卡四内容'
|
||||
}],
|
||||
activeKey: '3',
|
||||
activeKey2: ''
|
||||
activeName: '3',
|
||||
activeName2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
## 基础使用
|
||||
|
||||
<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>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
|
||||
```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>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
{{activeKey2}}
|
||||
{{activeName2}}
|
||||
|
||||
```html
|
||||
<el-tabs type="card" :closable="true">
|
||||
|
|
@ -113,8 +113,8 @@
|
|||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 风格类型 | string | card, border-card | |
|
||||
| closable | 真实值 | boolean | true, false | false |
|
||||
| defaultActiveKey | 如果没有设置 activeKey, 则使用该值 | string | | 第一个面板 |
|
||||
| activeKey | 当前选中面板的key | string | | |
|
||||
| defaultActiveName | 如果没有设置 activeName, 则使用该值 | string | | 第一个面板 |
|
||||
| activeName | 当前选中面板的 name | string | | |
|
||||
| tab.click | tab 被点击的回调 | string | | |
|
||||
| tab.remove | tab 被删除的回调 | string | | |
|
||||
|
||||
|
|
@ -122,4 +122,4 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | | |
|
||||
| key | 与选项卡activeKey对应的标识符 | string | | 该选项卡在选项卡中的index值，如第一个选项卡则为'1' |
|
||||
| name | 与选项卡 activeName 对应的标识符 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
|
||||
|
|
|
|||
|
|
@ -81,6 +81,12 @@
|
|||
"title": "notification 通知",
|
||||
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"name": "消息提示 (message)",
|
||||
"title": "message 消息提示",
|
||||
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"name": "加载 (loading)",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
"vue-loader": "^9.3.2",
|
||||
"vue": "^2.0.0-rc.1",
|
||||
"vue-markdown-loader": "^0.4.0",
|
||||
"vue-popup": "^0.2.1",
|
||||
"vue-popup": "^0.2.2",
|
||||
"vue-router": "^2.0.0-beta.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('change', value);
|
||||
this.dispatch('form-item', 'el.form.change', value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<span class="el-checkbox__input">
|
||||
<span class="el-checkbox__inner"
|
||||
:class="{
|
||||
'is-disabled': isLimit || disabled,
|
||||
'is-disabled': disabled,
|
||||
'is-checked': checked,
|
||||
'is-indeterminate': indeterminate,
|
||||
'is-focus': focus
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
type="checkbox"
|
||||
@focus="focus = true"
|
||||
@blur="focus = false"
|
||||
:disabled="isLimit || disabled"
|
||||
:disabled="disabled"
|
||||
ref="checkbox">
|
||||
<input
|
||||
v-else
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
@focus="focus = true"
|
||||
@blur="focus = false"
|
||||
type="checkbox"
|
||||
:disabled="isLimit || disabled">
|
||||
:disabled="disabled">
|
||||
</span>
|
||||
<span class="el-checkbox__label">
|
||||
<slot></slot>
|
||||
|
|
@ -38,20 +38,7 @@
|
|||
</template>
|
||||
<script>
|
||||
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 {
|
||||
name: 'ElCheckbox',
|
||||
|
||||
|
|
@ -64,12 +51,8 @@
|
|||
},
|
||||
indeterminate: Boolean,
|
||||
disabled: Boolean,
|
||||
trueLabel: {
|
||||
default: ''
|
||||
},
|
||||
falseLabel: {
|
||||
default: ''
|
||||
}
|
||||
trueLabel: [String, Number],
|
||||
falseLabel: [String, Number]
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -92,7 +75,7 @@
|
|||
return this._value;
|
||||
} else if (type === '[object Array]') {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -100,26 +83,14 @@
|
|||
|
||||
data() {
|
||||
return {
|
||||
isLimit: false,
|
||||
focus: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
checked(sure) {
|
||||
this.$emit('on-change', sure);
|
||||
this.dispatch('element.checkbox', sure);
|
||||
this.$emit('change', sure);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('element.checkbox.disabled', () => {
|
||||
if (this.checked) return;
|
||||
this.isLimit = true;
|
||||
});
|
||||
this.$on('element.checkbox.enabled', () => {
|
||||
this.isLimit = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"vue-popup": "^0.2.1"
|
||||
"vue-popup": "^0.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-popup": "^0.2.1"
|
||||
"vue-popup": "^0.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
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();
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Message from './src/main.js';
|
||||
|
||||
module.exports = Message;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"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": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<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>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
if (newPage !== currentPage) {
|
||||
this.$emit('currentChange', newPage);
|
||||
this.$emit('currentchange', newPage);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
const TEMPLATE_MAP = {
|
||||
prev: <prev></prev>,
|
||||
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>,
|
||||
sizes: <sizes></sizes>,
|
||||
slot: <slot></slot>,
|
||||
|
|
@ -114,6 +114,12 @@ export default {
|
|||
},
|
||||
|
||||
Sizes: {
|
||||
created() {
|
||||
if (Array.isArray(this.$parent.pageSizes)) {
|
||||
this.$parent.internalPageSize = this.$parent.pageSizes[0];
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<span class="el-pagination__sizes">
|
||||
|
|
@ -144,7 +150,7 @@ export default {
|
|||
handleChange(val) {
|
||||
if (val !== this.$parent.internalPageSize) {
|
||||
this.$parent.internalPageSize = val = parseInt(val, 10);
|
||||
this.$parent.$emit('size-change', val);
|
||||
this.$parent.$emit('sizechange', val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -167,7 +173,7 @@ export default {
|
|||
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
|
||||
|
||||
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;
|
||||
|
|
@ -209,7 +215,7 @@ export default {
|
|||
methods: {
|
||||
handleCurrentChange(val) {
|
||||
this.internalCurrentPage = this.getValidCurrentPage(val);
|
||||
this.$emit('current-change', this.internalCurrentPage);
|
||||
this.$emit('currentchange', this.internalCurrentPage);
|
||||
},
|
||||
|
||||
prev() {
|
||||
|
|
@ -218,7 +224,7 @@ export default {
|
|||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
|
||||
if (this.internalCurrentPage !== oldPage) {
|
||||
this.$emit('current-change', this.internalCurrentPage);
|
||||
this.$emit('currentchange', this.internalCurrentPage);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -228,7 +234,7 @@ export default {
|
|||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
|
||||
if (this.internalCurrentPage !== oldPage) {
|
||||
this.$emit('current-change', this.internalCurrentPage);
|
||||
this.$emit('currentchange', this.internalCurrentPage);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -238,7 +244,7 @@ export default {
|
|||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
|
||||
if (this.internalCurrentPage !== oldPage) {
|
||||
this.$emit('current-change', this.internalCurrentPage);
|
||||
this.$emit('currentchange', this.internalCurrentPage);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -248,7 +254,7 @@ export default {
|
|||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
|
||||
if (this.internalCurrentPage !== oldPage) {
|
||||
this.$emit('current-change', this.internalCurrentPage);
|
||||
this.$emit('currentchange', this.internalCurrentPage);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
return this.$parent.value;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$parent.value = newValue;
|
||||
this.$parent.$emit('input', newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
:disabled="disabled">
|
||||
<span class="el-radio-button__inner">
|
||||
<slot></slot>
|
||||
<template v-if="!_slotContents">{{label}}</template>
|
||||
<template v-if="!$slots.default">{{label}}</template>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,17 @@
|
|||
export default {
|
||||
name: 'ElRadioGroup',
|
||||
|
||||
componentName: 'radio-group',
|
||||
|
||||
mixins: [emitter],
|
||||
|
||||
props: {
|
||||
value: {
|
||||
default: '',
|
||||
twoWay: true,
|
||||
required: true
|
||||
},
|
||||
value: [String, Number],
|
||||
size: String
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('change', value);
|
||||
this.dispatch('form-item', 'el.form.change', [this.value]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</span>
|
||||
<span class="el-radio__label">
|
||||
<slot></slot>
|
||||
<template v-if="!_slotContents">{{label}}</template>
|
||||
<template v-if="!$slots.default">{{label}}</template>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
|
@ -28,9 +28,7 @@
|
|||
name: 'ElRadio',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
twoWay: true
|
||||
},
|
||||
value: [String, Number],
|
||||
label: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
|
|
@ -43,11 +41,6 @@
|
|||
focus: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('onchange', value);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
|
|
@ -55,9 +48,9 @@
|
|||
},
|
||||
set(newValue) {
|
||||
if (this.value !== undefined) {
|
||||
this.value = newValue;
|
||||
this.$emit('input', newValue);
|
||||
} else {
|
||||
this.$parent.value = newValue;
|
||||
this.$parent.$emit('input', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -281,6 +281,7 @@
|
|||
|
||||
visible(val) {
|
||||
if (!val) {
|
||||
this.$refs.reference.$el.querySelector('input').blur();
|
||||
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
|
||||
this.broadcast('select-dropdown', 'destroyPopper');
|
||||
if (this.$refs.input) {
|
||||
|
|
@ -423,6 +424,9 @@
|
|||
},
|
||||
|
||||
toggleMenu() {
|
||||
if (this.filterable && this.query === '' && this.visible) {
|
||||
return;
|
||||
}
|
||||
if (!this.disabled) {
|
||||
this.visible = !this.visible;
|
||||
if (this.remote && this.visible) {
|
||||
|
|
@ -472,7 +476,9 @@
|
|||
},
|
||||
|
||||
selectOption() {
|
||||
this.handleOptionSelect(this.options[this.hoverIndex]);
|
||||
if (this.options[this.hoverIndex]) {
|
||||
this.handleOptionSelect(this.options[this.hoverIndex]);
|
||||
}
|
||||
},
|
||||
|
||||
deleteSelected(event) {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@
|
|||
type: String,
|
||||
required: true
|
||||
},
|
||||
key: {
|
||||
type: String
|
||||
}
|
||||
name: String
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -18,7 +16,8 @@
|
|||
transition: '',
|
||||
paneStyle: {
|
||||
position: 'relative'
|
||||
}
|
||||
},
|
||||
key: ''
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -28,17 +27,20 @@
|
|||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
},
|
||||
|
||||
computed: {
|
||||
show() {
|
||||
return this.$parent.activeKey === this.key;
|
||||
return this.$parent.currentName === this.key;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$parent.activeKey'(newValue, oldValue) {
|
||||
name: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.key = val;
|
||||
}
|
||||
},
|
||||
'$parent.currentName'(newValue, oldValue) {
|
||||
if (this.key === newValue) {
|
||||
this.transition = newValue > oldValue ? 'slideInRight' : 'slideInLeft';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,20 +8,23 @@
|
|||
required: true
|
||||
},
|
||||
closable: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showClose: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="el-tabs__item"
|
||||
:class="{
|
||||
'is-active': $parent.activeKey === tab.key,
|
||||
'is-disabled': tab.disabled,
|
||||
'is-closable': closable
|
||||
}">{{tab.label}}<span class="el-icon-close" v-if="closable" @click="$emit('onremove', tab, $event)"></span></div>
|
||||
<div
|
||||
class="el-tabs__item"
|
||||
:class="{
|
||||
'is-active': $parent.currentName === tab.key,
|
||||
'is-disabled': tab.disabled,
|
||||
'is-closable': closable
|
||||
}">
|
||||
{{tab.label}}
|
||||
<span
|
||||
class="el-icon-close"
|
||||
v-if="closable"
|
||||
@click="$emit('onremove', tab, $event)">
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,8 @@
|
|||
props: {
|
||||
type: String,
|
||||
tabPosition: String,
|
||||
defaultActiveKey: {
|
||||
type: String
|
||||
},
|
||||
activeKey: {
|
||||
type: String
|
||||
},
|
||||
defaultActiveName: String,
|
||||
activeName: String,
|
||||
closable: false,
|
||||
tabWidth: 0
|
||||
},
|
||||
|
|
@ -25,34 +21,22 @@
|
|||
return {
|
||||
tabs: [],
|
||||
children: null,
|
||||
activeTab: null
|
||||
activeTab: null,
|
||||
currentName: 0,
|
||||
barStyle: ''
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
barStyle: {
|
||||
cache: false,
|
||||
get() {
|
||||
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.activeKey) {
|
||||
offset += $el.clientWidth;
|
||||
return true;
|
||||
} else {
|
||||
tabWidth = $el.clientWidth;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
style.width = tabWidth + 'px';
|
||||
style.transform = `translateX(${offset}px)`;
|
||||
return style;
|
||||
watch: {
|
||||
activeName: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.currentName = val || 0;
|
||||
}
|
||||
},
|
||||
|
||||
'currentName'() {
|
||||
this.calcBarStyle();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -67,27 +51,49 @@
|
|||
this.tabs.splice(index, 1);
|
||||
}
|
||||
|
||||
if (tab.key === this.activeKey) {
|
||||
if (tab.key === this.currentName) {
|
||||
let deleteIndex = this.$children.indexOf(tab);
|
||||
let nextChild = 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);
|
||||
},
|
||||
handleTabClick(tab) {
|
||||
this.activeKey = tab.key;
|
||||
this.currentName = tab.key;
|
||||
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) {
|
||||
this.activeKey = this.defaultActiveKey || this.$children[0].key;
|
||||
|
||||
mounted() {
|
||||
if (!this.currentName) {
|
||||
this.currentName = this.defaultActiveName || this.$children[0].key;
|
||||
}
|
||||
this.$children.forEach(tab => {
|
||||
this.tabs.push(tab);
|
||||
});
|
||||
this.$children.forEach(tab => this.tabs.push(tab));
|
||||
this.$nextTick(() => this.calcBarStyle());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -97,13 +103,17 @@
|
|||
<div class="el-tabs__header">
|
||||
<el-tab
|
||||
v-for="tab in tabs"
|
||||
v-ref:tabs
|
||||
ref="tabs"
|
||||
:tab="tab"
|
||||
:closable="closable"
|
||||
@onremove="removeTab"
|
||||
@click="handleTabClick(tab)"
|
||||
></el-tab>
|
||||
<div class="el-tabs__active-bar" v-bind:style="barStyle" v-if="!this.type && tabs.length > 0"></div>
|
||||
@click.native="handleTabClick(tab)">
|
||||
</el-tab>
|
||||
<div
|
||||
class="el-tabs__active-bar"
|
||||
:style="barStyle"
|
||||
v-if="!this.type && tabs.length > 0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="el-tabs__content">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import "./popover.css";
|
||||
@import "./tooltip.css";
|
||||
@import "./autocomplete.css";
|
||||
@import "./message.css";
|
||||
@import "./message-box.css";
|
||||
@import "./date-picker.css";
|
||||
@import "./time-picker.css";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<span class="el-tree-node__expand-icon"
|
||||
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
|
||||
></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__label">{{ node.label }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import Group from '../packages/group/index.js';
|
||||
import SelectDropdown from '../packages/select-dropdown/index.js';
|
||||
import Pagination from '../packages/pagination/index.js';
|
||||
import Dialog from '../packages/dialog/index.js';
|
||||
|
|
@ -48,11 +47,11 @@ import Col from '../packages/col/index.js';
|
|||
import Upload from '../packages/upload/index.js';
|
||||
import Progress from '../packages/progress/index.js';
|
||||
import Spinner from '../packages/spinner/index.js';
|
||||
import Message from '../packages/message/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
|
||||
Vue.component(Group.name, Group);
|
||||
Vue.component(SelectDropdown.name, SelectDropdown);
|
||||
Vue.component(Pagination.name, Pagination);
|
||||
Vue.component(Dialog.name, Dialog);
|
||||
|
|
@ -99,6 +98,7 @@ const install = function(Vue) {
|
|||
Vue.component(Upload.name, Upload);
|
||||
Vue.component(Progress.name, Progress);
|
||||
Vue.component(Spinner.name, Spinner);
|
||||
Vue.component(Message.name, Message);
|
||||
|
||||
Vue.use(Loading);
|
||||
|
||||
|
|
@ -107,6 +107,7 @@ const install = function(Vue) {
|
|||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
};
|
||||
|
||||
// auto install
|
||||
|
|
@ -116,7 +117,6 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
|
||||
module.exports = {
|
||||
install,
|
||||
Group,
|
||||
SelectDropdown,
|
||||
Pagination,
|
||||
Dialog,
|
||||
|
|
@ -165,5 +165,6 @@ module.exports = {
|
|||
Col,
|
||||
Upload,
|
||||
Progress,
|
||||
Spinner
|
||||
Spinner,
|
||||
Message
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue