mirror of https://github.com/ElemeFE/element
Fix conflict
qingwei.li
commit
0c8159cd8a
|
|
@ -11,9 +11,6 @@
|
|||
"dialog": [
|
||||
"./packages/dialog/index.js"
|
||||
],
|
||||
"cascader": [
|
||||
"./packages/cascader/index.js"
|
||||
],
|
||||
"autocomplete": [
|
||||
"./packages/autocomplete/index.js"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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,32 +67,28 @@
|
|||
|
||||
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) {
|
||||
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.value.indexOf(query.toLowerCase()) === 0);
|
||||
return (state.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
mounted() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
|
|
@ -87,24 +98,25 @@
|
|||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state1"
|
||||
:suggestions = "querySearch(state1)"
|
||||
placeholder = "请输入内容"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-autocomplete
|
||||
:value.sync = "state1"
|
||||
:suggestions = "querySearch(state1)"
|
||||
placeholder = "请输入内容"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
></el-autocomplete>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
states: [],
|
||||
state1: ''
|
||||
}
|
||||
},
|
||||
|
|
@ -130,62 +142,71 @@
|
|||
|
||||
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();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 通过键盘控制下拉的显示
|
||||
## 自定义模板
|
||||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state2"
|
||||
:suggestions = "querySearch(state2)"
|
||||
:show-on-up-down = "true"
|
||||
placeholder = "请输入内容"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
custom-item="my-item"
|
||||
placeholder="请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-autocomplete
|
||||
:value.sync = "state2"
|
||||
:suggestions = "querySearch(state2)"
|
||||
:show-on-up-down = "true"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</template>
|
||||
<el-autocomplete
|
||||
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 {
|
||||
states: [],
|
||||
state2: ''
|
||||
}
|
||||
},
|
||||
|
|
@ -211,116 +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() {
|
||||
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() {
|
||||
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 []; }
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states;
|
||||
|
||||
deferred = $q.defer();
|
||||
if (!query) { return []; }
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
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) | | |
|
||||
|
|
|
|||
|
|
@ -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 | 关闭当前实例 |
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<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';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,5 +12,6 @@
|
|||
"author": "haiping.zeng<haiping.zeng@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-clickoutside": "^0.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,54 @@
|
|||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,18 +6,12 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ElBreadcrumbItem',
|
||||
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
separator: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
ready() {
|
||||
mounted() {
|
||||
this.separator = this.$parent.separator;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,16 +12,6 @@
|
|||
type: String,
|
||||
default: '/'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
ready() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"vue-popup": "^0.1.8"
|
||||
"vue-popup": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
<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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,8 +106,11 @@
|
|||
},
|
||||
|
||||
watch: {
|
||||
'value'(val) {
|
||||
this.currentValue = val;
|
||||
'value': {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
'currentValue'(val) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-popup": "^0.1.8"
|
||||
"vue-popup": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<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) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.el-notification-fade-leave {
|
||||
.el-notification-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
<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>
|
||||
|
||||
|
|
|
|||
251
src/index.js
251
src/index.js
|
|
@ -1,106 +1,104 @@
|
|||
// 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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
options.placement = this.placement;
|
||||
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);
|
||||
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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue