github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix conflict

pull/2/head
qingwei.li 2016-08-12 10:09:58 +08:00
parent 6ad98f7ec1 af71d7b708
commit 0c8159cd8a
35 changed files with 755 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -11,9 +11,6 @@
"dialog": [ "dialog": [
"./packages/dialog/index.js" "./packages/dialog/index.js"
], ],
"cascader": [
"./packages/cascader/index.js"
],
"autocomplete": [ "autocomplete": [
"./packages/autocomplete/index.js" "./packages/autocomplete/index.js"
], ],

311
examples/docs/autocomplete.md
View File

@ -3,9 +3,7 @@
.el-autocomplete { .el-autocomplete {
width: 180px; width: 180px;
} }
.el-autocomplete__suggestions.my-autocomplete-suggestions { .my-suggestions-item {
width: 300px;
& .remark { & .remark {
float: right; float: right;
font-size: 13px; font-size: 13px;
@ -14,8 +12,28 @@
} }
</style> </style>
<script> <script>
var $q = require('q'); var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default { export default {
data() { data() {
return { return {
@ -24,10 +42,7 @@
state2: '', state2: '',
state3: '', state3: '',
state4: '', state4: '',
myPartial: { timeout: null
name: 'my-autocomplete-suggestions',
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
}
} }
}, },
methods: { methods: {
@ -52,32 +67,28 @@
return result; return result;
}, },
querySearch(query, simulateQuery) { querySearch(queryString, cb) {
var states = this.states; var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states, var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
deferred;
if (simulateQuery) { cb(results);
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
}, },
createStateFilter(query) { querySearchAsync(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => { return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0); return (state.value.indexOf(queryString.toLowerCase()) === 0);
}; };
} }
}, },
ready() { mounted() {
this.states = this.loadAll(); this.states = this.loadAll();
} }
}; };
@ -87,24 +98,25 @@
<div class="demo-box"> <div class="demo-box">
<el-autocomplete <el-autocomplete
:value.sync = "state1" v-model="state1"
:suggestions = "querySearch(state1)" :fetch-suggestions="querySearch"
placeholder = "请输入内容" placeholder="请输入内容"
></el-autocomplete> ></el-autocomplete>
</div> </div>
```html ```html
<template> <template>
<el-autocomplete <el-autocomplete
:value.sync = "state1" v-model="state1"
:suggestions = "querySearch(state1)" :fetch-suggestions="querySearch"
placeholder = "请输入内容" placeholder="请输入内容"
></el-autocomplete> ></el-autocomplete>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
states: [],
state1: '' state1: ''
} }
}, },
@ -130,62 +142,71 @@
return result; return result;
}, },
querySearch(query, simulateQuery) { querySearch(queryString, callback) {
var states = this.states; var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states, var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
deferred;
if (simulateQuery) { callback(results);
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
}, },
createStateFilter(query) { createStateFilter(queryString) {
return (state) => { return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0); return (state.value.indexOf(queryString.toLowerCase()) === 0);
}; };
} }
}, },
ready() { mounted() {
this.states = this.loadAll(); this.states = this.loadAll();
} }
}; };
</script> </script>
``` ```
## 通过键盘控制下拉的显示 ## 自定义模板
<div class="demo-box"> <div class="demo-box">
<el-autocomplete <el-autocomplete
:value.sync = "state2" v-model="state2"
:suggestions = "querySearch(state2)" :fetch-suggestions="querySearch"
:show-on-up-down = "true" custom-item="my-item"
placeholder = "请输入内容" placeholder="请输入内容"
></el-autocomplete> ></el-autocomplete>
</div> </div>
```html ```html
<template> <el-autocomplete
<el-autocomplete v-model="state2"
:value.sync = "state2" :fetch-suggestions="querySearch"
:suggestions = "querySearch(state2)" custom-item="my-item"
:show-on-up-down = "true" placeholder="请输入内容"
placeholder = "请输入内容" ></el-autocomplete>
></el-autocomplete>
</template>
<script> <script>
var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default { export default {
data() { data() {
return { return {
states: [],
state2: '' state2: ''
} }
}, },
@ -211,116 +232,19 @@
return result; return result;
}, },
querySearch(query, simulateQuery) { querySearch(queryString, cb) {
var states = this.states; var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states, var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
deferred;
if (simulateQuery) { cb(results);
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
}, },
createStateFilter(query) { createStateFilter(queryString) {
return (state) => { return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0); return (state.value.indexOf(queryString.toLowerCase()) === 0);
}; };
} }
}, },
ready() { mounted() {
this.states = this.loadAll();
}
};
</script>
```
## 自定义模板
<div class="demo-box">
<el-autocomplete
:value.sync = "state3"
:suggestions = "querySearch(state3)"
:partial = "myPartial"
placeholder = "请输入内容"
></el-autocomplete>
</div>
```html
<el-autocomplete
:value.sync = "state3"
:suggestions = "querySearch(state3)"
:partial = "myPartial"
placeholder = "请输入内容"
></el-autocomplete>
<script>
export default {
data() {
return {
state3: '',
myPartial: {
name: 'my-autocomplete-suggestions',
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
}
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(query, simulateQuery) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
if (simulateQuery) {
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
},
createStateFilter(query) {
return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0);
};
}
},
ready() {
this.states = this.loadAll(); this.states = this.loadAll();
} }
}; };
@ -331,27 +255,26 @@
<div class="demo-box"> <div class="demo-box">
<el-autocomplete <el-autocomplete
:value.sync = "state4" v-model="state3"
:suggestions = "querySearch(state4, true)"
:search-from-server = "true"
placeholder = "请输入内容" placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete> ></el-autocomplete>
</div> </div>
```html ```html
<el-autocomplete <template>
:value.sync = "state4" <el-autocomplete
:suggestions = "querySearch(state4, true)" v-model="state3"
:search-from-server = "true" placeholder = "请输入内容"
placeholder = "请输入内容" :fetch-Suggestions="querySearchAsync"
></el-autocomplete> ></el-autocomplete>
</template>
<script> <script>
var $q = require('q');
export default { export default {
data() { data() {
return { return {
state4: '' state3: '',
states: []
} }
}, },
methods: { methods: {
@ -376,24 +299,15 @@
return result; return result;
}, },
querySearch(query, simulateQuery) { querySearchAsync(query, callback) {
var states = this.states; var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states, var results = query ? states.filter(this.createStateFilter(query)) : states;
deferred;
if (simulateQuery) {
if (!query) { return []; }
deferred = $q.defer(); if (!query) { return []; }
setTimeout(() => { setTimeout(() => {
deferred.resolve(results); callback(results);
}, Math.random() * 3000, false); }, 3000 * Math.random());
return deferred.promise;
} else {
return results;
}
}, },
createStateFilter(query) { createStateFilter(query) {
return (state) => { return (state) => {
@ -413,7 +327,6 @@
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | | | | placeholder | 输入框占位文本 | string | | |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
| suggestions | 建议列表 | array,object | | | | value | 必填值输入绑定值 | string | | |
| value | 输入绑定值 | string | | |
| showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | | | showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | |
| partial | 建议列表的自定义模板 | object | | | | fetch-suggestions | 返回输入建议的方法，组件内部通过调用该方法来获得输入建议的数据，在该方法中，仅当你的输入建议数据 resolve 时再通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | | |

89
examples/docs/dialog.md
View File

@ -60,96 +60,102 @@
## 基本用法 ## 基本用法
<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogVisible"> <el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible"> <el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
## 设置尺寸 ## 设置尺寸
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny"> <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span> <span>这是一段内容</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button> <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny"> <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span> <span>这是一段内容</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button> <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button> <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full"> <el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280" class="full-image"> <img src="http://placekitten.com/1920/1280" class="full-image">
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button> <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full"> <el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280"> <img src="http://placekitten.com/1920/1280">
</el-dialog> </el-dialog>
``` ```
## 设置能否通过点击modal或按下esc关闭dialog ## 设置能否通过点击modal或按下esc关闭dialog
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button> <el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog title="提示"
v-model="dialogStubbornVisible"
:close-on-click-modal="false"
:close-on-press-escape="false">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button> <el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog title="提示"
v-model="dialogStubbornVisible"
:close-on-click-modal="false"
:close-on-press-escape="false">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog> </el-dialog>
``` ```
## 自定义内容 ## 自定义内容
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column>
@ -158,11 +164,11 @@
</el-dialog> </el-dialog>
</div> </div>
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form" v-ref:form> <el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input> <el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
@ -174,16 +180,16 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column>
@ -191,10 +197,10 @@
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form" v-ref:form> <el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input> <el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
@ -206,8 +212,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
@ -226,3 +232,10 @@
|------|--------| |------|--------|
| - | dialog 的内容 | | - | dialog 的内容 |
| footer | dialog 按钮操作区的内容 | | footer | dialog 按钮操作区的内容 |
## 方法
每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |

24
examples/docs/input-number.md
View File

@ -21,45 +21,45 @@
<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p> <p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
``` ```
## 禁用状态 ## 禁用状态
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1" :disabled="true"></el-input-number> <el-input-number v-model="num1" :disabled="true"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1" :disabled="true"></el-input-number> <el-input-number v-model="num1" :disabled="true"></el-input-number>
``` ```
## 步数 ## 步数
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num2" :step="2"></el-input-number> <el-input-number v-model="num2" :step="2"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num2" :step="2"></el-input-number> <el-input-number v-model="num2" :step="2"></el-input-number>
``` ```
## 尺寸 ## 尺寸
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1" size="large"></el-input-number> <el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number> <el-input-number v-model="num1" size="small"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1" size="large"></el-input-number> <el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number> <el-input-number v-model="num1" size="small"></el-input-number>
``` ```
## API ## API

24
examples/docs/message-box.md
View File

@ -65,11 +65,11 @@
</script> </script>
## 基本用法 ## 基本用法
<el-button @click="open">打开 Alert</el-button> <el-button @click.native="open">打开 Alert</el-button>
```html ```html
<template> <template>
<el-button @click="open">打开 Message Box</el-button> <el-button @click.native="open">打开 Message Box</el-button>
</template> </template>
<script> <script>
@ -85,11 +85,11 @@
## 返回 Promise ## 返回 Promise
<el-button @click="open2">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
```html ```html
<template> <template>
<el-button @click="open4">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
</template> </template>
<script> <script>
@ -105,11 +105,11 @@
</script> </script>
``` ```
<el-button @click="open3">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
```html ```html
<template> <template>
<el-button @click="open5">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
</template> </template>
<script> <script>
@ -132,11 +132,11 @@
} }
</script> </script>
``` ```
<el-button @click="open4">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
```html ```html
<template> <template>
<el-button @click="open6">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
</template> </template>
<script> <script>
@ -157,11 +157,11 @@
</script> </script>
``` ```
<el-button @click="open5">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open3">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
</template> </template>
<script> <script>
@ -183,11 +183,11 @@
## 更多配置项 ## 更多配置项
<el-button @click="open6">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open2">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
</template> </template>
<script> <script>

28
examples/docs/notification.md
View File

@ -74,12 +74,12 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</template> </template>
<script> <script>
@ -99,18 +99,18 @@
## 带有 icon ## 带有 icon
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</template> </template>
<script> <script>
@ -154,12 +154,12 @@
## 不会自动关闭 ## 不会自动关闭
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</template> </template>
<script> <script>
@ -179,12 +179,12 @@
## 回调函数 ## 回调函数
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</template> </template>
<script> <script>

22
examples/docs/popover.md
View File

@ -117,7 +117,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover1 ref="popover1"
placement="top-start" placement="top-start"
title="标题" title="标题"
width="200" width="200"
@ -126,7 +126,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover2 ref="popover2"
placement="bottom" placement="bottom"
title="标题" title="标题"
width="200" width="200"
@ -135,7 +135,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover3 ref="popover3"
placement="right" placement="right"
title="标题" title="标题"
width="200" width="200"
@ -146,13 +146,13 @@
<el-button v-popover:popover1>hover 激活</el-button> <el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button> <el-button v-popover:popover2>click 激活</el-button>
<el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input> <el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
</div> </div>
```html ```html
<el-popover <el-popover
v-ref:popover1 ref="popover1"
placement="top-start" placement="top-start"
title="标题" title="标题"
width="200" width="200"
@ -161,7 +161,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover2 ref="popover2"
placement="bottom" placement="bottom"
title="标题" title="标题"
width="200" width="200"
@ -170,7 +170,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover3 ref="popover3"
placement="right" placement="right"
title="标题" title="标题"
width="200" width="200"
@ -188,7 +188,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover4 ref="popover4"
placement="right" placement="right"
width="400" width="400"
trigger="click"> trigger="click">
@ -204,7 +204,7 @@
```html ```html
<el-popover <el-popover
v-ref:popover4 ref="popover4"
placement="right" placement="right"
width="400" width="400"
trigger="click"> trigger="click">
@ -224,7 +224,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover5 ref="popover5"
placement="top" placement="top"
width="160" width="160"
:visible.sync="visible2"> :visible.sync="visible2">
@ -240,7 +240,7 @@
```html ```html
<el-popover <el-popover
v-ref:popover5 ref="popover5"
placement="top" placement="top"
width="160" width="160"
:visible.sync="visible2"> :visible.sync="visible2">

37
examples/docs/slider.md
View File

@ -1,5 +1,16 @@
<script> <script>
export default { export default {
data() {
return {
value1: 0,
value2: 50,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null
};
},
methods: { methods: {
onChange(value) { onChange(value) {
console.log(value); console.log(value);
@ -10,55 +21,55 @@
## 基本用法 ## 基本用法
<el-slider></el-slider> <el-slider v-model="value1"></el-slider>
```html ```html
<el-slider></el-slider> <el-slider v-model="value1"></el-slider>
``` ```
## 定义初始值 ## 定义初始值
<el-slider :value="50"></el-slider> <el-slider v-model="value2"></el-slider>
```html ```html
<el-slider :value="50"></el-slider> <el-slider v-model="value2"></el-slider>
``` ```
## 定义区间 ## 定义区间
<el-slider :min="20" :max="80"></el-slider> <el-slider :min="20" :max="80" v-model="value3"></el-slider>
```html ```html
<el-slider :min="20" :max="80"></el-slider> <el-slider :min="20" :max="80" v-model="value3"></el-slider>
``` ```
## 定义步长 ## 定义步长
<el-slider :step="10"></el-slider> <el-slider :step="10" v-model="value4"></el-slider>
```html ```html
<el-slider :step="10"></el-slider> <el-slider :step="10" v-model="value4"></el-slider>
``` ```
## 显示间断点 ## 显示间断点
<el-slider :step="10" show-stops></el-slider> <el-slider :step="10" show-stops v-model="value5"></el-slider>
```html ```html
<el-slider :step="10" show-stops></el-slider> <el-slider :step="10" show-stops v-model="value5"></el-slider>
``` ```
## 带有输入框 ## 带有输入框
<el-slider show-input></el-slider> <el-slider show-input v-model="value6"></el-slider>
```html ```html
<el-slider show-input></el-slider> <el-slider show-input v-model="value6"></el-slider>
``` ```
## 回调函数 ## 回调函数
<el-slider @change="onChange"></el-slider> <el-slider @change="onChange" v-model="value7"></el-slider>
```html ```html
<template> <template>

48
examples/docs/tooltip.md
View File

@ -30,73 +30,49 @@
} }
</style> </style>
<script>
module.exports = {
data() {
return {
value: true
}
},
computed: {
effect() {
return this.value ? 'dark' : 'light';
}
}
}
</script>
<el-switch
v-model="value"
on-text="黑色"
off-text="白色"
on-color="#1f2d3d"
off-color="#ccc">
</el-switch>
<div class="box"> <div class="box">
<div class="top"> <div class="top">
<el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button> <el-button>上左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top"> <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button> <el-button>上边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end"> <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
<el-button>上右</el-button> <el-button>上右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="left"> <div class="left">
<el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start"> <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button> <el-button>左上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left"> <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button> <el-button>左边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end"> <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-button>左下</el-button> <el-button>左下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="right"> <div class="right">
<el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start"> <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button> <el-button>右上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right"> <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button> <el-button>右边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end"> <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-button>右下</el-button> <el-button>右下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="bottom"> <div class="bottom">
<el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start"> <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button> <el-button>下左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom"> <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button> <el-button>下边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end"> <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-button>下右</el-button> <el-button>下右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>

5
package.json
View File

@ -9,7 +9,7 @@
], ],
"scripts": { "scripts": {
"dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js", "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
"dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p", "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
"deploy": "cooking build -c scripts/cooking.demo.js -p", "deploy": "cooking build -c scripts/cooking.demo.js -p",
"gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin", "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
"prepublish": "make dist" "prepublish": "make dist"
@ -46,8 +46,9 @@
"uppercamelcase": "^1.1.0", "uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.7", "vue": "^2.0.0-beta.7",
"vue-loader": "^9.3.2", "vue-loader": "^9.3.2",
"vue": "^2.0.0-beta.8",
"vue-markdown-loader": "^0.4.0", "vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.1.8", "vue-popup": "^0.2.1",
"vue-router": "^2.0.0-beta.2" "vue-router": "^2.0.0-beta.2"
} }
} }

20
packages/alert/src/main.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible"> <transition name="el-alert-fade">
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i> <div class="el-alert" :class="[ typeClass ]" v-show="visible">
<div class="el-alert__content"> <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span> <div class="el-alert__content">
<p class="el-alert__description" v-if="description">{{ description }}</p> <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i> <p class="el-alert__description" v-if="description">{{ description }}</p>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
</div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
@ -60,6 +62,10 @@
}, },
computed: { computed: {
typeClass() {
return `el-alert--${ this.type }`;
},
iconClass() { iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information'; return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
}, },

1
packages/autocomplete/package.json
View File

@ -12,5 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>", "author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-clickoutside": "^0.1.0"
} }
} }

119
packages/autocomplete/src/autocomplete.vue
View File

@ -1,36 +1,54 @@
<template> <template>
<div class="el-autocomplete"> <div class="el-autocomplete" v-clickoutside="handleBlur">
<el-input <el-input
:value="value" :value="value"
:disabled="disabled" :disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:name = 'name' :name='name'
@onchange="handleChange" @onchange="handleChange"
@onfocus="handleFocus()" @onfocus="handleFocus"
@onblur="handleBlur()" @keydown.up.native="highlight(highlightedIndex - 1)"
@keydown.up="highlight(highlightedIndex - 1)" @keydown.down.native="highlight(highlightedIndex + 1)"
@keydown.down="highlight(highlightedIndex + 1)" @keydown.enter.native="select(highlightedIndex)"
@keydown.enter="select(highlightedIndex)"
></el-input> ></el-input>
<ul <transition name="md-fade-bottom">
v-show="showSuggestions && !loading && suggestions.length > 0" <ul
class="el-autocomplete__suggestions" v-show="suggestionVisible && !loading && suggestions.length > 0"
:class="[partial ? partial.name : '']" class="el-autocomplete__suggestions"
transition="md-fade-bottom" ref="suggestions"
v-el:suggestions >
> <li
<li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li> v-if="!customItem"
</ul> :class="{'highlighted': highlightedIndex === index}"
<div @click="select(index)"
v-show="showSuggestions && loading" v-for="(item, index) in suggestions">
class="el-autocomplete__suggestions is-loading" {{item.display}}
> </li>
<i class="el-icon-loading"></i> <component
</div> v-else
:is="customItem"
@click.native="select(index)"
v-for="(item, index) in suggestions"
:item="item"
:index="index">
</component>
</ul>
</transition>
<transition name="md-fade-bottom">
<div
v-show="suggestionVisible && loading"
class="el-autocomplete__suggestions is-loading"
>
<i class="el-icon-loading"></i>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
import ElInput from 'packages/input/index.js'; import ElInput from 'packages/input/index.js';
import Vue from 'vue';
import VueClickoutside from 'main/utils/clickoutside';
Vue.use(VueClickoutside);
export default { export default {
name: 'ElAutocomplete', name: 'ElAutocomplete',
@ -42,61 +60,58 @@
placeholder: String, placeholder: String,
disabled: Boolean, disabled: Boolean,
name: String, name: String,
suggestions: [Array, Object],
value: String, value: String,
showOnUpDown: Boolean, fetchSuggestions: Function,
partial: Object triggerOnfocus: {
type: Boolean,
default: true
},
customItem: String
}, },
data() { data() {
return { return {
showSuggestions: false, suggestions: [],
suggestionVisible: false,
inputFocusing: false, inputFocusing: false,
loading: false, loading: false,
highlightedIndex: -1 highlightedIndex: -1
}; };
}, },
created() {
if (this.partial) {
this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
}
},
watch: {
'suggestions'(val) {
if (val && val.then) {
this.loading = true;
this.suggestions.then((res) => {
this.loading = false;
this.suggestions = res;
});
}
}
},
methods: { methods: {
handleChange(value) { handleChange(value) {
this.value = value; this.$emit('input', value);
this.showSuggestions = true; this.showSuggestions(value);
}, },
handleFocus() { handleFocus() {
if (!this.showOnUpDown) { if (this.triggerOnfocus) {
this.showSuggestions = true; this.showSuggestions(this.value);
} }
}, },
handleBlur() { handleBlur() {
this.showSuggestions = false; this.suggestionVisible = false;
}, },
select(index) { select(index) {
debugger;
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.value = this.suggestions[index].value; this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {
this.showSuggestions = false; this.suggestionVisible = false;
}); });
} }
}, },
showSuggestions(value) {
this.suggestionVisible = true;
this.loading = true;
this.fetchSuggestions(value, (suggestions) => {
this.loading = false;
this.suggestions = suggestions;
});
},
getSuggestionElement(index) { getSuggestionElement(index) {
if (!this.suggestions || !this.suggestions[index]) { if (!this.suggestions || !this.suggestions[index]) {
return null; return null;
} else { } else {
return this.$els.suggestions.children[index]; return this.$refs.suggestions.children[index];
} }
}, },
highlight(index) { highlight(index) {
@ -107,7 +122,7 @@
} }
var elSelect = this.getSuggestionElement(index); var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$els.suggestions; var elSuggestions = this.$refs.suggestions;
var scrollTop = elSuggestions.scrollTop; var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop; var offsetTop = elSelect.offsetTop;
@ -121,7 +136,7 @@
this.highlightedIndex = index; this.highlightedIndex = index;
if (this.showOnUpDown) { if (this.showOnUpDown) {
this.showSuggestions = true; this.suggestionVisible = true;
} }
} }
} }

8
packages/breadcrumb/src/breadcrumb-item.vue
View File

@ -6,18 +6,12 @@
<script> <script>
export default { export default {
name: 'ElBreadcrumbItem', name: 'ElBreadcrumbItem',
props: {
},
data() { data() {
return { return {
separator: '' separator: ''
}; };
}, },
methods: { mounted() {
},
ready() {
this.separator = this.$parent.separator; this.separator = this.$parent.separator;
} }
}; };

10
packages/breadcrumb/src/breadcrumb.vue
View File

@ -12,16 +12,6 @@
type: String, type: String,
default: '/' default: '/'
} }
},
data() {
return {
};
},
methods: {
},
ready() {
} }
}; };
</script> </script>

2
packages/dialog/package.json
View File

@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"vue-popup": "^0.1.8" "vue-popup": "^0.2.1"
} }
} }

37
packages/dialog/src/component.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick"> <transition name="dialog-fade">
<div class="el-dialog" :class="[sizeClass, customClass]" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }"> <div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
<div class="el-dialog__header"> <div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
<span class="el-dialog__title">{{title}}</span> <div class="el-dialog__header">
<div class="el-dialog__headerbtn"> <span class="el-dialog__title">{{title}}</span>
<i class="el-dialog__close el-icon el-icon-close" @click='close()'></i> <div class="el-dialog__headerbtn">
<i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
</div>
</div>
<div class="el-dialog__body"><slot></slot></div>
<div class="el-dialog__footer">
<slot name="footer"></slot>
</div> </div>
</div> </div>
<div class="el-dialog__body"><slot></slot></div>
<slot name="footer"></slot>
</div> </div>
</div> </transition>
</template> </template>
<script> <script>
@ -60,9 +64,14 @@
}, },
watch: { watch: {
visible(val) { value(val) {
if (val) { if (val) {
this.$els.dialog.scrollTop = 0; this.$emit('open');
this.$nextTick(() => {
this.$refs.dialog.scrollTop = 0;
});
} else {
this.$emit('close');
} }
} }
}, },
@ -76,7 +85,7 @@
methods: { methods: {
handleWrapperClick() { handleWrapperClick() {
if (this.closeOnClickModal) { if (this.closeOnClickModal) {
this.visible = false; this.$emit('input', false);
} }
}, },
@ -85,8 +94,8 @@
} }
}, },
ready() { mounted() {
if (this.visible) { if (this.value) {
this.rendered = true; this.rendered = true;
this.open(); this.open();
} }

42
packages/input-number/src/input-number.vue
View File

@ -6,8 +6,8 @@
]" ]"
> >
<el-input <el-input
:value="value" v-model="currentValue"
@onchange="handleChnage" @onchange="handleChange"
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"
:number="true" :number="true"
@ -18,17 +18,17 @@
<span <span
class="el-input-number__decrease el-icon-minus" class="el-input-number__decrease el-icon-minus"
:class="{'is-disabled': minDisabled}" :class="{'is-disabled': minDisabled}"
v-repeat-click="decrease()" v-repeat-click="decrease"
@mouseenter="activeInput(minDisabled)" @mouseenter="activeInput(minDisabled)"
@mouseleave="unactiveInput(minDisabled)" @mouseleave="inactiveInput(minDisabled)"
> >
</span> </span>
<span <span
class="el-input-number__increase el-icon-plus" class="el-input-number__increase el-icon-plus"
:class="{'is-disabled': maxDisabled}" :class="{'is-disabled': maxDisabled}"
v-repeat-click="increase()" v-repeat-click="increase"
@mouseenter="activeInput(maxDisabled)" @mouseenter="activeInput(maxDisabled)"
@mouseleave="unactiveInput(maxDisabled)" @mouseleave="inactiveInput(maxDisabled)"
> >
</span> </span>
</div> </div>
@ -41,8 +41,7 @@
name: 'ElInputNumber', name: 'ElInputNumber',
props: { props: {
value: { value: {
type: Number, type: Number
required: true
}, },
step: { step: {
type: Number, type: Number,
@ -61,13 +60,12 @@
}, },
directives: { directives: {
repeatClick: { repeatClick: {
bind() { bind(el, binding, vnode) {
const el = this.el;
let interval = null; let interval = null;
let startTime; let startTime;
const handler = () => { const handler = () => {
this.vm.$get(this.expression); vnode.context[binding.expression]();
}; };
const clear = function() { const clear = function() {
@ -93,9 +91,23 @@
}, },
data() { data() {
return { return {
currentValue: null,
inputActive: false inputActive: false
}; };
}, },
watch: {
value: {
immediate: true,
handler(val) {
this.currentValue = val;
}
},
currentValue(val) {
if (!isNaN(parseInt(val, 10))) {
this.$emit('input', parseInt(val, 10));
}
}
},
computed: { computed: {
minDisabled() { minDisabled() {
return this.value - this.step < this.min; return this.value - this.step < this.min;
@ -107,14 +119,14 @@
methods: { methods: {
increase() { increase() {
if (this.value + this.step > this.max || this.disabled) return; if (this.value + this.step > this.max || this.disabled) return;
this.value += this.step; this.currentValue += this.step;
if (this.maxDisabled) { if (this.maxDisabled) {
this.inputActive = false; this.inputActive = false;
} }
}, },
decrease() { decrease() {
if (this.value - this.step < this.min || this.disabled) return; if (this.value - this.step < this.min || this.disabled) return;
this.value -= this.step; this.currentValue -= this.step;
if (this.minDisabled) { if (this.minDisabled) {
this.inputActive = false; this.inputActive = false;
} }
@ -124,12 +136,12 @@
this.inputActive = true; this.inputActive = true;
} }
}, },
unactiveInput(disabled) { inactiveInput(disabled) {
if (!this.disabled && !disabled) { if (!this.disabled && !disabled) {
this.inputActive = false; this.inputActive = false;
} }
}, },
handleChnage(value) { handleChange(value) {
this.$emit('onchange', value); this.$emit('onchange', value);
} }
} }

7
packages/input/src/input.vue
View File

@ -106,8 +106,11 @@
}, },
watch: { watch: {
'value'(val) { 'value': {
this.currentValue = val; immediate: true,
handler(val) {
this.currentValue = val;
}
}, },
'currentValue'(val) { 'currentValue'(val) {

2
packages/message-box/package.json
View File

@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-popup": "^0.1.8" "vue-popup": "^0.2.1"
} }
} }

13
packages/message-box/src/main.js
View File

@ -88,7 +88,7 @@ var showNextMsg = function() {
initInstance(); initInstance();
} }
if (!instance.visible || instance.closeTimer) { if (!instance.value || instance.closeTimer) {
if (msgQueue.length > 0) { if (msgQueue.length > 0) {
currentMsg = msgQueue.shift(); currentMsg = msgQueue.shift();
@ -98,10 +98,15 @@ var showNextMsg = function() {
instance[prop] = options[prop]; instance[prop] = options[prop];
} }
} }
instance.$appendTo(document.body); ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
if (instance[prop] === undefined) {
instance[prop] = true;
}
});
document.body.appendChild(instance.$el);
Vue.nextTick(() => { Vue.nextTick(() => {
instance.visible = true; instance.value = true;
}); });
} }
} }
@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
}; };
MessageBox.close = function() { MessageBox.close = function() {
instance.visible = false; instance.value = false;
msgQueue = []; msgQueue = [];
currentMsg = null; currentMsg = null;
}; };

59
packages/message-box/src/main.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div class="el-message-box__wrapper"> <div class="el-message-box__wrapper">
<div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce"> <transition name="msgbox-bounce">
<div class="el-message-box__header" v-if="title !== ''"> <div class="el-message-box" v-show="value">
<div class="el-message-box__title">{{ title }}</div> <div class="el-message-box__header" v-if="title !== ''">
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i> <div class="el-message-box__title">{{ title }}</div>
</div> <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
<div class="el-message-box__content" v-if="message !== ''"> </div>
<div class="el-message-box__status {{ typeClass }}"></div> <div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div> <div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__input" v-show="showInput"> <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input /> <div class="el-message-box__input" v-show="showInput">
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div> <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
</div>
</div>
<div class="el-message-box__btns">
<el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
</div> </div>
</div> </div>
<div class="el-message-box__btns"> </transition>
<el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
</div>
</div>
</div> </div>
</template> </template>
@ -34,8 +36,6 @@
import Popup from 'vue-popup'; import Popup from 'vue-popup';
export default { export default {
name: 'el-message-box',
mixins: [ Popup ], mixins: [ Popup ],
props: { props: {
@ -68,12 +68,27 @@
}, },
methods: { methods: {
doClose() {
this.value = false;
this._closing = true;
this.onClose && this.onClose();
if (this.modal) {
document.body.style.overflow = this.bodyOverflow;
}
if (!this.transition) {
this.doAfterClose();
}
},
handleAction(action) { handleAction(action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return; return;
} }
var callback = this.callback; var callback = this.callback;
this.visible = false; this.value = false;
callback(action); callback(action);
}, },
@ -109,11 +124,11 @@
} }
}, },
visible(val) { value(val) {
if (val && this.$type === 'prompt') { if (val && this.$type === 'prompt') {
setTimeout(() => { setTimeout(() => {
if (this.$els.input) { if (this.$refs.input) {
this.$els.input.focus(); this.$refs.input.focus();
} }
}, 500); }, 500);
} }

27
packages/notification/src/main.js
View File

@ -1,14 +1,14 @@
import Vue from 'vue'; import Vue from 'vue';
var NotificationConstructor = Vue.extend(require('./main.vue')); let NotificationConstructor = Vue.extend(require('./main.vue'));
var instance; let instance;
var instances = []; let instances = [];
var seed = 1; let seed = 1;
var Notification = function(options) { var Notification = function(options) {
options = options || {}; options = options || {};
var userOnClose = options.onClose; let userOnClose = options.onClose;
var id = 'notification_' + seed++; let id = 'notification_' + seed++;
options.onClose = function() { options.onClose = function() {
Notification.close(id, userOnClose); Notification.close(id, userOnClose);
@ -19,11 +19,12 @@ var Notification = function(options) {
}); });
instance.id = id; instance.id = id;
instance.vm = instance.$mount(); instance.vm = instance.$mount();
instance.vm.$appendTo('body'); document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el; instance.dom = instance.vm.$el;
var topDist = 0; let topDist = 0;
for (var i = 0, len = instances.length; i < len; i++) { for (let i = 0, len = instances.length; i < len; i++) {
topDist += instances[i].$el.offsetHeight + 16; topDist += instances[i].$el.offsetHeight + 16;
} }
topDist += 16; topDist += 16;
@ -32,13 +33,15 @@ var Notification = function(options) {
}; };
Notification.close = function(id, userOnClose) { Notification.close = function(id, userOnClose) {
let index;
let removedHeight;
for (var i = 0, len = instances.length; i < len; i++) { for (var i = 0, len = instances.length; i < len; i++) {
if (id === instances[i].id) { if (id === instances[i].id) {
if (typeof userOnClose === 'function') { if (typeof userOnClose === 'function') {
userOnClose(instances[i]); userOnClose(instances[i]);
} }
var index = i; index = i;
var removedHeight = instances[i].dom.offsetHeight; removedHeight = instances[i].dom.offsetHeight;
instances.splice(i, 1); instances.splice(i, 1);
break; break;
} }
@ -46,7 +49,7 @@ Notification.close = function(id, userOnClose) {
if (len > 1) { if (len > 1) {
for (i = index; i < len - 1 ; i++) { for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px'; instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
} }
} }
}; };

29
packages/notification/src/main.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()"> <transition name="el-notification-fade">
<i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i> <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }"> <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<span>{{ title }}</span> <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<p>{{ message }}</p> <span>{{ title }}</span>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div> <p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
</div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
@ -18,10 +20,9 @@
}; };
export default { export default {
name: 'ElNotification',
data() { data() {
return { return {
visible: false,
title: '', title: '',
message: '', message: '',
duration: 4500, duration: 4500,
@ -36,14 +37,18 @@
computed: { computed: {
typeClass() { typeClass() {
return this.type ? typeMap[this.type] : ''; return this.type ? `el-icon-${ typeMap[this.type] }` : '';
} }
}, },
watch: { watch: {
closed(newVal) { closed(newVal) {
if (newVal) { if (newVal) {
this.$destroy(true); this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
} }
} }
}, },
@ -71,7 +76,7 @@
} }
}, },
ready() { mounted() {
if (this.duration > 0) { if (this.duration > 0) {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
if (!this.closed) { if (!this.closed) {

82
packages/popover/src/main.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<div <transition :name="transition">
class="el-popover" <div
v-el:popper class="el-popover"
v-show="visible" ref="popper"
:transition="transition" v-show="showPopper"
:style="{ width: width + 'px' }"> :style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div> <div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot> <slot>{{ content }}</slot>
</div> </div>
</transition>
</template> </template>
<script> <script>
@ -16,10 +17,8 @@ import Vue from 'vue';
import { on, off } from 'wind-dom/src/event'; import { on, off } from 'wind-dom/src/event';
Vue.directive('popover', { Vue.directive('popover', {
update() { bind(el, binding, vnode) {
this.vm.$nextTick(() => { vnode.context.$refs[binding.arg].$refs.reference = el;
this.vm.$refs[this.arg].reference = this.el;
});
} }
}); });
@ -36,9 +35,7 @@ export default {
}, },
title: String, title: String,
content: String, content: String,
reference: { reference: {},
default: 'body'
},
width: {}, width: {},
visibleArrow: { visibleArrow: {
default: true default: true
@ -56,61 +53,64 @@ export default {
} }
}, },
ready() { mounted() {
let _timer; let _timer;
const reference = this.reference || this.$refs.reference;
this.$nextTick(() => { this.$nextTick(() => {
if (this.trigger === 'click') { if (this.trigger === 'click') {
on(this.reference, 'click', () => { this.visible = !this.visible; }); on(reference, 'click', () => { this.showPopper = !this.showPopper; });
on(document, 'click', (e) => { on(document, 'click', (e) => {
if (!this.$el || if (!this.$el ||
!this.reference || !reference ||
this.$el.contains(e.target) || this.$el.contains(e.target) ||
this.reference.contains(e.target)) return; reference.contains(e.target)) return;
this.visible = false; this.showPopper = false;
}); });
} else if (this.trigger === 'hover') { } else if (this.trigger === 'hover') {
on(this.reference, 'mouseenter', () => { on(reference, 'mouseenter', () => {
this.visible = true; this.showPopper = true;
clearTimeout(_timer); clearTimeout(_timer);
}); });
on(this.reference, 'mouseleave', () => { on(reference, 'mouseleave', () => {
_timer = setTimeout(() => { _timer = setTimeout(() => {
this.visible = false; this.showPopper = false;
}, 200); }, 200);
}); });
} else { } else {
if (this.reference.hasChildNodes()) { if ([].slice.call(reference.children).length) {
const children = this.reference.childNodes; const children = reference.childNodes;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (children[i].nodeName === 'INPUT') { if (children[i].nodeName === 'INPUT') {
on(children[i], 'focus', () => { this.visible = true; }); on(children[i], 'focus', () => { this.showPopper = true; });
on(children[i], 'blur', () => { this.visible = false; }); on(children[i], 'blur', () => { this.showPopper = false; });
break; break;
} }
} }
} else if ( } else if (
this.reference.nodeName === 'INPUT' || reference.nodeName === 'INPUT' ||
this.reference.nodeName === 'TEXTAREA' reference.nodeName === 'TEXTAREA'
) { ) {
on(this.reference, 'focus', () => { this.visible = true; }); on(reference, 'focus', () => { this.showPopper = true; });
on(this.reference, 'blur', () => { this.visible = false; }); on(reference, 'blur', () => { this.showPopper = false; });
} else { } else {
on(this.reference, 'mousedown', () => { this.visible = true; }); on(reference, 'mousedown', () => { this.showPopper = true; });
on(this.reference, 'mouseup', () => { this.visible = false; }); on(reference, 'mouseup', () => { this.showPopper = false; });
} }
} }
}); });
}, },
destroyed() { destroyed() {
off(this.reference, 'mouseup'); const reference = this.reference || this.$refs.reference;
off(this.reference, 'mousedown');
off(this.reference, 'focus'); off(reference, 'mouseup');
off(this.reference, 'blur'); off(reference, 'mousedown');
off(this.reference, 'mouseleave'); off(reference, 'focus');
off(this.reference, 'mouseenter'); off(reference, 'blur');
off(reference, 'mouseleave');
off(reference, 'mouseenter');
} }
}; };
</script> </script>

65
packages/slider/src/main.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="el-slider"> <div class="el-slider">
<el-input-number <el-input-number
:value.sync="value" v-model="inputValue"
v-if="showInput" v-if="showInput"
class="el-slider__input" class="el-slider__input"
@keyup="onInputChange()" @keyup.native="onInputChange()"
v-el:input ref="input"
:step="step" :step="step"
:min="min" :min="min"
:max="max" :max="max"
@ -13,12 +13,14 @@
</el-input-number> </el-input-number>
<div class="el-slider__runway" <div class="el-slider__runway"
:class="{ 'show-input': showInput }" :class="{ 'show-input': showInput }"
@click="onSliderClick($event)" v-el:slider> @click="onSliderClick" ref="slider">
<div class="el-slider__bar" :style="{ width: currentPosition }"></div> <div class="el-slider__bar" :style="{ width: currentPosition }"></div>
<div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" v-el:button> <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" ref="button">
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div> <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
</div> </div>
<div class="el-slider__pop" v-show="showTip" transition="popper-fade" v-el:pop>{{ value }}</div> <transition name="popper-fade">
<div class="el-slider__pop" v-show="showTip" transition="popper-fade" ref="pop">{{ value }}</div>
</transition>
<div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div> <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
</div> </div>
</div> </div>
@ -69,6 +71,8 @@
data() { data() {
return { return {
inputValue: null,
timeout: null,
showTip: false, showTip: false,
hovering: false, hovering: false,
dragging: false, dragging: false,
@ -80,18 +84,22 @@
}, },
watch: { watch: {
inputValue(val) {
this.$emit('input', val);
},
showTip(val) { showTip(val) {
if (val) { if (val) {
this.$nextTick(() => { this.$nextTick(() => {
this.updatePopper(); this.updatePopper();
}); });
} else { } else {
setTimeout(() => { this.timeout = setTimeout(() => {
if (this.popper) { if (this.popper) {
this.popper.destroy(); this.popper.destroy();
this.popper = null; this.popper = null;
} }
}, 150); }, 300);
} }
}, },
@ -100,30 +108,37 @@
this.updatePopper(); this.updatePopper();
}); });
if (val < this.min) { if (val < this.min) {
this.value = this.min; this.$emit('input', this.min);
return; return;
} }
if (val > this.max) { if (val > this.max) {
this.value = this.max; this.$emit('input', this.max);
return; return;
} }
this.inputValue = val;
this.setPosition((val - this.min) * 100 / (this.max - this.min)); this.setPosition((val - this.min) * 100 / (this.max - this.min));
} }
}, },
methods: { methods: {
handlePopperStyle() {
let placementMap = { top: 'bottom', bottom: 'top' };
let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
this.popper._popper.classList.add(placement);
this.popper._popper.classList.remove(placementMap[placement]);
this.popper._popper.style.transformOrigin = `center ${ origin }`;
},
updatePopper() { updatePopper() {
if (this.popper) { if (this.popper) {
clearTimeout(this.timeout);
this.popper.update(); this.popper.update();
this.handlePopperStyle();
} else { } else {
this.popper = new Popper(this.$els.button, this.$els.pop, { gpuAcceleration: false, placement: 'top' }); this.popper = new Popper(this.$refs.button, this.$refs.pop, { gpuAcceleration: false, placement: 'top' });
this.popper.onCreate(() => { this.popper.onCreate(() => {
let placementMap = { top: 'bottom', bottom: 'top' }; this.handlePopperStyle();
let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
this.popper._popper.classList.add(placement);
this.popper._popper.classList.remove(placementMap[placement]);
this.popper._popper.style.transformOrigin = `center ${ origin }`;
}); });
this.updatePopper(); this.updatePopper();
} }
@ -133,7 +148,7 @@
if (newPos >= 0 && (newPos <= 100)) { if (newPos >= 0 && (newPos <= 100)) {
var lengthPerStep = 100 / ((this.max - this.min) / this.step); var lengthPerStep = 100 / ((this.max - this.min) / this.step);
var steps = Math.round(newPos / lengthPerStep); var steps = Math.round(newPos / lengthPerStep);
this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min); this.$emit('input', Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min));
this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%'; this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%';
if (!this.dragging) { if (!this.dragging) {
if (this.value !== this.oldValue) { if (this.value !== this.oldValue) {
@ -146,8 +161,7 @@
onSliderClick(event) { onSliderClick(event) {
var currentX = event.clientX; var currentX = event.clientX;
var sliderOffsetLeft; var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
getStyle(this.$el.parentNode, 'position') === 'static' ? sliderOffsetLeft = this.$els.slider.offsetLeft : sliderOffsetLeft = this.$el.parentNode.offsetLeft + this.$els.slider.offsetLeft;
var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100; var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
this.setPosition(newPos); this.setPosition(newPos);
}, },
@ -164,7 +178,7 @@
computed: { computed: {
$sliderWidth() { $sliderWidth() {
return parseInt(getStyle(this.$els.slider, 'width'), 10); return parseInt(getStyle(this.$refs.slider, 'width'), 10);
}, },
showTip() { showTip() {
@ -183,7 +197,7 @@
} }
}, },
compiled() { mounted() {
var startX = 0; var startX = 0;
var currentX = 0; var currentX = 0;
var startPos = 0; var startPos = 0;
@ -212,7 +226,7 @@
} }
}; };
this.$els.button.addEventListener('mousedown', function(event) { this.$refs.button.addEventListener('mousedown', function(event) {
onDragStart(event); onDragStart(event);
window.addEventListener('mousemove', onDragging); window.addEventListener('mousemove', onDragging);
window.addEventListener('mouseup', onDragEnd); window.addEventListener('mouseup', onDragEnd);
@ -220,9 +234,10 @@
}, },
created() { created() {
if (this.value < this.min || this.value > this.max) { if (typeof this.value !== 'number' || this.value < this.min || this.value > this.max) {
this.value = this.min; this.$emit('input', this.min);
} }
this.inputValue = this.inputValue || this.value;
}, },
beforeDestroy() { beforeDestroy() {

7
packages/theme-default/src/alert.css
View File

@ -15,6 +15,7 @@
color: #fff; color: #fff;
opacity: 1; opacity: 1;
display: table; display: table;
transition: opacity .2s;
@modifier success { @modifier success {
background-color: #13ce66; background-color: #13ce66;
@ -78,12 +79,8 @@
} }
} }
.el-alert-fade-transition {
transition: opacity .2s;
}
.el-alert-fade-enter, .el-alert-fade-enter,
.el-alert-fade-leave { .el-alert-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }

42
packages/theme-default/src/common/transition.css
View File

@ -6,11 +6,16 @@
transition: var(--fade-transition); transition: var(--fade-transition);
} }
.fade-in-linear-transition { .fade-in-linear-enter-active {
opacity: 1; opacity: 1;
transition: var(--fade-linear-transition); transition: var(--fade-linear-transition);
} }
.fade-in-linear-leave-active {
opacity: 0;
transition: var(--fade-linear-transition);
}
.fade-in-enter, .fade-in-enter,
.fade-in-leave, .fade-in-leave,
.fade-in-linear-enter, .fade-in-linear-enter,
@ -23,28 +28,28 @@
transition: all .3s cubic-bezier(.55,0,.1,1); transition: all .3s cubic-bezier(.55,0,.1,1);
} }
.md-fade-center-enter, .md-fade-center-enter,
.md-fade-center-leave { .md-fade-center-leave,
opacity: 0;
transform: scaleY(0);
}
.md-fade-center-leave-active { .md-fade-center-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-bottom-transition { .md-fade-bottom-enter-active,
.md-fade-bottom-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: center top; transform-origin: center top;
} }
.md-fade-bottom-enter, .md-fade-bottom-enter,
.md-fade-bottom-leave { .md-fade-bottom-leave,
.md-fade-bottom-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-top-transition { .md-fade-top-enter-active,
.md-fade-top-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
@ -52,40 +57,47 @@
} }
.md-fade-top-enter, .md-fade-top-enter,
.md-fade-top-leave { .md-fade-top-leave,
.md-fade-top-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-left-transition { .md-fade-left-enter-active,
.md-fade-left-leave-active {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: right center; transform-origin: right center;
} }
.md-fade-left-enter, .md-fade-left-enter,
.md-fade-left-leave { .md-fade-left-leave,
.md-fade-left-leave-active {
opacity: 0; opacity: 0;
transform: scaleX(0); transform: scaleX(0);
} }
.md-fade-right-transition { .md-fade-right-enter-active,
.md-fade-right-leave-active {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: left center; transform-origin: left center;
} }
.md-fade-right-enter, .md-fade-right-enter,
.md-fade-right-leave { .md-fade-right-leave,
.md-fade-right-leave-active {
opacity: 0; opacity: 0;
transform: scaleX(0); transform: scaleX(0);
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active,
.fade-leave-active {
transition: opacity .3s cubic-bezier(.645,.045,.355,1); transition: opacity .3s cubic-bezier(.645,.045,.355,1);
} }
.fade-enter, .fade-enter,
.fade-leave { .fade-leave,
.fade-leave-active {
opacity: 0; opacity: 0;
} }

9
packages/theme-default/src/dialog.css
View File

@ -8,7 +8,6 @@
position: relative; position: relative;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow: hidden;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@ -69,20 +68,18 @@
float: right; float: right;
} }
& *[slot=footer] { @e footer {
padding: 10px 20px 15px; padding: 10px 20px 15px;
text-align: right; text-align: right;
width: 100%;
display: block;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.dialog-fade-enter { .dialog-fade-enter-active {
animation: dialog-fade-in .3s; animation: dialog-fade-in .3s;
} }
.dialog-fade-leave { .dialog-fade-leave-active {
animation: dialog-fade-out .3s; animation: dialog-fade-out .3s;
} }

4
packages/theme-default/src/message-box.css
View File

@ -115,12 +115,12 @@
} }
} }
.msgbox-bounce-enter { .msgbox-bounce-enter-active {
-webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
} }
.msgbox-bounce-leave { .msgbox-bounce-leave-active {
-webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
} }

2
packages/theme-default/src/notification.css
View File

@ -72,7 +72,7 @@
right: 0; right: 0;
} }
.el-notification-fade-leave { .el-notification-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }

