Skip to content

E
Element
Commit 0c8159cd authored by qingwei.li's avatar qingwei.li
Browse files
Options

Fix conflict

parents 6ad98f7e af71d7b7
Hide whitespace changes
Inline Side-by-side
Showing with 752 additions and 755 deletions
components.json
View file @ 0c8159cd
......@@ -11,9 +11,6 @@
"dialog": [
"./packages/dialog/index.js"
],
"cascader": [
"./packages/cascader/index.js"
],
"autocomplete": [
"./packages/autocomplete/index.js"
],
......
examples/docs/autocomplete.md
View file @ 0c8159cd
......@@ -3,9 +3,7 @@
.el-autocomplete {
width: 180px;
}
.el-autocomplete__suggestions.my-autocomplete-suggestions {
width: 300px;
.my-suggestions-item {
& .remark {
float: right;
font-size: 13px;
......@@ -14,8 +12,28 @@
}
</style>
<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 {
data() {
return {
......@@ -24,10 +42,7 @@
state2: '',
state3: '',
state4: '',
myPartial: {
name: 'my-autocomplete-suggestions',
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
}
timeout: null
}
},
methods: {
......@@ -52,141 +67,57 @@
return result;
},
querySearch(query, simulateQuery) {
querySearch(queryString, cb) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
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();
}
};
</script>
## 基础使用
<div class="demo-box">
<el-autocomplete
:value.sync = "state1"
:suggestions = "querySearch(state1)"
placeholder = "请输入内容"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
:value.sync = "state1"
:suggestions = "querySearch(state1)"
placeholder = "请输入内容"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
state1: ''
}
},
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;
cb(results);
},
querySearch(query, simulateQuery) {
querySearchAsync(queryString, cb) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
if (simulateQuery) {
if (!query) { return []; }
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(query) {
createStateFilter(queryString) {
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 = "state2"
:suggestions = "querySearch(state2)"
:show-on-up-down = "true"
placeholder = "请输入内容"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
:value.sync = "state2"
:suggestions = "querySearch(state2)"
:show-on-up-down = "true"
placeholder = "请输入内容"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
state2: ''
states: [],
state1: ''
}
},
methods: {
......@@ -211,32 +142,19 @@
return result;
},
querySearch(query, simulateQuery) {
querySearch(queryString, callback) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
if (simulateQuery) {
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
callback(results);
},
createStateFilter(query) {
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0);
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
ready() {
mounted() {
this.states = this.loadAll();
}
};
......@@ -247,30 +165,49 @@
<div class="demo-box">
<el-autocomplete
:value.sync = "state3"
:suggestions = "querySearch(state3)"
:partial = "myPartial"
placeholder = "请输入内容"
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<el-autocomplete
:value.sync = "state3"
:suggestions = "querySearch(state3)"
:partial = "myPartial"
placeholder = "请输入内容"
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
<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 {
data() {
return {
state3: '',
myPartial: {
name: 'my-autocomplete-suggestions',
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
}
states: [],
state2: ''
}
},
methods: {
......@@ -295,32 +232,19 @@
return result;
},
querySearch(query, simulateQuery) {
querySearch(queryString, cb) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
if (simulateQuery) {
if (!query) { return []; }
deferred = $q.defer();
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
return deferred.promise;
} else {
return results;
}
cb(results);
},
createStateFilter(query) {
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0);
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
ready() {
mounted() {
this.states = this.loadAll();
}
};
......@@ -331,27 +255,26 @@
<div class="demo-box">
<el-autocomplete
:value.sync = "state4"
:suggestions = "querySearch(state4, true)"
:search-from-server = "true"
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</div>
```html
<el-autocomplete
:value.sync = "state4"
:suggestions = "querySearch(state4, true)"
:search-from-server = "true"
placeholder = "请输入内容"
></el-autocomplete>
<template>
<el-autocomplete
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</template>
<script>
var $q = require('q');
export default {
data() {
return {
state4: ''
state3: '',
states: []
}
},
methods: {
......@@ -376,24 +299,15 @@
return result;
},
querySearch(query, simulateQuery) {
querySearchAsync(query, callback) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states,
deferred;
if (simulateQuery) {
if (!query) { return []; }
deferred = $q.defer();
var results = query ? states.filter(this.createStateFilter(query)) : states;
setTimeout(() => {
deferred.resolve(results);
}, Math.random() * 3000, false);
if (!query) { return []; }
return deferred.promise;
} else {
return results;
}
setTimeout(() => {
callback(results);
}, 3000 * Math.random());
},
createStateFilter(query) {
return (state) => {
......@@ -413,7 +327,6 @@
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | | |
| disabled | 禁用 | boolean | true, false | false |
| suggestions | 建议列表 | array,object | | |
| value | 输入绑定值 | string | | |
| value | 必填值输入绑定值 | string | | |
| showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | |
| partial | 建议列表的自定义模板 | object | | |
| fetch-suggestions | 返回输入建议的方法，组件内部通过调用该方法来获得输入建议的数据，在该方法中，仅当你的输入建议数据 resolve 时再通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | | |
examples/docs/dialog.md
View file @ 0c8159cd
......@@ -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">
<el-dialog title="提示" :visible.sync="dialogVisible">
<el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
```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 slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span>
</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">
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
<el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
```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 slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
<el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span>
</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">
<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">
</el-dialog>
</div>
```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">
</el-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">
<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>
</el-dialog>
</div>
```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>
</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">
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
......@@ -158,11 +164,11 @@
</el-dialog>
</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">
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :models="form" v-ref:form>
<el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item>
......@@ -174,16 +180,16 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
<el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
```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-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
......@@ -191,10 +197,10 @@
</el-table>
</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-form :models="form" v-ref:form>
<el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item>
......@@ -206,8 +212,8 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
<el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span>
</el-dialog>
```
......@@ -226,3 +232,10 @@
|------|--------|
| - | dialog 的内容 |
| footer | dialog 按钮操作区的内容 |
## 方法
每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
examples/docs/input-number.md
View file @ 0c8159cd
......@@ -21,45 +21,45 @@
<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
<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>
```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">
<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
<el-input-number v-model="num1" :disabled="true"></el-input-number>
</div>
```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">
<el-input-number :value.sync="num2" :step="2"></el-input-number>
<el-input-number v-model="num2" :step="2"></el-input-number>
</div>
```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">
<el-input-number :value.sync="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number>
<el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number v-model="num1" size="small"></el-input-number>
</div>
```html
<el-input-number :value.sync="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number>
<el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number v-model="num1"></el-input-number>
<el-input-number v-model="num1" size="small"></el-input-number>
```
## API
......
examples/docs/message-box.md
View file @ 0c8159cd
......@@ -65,11 +65,11 @@
</script>
## 基本用法
<el-button @click="open">打开 Alert</el-button>
<el-button @click.native="open">打开 Alert</el-button>
```html
<template>
<el-button @click="open">打开 Message Box</el-button>
<el-button @click.native="open">打开 Message Box</el-button>
</template>
<script>
......@@ -85,11 +85,11 @@
## 返回 Promise
<el-button @click="open2">打开 alert</el-button>
<el-button @click.native="open2">打开 alert</el-button>
```html
<template>
<el-button @click="open4">打开 alert</el-button>
<el-button @click.native="open2">打开 alert</el-button>
</template>
<script>
......@@ -105,11 +105,11 @@
</script>
```
<el-button @click="open3">打开 confirm</el-button>
<el-button @click.native="open3">打开 confirm</el-button>
```html
<template>
<el-button @click="open5">打开 confirm</el-button>
<el-button @click.native="open3">打开 confirm</el-button>
</template>
<script>
......@@ -132,11 +132,11 @@
}
</script>
```
<el-button @click="open4">打开 prompt</el-button>
<el-button @click.native="open4">打开 prompt</el-button>
```html
<template>
<el-button @click="open6">打开 prompt</el-button>
<el-button @click.native="open4">打开 prompt</el-button>
</template>
<script>
......@@ -157,11 +157,11 @@
</script>
```
<el-button @click="open5">打开 Message Box</el-button>
<el-button @click.native="open5">打开 Message Box</el-button>
```html
<template>
<el-button @click="open3">打开 Message Box</el-button>
<el-button @click.native="open5">打开 Message Box</el-button>
</template>
<script>
......@@ -183,11 +183,11 @@
## 更多配置项
<el-button @click="open6">打开 Message Box</el-button>
<el-button @click.native="open6">打开 Message Box</el-button>
```html
<template>
<el-button @click="open2">打开 Message Box</el-button>
<el-button @click.native="open6">打开 Message Box</el-button>
</template>
<script>
......
examples/docs/notification.md
View file @ 0c8159cd
......@@ -74,12 +74,12 @@
## 基本用法
<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>
```html
<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>
<script>
......@@ -99,18 +99,18 @@
## 带有 icon
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button>
<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>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button>
<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>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
</template>
<script>
......@@ -154,12 +154,12 @@
## 不会自动关闭
<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>
```html
<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>
<script>
......@@ -179,12 +179,12 @@
## 回调函数
<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>
```html
<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>
<script>
......
examples/docs/popover.md
View file @ 0c8159cd
......@@ -117,7 +117,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover1
ref="popover1"
placement="top-start"
title="标题"
width="200"
......@@ -126,7 +126,7 @@
</el-popover>
<el-popover
v-ref:popover2
ref="popover2"
placement="bottom"
title="标题"
width="200"
......@@ -135,7 +135,7 @@
</el-popover>
<el-popover
v-ref:popover3
ref="popover3"
placement="right"
title="标题"
width="200"
......@@ -146,13 +146,13 @@
<el-button v-popover:popover1>hover 激活</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>
```html
<el-popover
v-ref:popover1
ref="popover1"
placement="top-start"
title="标题"
width="200"
......@@ -161,7 +161,7 @@
</el-popover>
<el-popover
v-ref:popover2
ref="popover2"
placement="bottom"
title="标题"
width="200"
......@@ -170,7 +170,7 @@
</el-popover>
<el-popover
v-ref:popover3
ref="popover3"
placement="right"
title="标题"
width="200"
......@@ -188,7 +188,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover4
ref="popover4"
placement="right"
width="400"
trigger="click">
......@@ -204,7 +204,7 @@
```html
<el-popover
v-ref:popover4
ref="popover4"
placement="right"
width="400"
trigger="click">
......@@ -224,7 +224,7 @@
<div class="demo-box demo-popover">
<el-popover
v-ref:popover5
ref="popover5"
placement="top"
width="160"
:visible.sync="visible2">
......@@ -240,7 +240,7 @@
```html
<el-popover
v-ref:popover5
ref="popover5"
placement="top"
width="160"
:visible.sync="visible2">
......
examples/docs/slider.md
View file @ 0c8159cd
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null
};
},
methods: {
onChange(value) {
console.log(value);
......@@ -10,55 +21,55 @@
## 基本用法
<el-slider></el-slider>
<el-slider v-model="value1"></el-slider>
```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
<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
<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
<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
<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
<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
<template>
......
examples/docs/tooltip.md
View file @ 0c8159cd
......@@ -30,73 +30,49 @@
}
</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="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-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-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-tooltip>
</div>
<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-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-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-tooltip>
</div>
<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-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-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-tooltip>
</div>
<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-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-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-tooltip>
</div>
......
package.json
View file @ 0c8159cd
......@@ -9,7 +9,7 @@
],
"scripts": {
"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",
"gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
"prepublish": "make dist"
......@@ -46,8 +46,9 @@
"uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.7",
"vue-loader": "^9.3.2",
"vue": "^2.0.0-beta.8",
"vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.1.8",
"vue-popup": "^0.2.1",
"vue-router": "^2.0.0-beta.2"
}
}
packages/alert/src/main.vue
View file @ 0c8159cd
<template>
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
<div class="el-alert__content">
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
<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>
<transition name="el-alert-fade">
<div class="el-alert" :class="[ typeClass ]" v-show="visible">
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<div class="el-alert__content">
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
<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>
</transition>
</template>
<script type="text/babel">
......@@ -60,6 +62,10 @@
},
computed: {
typeClass() {
return `el-alert--${ this.type }`;
},
iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
},
......
packages/autocomplete/package.json
View file @ 0c8159cd
......@@ -12,5 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
"vue-clickoutside": "^0.1.0"
}
}
packages/autocomplete/src/autocomplete.vue
View file @ 0c8159cd
<template>
<div class="el-autocomplete">
<div class="el-autocomplete" v-clickoutside="handleBlur">
<el-input
:value="value"
:disabled="disabled"
:placeholder="placeholder"
:name = 'name'
:name='name'
@onchange="handleChange"
@onfocus="handleFocus()"
@onblur="handleBlur()"
@keydown.up="highlight(highlightedIndex - 1)"
@keydown.down="highlight(highlightedIndex + 1)"
@keydown.enter="select(highlightedIndex)"
@onfocus="handleFocus"
@keydown.up.native="highlight(highlightedIndex - 1)"
@keydown.down.native="highlight(highlightedIndex + 1)"
@keydown.enter.native="select(highlightedIndex)"
></el-input>
<ul
v-show="showSuggestions && !loading && suggestions.length > 0"
class="el-autocomplete__suggestions"
:class="[partial ? partial.name : '']"
transition="md-fade-bottom"
v-el:suggestions
>
<li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li>
</ul>
<div
v-show="showSuggestions && loading"
class="el-autocomplete__suggestions is-loading"
>
<i class="el-icon-loading"></i>
</div>
<transition name="md-fade-bottom">
<ul
v-show="suggestionVisible && !loading && suggestions.length > 0"
class="el-autocomplete__suggestions"
ref="suggestions"
>
<li
v-if="!customItem"
:class="{'highlighted': highlightedIndex === index}"
@click="select(index)"
v-for="(item, index) in suggestions">
{{item.display}}
</li>
<component
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>
</template>
<script>
import ElInput from 'packages/input/index.js';
import Vue from 'vue';
import VueClickoutside from 'main/utils/clickoutside';
Vue.use(VueClickoutside);
export default {
name: 'ElAutocomplete',
......@@ -42,61 +60,58 @@
placeholder: String,
disabled: Boolean,
name: String,
suggestions: [Array, Object],
value: String,
showOnUpDown: Boolean,
partial: Object
fetchSuggestions: Function,
triggerOnfocus: {
type: Boolean,
default: true
},
customItem: String
},
data() {
return {
showSuggestions: false,
suggestions: [],
suggestionVisible: false,
inputFocusing: false,
loading: false,
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: {
handleChange(value) {
this.value = value;
this.showSuggestions = true;
this.$emit('input', value);
this.showSuggestions(value);
},
handleFocus() {
if (!this.showOnUpDown) {
this.showSuggestions = true;
if (this.triggerOnfocus) {
this.showSuggestions(this.value);
}
},
handleBlur() {
this.showSuggestions = false;
this.suggestionVisible = false;
},
select(index) {
debugger;
if (this.suggestions && this.suggestions[index]) {
this.value = this.suggestions[index].value;
this.$emit('input', this.suggestions[index].value);
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) {
if (!this.suggestions || !this.suggestions[index]) {
return null;
} else {
return this.$els.suggestions.children[index];
return this.$refs.suggestions.children[index];
}
},
highlight(index) {
......@@ -107,7 +122,7 @@
}
var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$els.suggestions;
var elSuggestions = this.$refs.suggestions;
var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop;
......@@ -121,7 +136,7 @@
this.highlightedIndex = index;
if (this.showOnUpDown) {
this.showSuggestions = true;
this.suggestionVisible = true;
}
}
}
......
packages/breadcrumb/src/breadcrumb-item.vue
View file @ 0c8159cd
......@@ -6,18 +6,12 @@
<script>
export default {
name: 'ElBreadcrumbItem',
props: {
},
data() {
return {
separator: ''
};
},
methods: {
},
ready() {
mounted() {
this.separator = this.$parent.separator;
}
};
......
packages/breadcrumb/src/breadcrumb.vue
View file @ 0c8159cd
......@@ -12,16 +12,6 @@
type: String,
default: '/'
}
},
data() {
return {
};
},
methods: {
},
ready() {
}
};
</script>
packages/dialog/package.json
View file @ 0c8159cd
......@@ -12,6 +12,6 @@
"author": "elemefe",
"license": "MIT",
"devDependencies": {
"vue-popup": "^0.1.8"
"vue-popup": "^0.2.1"
}
}
packages/dialog/src/component.vue
View file @ 0c8159cd
<template>
<div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick">
<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__header">
<span class="el-dialog__title">{{title}}</span>
<div class="el-dialog__headerbtn">
<i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
<transition name="dialog-fade">
<div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
<div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
<div class="el-dialog__header">
<span class="el-dialog__title">{{title}}</span>
<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 class="el-dialog__body"><slot></slot></div>
<slot name="footer"></slot>
</div>
</div>
</transition>
</template>
<script>
......@@ -60,9 +64,14 @@
},
watch: {
visible(val) {
value(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: {
handleWrapperClick() {
if (this.closeOnClickModal) {
this.visible = false;
this.$emit('input', false);
}
},
......@@ -85,8 +94,8 @@
}
},
ready() {
if (this.visible) {
mounted() {
if (this.value) {
this.rendered = true;
this.open();
}
......
packages/input-number/src/input-number.vue
View file @ 0c8159cd
......@@ -6,8 +6,8 @@
]"
>
<el-input
:value="value"
@onchange="handleChnage"
v-model="currentValue"
@onchange="handleChange"
:disabled="disabled"
:size="size"
:number="true"
......@@ -18,17 +18,17 @@
<span
class="el-input-number__decrease el-icon-minus"
:class="{'is-disabled': minDisabled}"
v-repeat-click="decrease()"
v-repeat-click="decrease"
@mouseenter="activeInput(minDisabled)"
@mouseleave="unactiveInput(minDisabled)"
@mouseleave="inactiveInput(minDisabled)"
>
</span>
<span
class="el-input-number__increase el-icon-plus"
:class="{'is-disabled': maxDisabled}"
v-repeat-click="increase()"
v-repeat-click="increase"
@mouseenter="activeInput(maxDisabled)"
@mouseleave="unactiveInput(maxDisabled)"
@mouseleave="inactiveInput(maxDisabled)"
>
</span>
</div>
......@@ -41,8 +41,7 @@
name: 'ElInputNumber',
props: {
value: {
type: Number,
required: true
type: Number
},
step: {
type: Number,
......@@ -61,13 +60,12 @@
},
directives: {
repeatClick: {
bind() {
const el = this.el;
bind(el, binding, vnode) {
let interval = null;
let startTime;
const handler = () => {
this.vm.$get(this.expression);
vnode.context[binding.expression]();
};
const clear = function() {
......@@ -93,9 +91,23 @@
},
data() {
return {
currentValue: null,
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: {
minDisabled() {
return this.value - this.step < this.min;
......@@ -107,14 +119,14 @@
methods: {
increase() {
if (this.value + this.step > this.max || this.disabled) return;
this.value += this.step;
this.currentValue += this.step;
if (this.maxDisabled) {
this.inputActive = false;
}
},
decrease() {
if (this.value - this.step < this.min || this.disabled) return;
this.value -= this.step;
this.currentValue -= this.step;
if (this.minDisabled) {
this.inputActive = false;
}
......@@ -124,12 +136,12 @@
this.inputActive = true;
}
},
unactiveInput(disabled) {
inactiveInput(disabled) {
if (!this.disabled && !disabled) {
this.inputActive = false;
}
},
handleChnage(value) {
handleChange(value) {
this.$emit('onchange', value);
}
}
......
packages/input/src/input.vue
View file @ 0c8159cd
......@@ -106,8 +106,11 @@
},
watch: {
'value'(val) {
this.currentValue = val;
'value': {
immediate: true,
handler(val) {
this.currentValue = val;
}
},
'currentValue'(val) {
......
packages/message-box/package.json
View file @ 0c8159cd
......@@ -12,6 +12,6 @@
"author": "elemefe",
"license": "MIT",
"dependencies": {
"vue-popup": "^0.1.8"
"vue-popup": "^0.2.1"
}
}
packages/message-box/src/main.js
View file @ 0c8159cd
......@@ -88,7 +88,7 @@ var showNextMsg = function() {
initInstance();
}
if (!instance.visible || instance.closeTimer) {
if (!instance.value || instance.closeTimer) {
if (msgQueue.length > 0) {
currentMsg = msgQueue.shift();
......@@ -98,10 +98,15 @@ var showNextMsg = function() {
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(() => {
instance.visible = true;
instance.value = true;
});
}
}
......@@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
};
MessageBox.close = function() {
instance.visible = false;
instance.value = false;
msgQueue = [];
currentMsg = null;
};
......
packages/message-box/src/main.vue
View file @ 0c8159cd
<template>
<div class="el-message-box__wrapper">
<div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
<div class="el-message-box__header" v-if="title !== ''">
<div class="el-message-box__title">{{ title }}</div>
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
</div>
<div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__status {{ typeClass }}"></div>
<div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__input" v-show="showInput">
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
<transition name="msgbox-bounce">
<div class="el-message-box" v-show="value">
<div class="el-message-box__header" v-if="title !== ''">
<div class="el-message-box__title">{{ title }}</div>
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
</div>
<div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__input" v-show="showInput">
<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 class="el-message-box__btns">
<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>
</transition>
</div>
</template>
......@@ -34,8 +36,6 @@
import Popup from 'vue-popup';
export default {
name: 'el-message-box',
mixins: [ Popup ],
props: {
......@@ -68,12 +68,27 @@
},
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) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return;
}
var callback = this.callback;
this.visible = false;
this.value = false;
callback(action);
},
......@@ -109,11 +124,11 @@
}
},
visible(val) {
value(val) {
if (val && this.$type === 'prompt') {
setTimeout(() => {
if (this.$els.input) {
this.$els.input.focus();
if (this.$refs.input) {
this.$refs.input.focus();
}
}, 500);
}
......
packages/notification/src/main.js
View file @ 0c8159cd
import Vue from 'vue';
var NotificationConstructor = Vue.extend(require('./main.vue'));
let NotificationConstructor = Vue.extend(require('./main.vue'));
var instance;
var instances = [];
var seed = 1;
let instance;
let instances = [];
let seed = 1;
var Notification = function(options) {
options = options || {};
var userOnClose = options.onClose;
var id = 'notification_' + seed++;
let userOnClose = options.onClose;
let id = 'notification_' + seed++;
options.onClose = function() {
Notification.close(id, userOnClose);
......@@ -19,11 +19,12 @@ var Notification = function(options) {
});
instance.id = id;
instance.vm = instance.$mount();
instance.vm.$appendTo('body');
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
var topDist = 0;
for (var i = 0, len = instances.length; i < len; i++) {
let topDist = 0;
for (let i = 0, len = instances.length; i < len; i++) {
topDist += instances[i].$el.offsetHeight + 16;
}
topDist += 16;
......@@ -32,13 +33,15 @@ var Notification = function(options) {
};
Notification.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]);
}
var index = i;
var removedHeight = instances[i].dom.offsetHeight;
index = i;
removedHeight = instances[i].dom.offsetHeight;
instances.splice(i, 1);
break;
}
......@@ -46,7 +49,7 @@ Notification.close = function(id, userOnClose) {
if (len > 1) {
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';
}
}
};
......
packages/notification/src/main.vue
View file @ 0c8159cd
<template>
<div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<span>{{ title }}</span>
<p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
<transition name="el-notification-fade">
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<span>{{ title }}</span>
<p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
</div>
</div>
</div>
</transition>
</template>
<script type="text/babel">
......@@ -18,10 +20,9 @@
};
export default {
name: 'ElNotification',
data() {
return {
visible: false,
title: '',
message: '',
duration: 4500,
......@@ -36,14 +37,18 @@
computed: {
typeClass() {
return this.type ? typeMap[this.type] : '';
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
}
},
watch: {
closed(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) {
this.timer = setTimeout(() => {
if (!this.closed) {
......
packages/popover/src/main.vue
View file @ 0c8159cd
<template>
<div
class="el-popover"
v-el:popper
v-show="visible"
:transition="transition"
:style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot>
</div>
<transition :name="transition">
<div
class="el-popover"
ref="popper"
v-show="showPopper"
:style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot>
</div>
</transition>
</template>
<script>
......@@ -16,10 +17,8 @@ import Vue from 'vue';
import { on, off } from 'wind-dom/src/event';
Vue.directive('popover', {
update() {
this.vm.$nextTick(() => {
this.vm.$refs[this.arg].reference = this.el;
});
bind(el, binding, vnode) {
vnode.context.$refs[binding.arg].$refs.reference = el;
}
});
......@@ -36,9 +35,7 @@ export default {
},
title: String,
content: String,
reference: {
default: 'body'
},
reference: {},
width: {},
visibleArrow: {
default: true
......@@ -56,61 +53,64 @@ export default {
}
},
ready() {
mounted() {
let _timer;
const reference = this.reference || this.$refs.reference;
this.$nextTick(() => {
if (this.trigger === 'click') {
on(this.reference, 'click', () => { this.visible = !this.visible; });
on(reference, 'click', () => { this.showPopper = !this.showPopper; });
on(document, 'click', (e) => {
if (!this.$el ||
!this.reference ||
!reference ||
this.$el.contains(e.target) ||
this.reference.contains(e.target)) return;
this.visible = false;
reference.contains(e.target)) return;
this.showPopper = false;
});
} else if (this.trigger === 'hover') {
on(this.reference, 'mouseenter', () => {
this.visible = true;
on(reference, 'mouseenter', () => {
this.showPopper = true;
clearTimeout(_timer);
});
on(this.reference, 'mouseleave', () => {
on(reference, 'mouseleave', () => {
_timer = setTimeout(() => {
this.visible = false;
this.showPopper = false;
}, 200);
});
} else {
if (this.reference.hasChildNodes()) {
const children = this.reference.childNodes;
if ([].slice.call(reference.children).length) {
const children = reference.childNodes;
for (let i = 0; i < children.length; i++) {
if (children[i].nodeName === 'INPUT') {
on(children[i], 'focus', () => { this.visible = true; });
on(children[i], 'blur', () => { this.visible = false; });
on(children[i], 'focus', () => { this.showPopper = true; });
on(children[i], 'blur', () => { this.showPopper = false; });
break;
}
}
} else if (
this.reference.nodeName === 'INPUT' ||
this.reference.nodeName === 'TEXTAREA'
reference.nodeName === 'INPUT' ||
reference.nodeName === 'TEXTAREA'
) {
on(this.reference, 'focus', () => { this.visible = true; });
on(this.reference, 'blur', () => { this.visible = false; });
on(reference, 'focus', () => { this.showPopper = true; });
on(reference, 'blur', () => { this.showPopper = false; });
} else {
on(this.reference, 'mousedown', () => { this.visible = true; });
on(this.reference, 'mouseup', () => { this.visible = false; });
on(reference, 'mousedown', () => { this.showPopper = true; });
on(reference, 'mouseup', () => { this.showPopper = false; });
}
}
});
},
destroyed() {
off(this.reference, 'mouseup');
off(this.reference, 'mousedown');
off(this.reference, 'focus');
off(this.reference, 'blur');
off(this.reference, 'mouseleave');
off(this.reference, 'mouseenter');
const reference = this.reference || this.$refs.reference;
off(reference, 'mouseup');
off(reference, 'mousedown');
off(reference, 'focus');
off(reference, 'blur');
off(reference, 'mouseleave');
off(reference, 'mouseenter');
}
};
</script>
packages/slider/src/main.vue
View file @ 0c8159cd
<template>
<div class="el-slider">
<el-input-number
:value.sync="value"
v-model="inputValue"
v-if="showInput"
class="el-slider__input"
@keyup="onInputChange()"
v-el:input
@keyup.native="onInputChange()"
ref="input"
:step="step"
:min="min"
:max="max"
......@@ -13,12 +13,14 @@
</el-input-number>
<div class="el-slider__runway"
: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__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>
<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>
</div>
......@@ -69,6 +71,8 @@
data() {
return {
inputValue: null,
timeout: null,
showTip: false,
hovering: false,
dragging: false,
......@@ -80,18 +84,22 @@
},
watch: {
inputValue(val) {
this.$emit('input', val);
},
showTip(val) {
if (val) {
this.$nextTick(() => {
this.updatePopper();
});
} else {
setTimeout(() => {
this.timeout = setTimeout(() => {
if (this.popper) {
this.popper.destroy();
this.popper = null;
}
}, 150);
}, 300);
}
},
......@@ -100,30 +108,37 @@
this.updatePopper();
});
if (val < this.min) {
this.value = this.min;
this.$emit('input', this.min);
return;
}
if (val > this.max) {
this.value = this.max;
this.$emit('input', this.max);
return;
}
this.inputValue = val;
this.setPosition((val - this.min) * 100 / (this.max - this.min));
}
},
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() {
if (this.popper) {
clearTimeout(this.timeout);
this.popper.update();
this.handlePopperStyle();
} 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(() => {
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 }`;
this.handlePopperStyle();
});
this.updatePopper();
}
......@@ -133,7 +148,7 @@
if (newPos >= 0 && (newPos <= 100)) {
var lengthPerStep = 100 / ((this.max - this.min) / this.step);
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 + '%';
if (!this.dragging) {
if (this.value !== this.oldValue) {
......@@ -146,8 +161,7 @@
onSliderClick(event) {
var currentX = event.clientX;
var sliderOffsetLeft;
getStyle(this.$el.parentNode, 'position') === 'static' ? sliderOffsetLeft = this.$els.slider.offsetLeft : sliderOffsetLeft = this.$el.parentNode.offsetLeft + this.$els.slider.offsetLeft;
var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
this.setPosition(newPos);
},
......@@ -164,7 +178,7 @@
computed: {
$sliderWidth() {
return parseInt(getStyle(this.$els.slider, 'width'), 10);
return parseInt(getStyle(this.$refs.slider, 'width'), 10);
},
showTip() {
......@@ -183,7 +197,7 @@
}
},
compiled() {
mounted() {
var startX = 0;
var currentX = 0;
var startPos = 0;
......@@ -212,7 +226,7 @@
}
};
this.$els.button.addEventListener('mousedown', function(event) {
this.$refs.button.addEventListener('mousedown', function(event) {
onDragStart(event);
window.addEventListener('mousemove', onDragging);
window.addEventListener('mouseup', onDragEnd);
......@@ -220,9 +234,10 @@
},
created() {
if (this.value < this.min || this.value > this.max) {
this.value = this.min;
if (typeof this.value !== 'number' || this.value < this.min || this.value > this.max) {
this.$emit('input', this.min);
}
this.inputValue = this.inputValue || this.value;
},
beforeDestroy() {
......
packages/theme-default/src/alert.css
View file @ 0c8159cd
......@@ -15,6 +15,7 @@
color: #fff;
opacity: 1;
display: table;
transition: opacity .2s;
@modifier success {
background-color: #13ce66;
......@@ -78,12 +79,8 @@
}
}
.el-alert-fade-transition {
transition: opacity .2s;
}
.el-alert-fade-enter,
.el-alert-fade-leave {
.el-alert-fade-leave-active {
opacity: 0;
}
}
packages/theme-default/src/common/transition.css
View file @ 0c8159cd
......@@ -6,11 +6,16 @@
transition: var(--fade-transition);
}
.fade-in-linear-transition {
.fade-in-linear-enter-active {
opacity: 1;
transition: var(--fade-linear-transition);
}
.fade-in-linear-leave-active {
opacity: 0;
transition: var(--fade-linear-transition);
}
.fade-in-enter,
.fade-in-leave,
.fade-in-linear-enter,
......@@ -23,28 +28,28 @@
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.md-fade-center-enter,
.md-fade-center-leave {
opacity: 0;
transform: scaleY(0);
}
.md-fade-center-leave,
.md-fade-center-leave-active {
opacity: 0;
transform: scaleY(0);
}
.md-fade-bottom-transition {
.md-fade-bottom-enter-active,
.md-fade-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--md-fade-transition);
transform-origin: center top;
}
.md-fade-bottom-enter,
.md-fade-bottom-leave {
.md-fade-bottom-leave,
.md-fade-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
.md-fade-top-transition {
.md-fade-top-enter-active,
.md-fade-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--md-fade-transition);
......@@ -52,40 +57,47 @@
}
.md-fade-top-enter,
.md-fade-top-leave {
.md-fade-top-leave,
.md-fade-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
.md-fade-left-transition {
.md-fade-left-enter-active,
.md-fade-left-leave-active {
opacity: 1;
transform: scaleX(1);
transition: var(--md-fade-transition);
transform-origin: right center;
}
.md-fade-left-enter,
.md-fade-left-leave {
.md-fade-left-leave,
.md-fade-left-leave-active {
opacity: 0;
transform: scaleX(0);
}
.md-fade-right-transition {
.md-fade-right-enter-active,
.md-fade-right-leave-active {
opacity: 1;
transform: scaleX(1);
transition: var(--md-fade-transition);
transform-origin: left center;
}
.md-fade-right-enter,
.md-fade-right-leave {
.md-fade-right-leave,
.md-fade-right-leave-active {
opacity: 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);
}
.fade-enter,
.fade-leave {
.fade-leave,
.fade-leave-active {
opacity: 0;
}
......
packages/theme-default/src/dialog.css
View file @ 0c8159cd
......@@ -8,7 +8,6 @@
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
......@@ -69,20 +68,18 @@
float: right;
}
& *[slot=footer] {
@e footer {
padding: 10px 20px 15px;
text-align: right;
width: 100%;
display: block;
box-sizing: border-box;
}
}
.dialog-fade-enter {
.dialog-fade-enter-active {
animation: dialog-fade-in .3s;
}
.dialog-fade-leave {
.dialog-fade-leave-active {
animation: dialog-fade-out .3s;
}
......
packages/theme-default/src/message-box.css
View file @ 0c8159cd
......@@ -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);
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);
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
......
packages/theme-default/src/notification.css
View file @ 0c8159cd
......@@ -72,7 +72,7 @@
right: 0;
}
.el-notification-fade-leave {
.el-notification-fade-leave-active {
opacity: 0;
}
}
packages/theme-default/src/slider.css
View file @ 0c8159cd
......@@ -74,6 +74,8 @@
color: #fff;
cursor: default;
z-index: var(--index-top);
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
&::before {
triangle: 9px top #20A0FF;
......@@ -106,13 +108,8 @@
transform: translateX(-50%);
}
.popper-fade-transition {
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
}
.popper-fade-enter,
.popper-fade-leave {
.popper-fade-leave-active {
transform: scale(0.1);
opacity: 0;
}
......
packages/tooltip/src/main.vue
View file @ 0c8159cd
<template>
<div
class="el-tooltip"
@mouseenter="visible = true"
@mouseleave="visible = false">
<div class="el-tooltip__rel" v-el:reference>
@mouseenter="showPopper = true"
@mouseleave="showPopper = false">
<div class="el-tooltip__rel" ref="reference">
<slot></slot>
</div>
<div
class="el-tooltip__popper"
:class="['is-' + effect]"
v-el:popper
v-show="!disabled && visible"
:transition="transition">
<slot name="content"><div v-text="content"></div></slot>
</div>
<transition :name="transition">
<div
class="el-tooltip__popper"
:class="['is-' + effect]"
ref="popper"
v-show="!disabled && showPopper">
<slot name="content"><div v-text="content"></div></slot>
</div>
</transition>
</div>
</template>
......
src/index.js
View file @ 0c8159cd
// import Group from '../packages/group/index.js';
// import SelectDropdown from '../packages/select-dropdown/index.js';
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';
// import Cascader from '../packages/cascader/index.js';
// import Autocomplete from '../packages/autocomplete/index.js';
// import Dropdown from '../packages/dropdown/index.js';
// import DropdownItem from '../packages/dropdown-item/index.js';
// import Menu from '../packages/menu/index.js';
// import Submenu from '../packages/submenu/index.js';
// import MenuItem from '../packages/menu-item/index.js';
// import Input from '../packages/input/index.js';
// import InputNumber from '../packages/input-number/index.js';
// import InputGroup from '../packages/input-group/index.js';
// import Radio from '../packages/radio/index.js';
// import RadioGroup from '../packages/radio-group/index.js';
// import RadioButton from '../packages/radio-button/index.js';
// import Checkbox from '../packages/checkbox/index.js';
// import CheckboxGroup from '../packages/checkbox-group/index.js';
// import Switch from '../packages/switch/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';
import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js';
import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js';
import InputGroup from '../packages/input-group/index.js';
import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js';
// import Button from '../packages/button/index.js';
// import ButtonGroup from '../packages/button-group/index.js';
// import Table from '../packages/table/index.js';
// import TableColumn from '../packages/table-column/index.js';
import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js';
// import Popover from '../packages/popover/index.js';
// import Tooltip from '../packages/tooltip/index.js';
// import MessageBox from '../packages/message-box/index.js';
// import Breadcrumb from '../packages/breadcrumb/index.js';
// import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
// import Form from '../packages/form/index.js';
// import FormItem from '../packages/form-item/index.js';
// import Tabs from '../packages/tabs/index.js';
// import TabPane from '../packages/tab-pane/index.js';
import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js';
// import Tree from '../packages/tree/index.js';
// import Alert from '../packages/alert/index.js';
// import Notification from '../packages/notification/index.js';
// import Slider from '../packages/slider/index.js';
// import Loading from '../packages/loading/index.js';
// import Icon from '../packages/icon/index.js';
// import Row from '../packages/row/index.js';
// 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 Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js';
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';
const install = function(Vue) {
if (install.installed) return;
// Vue.component(Group.name, Group);
// Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination);
// Vue.component(Dialog.name, Dialog);
// Vue.component(Cascader.name, Cascader);
// Vue.component(Autocomplete.name, Autocomplete);
// Vue.component(Dropdown.name, Dropdown);
// Vue.component(DropdownItem.name, DropdownItem);
// Vue.component(Menu.name, Menu);
// Vue.component(Submenu.name, Submenu);
// Vue.component(MenuItem.name, MenuItem);
// Vue.component(Input.name, Input);
// Vue.component(InputNumber.name, InputNumber);
// Vue.component(InputGroup.name, InputGroup);
// Vue.component(Radio.name, Radio);
// Vue.component(RadioGroup.name, RadioGroup);
// Vue.component(RadioButton.name, RadioButton);
// Vue.component(Checkbox.name, Checkbox);
// Vue.component(CheckboxGroup.name, CheckboxGroup);
// Vue.component(Switch.name, Switch);
Vue.component(Dialog.name, Dialog);
Vue.component(Autocomplete.name, Autocomplete);
Vue.component(Dropdown.name, Dropdown);
Vue.component(DropdownItem.name, DropdownItem);
Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem);
Vue.component(Input.name, Input);
Vue.component(InputNumber.name, InputNumber);
Vue.component(InputGroup.name, InputGroup);
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
Vue.component(RadioButton.name, RadioButton);
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
Vue.component(Switch.name, Switch);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(OptionGroup.name, OptionGroup);
// Vue.component(Button.name, Button);
// Vue.component(ButtonGroup.name, ButtonGroup);
// Vue.component(Table.name, Table);
// Vue.component(TableColumn.name, TableColumn);
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn);
Vue.component(DatePicker.name, DatePicker);
Vue.component(TimeSelect.name, TimeSelect);
Vue.component(TimePicker.name, TimePicker);
// Vue.component(Popover.name, Popover);
// Vue.component(Tooltip.name, Tooltip);
// Vue.component(Breadcrumb.name, Breadcrumb);
// Vue.component(BreadcrumbItem.name, BreadcrumbItem);
// Vue.component(Form.name, Form);
// Vue.component(FormItem.name, FormItem);
// Vue.component(Tabs.name, Tabs);
// Vue.component(TabPane.name, TabPane);
Vue.component(Popover.name, Popover);
Vue.component(Tooltip.name, Tooltip);
Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem);
Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem);
Vue.component(Tabs.name, Tabs);
Vue.component(TabPane.name, TabPane);
Vue.component(Tag.name, Tag);
// Vue.component(Tree.name, Tree);
// Vue.component(Alert.name, Alert);
// Vue.component(Slider.name, Slider);
// Vue.component(Icon.name, Icon);
// Vue.component(Row.name, Row);
// Vue.component(Col.name, Col);
// Vue.component(Upload.name, Upload);
// Vue.component(Progress.name, Progress);
// Vue.component(Spinner.name, Spinner);
Vue.component(Tree.name, Tree);
Vue.component(Alert.name, Alert);
Vue.component(Slider.name, Slider);
Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
// Vue.use(Loading);
......@@ -118,55 +116,54 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = {
install,
// Group,
// SelectDropdown,
Group,
SelectDropdown,
Pagination,
// Dialog,
// Cascader,
// Autocomplete,
// Dropdown,
// DropdownItem,
// Menu,
// Submenu,
// MenuItem,
// Input,
// InputNumber,
// InputGroup,
// Radio,
// RadioGroup,
// RadioButton,
// Checkbox,
// CheckboxGroup,
// Switch,
Dialog,
Autocomplete,
Dropdown,
DropdownItem,
Menu,
Submenu,
MenuItem,
Input,
InputNumber,
InputGroup,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
// Button,
// ButtonGroup,
// Table,
// TableColumn,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
// Popover,
// Tooltip,
// MessageBox,
// Breadcrumb,
// BreadcrumbItem,
// Form,
// FormItem,
// Tabs,
// TabPane,
Tag
// Tree,
// Alert,
// Notification,
// Slider,
// Loading,
// Icon,
// Row,
// Col,
// Upload,
// Progress,
// Spinner
Popover,
Tooltip,
MessageBox,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Notification,
Slider,
Loading,
Icon,
Row,
Col,
Upload,
Progress,
Spinner
};
src/utils/vue-popper.js
View file @ 0c8159cd
......@@ -34,9 +34,21 @@ export default {
}
},
data() {
return {
showPopper: false
};
},
watch: {
'visible'(val) {
if (this.popperDestroying) return;
visible: {
immediate: true,
handler(val) {
this.showPopper = val;
}
},
showPopper(val) {
val ? this.updatePopper() : this.destroyPopper();
}
},
......@@ -47,32 +59,32 @@ export default {
return;
}
this.popper = this.popper || this.$refs.popper;
this.reference = this.reference || this.$refs.reference;
if (!this.popper || !this.reference) {
return;
}
const options = this.options;
const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference;
if (!popper || !reference) return;
if (this.visibleArrow) {
this.appendArrow(this.popper);
this.appendArrow(popper);
}
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy();
}
this.$set('options.placement', this.placement);
this.$set('options.offset', this.offset);
this.popperJS = new PopperJS(
this.reference,
this.popper,
this.options
);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$emit('created', this);
options.placement = this.placement;
options.offset = this.offset;
this.$nextTick(() => {
this.popperJS = new PopperJS(
reference,
popper,
options
);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$emit('created', this);
});
});
},
......@@ -85,7 +97,7 @@ export default {
},
doDestroy() {
if (this.visible) return;
if (this.showPopper) return;
this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
this.popperJS.destroy();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment