diff --git a/examples/main.js b/examples/main.js index 326f693..4b7068b 100644 --- a/examples/main.js +++ b/examples/main.js @@ -1,11 +1,20 @@ import Vue from 'vue' import App from '../src/App.vue' + //基于element组件封装,引入element组件库 -import { Input, Select } from 'element-ui'; +import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Input); Vue.use(Select); +Vue.use(OptionGroup); +Vue.use(Option); +Vue.use(DatePicker); +Vue.use(Tabs); +Vue.use(TabPane); +Vue.use(Pagination) +Vue.use(Dialog) +Vue.use(Button) // 导入组件库 import erp_element_ui from '../packages' diff --git a/packages/agDatePicker/index.js b/packages/agDatePicker/index.js new file mode 100644 index 0000000..5dcc28b --- /dev/null +++ b/packages/agDatePicker/index.js @@ -0,0 +1,9 @@ +import agDatePicker from './src' + +// 为组件提供 install 安装方法,供按需引入 +agDatePicker.install = function (Vue) { + Vue.component(agDatePicker.name, agDatePicker) +} + +// 导出组件 +export default agDatePicker diff --git a/packages/agDatePicker/src/index.vue b/packages/agDatePicker/src/index.vue new file mode 100644 index 0000000..581cb0f --- /dev/null +++ b/packages/agDatePicker/src/index.vue @@ -0,0 +1,145 @@ + + + + + diff --git a/packages/agDialog/index.js b/packages/agDialog/index.js new file mode 100644 index 0000000..ddba566 --- /dev/null +++ b/packages/agDialog/index.js @@ -0,0 +1,9 @@ +import agDialog from './src' + +// 为组件提供 install 安装方法,供按需引入 +agDialog.install = function (Vue) { + Vue.component(agDialog.name, agDialog) +} + +// 导出组件 +export default agDialog diff --git a/packages/agDialog/src/index.vue b/packages/agDialog/src/index.vue new file mode 100644 index 0000000..f0286a2 --- /dev/null +++ b/packages/agDialog/src/index.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/packages/agInput/src/index.vue b/packages/agInput/src/index.vue index 8d72cb9..4c47a9e 100644 --- a/packages/agInput/src/index.vue +++ b/packages/agInput/src/index.vue @@ -68,5 +68,7 @@ export default { }; - + \ No newline at end of file diff --git a/packages/agNumberRange/index.js b/packages/agNumberRange/index.js new file mode 100644 index 0000000..aafe158 --- /dev/null +++ b/packages/agNumberRange/index.js @@ -0,0 +1,9 @@ +import agNumberRange from './src' + +// 为组件提供 install 安装方法,供按需引入 +agNumberRange.install = function (Vue) { + Vue.component(agNumberRange.name, agNumberRange) +} + +// 导出组件 +export default agNumberRange diff --git a/packages/agNumberRange/src/index.vue b/packages/agNumberRange/src/index.vue new file mode 100644 index 0000000..902dcec --- /dev/null +++ b/packages/agNumberRange/src/index.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/packages/agPagination/index.js b/packages/agPagination/index.js new file mode 100644 index 0000000..9159e7d --- /dev/null +++ b/packages/agPagination/index.js @@ -0,0 +1,9 @@ +import agPagination from './src' + +// 为组件提供 install 安装方法,供按需引入 +agPagination.install = function (Vue) { + Vue.component(agPagination.name, agPagination) +} + +// 导出组件 +export default agPagination diff --git a/packages/agPagination/src/index.vue b/packages/agPagination/src/index.vue new file mode 100644 index 0000000..ed7d614 --- /dev/null +++ b/packages/agPagination/src/index.vue @@ -0,0 +1,36 @@ + + + + \ No newline at end of file diff --git a/packages/agSelect/src/index.vue b/packages/agSelect/src/index.vue index 61f2889..359e0cc 100644 --- a/packages/agSelect/src/index.vue +++ b/packages/agSelect/src/index.vue @@ -2,23 +2,22 @@ + + + - diff --git a/packages/agTabs/index.js b/packages/agTabs/index.js new file mode 100644 index 0000000..68a4e78 --- /dev/null +++ b/packages/agTabs/index.js @@ -0,0 +1,9 @@ +import agTabs from './src' + +// 为组件提供 install 安装方法,供按需引入 +agTabs.install = function (Vue) { + Vue.component(agTabs.name, agTabs) +} + +// 导出组件 +export default agTabs diff --git a/packages/agTabs/src/index.vue b/packages/agTabs/src/index.vue new file mode 100644 index 0000000..325e17d --- /dev/null +++ b/packages/agTabs/src/index.vue @@ -0,0 +1,43 @@ + + + + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e3d4cab..a986bdd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,39 +1,157 @@ diff --git a/src/static/index.scss b/src/static/index.scss new file mode 100644 index 0000000..0810771 --- /dev/null +++ b/src/static/index.scss @@ -0,0 +1,267 @@ +// 当超过n行时,显示省略号 +@mixin elln($n) { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $n; +} +// 清除浮动 +.clearfix { + & after { + display: table; + clear: both; + content: ""; + } +} +// 垂直居中 未知父元素高度 父元素需position: relative; +@mixin cj1 { + position: absolute; + top: 0; + bottom: 0; + margin: auto; +} + +@mixin cj2 { + position: absolute; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); /* IE 9 */ + -moz-transform: translateY(-50%); /* Firefox */ + -webkit-transform: translateY(-50%); /* Safari 和 Chrome */ + -o-transform: translateY(-50%); /* Opera */ +} + +@mixin cjf { + display: flex; /*谷歌,火狐等新版本*/ + display: -webkit-box; /*安卓低版本*/ + display: -moz-box; /*火狐低版本*/ + display: -ms-flexbox; /*IE版本*/ + display: -webkit-flex; /*谷歌*/ + align-items: center; + -webkit-box-align: center; + -moz-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; +} + +@mixin sj1 { + position: absolute; + left: 0; + right: 0; + margin: auto; +} +@mixin sj2 { + position: absolute; + left: 50%; + transform: translateX(-50%); + -ms-transform: translateX(-50%); /* IE 9 */ + -moz-transform: translateX(-50%); /* Firefox */ + -webkit-transform: translateX(-50%); /* Safari 和 Chrome */ + -o-transform: translateX(-50%); /* Opera */ +} +@mixin sjf { + display: flex; /*谷歌,火狐等新版本*/ + display: -webkit-box; /*安卓低版本*/ + display: -moz-box; /*火狐低版本*/ + display: -ms-flexbox; /*IE版本*/ + display: -webkit-flex; /*谷歌*/ + justify-content: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; +} + +// 清除默认样式开始 +html, +body { + height: 100%; +} +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +div, +dl, +dt, +dd, +ul, +ol, +li, +p, +blockquote, +pre, +hr, +figure, +table, +caption, +th, +td, +form, +fieldset, +legend, +input, +button, +textarea, +menu { + margin: 0; + padding: 0; +} +header, +footer, +section, +article, +aside, +nav, +hgroup, +address, +figure, +figcaption, +menu, +details { + display: block; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +caption, +th { + text-align: left; + font-weight: normal; +} +html, +body, +fieldset, +img, +iframe, +abbr { + border: 0; +} +i, +cite, +em, +var, +address, +dfn { + font-style: normal; +} +[hidefocus], +summary { + outline: 0; +} +li { + list-style: none; +} +h1, +h2, +h3, +h4, +h5, +h6, +small { + font-size: 100%; +} +sup, +sub { + font-size: 83%; +} +pre, +code, +kbd, +samp { + font-family: inherit; +} +q:before, +q:after { + content: none; +} +textarea { + overflow: auto; + resize: none; +} +label, +summary { + cursor: default; +} +a, +button { + cursor: pointer; +} +h1, +h2, +h3, +h4, +h5, +h6, +em, +strong, +b { + font-weight: bold; +} +del, +ins, +u, +s, +a, +a:hover { + text-decoration: none; +} +body, +textarea, +input, +button, +select, +keygen, +legend { + font: 12px/1.14 Microsoft YaHei, arial, \5b8b\4f53; + color: #333; + outline: 0; +} +body { + background: #fff; +} +a, +a:hover { + color: #333; +} +* { + box-sizing: border-box; +} +// 清除默认样式结束 +// 滚动条美化 +@media screen and (min-width: 768px) { + ::-webkit-scrollbar { + width: 8px; + height: 9px; + background: transparent; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: #C1C1C1; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: #A8A8A8; + } + + /* 小型尺寸 */ + .mini-bar::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + .mini-bar::-webkit-scrollbar-thumb { + border-radius: 3px; + } +} \ No newline at end of file diff --git a/src/utils/isEmpty.js b/src/utils/isEmpty.js new file mode 100644 index 0000000..d11c178 --- /dev/null +++ b/src/utils/isEmpty.js @@ -0,0 +1,24 @@ +export default function isEmpty(value) { + // 首先,检查null和undefined + if (value == null) { + return true; + } + + // 检查数字、字符串和布尔值(非空字符串、非零数字和非false值被视为非空) + if (typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean') { + return !value; + } + + // 检查对象、数组和函数 + if (typeof value === 'object' || typeof value === 'function') { + // 使用Object.keys()来获取对象自身的所有属性键组成的数组 + // 然后检查这个数组的长度是否为0 + // 注意:对于数组和函数,这同样适用,因为它们在JavaScript中也是对象 + return Object.keys(value).length === 0; + } + + // 如果以上条件都不满足,那么可能是一个特殊的对象(如RegExp, Date等) + // 在这里,我们假设这些都不是“空”的,除非你有特定的需求来处理它们 + // 但按照lodash的`_.isEmpty`的逻辑,这些通常被视为非空 + return false; +} \ No newline at end of file