9
packages/theme-default/src/slider.css
View File

@ -74,6 +74,8 @@
color: #fff; color: #fff;
cursor: default; cursor: default;
z-index: var(--index-top); z-index: var(--index-top);
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
&::before { &::before {
triangle: 9px top #20A0FF; triangle: 9px top #20A0FF;
@ -106,13 +108,8 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.popper-fade-transition {
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
}
.popper-fade-enter, .popper-fade-enter,
.popper-fade-leave { .popper-fade-leave-active {
transform: scale(0.1); transform: scale(0.1);
opacity: 0; opacity: 0;
} }

23
packages/tooltip/src/main.vue
View File

@ -1,20 +1,21 @@
<template> <template>
<div <div
class="el-tooltip" class="el-tooltip"
@mouseenter="visible = true" @mouseenter="showPopper = true"
@mouseleave="visible = false"> @mouseleave="showPopper = false">
<div class="el-tooltip__rel" v-el:reference> <div class="el-tooltip__rel" ref="reference">
<slot></slot> <slot></slot>
</div> </div>
<div <transition :name="transition">
class="el-tooltip__popper" <div
:class="['is-' + effect]" class="el-tooltip__popper"
v-el:popper :class="['is-' + effect]"
v-show="!disabled && visible" ref="popper"
:transition="transition"> v-show="!disabled && showPopper">
<slot name="content"><div v-text="content"></div></slot> <slot name="content"><div v-text="content"></div></slot>
</div> </div>
</transition>
</div> </div>
</template> </template>

251
src/index.js
View File

@ -1,106 +1,104 @@
// import Group from '../packages/group/index.js'; 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';
// import Cascader from '../packages/cascader/index.js'; import Autocomplete from '../packages/autocomplete/index.js';
// import Autocomplete from '../packages/autocomplete/index.js'; import Dropdown from '../packages/dropdown/index.js';
// import Dropdown from '../packages/dropdown/index.js'; import DropdownItem from '../packages/dropdown-item/index.js';
// import DropdownItem from '../packages/dropdown-item/index.js'; import Menu from '../packages/menu/index.js';
// import Menu from '../packages/menu/index.js'; import Submenu from '../packages/submenu/index.js';
// import Submenu from '../packages/submenu/index.js'; import MenuItem from '../packages/menu-item/index.js';
// import MenuItem from '../packages/menu-item/index.js'; import Input from '../packages/input/index.js';
// import Input from '../packages/input/index.js'; import InputNumber from '../packages/input-number/index.js';
// import InputNumber from '../packages/input-number/index.js'; import InputGroup from '../packages/input-group/index.js';
// import InputGroup from '../packages/input-group/index.js'; import Radio from '../packages/radio/index.js';
// import Radio from '../packages/radio/index.js'; import RadioGroup from '../packages/radio-group/index.js';
// import RadioGroup from '../packages/radio-group/index.js'; import RadioButton from '../packages/radio-button/index.js';
// import RadioButton from '../packages/radio-button/index.js'; import Checkbox from '../packages/checkbox/index.js';
// import Checkbox from '../packages/checkbox/index.js'; import CheckboxGroup from '../packages/checkbox-group/index.js';
// import CheckboxGroup from '../packages/checkbox-group/index.js'; import Switch from '../packages/switch/index.js';
// import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js'; import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js'; import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js'; import OptionGroup from '../packages/option-group/index.js';
// import Button from '../packages/button/index.js'; import Button from '../packages/button/index.js';
// import ButtonGroup from '../packages/button-group/index.js'; import ButtonGroup from '../packages/button-group/index.js';
// import Table from '../packages/table/index.js'; import Table from '../packages/table/index.js';
// import TableColumn from '../packages/table-column/index.js'; import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js'; import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js'; import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js'; import TimePicker from '../packages/time-picker/index.js';
// import Popover from '../packages/popover/index.js'; import Popover from '../packages/popover/index.js';
// import Tooltip from '../packages/tooltip/index.js'; import Tooltip from '../packages/tooltip/index.js';
// import MessageBox from '../packages/message-box/index.js'; import MessageBox from '../packages/message-box/index.js';
// import Breadcrumb from '../packages/breadcrumb/index.js'; import Breadcrumb from '../packages/breadcrumb/index.js';
// import BreadcrumbItem from '../packages/breadcrumb-item/index.js'; import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
// import Form from '../packages/form/index.js'; import Form from '../packages/form/index.js';
// import FormItem from '../packages/form-item/index.js'; import FormItem from '../packages/form-item/index.js';
// import Tabs from '../packages/tabs/index.js'; import Tabs from '../packages/tabs/index.js';
// import TabPane from '../packages/tab-pane/index.js'; import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js'; import Tag from '../packages/tag/index.js';
// import Tree from '../packages/tree/index.js'; import Tree from '../packages/tree/index.js';
// import Alert from '../packages/alert/index.js'; import Alert from '../packages/alert/index.js';
// import Notification from '../packages/notification/index.js'; import Notification from '../packages/notification/index.js';
// import Slider from '../packages/slider/index.js'; import Slider from '../packages/slider/index.js';
// import Loading from '../packages/loading/index.js'; import Loading from '../packages/loading/index.js';
// import Icon from '../packages/icon/index.js'; import Icon from '../packages/icon/index.js';
// import Row from '../packages/row/index.js'; import Row from '../packages/row/index.js';
// import Col from '../packages/col/index.js'; 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';
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return; if (install.installed) return;
// Vue.component(Group.name, Group); 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);
// Vue.component(Cascader.name, Cascader); Vue.component(Autocomplete.name, Autocomplete);
// Vue.component(Autocomplete.name, Autocomplete); Vue.component(Dropdown.name, Dropdown);
// Vue.component(Dropdown.name, Dropdown); Vue.component(DropdownItem.name, DropdownItem);
// Vue.component(DropdownItem.name, DropdownItem); Vue.component(Menu.name, Menu);
// Vue.component(Menu.name, Menu); Vue.component(Submenu.name, Submenu);
// Vue.component(Submenu.name, Submenu); Vue.component(MenuItem.name, MenuItem);
// Vue.component(MenuItem.name, MenuItem); Vue.component(Input.name, Input);
// Vue.component(Input.name, Input); Vue.component(InputNumber.name, InputNumber);
// Vue.component(InputNumber.name, InputNumber); Vue.component(InputGroup.name, InputGroup);
// Vue.component(InputGroup.name, InputGroup); Vue.component(Radio.name, Radio);
// Vue.component(Radio.name, Radio); Vue.component(RadioGroup.name, RadioGroup);
// Vue.component(RadioGroup.name, RadioGroup); Vue.component(RadioButton.name, RadioButton);
// Vue.component(RadioButton.name, RadioButton); Vue.component(Checkbox.name, Checkbox);
// Vue.component(Checkbox.name, Checkbox); Vue.component(CheckboxGroup.name, CheckboxGroup);
// Vue.component(CheckboxGroup.name, CheckboxGroup); Vue.component(Switch.name, Switch);
// Vue.component(Switch.name, Switch);
Vue.component(Select.name, Select); Vue.component(Select.name, Select);
Vue.component(Option.name, Option); Vue.component(Option.name, Option);
Vue.component(OptionGroup.name, OptionGroup); Vue.component(OptionGroup.name, OptionGroup);
// Vue.component(Button.name, Button); Vue.component(Button.name, Button);
// Vue.component(ButtonGroup.name, ButtonGroup); Vue.component(ButtonGroup.name, ButtonGroup);
// Vue.component(Table.name, Table); Vue.component(Table.name, Table);
// Vue.component(TableColumn.name, TableColumn); Vue.component(TableColumn.name, TableColumn);
Vue.component(DatePicker.name, DatePicker); Vue.component(DatePicker.name, DatePicker);
Vue.component(TimeSelect.name, TimeSelect); Vue.component(TimeSelect.name, TimeSelect);
Vue.component(TimePicker.name, TimePicker); Vue.component(TimePicker.name, TimePicker);
// Vue.component(Popover.name, Popover); Vue.component(Popover.name, Popover);
// Vue.component(Tooltip.name, Tooltip); Vue.component(Tooltip.name, Tooltip);
// Vue.component(Breadcrumb.name, Breadcrumb); Vue.component(Breadcrumb.name, Breadcrumb);
// Vue.component(BreadcrumbItem.name, BreadcrumbItem); Vue.component(BreadcrumbItem.name, BreadcrumbItem);
// Vue.component(Form.name, Form); Vue.component(Form.name, Form);
// Vue.component(FormItem.name, FormItem); Vue.component(FormItem.name, FormItem);
// Vue.component(Tabs.name, Tabs); Vue.component(Tabs.name, Tabs);
// Vue.component(TabPane.name, TabPane); Vue.component(TabPane.name, TabPane);
Vue.component(Tag.name, Tag); Vue.component(Tag.name, Tag);
// Vue.component(Tree.name, Tree); Vue.component(Tree.name, Tree);
// Vue.component(Alert.name, Alert); Vue.component(Alert.name, Alert);
// Vue.component(Slider.name, Slider); Vue.component(Slider.name, Slider);
// Vue.component(Icon.name, Icon); Vue.component(Icon.name, Icon);
// Vue.component(Row.name, Row); Vue.component(Row.name, Row);
// Vue.component(Col.name, Col); Vue.component(Col.name, Col);
// 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.use(Loading); // Vue.use(Loading);
@ -118,55 +116,54 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = { module.exports = {
install, install,
// Group, Group,
// SelectDropdown, SelectDropdown,
Pagination, Pagination,
// Dialog, Dialog,
// Cascader, Autocomplete,
// Autocomplete, Dropdown,
// Dropdown, DropdownItem,
// DropdownItem, Menu,
// Menu, Submenu,
// Submenu, MenuItem,
// MenuItem, Input,
// Input, InputNumber,
// InputNumber, InputGroup,
// InputGroup, Radio,
// Radio, RadioGroup,
// RadioGroup, RadioButton,
// RadioButton, Checkbox,
// Checkbox, CheckboxGroup,
// CheckboxGroup, Switch,
// Switch,
Select, Select,
Option, Option,
OptionGroup, OptionGroup,
// Button, Button,
// ButtonGroup, ButtonGroup,
// Table, Table,
// TableColumn, TableColumn,
DatePicker, DatePicker,
TimeSelect, TimeSelect,
TimePicker, TimePicker,
// Popover, Popover,
// Tooltip, Tooltip,
// MessageBox, MessageBox,
// Breadcrumb, Breadcrumb,
// BreadcrumbItem, BreadcrumbItem,
// Form, Form,
// FormItem, FormItem,
// Tabs, Tabs,
// TabPane, TabPane,
Tag Tag,
// Tree, Tree,
// Alert, Alert,
// Notification, Notification,
// Slider, Slider,
// Loading, Loading,
// Icon, Icon,
// Row, Row,
// Col, Col,
// Upload, Upload,
// Progress, Progress,
// Spinner Spinner
}; };

52
src/utils/vue-popper.js
View File

@ -34,9 +34,21 @@ export default {
} }
}, },
data() {
return {
showPopper: false
};
},
watch: { watch: {
'visible'(val) { visible: {
if (this.popperDestroying) return; immediate: true,
handler(val) {
this.showPopper = val;
}
},
showPopper(val) {
val ? this.updatePopper() : this.destroyPopper(); val ? this.updatePopper() : this.destroyPopper();
} }
}, },
@ -47,32 +59,32 @@ export default {
return; return;
} }
this.popper = this.popper || this.$refs.popper; const options = this.options;
this.reference = this.reference || this.$refs.reference; const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference;
if (!this.popper || !this.reference) {
return;
}
if (!popper || !reference) return;
if (this.visibleArrow) { if (this.visibleArrow) {
this.appendArrow(this.popper); this.appendArrow(popper);
} }
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) { if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy(); this.popperJS.destroy();
} }
this.$set('options.placement', this.placement); options.placement = this.placement;
this.$set('options.offset', this.offset); options.offset = this.offset;
this.popperJS = new PopperJS( this.$nextTick(() => {
this.reference, this.popperJS = new PopperJS(
this.popper, reference,
this.options popper,
); options
this.popperJS.onCreate(popper => { );
this.resetTransformOrigin(popper); this.popperJS.onCreate(popper => {
this.$emit('created', this); this.resetTransformOrigin(popper);
this.$emit('created', this);
});
}); });
}, },
@ -85,7 +97,7 @@ export default {
}, },
doDestroy() { doDestroy() {
if (this.visible) return; if (this.showPopper) return;
this.popperJS._popper.removeEventListener('transitionend', this.doDestroy); this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
this.popperJS.destroy(); this.popperJS.destroy();