diff --git a/package.json b/package.json index 693b47b..44ba843 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,15 @@ { "name": "ag-element-ui", - "version": "0.1.0", - "private": true, + "version": "0.1.20", + "main": "packages/index.js", "scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build", "lib": "vue-cli-service build --target lib --dest lib packages/index.js" }, "dependencies": { - "core-js": "^3.8.3" + "core-js": "^3.8.3", + "vuedraggable": "^2.24.3" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", @@ -19,9 +20,9 @@ "element-ui": "^2.15.14", "sass": "^1.32.7", "sass-loader": "^12.0.0", - "vue-template-compiler": "^2.6.14", "vue": "^2.6.14", "vue-router": "^3.5.1", + "vue-template-compiler": "^2.6.14", "vuex": "^3.6.2" }, "browserslist": [ diff --git a/packages/agColorPicker/index.js b/packages/agColorPicker/index.js new file mode 100644 index 0000000..9a44060 --- /dev/null +++ b/packages/agColorPicker/index.js @@ -0,0 +1,9 @@ +import agColorPicker from './src' + +// 为组件提供 install 安装方法,供按需引入 +agColorPicker.install = function (Vue) { + Vue.component(agColorPicker.name, agColorPicker) +} + +// 导出组件 +export default agColorPicker diff --git a/packages/agColorPicker/src/color.js b/packages/agColorPicker/src/color.js new file mode 100644 index 0000000..a392eeb --- /dev/null +++ b/packages/agColorPicker/src/color.js @@ -0,0 +1,317 @@ +const hsv2hsl = function(hue, sat, val) { + return [ + hue, + (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0, + hue / 2 + ]; +}; + +// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 +// +const isOnePointZero = function(n) { + return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1; +}; + +const isPercentage = function(n) { + return typeof n === 'string' && n.indexOf('%') !== -1; +}; + +// Take input from [0, n] and return it as [0, 1] +const bound01 = function(value, max) { + if (isOnePointZero(value)) value = '100%'; + + const processPercent = isPercentage(value); + value = Math.min(max, Math.max(0, parseFloat(value))); + + // Automatically convert percentage into number + if (processPercent) { + value = parseInt(value * max, 10) / 100; + } + + // Handle floating point rounding errors + if ((Math.abs(value - max) < 0.000001)) { + return 1; + } + + // Convert into [0, 1] range if it isn't already + return (value % max) / parseFloat(max); +}; + +const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' }; + +const toHex = function({ r, g, b }) { + const hexOne = function(value) { + value = Math.min(Math.round(value), 255); + const high = Math.floor(value / 16); + const low = value % 16; + return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low); + }; + + if (isNaN(r) || isNaN(g) || isNaN(b)) return ''; + + return '#' + hexOne(r) + hexOne(g) + hexOne(b); +}; + +const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 }; + +const parseHexChannel = function(hex) { + if (hex.length === 2) { + return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]); + } + + return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]; +}; + +const hsl2hsv = function(hue, sat, light) { + sat = sat / 100; + light = light / 100; + let smin = sat; + const lmin = Math.max(light, 0.01); + let sv; + let v; + + light *= 2; + sat *= (light <= 1) ? light : 2 - light; + smin *= lmin <= 1 ? lmin : 2 - lmin; + v = (light + sat) / 2; + sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat); + + return { + h: hue, + s: sv * 100, + v: v * 100 + }; +}; + +// `rgbToHsv` +// Converts an RGB color value to HSV +// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] +// *Returns:* { h, s, v } in [0,1] +const rgb2hsv = function(r, g, b) { + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + let h, s; + let v = max; + + const d = max - min; + s = max === 0 ? 0 : d / max; + + if (max === min) { + h = 0; // achromatic + } else { + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + + return { h: h * 360, s: s * 100, v: v * 100 }; +}; + +// `hsvToRgb` +// Converts an HSV color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] +const hsv2rgb = function(h, s, v) { + h = bound01(h, 360) * 6; + s = bound01(s, 100); + v = bound01(v, 100); + + const i = Math.floor(h); + const f = h - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); + const mod = i % 6; + const r = [v, q, p, p, t, v][mod]; + const g = [t, v, v, q, p, p][mod]; + const b = [p, p, t, v, v, q][mod]; + + return { + r: Math.round(r * 255), + g: Math.round(g * 255), + b: Math.round(b * 255) + }; +}; + +export default class Color { + constructor(options) { + this._hue = 0; + this._saturation = 100; + this._value = 100; + this._alpha = 100; + + this.enableAlpha = false; + this.format = 'hex'; + this.value = ''; + + options = options || {}; + + for (let option in options) { + if (options.hasOwnProperty(option)) { + this[option] = options[option]; + } + } + + this.doOnChange(); + } + + set(prop, value) { + if (arguments.length === 1 && typeof prop === 'object') { + for (let p in prop) { + if (prop.hasOwnProperty(p)) { + this.set(p, prop[p]); + } + } + + return; + } + + this['_' + prop] = value; + this.doOnChange(); + } + + get(prop) { + return this['_' + prop]; + } + + toRgb() { + return hsv2rgb(this._hue, this._saturation, this._value); + } + + fromString(value) { + if (!value) { + this._hue = 0; + this._saturation = 100; + this._value = 100; + + this.doOnChange(); + return; + } + + const fromHSV = (h, s, v) => { + this._hue = Math.max(0, Math.min(360, h)); + this._saturation = Math.max(0, Math.min(100, s)); + this._value = Math.max(0, Math.min(100, v)); + + this.doOnChange(); + }; + + if (value.indexOf('hsl') !== -1) { + const parts = value.replace(/hsla|hsl|\(|\)/gm, '') + .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10)); + + if (parts.length === 4) { + this._alpha = Math.floor(parseFloat(parts[3]) * 100); + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]); + fromHSV(h, s, v); + } + } else if (value.indexOf('hsv') !== -1) { + const parts = value.replace(/hsva|hsv|\(|\)/gm, '') + .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10)); + + if (parts.length === 4) { + this._alpha = Math.floor(parseFloat(parts[3]) * 100); + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + fromHSV(parts[0], parts[1], parts[2]); + } + } else if (value.indexOf('rgb') !== -1) { + const parts = value.replace(/rgba|rgb|\(|\)/gm, '') + .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10)); + + if (parts.length === 4) { + this._alpha = Math.floor(parseFloat(parts[3]) * 100); + } else if (parts.length === 3) { + this._alpha = 100; + } + if (parts.length >= 3) { + const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]); + fromHSV(h, s, v); + } + } else if (value.indexOf('#') !== -1) { + const hex = value.replace('#', '').trim(); + if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(hex)) return; + let r, g, b; + + if (hex.length === 3) { + r = parseHexChannel(hex[0] + hex[0]); + g = parseHexChannel(hex[1] + hex[1]); + b = parseHexChannel(hex[2] + hex[2]); + } else if (hex.length === 6 || hex.length === 8) { + r = parseHexChannel(hex.substring(0, 2)); + g = parseHexChannel(hex.substring(2, 4)); + b = parseHexChannel(hex.substring(4, 6)); + } + + if (hex.length === 8) { + this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100); + } else if (hex.length === 3 || hex.length === 6) { + this._alpha = 100; + } + + const { h, s, v } = rgb2hsv(r, g, b); + fromHSV(h, s, v); + } + } + + compare(color) { + return Math.abs(color._hue - this._hue) < 2 && + Math.abs(color._saturation - this._saturation) < 1 && + Math.abs(color._value - this._value) < 1 && + Math.abs(color._alpha - this._alpha) < 1; + } + + doOnChange() { + const { _hue, _saturation, _value, _alpha, format } = this; + + if (this.enableAlpha) { + switch (format) { + case 'hsl': + const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100); + this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`; + break; + case 'hsv': + this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`; + break; + default: + const { r, g, b } = hsv2rgb(_hue, _saturation, _value); + this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`; + } + } else { + switch (format) { + case 'hsl': + const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100); + this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`; + break; + case 'hsv': + this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`; + break; + case 'rgb': + const { r, g, b } = hsv2rgb(_hue, _saturation, _value); + this.value = `rgb(${r}, ${g}, ${b})`; + break; + default: + this.value = toHex(hsv2rgb(_hue, _saturation, _value)); + } + } + } +}; diff --git a/packages/agColorPicker/src/components/alpha-slider.vue b/packages/agColorPicker/src/components/alpha-slider.vue new file mode 100644 index 0000000..efeb87f --- /dev/null +++ b/packages/agColorPicker/src/components/alpha-slider.vue @@ -0,0 +1,132 @@ + + + diff --git a/packages/agColorPicker/src/components/hue-slider.vue b/packages/agColorPicker/src/components/hue-slider.vue new file mode 100644 index 0000000..c93e42c --- /dev/null +++ b/packages/agColorPicker/src/components/hue-slider.vue @@ -0,0 +1,123 @@ + + + diff --git a/packages/agColorPicker/src/components/picker-dropdown.vue b/packages/agColorPicker/src/components/picker-dropdown.vue new file mode 100644 index 0000000..9de2199 --- /dev/null +++ b/packages/agColorPicker/src/components/picker-dropdown.vue @@ -0,0 +1,128 @@ + + + diff --git a/packages/agColorPicker/src/components/predefine.vue b/packages/agColorPicker/src/components/predefine.vue new file mode 100644 index 0000000..1387c48 --- /dev/null +++ b/packages/agColorPicker/src/components/predefine.vue @@ -0,0 +1,61 @@ + + + \ No newline at end of file diff --git a/packages/agColorPicker/src/components/sv-panel.vue b/packages/agColorPicker/src/components/sv-panel.vue new file mode 100644 index 0000000..66676a6 --- /dev/null +++ b/packages/agColorPicker/src/components/sv-panel.vue @@ -0,0 +1,100 @@ + + + diff --git a/packages/agColorPicker/src/draggable.js b/packages/agColorPicker/src/draggable.js new file mode 100644 index 0000000..339a485 --- /dev/null +++ b/packages/agColorPicker/src/draggable.js @@ -0,0 +1,36 @@ +import Vue from 'vue'; +let isDragging = false; + +export default function(element, options) { + if (Vue.prototype.$isServer) return; + const moveFn = function(event) { + if (options.drag) { + options.drag(event); + } + }; + const upFn = function(event) { + document.removeEventListener('mousemove', moveFn); + document.removeEventListener('mouseup', upFn); + document.onselectstart = null; + document.ondragstart = null; + + isDragging = false; + + if (options.end) { + options.end(event); + } + }; + element.addEventListener('mousedown', function(event) { + if (isDragging) return; + document.onselectstart = function() { return false; }; + document.ondragstart = function() { return false; }; + + document.addEventListener('mousemove', moveFn); + document.addEventListener('mouseup', upFn); + isDragging = true; + + if (options.start) { + options.start(event); + } + }); +} diff --git a/packages/agColorPicker/src/index.vue b/packages/agColorPicker/src/index.vue new file mode 100644 index 0000000..1d70c21 --- /dev/null +++ b/packages/agColorPicker/src/index.vue @@ -0,0 +1,201 @@ + + + + \ No newline at end of file diff --git a/packages/agDatePicker/index.js b/packages/agDatePicker/index.js index 5dcc28b..9e40d63 100644 --- a/packages/agDatePicker/index.js +++ b/packages/agDatePicker/index.js @@ -6,4 +6,4 @@ agDatePicker.install = function (Vue) { } // 导出组件 -export default agDatePicker +export default agDatePicker; diff --git a/packages/agDatePicker/src/index.vue b/packages/agDatePicker/src/index.vue index dbd09d8..0193304 100644 --- a/packages/agDatePicker/src/index.vue +++ b/packages/agDatePicker/src/index.vue @@ -3,23 +3,23 @@ :style="{ width }" :prefix-icon="iconClass" clear-icon="ag-icon-clear" + ref="datepickerref" v-model="dateArr" v-bind="attrs" v-on="Listeners" + :size="$attrs.size||'small'" + :value="value" :type="datetype" @mouseenter.native="mousetrue = true" @mouseleave.native="mousetrue = false" /> - + + diff --git a/packages/agInput/src/index.vue b/packages/agInput/src/index.vue index e2d8eb2..cbd669d 100644 --- a/packages/agInput/src/index.vue +++ b/packages/agInput/src/index.vue @@ -1,23 +1,17 @@ - diff --git a/packages/agMultifunctionSearch/index.js b/packages/agMultifunctionSearch/index.js deleted file mode 100644 index 373c9a0..0000000 --- a/packages/agMultifunctionSearch/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import agMultifunctionSearch from './src' - -// 为组件提供 install 安装方法,供按需引入 -agMultifunctionSearch.install = function (Vue) { - Vue.component(agMultifunctionSearch.name, agMultifunctionSearch) -} - -// 导出组件 -export default agMultifunctionSearch diff --git a/packages/agMultifunctionSearch/src/index.vue b/packages/agMultifunctionSearch/src/index.vue deleted file mode 100644 index 8ff5fb8..0000000 --- a/packages/agMultifunctionSearch/src/index.vue +++ /dev/null @@ -1,252 +0,0 @@ - - - - - \ No newline at end of file diff --git a/packages/agMultionDatePicker/index.js b/packages/agMultionDatePicker/index.js new file mode 100644 index 0000000..e8be10d --- /dev/null +++ b/packages/agMultionDatePicker/index.js @@ -0,0 +1,9 @@ +import agMultionDatePicker from './src'; + +// 为组件提供 install 安装方法,供按需引入 +agMultionDatePicker.install = function (Vue) { + Vue.component(agMultionDatePicker.name, agMultionDatePicker) +} + +// 导出组件 +export default agMultionDatePicker; diff --git a/packages/agMultionDatePicker/src/index.vue b/packages/agMultionDatePicker/src/index.vue new file mode 100644 index 0000000..e04df95 --- /dev/null +++ b/packages/agMultionDatePicker/src/index.vue @@ -0,0 +1,238 @@ + + + + + \ No newline at end of file diff --git a/packages/agMultionInput/index.js b/packages/agMultionInput/index.js new file mode 100644 index 0000000..5841a80 --- /dev/null +++ b/packages/agMultionInput/index.js @@ -0,0 +1,9 @@ +import agMultionInput from './src' + +// 为组件提供 install 安装方法,供按需引入 +agMultionInput.install = function (Vue) { + Vue.component(agMultionInput.name, agMultionInput) +} + +// 导出组件 +export default agMultionInput diff --git a/packages/agMultionInput/src/index.vue b/packages/agMultionInput/src/index.vue new file mode 100644 index 0000000..e4f8dc8 --- /dev/null +++ b/packages/agMultionInput/src/index.vue @@ -0,0 +1,294 @@ + + + + + \ No newline at end of file diff --git a/packages/agMutionCheckbox/index.js b/packages/agMutionCheckbox/index.js new file mode 100644 index 0000000..58a89d5 --- /dev/null +++ b/packages/agMutionCheckbox/index.js @@ -0,0 +1,9 @@ +import agMutionCheckbox from './src'; + +// 为组件提供 install 安装方法,供按需引入 +agMutionCheckbox.install = function (Vue) { + Vue.component(agMutionCheckbox.name, agMutionCheckbox); +} + +// 导出组件 +export default agMutionCheckbox; diff --git a/packages/agMutionCheckbox/src/index.vue b/packages/agMutionCheckbox/src/index.vue new file mode 100644 index 0000000..bf4d333 --- /dev/null +++ b/packages/agMutionCheckbox/src/index.vue @@ -0,0 +1,430 @@ + + + + + \ No newline at end of file diff --git a/packages/agNumberRange/index.js b/packages/agNumberRange/index.js index aafe158..4c7169f 100644 --- a/packages/agNumberRange/index.js +++ b/packages/agNumberRange/index.js @@ -1,4 +1,4 @@ -import agNumberRange from './src' +import agNumberRange from './src'; // 为组件提供 install 安装方法,供按需引入 agNumberRange.install = function (Vue) { diff --git a/packages/agNumberRange/src/index.vue b/packages/agNumberRange/src/index.vue index b348be6..da26588 100644 --- a/packages/agNumberRange/src/index.vue +++ b/packages/agNumberRange/src/index.vue @@ -7,7 +7,7 @@ @input="handleStartInput" @blur="handleInputBlur" > - {{ rangeSeparator }} + {{ rangeSeparator||'-'}} - - - + + - - - - 取消 - 查询 - - + +
+ 取消 + 查询 +
@@ -55,50 +52,78 @@ return []; }, }, + props:{ + type: Object, + default: () => { + return { + lazyLoad (node, resolve) { + } + }; + }, + } }, - mounted(){ + model: { + prop: 'values', // 明确指定 prop 为 'value' + event: 'onSearch' // 自定义事件名,用于更新 value + }, + mounted(){ let newinput=this.inputs.map((g)=>g.label); this.placeholder="请选择"+newinput.join("/"); + if(this.props.lazyLoad){ + this.props.lazyLoad({level:0,pathLabels:this.values,value:""},(datas)=>{ + this.inputs[index+1].options=datas; + }); + } }, data() { return { values: {}, placeholderValue:"", placeholder:"请选择", - popState:false, - + popState:false, } }, methods: { - onSelect(value,item,index){ + onReset(){ + this.values={}; + this.$emit('onSearch',this.values); + }, + onSelect(value,item,index){ item.value=value; this.$set(this.inputs,index,item); let newvalues={}; + let newplaceholderValue=[]; - this.inputs.map((g)=>{ - if(g.value&&g.name){ - newvalues[g.name]=g.value; - g.options.find((f)=>f.value==g.value).label&&(newplaceholderValue.push(g.options.find((f)=>f.value==g.value).label)); + this.inputs.map((g)=>{ + if(g.value&&g.name){ + newvalues[g.name]=g.value; + g.options.find((f)=>f.value==g.value).label&&(newplaceholderValue.push(g.options.find((f)=>f.value==g.value).label)); + } + }); + this.values=newvalues; + if(this.$listeners.change){ + this.$emit('change',newvalues); + } + if(this.props.lazyLoad){ + this.props.lazyLoad({level:index+1,pathLabels:newvalues,value},(datas)=>{ + this.inputs[index+1].options=datas; + }); } - }); - this.$emit('change',newvalues); - this.values=newvalues; - this.placeholderValue=newplaceholderValue.join("/") + this.placeholderValue=newplaceholderValue.join("/") }, onCancel(){ this.popState=false; - this.$emit('cancel'); + if(this.$listeners.onCancel){ + this.$emit('onCancel'); + } }, - onQuery(){ - console.log(this.$refs.queryformref,'this.$refs.queryformref'); + onQuery(){ if(this.$refs.queryformref){ - this.$refs.queryformref.validate((valid) => { - console.log(valid,"valid"); + this.$refs.queryformref.validate((valid) => { if (valid) { this.$emit('onSearch',this.values); this.popState=false; - } else { - console.log('error submit!!'); + } else { return false; } }); @@ -120,6 +145,12 @@ caret-color: transparent; /* 隐藏光标 */ } } + .footerbox{ + display: flex; + align-items: center; + justify-content: flex-end; + margin-top:5px; + } ::v-deep { .el-form-item--small .el-form-item__label{ line-height: 40px; diff --git a/packages/agSearch/index.js b/packages/agSearch/index.js new file mode 100644 index 0000000..6c1c4d2 --- /dev/null +++ b/packages/agSearch/index.js @@ -0,0 +1,9 @@ +import agSearch from './src'; + +// 为组件提供 install 安装方法,供按需引入 +agSearch.install = function (Vue) { + Vue.component(agSearch.name, agSearch); +} + +// 导出组件 +export default agSearch; diff --git a/packages/agSearch/src/index.vue b/packages/agSearch/src/index.vue new file mode 100644 index 0000000..60d1282 --- /dev/null +++ b/packages/agSearch/src/index.vue @@ -0,0 +1,229 @@ + + + + diff --git a/packages/agSelect/src/index.vue b/packages/agSelect/src/index.vue index 5e19df2..f2427f5 100644 --- a/packages/agSelect/src/index.vue +++ b/packages/agSelect/src/index.vue @@ -1,23 +1,21 @@ + + + \ No newline at end of file diff --git a/packages/agTabs/index.js b/packages/agTabs/index.js index 68a4e78..da18b98 100644 --- a/packages/agTabs/index.js +++ b/packages/agTabs/index.js @@ -6,4 +6,4 @@ agTabs.install = function (Vue) { } // 导出组件 -export default agTabs +export default agTabs; diff --git a/packages/agTabs/src/index.vue b/packages/agTabs/src/index.vue index 325e17d..faf0f36 100644 --- a/packages/agTabs/src/index.vue +++ b/packages/agTabs/src/index.vue @@ -1,5 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/index.js b/packages/index.js index 79bd56c..f7b8cfa 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,11 +1,45 @@ // 导入组件 - import agInput from './agInput/index' - import agSelect from './agSelect/index' - + import agInput from './agInput/index'; + import agSelect from './agSelect/index'; + import agUpload from './agUpload'; + import agForm from './agForm'; + import agColorPicker from './agColorPicker'; + import agQuery from './agQuery'; + import agTable from './agTable'; + import agTabs from './agTabs'; + import agDialog from './agDialog'; + import agPagination from './agPagination'; +import agRow from './agRow'; +import agCol from './agCol'; +import agMutionCheckbox from './agMutionCheckbox'; +import agSearch from './agSearch'; +import agDatePicker from "./agDatePicker"; +import agNumberRange from "./agNumberRange"; +import agMultionDatePicker from "./agMultionDatePicker"; +import agMultionInput from "./agMultionInput"; + + // 注册组件 + // 组件列表 const components = [ agInput, - agSelect + agSelect, + agUpload, + agForm, + agColorPicker, + agQuery, + agTable, + agDialog, + agTabs, + agPagination, + agCol, + agRow, + agDatePicker, + agMutionCheckbox, + agSearch, + agNumberRange, + agMultionDatePicker, + agMultionInput ] // 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册) @@ -13,20 +47,20 @@ // 判断是否安装 if (install.installed) return // 遍历注册全局组件 - components.map(component => Vue.component(component.name, component)) + components.forEach(component => { + Vue.component(component.name, component); + }); } // 判断是否是直接引入文件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) - } - + } + export default { + version:'2.15.14', // 导出的对象必须具有 install,才能被 Vue.use() 方法安装 install, - } - export { // 以下是具体的组件列表 - agInput, - agSelect + ...components } \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index a22ec21..6b2e8ea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,15 +2,12 @@
点击打开 Dialog - - - - - + + + + + + - - + + - - + +