mirror of https://github.com/ElemeFE/element
update time-picker
qingwei.li
parent
82b4582c7e
commit
096b3559c6
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
## 固定时间点
|
||||
提供几个固定的时间点供用户选择。
|
||||
|
||||
{{value}}
|
||||
<div class="demo-box">
|
||||
<el-time-select
|
||||
:picker-options="{
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
```html
|
||||
<el-time-select
|
||||
:value.sync="value"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -37,13 +37,14 @@
|
|||
|
||||
<div class="demo-box">
|
||||
<el-time-picker
|
||||
v-model="value"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
v-model="value"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
v-model="value"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
|
@ -75,7 +76,7 @@
|
|||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
<div class="demo-box">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
```html
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -123,7 +124,7 @@
|
|||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -139,7 +140,7 @@
|
|||
<div class="demo-box">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime2"
|
||||
v-model="startTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -148,7 +149,7 @@
|
|||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime2"
|
||||
v-model="endTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -161,7 +162,7 @@
|
|||
```html
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime2"
|
||||
v-model="startTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -170,7 +171,7 @@
|
|||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime2"
|
||||
v-model="endTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
|
|
@ -201,6 +202,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startTime2: '',
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"devDependencies": {
|
||||
"babel-helper-vue-jsx-merge-props": "^1.0.1",
|
||||
"babel-plugin-syntax-jsx": "^6.8.0",
|
||||
"babel-plugin-transform-vue-jsx": "^1.1.1",
|
||||
"babel-plugin-transform-vue-jsx": "^3.1.0",
|
||||
"file-save": "^0.2.0",
|
||||
"gh-pages": "^0.11.0",
|
||||
"highlight.js": "^9.3.0",
|
||||
|
|
@ -44,8 +44,8 @@
|
|||
"purecss": "^0.6.0",
|
||||
"q": "^1.4.1",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"vue": "^2.0.0-beta.5",
|
||||
"vue-loader": "^9.2.3",
|
||||
"vue": "^2.0.0-beta.7",
|
||||
"vue-loader": "^9.3.2",
|
||||
"vue-markdown-loader": "^0.4.0",
|
||||
"vue-popup": "^0.1.8",
|
||||
"vue-router": "^2.0.0-beta.2"
|
||||
|
|
|
|||
|
|
@ -12,10 +12,9 @@
|
|||
"author": "long.zhang@ele.me",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"wind-dom": "0.0.3",
|
||||
"vue-clickoutside": "*"
|
||||
"wind-dom": "0.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^1.0.0"
|
||||
"vue": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div class="el-time-spinner">
|
||||
{{hours}}
|
||||
<div
|
||||
@mouseenter="emitSelectRange('hours')"
|
||||
class="el-time-spinner__wrapper"
|
||||
v-el:hour>
|
||||
ref="hour">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
|
||||
v-for="(hour, disabled) in hoursList"
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="$index"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }"
|
||||
|
|
@ -16,29 +18,30 @@
|
|||
<div
|
||||
@mouseenter="emitSelectRange('minutes')"
|
||||
class="el-time-spinner__wrapper"
|
||||
v-el:minute>
|
||||
ref="minute">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('minutes', minute, true)"
|
||||
v-for="minute in 60"
|
||||
@click="handleClick('minutes', key, true)"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': minute === minutes }"
|
||||
v-text="minute"></li>
|
||||
:class="{ 'active': key === minutes }"
|
||||
v-text="key"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
@mouseenter="emitSelectRange('seconds')"
|
||||
class="el-time-spinner__wrapper"
|
||||
v-el:second>
|
||||
ref="second">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('seconds', second, true)"
|
||||
v-for="second in 60"
|
||||
@click="handleClick('seconds', key, true)"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': second === seconds }"
|
||||
v-text="second"></li>
|
||||
:class="{ 'active': key === seconds }"
|
||||
v-text="key"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/ecmascript-6">
|
||||
|
|
@ -70,27 +73,28 @@
|
|||
},
|
||||
|
||||
watch: {
|
||||
hours(newVal, oldVal) {
|
||||
hoursPrivate(newVal, oldVal) {
|
||||
if (!(newVal >= 0 && newVal <= 23)) {
|
||||
this.hours = oldVal;
|
||||
this.hoursPrivate = oldVal;
|
||||
}
|
||||
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
|
||||
this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
|
||||
|
||||
this.$emit('change', { hours: newVal });
|
||||
},
|
||||
|
||||
minutes(newVal, oldVal) {
|
||||
minutesPrivate(newVal, oldVal) {
|
||||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.minutes = oldVal;
|
||||
this.minutesPrivate = oldVal;
|
||||
}
|
||||
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
|
||||
this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
|
||||
this.$emit('change', { minutes: newVal });
|
||||
},
|
||||
|
||||
seconds(newVal, oldVal) {
|
||||
secondsPrivate(newVal, oldVal) {
|
||||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.seconds = oldVal;
|
||||
this.secondsPrivate = oldVal;
|
||||
}
|
||||
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
|
||||
this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
|
||||
this.$emit('change', { seconds: newVal });
|
||||
}
|
||||
},
|
||||
|
|
@ -101,9 +105,17 @@
|
|||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
hoursPrivate: 0,
|
||||
minutesPrivate: 0,
|
||||
secondsPrivate: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
focusEditor(type) {
|
||||
const editor = this.$els[type + 'Editor'];
|
||||
const editor = this.$refs[type + 'Editor'];
|
||||
if (editor) {
|
||||
editor.focus();
|
||||
}
|
||||
|
|
@ -114,7 +126,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
this[type] = value.value >= 0 ? value.value : value;
|
||||
this[type + 'Private'] = value.value >= 0 ? value.value : value;
|
||||
|
||||
this.emitSelectRange(type);
|
||||
},
|
||||
|
|
@ -130,9 +142,9 @@
|
|||
},
|
||||
|
||||
ajustScrollTop() {
|
||||
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
|
||||
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
|
||||
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
|
||||
this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
|
||||
this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
|
||||
this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
type="text"
|
||||
class="el-date-picker__editor">
|
||||
<time-picker
|
||||
v-ref:timepicker
|
||||
ref="timepicker"
|
||||
:date="date"
|
||||
@pick="handleTimePick"
|
||||
v-show="timePickerVisible">
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
:disabled-date="disabledDate">
|
||||
</date-table>
|
||||
<year-table
|
||||
v-ref:year-table
|
||||
ref="yearTable"
|
||||
:year="year"
|
||||
v-show="currentView === 'year'"
|
||||
@pick="handleYearPick">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="el-time-range-picker__header">开始时间</div>
|
||||
<div class="el-time-range-picker__body el-time-panel__content">
|
||||
<time-spinner
|
||||
v-ref:min-spinner
|
||||
ref="minSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
@change="handleMinChange"
|
||||
@select-range="setMinSelectionRange"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="el-time-range-picker__header">结束时间</div>
|
||||
<div class="el-time-range-picker__body el-time-panel__content">
|
||||
<time-spinner
|
||||
v-ref:max-spinner
|
||||
ref="maxSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
@change="handleMaxChange"
|
||||
@select-range="setMaxSelectionRange"
|
||||
|
|
|
|||
|
|
@ -99,7 +99,6 @@
|
|||
handleClick(item) {
|
||||
if (!item.disabled) {
|
||||
this.$emit('pick', item.value);
|
||||
this.value = item.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
class="el-time-panel">
|
||||
<div class="el-time-panel__content">
|
||||
<time-spinner
|
||||
v-ref:spinner
|
||||
ref="spinner"
|
||||
@change="handleChange"
|
||||
:show-seconds="showSeconds"
|
||||
@select-range="setSelectionRange"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
@select-range="setSelectionRange"
|
||||
:seconds="seconds">
|
||||
</time-spinner>
|
||||
</div>
|
||||
|
|
@ -34,12 +34,6 @@
|
|||
},
|
||||
|
||||
props: {
|
||||
date: {
|
||||
default() {
|
||||
return new Date();
|
||||
}
|
||||
},
|
||||
|
||||
format: {
|
||||
default: 'HH:mm:ss'
|
||||
},
|
||||
|
|
@ -61,51 +55,18 @@
|
|||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
date: new Date(),
|
||||
hours: 0,
|
||||
minutes: 0,
|
||||
seconds: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showSeconds() {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
|
||||
hours: {
|
||||
get() {
|
||||
if (this.date) {
|
||||
return this.date.getHours();
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
set(hours) {
|
||||
if (this.date) {
|
||||
this.date.setHours(hours);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
minutes: {
|
||||
get() {
|
||||
if (this.date) {
|
||||
return this.date.getMinutes();
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
set(minutes) {
|
||||
if (this.date) {
|
||||
this.date.setMinutes(minutes);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
seconds: {
|
||||
get() {
|
||||
if (this.date) {
|
||||
return this.date.getSeconds();
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
set(seconds) {
|
||||
if (this.date) {
|
||||
this.date.setSeconds(seconds);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -115,9 +76,19 @@
|
|||
},
|
||||
|
||||
handleChange(date) {
|
||||
if (date.hours !== undefined) this.hours = date.hours;
|
||||
if (date.minutes !== undefined) this.minutes = date.minutes;
|
||||
if (date.seconds !== undefined) this.seconds = date.seconds;
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
|
||||
this.handleConfirm(true);
|
||||
},
|
||||
|
||||
|
|
@ -147,7 +118,13 @@
|
|||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
created() {
|
||||
this.hours = this.date.getHours();
|
||||
this.minutes = this.date.getMinutes();
|
||||
this.seconds = this.date.getSeconds();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$refs.spinner.selectableRange = this.selectableRange;
|
||||
this.$nextTick(() => this.handleConfirm(true, true));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
<template>
|
||||
<span
|
||||
class="el-date-editor"
|
||||
v-clickoutside="pickerVisible = false"
|
||||
v-clickoutside="handleClose"
|
||||
:class="{
|
||||
'is-have-trigger': haveTrigger,
|
||||
'is-active': pickerVisible,
|
||||
'is-filled': !!this.value,
|
||||
'is-lg': size === 'lg', 'is-sm': size === 'sm'
|
||||
'is-filled': !!this.value
|
||||
}">
|
||||
|
||||
<input
|
||||
lazy
|
||||
class="el-date-editor__editor"
|
||||
:readonly="readonly"
|
||||
:type="editorType"
|
||||
:placeholder="placeholder"
|
||||
:style="{ height: height ? height + 'px' : '' }"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keydown="handleKeydown($event)"
|
||||
@keyup="handleKeyup($event)"
|
||||
v-el:reference
|
||||
v-model="visualValue" />
|
||||
@keydown="handleKeydown"
|
||||
@keyup="handleKeyup"
|
||||
ref="reference"
|
||||
v-model.lazy="visualValue" />
|
||||
|
||||
<span
|
||||
@click="togglePicker()"
|
||||
class="el-date-editor__trigger el-icon {{triggerClass}}"
|
||||
class="el-date-editor__trigger el-icon"
|
||||
:class="[triggerClass]"
|
||||
v-if="haveTrigger">
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -33,6 +31,7 @@
|
|||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Clickoutside from 'main/utils/clickoutside';
|
||||
import { merge, formatDate, parseDate, getWeekNumber } from './util';
|
||||
import Popper from 'main/utils/popper.js';
|
||||
|
||||
|
|
@ -189,7 +188,7 @@ export default {
|
|||
},
|
||||
|
||||
directives: {
|
||||
clickoutside: require('vue-clickoutside')
|
||||
Clickoutside
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -254,11 +253,11 @@ export default {
|
|||
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
|
||||
|
||||
if (parsedValue) {
|
||||
this.value = parsedValue;
|
||||
this.$emit('input', parsedValue);
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.value = value;
|
||||
this.$emit('input', value);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -268,6 +267,10 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.pickerVisible = false;
|
||||
},
|
||||
|
||||
handleFocus() {
|
||||
const type = this.type;
|
||||
|
||||
|
|
@ -331,7 +334,8 @@ export default {
|
|||
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
|
||||
|
||||
if (!parsedValue) return;
|
||||
this.picker.value = this.value = parsedValue;
|
||||
this.picker.value = parsedValue;
|
||||
this.$emit('input', parsedValue);
|
||||
|
||||
if (this.type.indexOf('date') > -1) return;
|
||||
|
||||
|
|
@ -389,8 +393,7 @@ export default {
|
|||
showPicker() {
|
||||
if (!this.picker) {
|
||||
this.picker = new Vue(merge({
|
||||
el: document.createElement('div'),
|
||||
replace: true
|
||||
el: document.createElement('div')
|
||||
}, this.panel));
|
||||
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
|
||||
this.picker.selectionMode = this.selectionMode;
|
||||
|
|
@ -427,7 +430,7 @@ export default {
|
|||
this.picker.resetView && this.picker.resetView();
|
||||
|
||||
this.picker.$on('pick', (date, visible = false) => {
|
||||
this.value = date;
|
||||
this.$emit('input', date);
|
||||
|
||||
if (!visible) {
|
||||
this.pickerVisible = this.picker.visible = false;
|
||||
|
|
@ -437,8 +440,8 @@ export default {
|
|||
|
||||
this.picker.$on('select-range', (start, end) => {
|
||||
setTimeout(() => {
|
||||
this.$els.reference.setSelectionRange(start, end);
|
||||
this.$els.reference.focus();
|
||||
this.$refs.reference.setSelectionRange(start, end);
|
||||
this.$refs.reference.focus();
|
||||
}, 0);
|
||||
});
|
||||
} else {
|
||||
|
|
@ -451,7 +454,7 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
this.popper = new Popper(this.$els.reference, this.picker.$el, {
|
||||
this.popper = new Popper(this.$refs.reference, this.picker.$el, {
|
||||
gpuAcceleration: false,
|
||||
placement: 'bottom-start',
|
||||
boundariesPadding: 0,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b time-spinner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@b spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
270
src/index.js
270
src/index.js
|
|
@ -1,106 +1,106 @@
|
|||
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 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 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 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 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 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 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';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
|
||||
Vue.component(Group.name, Group);
|
||||
Vue.component(SelectDropdown.name, SelectDropdown);
|
||||
Vue.component(Pagination.name, Pagination);
|
||||
Vue.component(Dialog.name, Dialog);
|
||||
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(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(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(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(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(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(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.use(Loading);
|
||||
|
||||
|
|
@ -118,55 +118,55 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
|
||||
module.exports = {
|
||||
install,
|
||||
Group,
|
||||
SelectDropdown,
|
||||
Pagination,
|
||||
Dialog,
|
||||
Cascader,
|
||||
Autocomplete,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
Menu,
|
||||
Submenu,
|
||||
MenuItem,
|
||||
Input,
|
||||
InputNumber,
|
||||
InputGroup,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
// Group,
|
||||
// SelectDropdown,
|
||||
// Pagination,
|
||||
// Dialog,
|
||||
// Cascader,
|
||||
// Autocomplete,
|
||||
// Dropdown,
|
||||
// DropdownItem,
|
||||
// Menu,
|
||||
// Submenu,
|
||||
// MenuItem,
|
||||
// Input,
|
||||
// InputNumber,
|
||||
// InputGroup,
|
||||
// Radio,
|
||||
// RadioGroup,
|
||||
// RadioButton,
|
||||
// Checkbox,
|
||||
// CheckboxGroup,
|
||||
// Switch,
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
TableColumn,
|
||||
// OptionGroup,
|
||||
// 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
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue