xt-element-ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.common.js +112 -10
- package/lib/index.umd.js +112 -10
- package/lib/index.umd.min.js +1 -1
- package/package.json +13 -5
- package/src/index.js +106 -10
- package/docs/.vuepress/config.js +0 -23
- package/docs/.vuepress/enhanceApp.js +0 -8
- package/docs/README.md +0 -6
- package/docs/components/base/button.md +0 -5
- package/docs/components/base/input.md +0 -22
- package/examples/App.vue +0 -13
- package/examples/favicon.ico +0 -0
- package/examples/index.html +0 -11
- package/examples/main.js +0 -9
- package/vue.config.js +0 -46
package/lib/index.common.js
CHANGED
|
@@ -59,8 +59,14 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
59
59
|
ElementUI: () => (/* reexport */ (external_ElementUI_default())),
|
|
60
60
|
Vue: () => (/* reexport */ (external_Vue_default())),
|
|
61
61
|
"default": () => (/* binding */ entry_lib),
|
|
62
|
+
getConfig: () => (/* reexport */ getConfig),
|
|
63
|
+
getPrimaryColor: () => (/* reexport */ getPrimaryColor),
|
|
62
64
|
getSize: () => (/* reexport */ getSize),
|
|
63
65
|
getTheme: () => (/* reexport */ getTheme),
|
|
66
|
+
onConfigChange: () => (/* reexport */ onConfigChange),
|
|
67
|
+
resetConfig: () => (/* reexport */ resetConfig),
|
|
68
|
+
setConfig: () => (/* reexport */ setConfig),
|
|
69
|
+
setPrimaryColor: () => (/* reexport */ setPrimaryColor),
|
|
64
70
|
setSize: () => (/* reexport */ setSize),
|
|
65
71
|
setTheme: () => (/* reexport */ setTheme)
|
|
66
72
|
});
|
|
@@ -278,6 +284,11 @@ var input_component = normalizeComponent(
|
|
|
278
284
|
// 导入 Vue
|
|
279
285
|
|
|
280
286
|
|
|
287
|
+
// 在导入 Element UI 之前,先将 Vue 设置为全局变量
|
|
288
|
+
if (typeof window !== 'undefined') {
|
|
289
|
+
window.Vue = (external_Vue_default())
|
|
290
|
+
}
|
|
291
|
+
|
|
281
292
|
// 导入 Element UI 并注册
|
|
282
293
|
|
|
283
294
|
|
|
@@ -286,8 +297,6 @@ var input_component = normalizeComponent(
|
|
|
286
297
|
|
|
287
298
|
|
|
288
299
|
|
|
289
|
-
|
|
290
|
-
|
|
291
300
|
// 存储组件列表
|
|
292
301
|
const components = [
|
|
293
302
|
src_components_button,
|
|
@@ -308,7 +317,6 @@ const install = function (Vue) {
|
|
|
308
317
|
})
|
|
309
318
|
}
|
|
310
319
|
|
|
311
|
-
|
|
312
320
|
// 支持全局 script 标签引入
|
|
313
321
|
if (typeof window !== 'undefined' && window.Vue) {
|
|
314
322
|
install(window.Vue)
|
|
@@ -327,27 +335,121 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|
|
327
335
|
// 导出 Vue 和 ElementUI 以便用户使用
|
|
328
336
|
|
|
329
337
|
|
|
330
|
-
//
|
|
338
|
+
// 默认配置
|
|
339
|
+
const defaultConfig = {
|
|
340
|
+
theme: 'light',
|
|
341
|
+
size: 'medium',
|
|
342
|
+
primaryColor: '#1890ff'
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
// 当前配置
|
|
346
|
+
let currentConfig = { ...defaultConfig }
|
|
347
|
+
|
|
348
|
+
// 配置变更事件处理
|
|
349
|
+
const configChangeListeners = []
|
|
350
|
+
|
|
351
|
+
const emitConfigChange = function(key, value) {
|
|
352
|
+
configChangeListeners.forEach(listener => {
|
|
353
|
+
listener(key, value)
|
|
354
|
+
})
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
// 获取所有配置
|
|
358
|
+
const getConfig = function() {
|
|
359
|
+
return { ...currentConfig }
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
// 设置全局配置
|
|
363
|
+
const setConfig = function(config) {
|
|
364
|
+
if (typeof config !== 'object' || config === null) {
|
|
365
|
+
console.warn('[XtElementUI] setConfig 必须传入对象参数')
|
|
366
|
+
return
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
if (config.theme !== undefined) {
|
|
370
|
+
setTheme(config.theme)
|
|
371
|
+
}
|
|
372
|
+
if (config.size !== undefined) {
|
|
373
|
+
setSize(config.size)
|
|
374
|
+
}
|
|
375
|
+
if (config.primaryColor !== undefined) {
|
|
376
|
+
setPrimaryColor(config.primaryColor)
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
// 设置主题
|
|
331
381
|
const setTheme = function(theme) {
|
|
332
382
|
const validThemes = ['light', 'dark', 'compact']
|
|
333
|
-
if (validThemes.includes(theme)) {
|
|
334
|
-
|
|
383
|
+
if (!validThemes.includes(theme)) {
|
|
384
|
+
console.warn(`[XtElementUI] 无效的主题值: ${theme},可选值: ${validThemes.join(', ')}`)
|
|
385
|
+
return
|
|
335
386
|
}
|
|
387
|
+
|
|
388
|
+
currentConfig.theme = theme
|
|
389
|
+
document.documentElement.setAttribute('data-theme', theme)
|
|
390
|
+
emitConfigChange('theme', theme)
|
|
336
391
|
}
|
|
337
392
|
|
|
393
|
+
// 设置字体大小
|
|
338
394
|
const setSize = function(size) {
|
|
339
395
|
const validSizes = ['small', 'medium', 'large']
|
|
340
|
-
if (validSizes.includes(size)) {
|
|
341
|
-
|
|
396
|
+
if (!validSizes.includes(size)) {
|
|
397
|
+
console.warn(`[XtElementUI] 无效的大小值: ${size},可选值: ${validSizes.join(', ')}`)
|
|
398
|
+
return
|
|
342
399
|
}
|
|
400
|
+
|
|
401
|
+
currentConfig.size = size
|
|
402
|
+
document.documentElement.setAttribute('data-size', size)
|
|
403
|
+
emitConfigChange('size', size)
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// 设置主色调
|
|
407
|
+
const setPrimaryColor = function(color) {
|
|
408
|
+
// 简单的颜色格式验证
|
|
409
|
+
const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
|
|
410
|
+
if (!colorRegex.test(color)) {
|
|
411
|
+
console.warn(`[XtElementUI] 无效的颜色值: ${color},请使用十六进制颜色格式,如 #1890ff`)
|
|
412
|
+
return
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
currentConfig.primaryColor = color
|
|
416
|
+
document.documentElement.style.setProperty('--xt-color-primary', color)
|
|
417
|
+
emitConfigChange('primaryColor', color)
|
|
343
418
|
}
|
|
344
419
|
|
|
420
|
+
// 获取当前主题
|
|
345
421
|
const getTheme = function() {
|
|
346
|
-
return
|
|
422
|
+
return currentConfig.theme
|
|
347
423
|
}
|
|
348
424
|
|
|
425
|
+
// 获取当前字体大小
|
|
349
426
|
const getSize = function() {
|
|
350
|
-
return
|
|
427
|
+
return currentConfig.size
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
// 获取当前主色调
|
|
431
|
+
const getPrimaryColor = function() {
|
|
432
|
+
return currentConfig.primaryColor
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
// 重置为默认配置
|
|
436
|
+
const resetConfig = function() {
|
|
437
|
+
setConfig(defaultConfig)
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
// 监听配置变更
|
|
441
|
+
const onConfigChange = function(listener) {
|
|
442
|
+
if (typeof listener === 'function') {
|
|
443
|
+
configChangeListeners.push(listener)
|
|
444
|
+
return function() {
|
|
445
|
+
const index = configChangeListeners.indexOf(listener)
|
|
446
|
+
if (index > -1) {
|
|
447
|
+
configChangeListeners.splice(index, 1)
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
} else {
|
|
451
|
+
console.warn('[XtElementUI] onConfigChange 必须传入函数')
|
|
452
|
+
}
|
|
351
453
|
}
|
|
352
454
|
;// ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
|
|
353
455
|
|
package/lib/index.umd.js
CHANGED
|
@@ -108,8 +108,14 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
108
108
|
ElementUI: () => (/* reexport */ (external_ElementUI_default())),
|
|
109
109
|
Vue: () => (/* reexport */ (external_Vue_default())),
|
|
110
110
|
"default": () => (/* binding */ entry_lib),
|
|
111
|
+
getConfig: () => (/* reexport */ getConfig),
|
|
112
|
+
getPrimaryColor: () => (/* reexport */ getPrimaryColor),
|
|
111
113
|
getSize: () => (/* reexport */ getSize),
|
|
112
114
|
getTheme: () => (/* reexport */ getTheme),
|
|
115
|
+
onConfigChange: () => (/* reexport */ onConfigChange),
|
|
116
|
+
resetConfig: () => (/* reexport */ resetConfig),
|
|
117
|
+
setConfig: () => (/* reexport */ setConfig),
|
|
118
|
+
setPrimaryColor: () => (/* reexport */ setPrimaryColor),
|
|
113
119
|
setSize: () => (/* reexport */ setSize),
|
|
114
120
|
setTheme: () => (/* reexport */ setTheme)
|
|
115
121
|
});
|
|
@@ -327,6 +333,11 @@ var input_component = normalizeComponent(
|
|
|
327
333
|
// 导入 Vue
|
|
328
334
|
|
|
329
335
|
|
|
336
|
+
// 在导入 Element UI 之前,先将 Vue 设置为全局变量
|
|
337
|
+
if (typeof window !== 'undefined') {
|
|
338
|
+
window.Vue = (external_Vue_default())
|
|
339
|
+
}
|
|
340
|
+
|
|
330
341
|
// 导入 Element UI 并注册
|
|
331
342
|
|
|
332
343
|
|
|
@@ -335,8 +346,6 @@ var input_component = normalizeComponent(
|
|
|
335
346
|
|
|
336
347
|
|
|
337
348
|
|
|
338
|
-
|
|
339
|
-
|
|
340
349
|
// 存储组件列表
|
|
341
350
|
const components = [
|
|
342
351
|
src_components_button,
|
|
@@ -357,7 +366,6 @@ const install = function (Vue) {
|
|
|
357
366
|
})
|
|
358
367
|
}
|
|
359
368
|
|
|
360
|
-
|
|
361
369
|
// 支持全局 script 标签引入
|
|
362
370
|
if (typeof window !== 'undefined' && window.Vue) {
|
|
363
371
|
install(window.Vue)
|
|
@@ -376,27 +384,121 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|
|
376
384
|
// 导出 Vue 和 ElementUI 以便用户使用
|
|
377
385
|
|
|
378
386
|
|
|
379
|
-
//
|
|
387
|
+
// 默认配置
|
|
388
|
+
const defaultConfig = {
|
|
389
|
+
theme: 'light',
|
|
390
|
+
size: 'medium',
|
|
391
|
+
primaryColor: '#1890ff'
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
// 当前配置
|
|
395
|
+
let currentConfig = { ...defaultConfig }
|
|
396
|
+
|
|
397
|
+
// 配置变更事件处理
|
|
398
|
+
const configChangeListeners = []
|
|
399
|
+
|
|
400
|
+
const emitConfigChange = function(key, value) {
|
|
401
|
+
configChangeListeners.forEach(listener => {
|
|
402
|
+
listener(key, value)
|
|
403
|
+
})
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// 获取所有配置
|
|
407
|
+
const getConfig = function() {
|
|
408
|
+
return { ...currentConfig }
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
// 设置全局配置
|
|
412
|
+
const setConfig = function(config) {
|
|
413
|
+
if (typeof config !== 'object' || config === null) {
|
|
414
|
+
console.warn('[XtElementUI] setConfig 必须传入对象参数')
|
|
415
|
+
return
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
if (config.theme !== undefined) {
|
|
419
|
+
setTheme(config.theme)
|
|
420
|
+
}
|
|
421
|
+
if (config.size !== undefined) {
|
|
422
|
+
setSize(config.size)
|
|
423
|
+
}
|
|
424
|
+
if (config.primaryColor !== undefined) {
|
|
425
|
+
setPrimaryColor(config.primaryColor)
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
// 设置主题
|
|
380
430
|
const setTheme = function(theme) {
|
|
381
431
|
const validThemes = ['light', 'dark', 'compact']
|
|
382
|
-
if (validThemes.includes(theme)) {
|
|
383
|
-
|
|
432
|
+
if (!validThemes.includes(theme)) {
|
|
433
|
+
console.warn(`[XtElementUI] 无效的主题值: ${theme},可选值: ${validThemes.join(', ')}`)
|
|
434
|
+
return
|
|
384
435
|
}
|
|
436
|
+
|
|
437
|
+
currentConfig.theme = theme
|
|
438
|
+
document.documentElement.setAttribute('data-theme', theme)
|
|
439
|
+
emitConfigChange('theme', theme)
|
|
385
440
|
}
|
|
386
441
|
|
|
442
|
+
// 设置字体大小
|
|
387
443
|
const setSize = function(size) {
|
|
388
444
|
const validSizes = ['small', 'medium', 'large']
|
|
389
|
-
if (validSizes.includes(size)) {
|
|
390
|
-
|
|
445
|
+
if (!validSizes.includes(size)) {
|
|
446
|
+
console.warn(`[XtElementUI] 无效的大小值: ${size},可选值: ${validSizes.join(', ')}`)
|
|
447
|
+
return
|
|
391
448
|
}
|
|
449
|
+
|
|
450
|
+
currentConfig.size = size
|
|
451
|
+
document.documentElement.setAttribute('data-size', size)
|
|
452
|
+
emitConfigChange('size', size)
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
// 设置主色调
|
|
456
|
+
const setPrimaryColor = function(color) {
|
|
457
|
+
// 简单的颜色格式验证
|
|
458
|
+
const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
|
|
459
|
+
if (!colorRegex.test(color)) {
|
|
460
|
+
console.warn(`[XtElementUI] 无效的颜色值: ${color},请使用十六进制颜色格式,如 #1890ff`)
|
|
461
|
+
return
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
currentConfig.primaryColor = color
|
|
465
|
+
document.documentElement.style.setProperty('--xt-color-primary', color)
|
|
466
|
+
emitConfigChange('primaryColor', color)
|
|
392
467
|
}
|
|
393
468
|
|
|
469
|
+
// 获取当前主题
|
|
394
470
|
const getTheme = function() {
|
|
395
|
-
return
|
|
471
|
+
return currentConfig.theme
|
|
396
472
|
}
|
|
397
473
|
|
|
474
|
+
// 获取当前字体大小
|
|
398
475
|
const getSize = function() {
|
|
399
|
-
return
|
|
476
|
+
return currentConfig.size
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
// 获取当前主色调
|
|
480
|
+
const getPrimaryColor = function() {
|
|
481
|
+
return currentConfig.primaryColor
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
// 重置为默认配置
|
|
485
|
+
const resetConfig = function() {
|
|
486
|
+
setConfig(defaultConfig)
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
// 监听配置变更
|
|
490
|
+
const onConfigChange = function(listener) {
|
|
491
|
+
if (typeof listener === 'function') {
|
|
492
|
+
configChangeListeners.push(listener)
|
|
493
|
+
return function() {
|
|
494
|
+
const index = configChangeListeners.indexOf(listener)
|
|
495
|
+
if (index > -1) {
|
|
496
|
+
configChangeListeners.splice(index, 1)
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
} else {
|
|
500
|
+
console.warn('[XtElementUI] onConfigChange 必须传入函数')
|
|
501
|
+
}
|
|
400
502
|
}
|
|
401
503
|
;// ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
|
|
402
504
|
|
package/lib/index.umd.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("ElementUI"),require("Vue")):"function"===typeof define&&define.amd?define("xt-element-ui",["ElementUI","Vue"],t):"object"===typeof exports?exports["xt-element-ui"]=t(require("ElementUI"),require("Vue")):e["xt-element-ui"]=t(e["ElementUI"],e["Vue"])})("undefined"!==typeof self?self:this,(e,t)=>(()=>{"use strict";var n={282(t){t.exports=e},508(e){e.exports=t}},o={};function r(e){var t=o[e];if(void 0!==t)return t.exports;var i=o[e]={exports:{}};return n[e](i,i.exports,r),i.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e["default"]:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})(),(()=>{r.p=""})();var i={};if(r.r(i),r.d(i,{ElementUI:()=>
|
|
1
|
+
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("ElementUI"),require("Vue")):"function"===typeof define&&define.amd?define("xt-element-ui",["ElementUI","Vue"],t):"object"===typeof exports?exports["xt-element-ui"]=t(require("ElementUI"),require("Vue")):e["xt-element-ui"]=t(e["ElementUI"],e["Vue"])})("undefined"!==typeof self?self:this,(e,t)=>(()=>{"use strict";var n={282(t){t.exports=e},508(e){e.exports=t}},o={};function r(e){var t=o[e];if(void 0!==t)return t.exports;var i=o[e]={exports:{}};return n[e](i,i.exports,r),i.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e["default"]:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})(),(()=>{r.p=""})();var i={};if(r.r(i),r.d(i,{ElementUI:()=>f(),Vue:()=>c(),default:()=>D,getConfig:()=>T,getPrimaryColor:()=>M,getSize:()=>F,getTheme:()=>A,onConfigChange:()=>B,resetConfig:()=>N,setConfig:()=>P,setPrimaryColor:()=>q,setSize:()=>R,setTheme:()=>k}),"undefined"!==typeof window){var l=window.document.currentScript,u=l&&l.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);u&&(r.p=u[1])}var s=r(508),c=r.n(s),a=r(282),f=r.n(a),d=function(){var e=this,t=e._self._c;return t("el-button",{on:{click:e.handleClick}},[e._v(e._s(e.text))])},p=[];const m={props:["text"],name:"XtButton",methods:{handleClick(){this.$emit("click")}}},h=m;function y(e,t,n,o,r,i,l,u){var s,c="function"===typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),l?(s=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(l)},c._ssrRegister=s):r&&(s=u?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(c.functional){c._injectStyles=s;var a=c.render;c.render=function(e,t){return s.call(t),a(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,s):[s]}return{exports:e,options:c}}var v=y(h,d,p,!1,null,null,null);const _=v.exports,C=_;var g=function(){var e=this,t=e._self._c;return t("el-input",{attrs:{value:e.value,placeholder:e.placeholder},on:{input:function(t){return e.$emit("input",t)}}})},x=[];const w={name:"XtInput",props:{value:[String,Number],placeholder:{type:String,default:"请输入内容"}}},E=w;var b=y(E,g,x,!1,null,null,null);const $=b.exports,S=$;"undefined"!==typeof window&&(window.Vue=c());const I=[C,S],U=function(e){U.installed||(U.installed=!0,e.use(f()),I.forEach(t=>{e.component(t.name,t)}))};"undefined"!==typeof window&&window.Vue&&U(window.Vue);const j={install:U,Button:C,Input:S,ElementUI:f()},V={theme:"light",size:"medium",primaryColor:"#1890ff"};let z={...V};const X=[],O=function(e,t){X.forEach(n=>{n(e,t)})},T=function(){return{...z}},P=function(e){"object"===typeof e&&null!==e?(void 0!==e.theme&&k(e.theme),void 0!==e.size&&R(e.size),void 0!==e.primaryColor&&q(e.primaryColor)):console.warn("[XtElementUI] setConfig 必须传入对象参数")},k=function(e){const t=["light","dark","compact"];t.includes(e)?(z.theme=e,document.documentElement.setAttribute("data-theme",e),O("theme",e)):console.warn(`[XtElementUI] 无效的主题值: ${e},可选值: ${t.join(", ")}`)},R=function(e){const t=["small","medium","large"];t.includes(e)?(z.size=e,document.documentElement.setAttribute("data-size",e),O("size",e)):console.warn(`[XtElementUI] 无效的大小值: ${e},可选值: ${t.join(", ")}`)},q=function(e){const t=/^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/;t.test(e)?(z.primaryColor=e,document.documentElement.style.setProperty("--xt-color-primary",e),O("primaryColor",e)):console.warn(`[XtElementUI] 无效的颜色值: ${e},请使用十六进制颜色格式,如 #1890ff`)},A=function(){return z.theme},F=function(){return z.size},M=function(){return z.primaryColor},N=function(){P(V)},B=function(e){if("function"===typeof e)return X.push(e),function(){const t=X.indexOf(e);t>-1&&X.splice(t,1)};console.warn("[XtElementUI] onConfigChange 必须传入函数")},D=j;return i})());
|
package/package.json
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "xt-element-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "基于 Vue2.7 + ElementUI 的组件库",
|
|
5
|
-
"main": "lib/index.js",
|
|
5
|
+
"main": "lib/index.common.js",
|
|
6
|
+
"module": "lib/index.common.js",
|
|
7
|
+
"unpkg": "lib/index.umd.min.js",
|
|
6
8
|
"style": "lib/index.css",
|
|
7
9
|
"scripts": {
|
|
8
10
|
"docs:dev": "vuepress dev docs",
|
|
9
11
|
"docs:build": "vuepress build docs",
|
|
10
12
|
"dev": "vue-cli-service serve",
|
|
11
|
-
"lib": "vue-cli-service build --target lib --name index --dest lib src/index.js"
|
|
13
|
+
"lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
|
|
14
|
+
"prepublishOnly": "npm run lib"
|
|
12
15
|
},
|
|
13
16
|
"keywords": [
|
|
14
17
|
"vue2",
|
|
@@ -27,5 +30,10 @@
|
|
|
27
30
|
"sass": "^1.32.13",
|
|
28
31
|
"sass-loader": "^10.5.2",
|
|
29
32
|
"vuepress": "^1.9.10"
|
|
30
|
-
}
|
|
31
|
-
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"lib",
|
|
36
|
+
"src",
|
|
37
|
+
"README.md"
|
|
38
|
+
]
|
|
39
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
// 导入 Vue
|
|
2
2
|
import Vue from 'vue'
|
|
3
3
|
|
|
4
|
+
// 在导入 Element UI 之前,先将 Vue 设置为全局变量
|
|
5
|
+
if (typeof window !== 'undefined') {
|
|
6
|
+
window.Vue = Vue
|
|
7
|
+
}
|
|
8
|
+
|
|
4
9
|
// 导入 Element UI 并注册
|
|
5
10
|
import ElementUI from 'element-ui'
|
|
6
11
|
import 'element-ui/lib/theme-chalk/index.css'
|
|
7
12
|
|
|
8
13
|
// 导入组件
|
|
9
|
-
|
|
10
|
-
|
|
11
14
|
import Button from './components/button'
|
|
12
15
|
import Input from './components/input'
|
|
13
16
|
|
|
@@ -31,7 +34,6 @@ const install = function (Vue) {
|
|
|
31
34
|
})
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
|
|
35
37
|
// 支持全局 script 标签引入
|
|
36
38
|
if (typeof window !== 'undefined' && window.Vue) {
|
|
37
39
|
install(window.Vue)
|
|
@@ -50,25 +52,119 @@ export default {
|
|
|
50
52
|
// 导出 Vue 和 ElementUI 以便用户使用
|
|
51
53
|
export { Vue, ElementUI }
|
|
52
54
|
|
|
53
|
-
//
|
|
55
|
+
// 默认配置
|
|
56
|
+
const defaultConfig = {
|
|
57
|
+
theme: 'light',
|
|
58
|
+
size: 'medium',
|
|
59
|
+
primaryColor: '#1890ff'
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// 当前配置
|
|
63
|
+
let currentConfig = { ...defaultConfig }
|
|
64
|
+
|
|
65
|
+
// 配置变更事件处理
|
|
66
|
+
const configChangeListeners = []
|
|
67
|
+
|
|
68
|
+
const emitConfigChange = function(key, value) {
|
|
69
|
+
configChangeListeners.forEach(listener => {
|
|
70
|
+
listener(key, value)
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// 获取所有配置
|
|
75
|
+
export const getConfig = function() {
|
|
76
|
+
return { ...currentConfig }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// 设置全局配置
|
|
80
|
+
export const setConfig = function(config) {
|
|
81
|
+
if (typeof config !== 'object' || config === null) {
|
|
82
|
+
console.warn('[XtElementUI] setConfig 必须传入对象参数')
|
|
83
|
+
return
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (config.theme !== undefined) {
|
|
87
|
+
setTheme(config.theme)
|
|
88
|
+
}
|
|
89
|
+
if (config.size !== undefined) {
|
|
90
|
+
setSize(config.size)
|
|
91
|
+
}
|
|
92
|
+
if (config.primaryColor !== undefined) {
|
|
93
|
+
setPrimaryColor(config.primaryColor)
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 设置主题
|
|
54
98
|
export const setTheme = function(theme) {
|
|
55
99
|
const validThemes = ['light', 'dark', 'compact']
|
|
56
|
-
if (validThemes.includes(theme)) {
|
|
57
|
-
|
|
100
|
+
if (!validThemes.includes(theme)) {
|
|
101
|
+
console.warn(`[XtElementUI] 无效的主题值: ${theme},可选值: ${validThemes.join(', ')}`)
|
|
102
|
+
return
|
|
58
103
|
}
|
|
104
|
+
|
|
105
|
+
currentConfig.theme = theme
|
|
106
|
+
document.documentElement.setAttribute('data-theme', theme)
|
|
107
|
+
emitConfigChange('theme', theme)
|
|
59
108
|
}
|
|
60
109
|
|
|
110
|
+
// 设置字体大小
|
|
61
111
|
export const setSize = function(size) {
|
|
62
112
|
const validSizes = ['small', 'medium', 'large']
|
|
63
|
-
if (validSizes.includes(size)) {
|
|
64
|
-
|
|
113
|
+
if (!validSizes.includes(size)) {
|
|
114
|
+
console.warn(`[XtElementUI] 无效的大小值: ${size},可选值: ${validSizes.join(', ')}`)
|
|
115
|
+
return
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
currentConfig.size = size
|
|
119
|
+
document.documentElement.setAttribute('data-size', size)
|
|
120
|
+
emitConfigChange('size', size)
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// 设置主色调
|
|
124
|
+
export const setPrimaryColor = function(color) {
|
|
125
|
+
// 简单的颜色格式验证
|
|
126
|
+
const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
|
|
127
|
+
if (!colorRegex.test(color)) {
|
|
128
|
+
console.warn(`[XtElementUI] 无效的颜色值: ${color},请使用十六进制颜色格式,如 #1890ff`)
|
|
129
|
+
return
|
|
65
130
|
}
|
|
131
|
+
|
|
132
|
+
currentConfig.primaryColor = color
|
|
133
|
+
document.documentElement.style.setProperty('--xt-color-primary', color)
|
|
134
|
+
emitConfigChange('primaryColor', color)
|
|
66
135
|
}
|
|
67
136
|
|
|
137
|
+
// 获取当前主题
|
|
68
138
|
export const getTheme = function() {
|
|
69
|
-
return
|
|
139
|
+
return currentConfig.theme
|
|
70
140
|
}
|
|
71
141
|
|
|
142
|
+
// 获取当前字体大小
|
|
72
143
|
export const getSize = function() {
|
|
73
|
-
return
|
|
144
|
+
return currentConfig.size
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// 获取当前主色调
|
|
148
|
+
export const getPrimaryColor = function() {
|
|
149
|
+
return currentConfig.primaryColor
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// 重置为默认配置
|
|
153
|
+
export const resetConfig = function() {
|
|
154
|
+
setConfig(defaultConfig)
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// 监听配置变更
|
|
158
|
+
export const onConfigChange = function(listener) {
|
|
159
|
+
if (typeof listener === 'function') {
|
|
160
|
+
configChangeListeners.push(listener)
|
|
161
|
+
return function() {
|
|
162
|
+
const index = configChangeListeners.indexOf(listener)
|
|
163
|
+
if (index > -1) {
|
|
164
|
+
configChangeListeners.splice(index, 1)
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
} else {
|
|
168
|
+
console.warn('[XtElementUI] onConfigChange 必须传入函数')
|
|
169
|
+
}
|
|
74
170
|
}
|
package/docs/.vuepress/config.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
title: '组件文档',
|
|
3
|
-
themeConfig: {
|
|
4
|
-
nav: [
|
|
5
|
-
{ text: '首页', link: '/' },
|
|
6
|
-
{ text: '组件', link: '/components/base/button' }
|
|
7
|
-
],
|
|
8
|
-
sidebarDepth: 2,
|
|
9
|
-
nextLinks: true,
|
|
10
|
-
prevLinks: true,
|
|
11
|
-
// 直接写完整路径,最稳、最简单、不踩坑
|
|
12
|
-
sidebar: [
|
|
13
|
-
{
|
|
14
|
-
title: '基础组件',
|
|
15
|
-
path: '/components/base/button',
|
|
16
|
-
children: [
|
|
17
|
-
['/components/base/button', '按钮'],
|
|
18
|
-
['/components/base/input', '输入框']
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
}
|
package/docs/README.md
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
# Input 输入框
|
|
2
|
-
|
|
3
|
-
基于 el-input 封装的统一输入框
|
|
4
|
-
|
|
5
|
-
## 基础用法
|
|
6
|
-
<xt-input v-model="inputVal" placeholder="请输入内容"></xt-input>
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
export default {
|
|
10
|
-
data() {
|
|
11
|
-
return {
|
|
12
|
-
inputVal: ''
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
## 属性
|
|
19
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
20
|
-
| --- | --- | --- | --- |
|
|
21
|
-
| v-model | 绑定值 | string / number | - |
|
|
22
|
-
| placeholder | 占位符 | string | '请输入内容' |
|
package/examples/App.vue
DELETED
package/examples/favicon.ico
DELETED
|
Binary file
|
package/examples/index.html
DELETED
package/examples/main.js
DELETED
package/vue.config.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
// 关闭生产环境 sourcemap
|
|
3
|
-
productionSourceMap: false,
|
|
4
|
-
// 单页面标准入口配置
|
|
5
|
-
pages: {
|
|
6
|
-
index: {
|
|
7
|
-
entry: './examples/main.js', // 你的项目启动入口
|
|
8
|
-
template: './examples/index.html',
|
|
9
|
-
filename: 'index.html'
|
|
10
|
-
}
|
|
11
|
-
},
|
|
12
|
-
css: {
|
|
13
|
-
// 开启 CSS 提取(打包成独立 css 文件,给 npm 使用)
|
|
14
|
-
extract: true,
|
|
15
|
-
// 启用 CSS sourcemap
|
|
16
|
-
sourceMap: false,
|
|
17
|
-
// 给 scss 传入全局变量(主题色、字体大小)
|
|
18
|
-
loaderOptions: {
|
|
19
|
-
scss: {
|
|
20
|
-
// 这里可以自动注入全局 SCSS 变量文件(非常重要)
|
|
21
|
-
additionalData: `@import "~@/styles/variables.scss";`
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
// 组件库打包配置
|
|
27
|
-
chainWebpack: (config) => {
|
|
28
|
-
if (process.env.NODE_ENV === "production") {
|
|
29
|
-
// 入口改为组件库总入口
|
|
30
|
-
config.entry("index").clear().add("./src/index.js").end();
|
|
31
|
-
|
|
32
|
-
// 输出 UMD 格式(支持 npm / script 引入)
|
|
33
|
-
config.output
|
|
34
|
-
.filename("index.js")
|
|
35
|
-
.library("xt-element-ui")
|
|
36
|
-
.libraryTarget("umd")
|
|
37
|
-
.umdNamedDefine(true);
|
|
38
|
-
|
|
39
|
-
// 只在生产环境配置 externals(打包组件库时不打包 Vue 和 Element UI)
|
|
40
|
-
config.externals({
|
|
41
|
-
vue: "Vue",
|
|
42
|
-
"element-ui": "ElementUI",
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
};
|