qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一次

This commit is contained in:
qiaopengfei 2024-07-05 15:42:19 +08:00
parent c69f7619a7
commit 4971a5637c
34 changed files with 1448 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -1,7 +1,8 @@
.DS_Store .DS_Store
node_modules node_modules
node_modules/*
/dist /dist
/lib
# local env files # local env files
.env.local .env.local
@ -21,3 +22,5 @@ pnpm-debug.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
package-lock.json

13
babel.config.js
View File

@ -1,5 +1,16 @@
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
] ]
} }

27
examples/index.js Normal file
View File

@ -0,0 +1,27 @@
// 导入button组件
import Button from './Button'
// 组件列表
const components = [
Button
]
// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
Button
}

27
examples/main.js Normal file
View File

@ -0,0 +1,27 @@
import Vue from 'vue'
import App from '../src/App.vue'
//基于element组件封装，引入element组件库
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'
Vue.config.productionTip = false
Vue.use(erp_element_ui)
new Vue({
render: h => h(App),
}).$mount('#app')

19
jsconfig.json
View File

@ -1,19 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

131
package-lock.json generated
View File

@ -331,7 +331,8 @@
"@babel/parser": { "@babel/parser": {
"version": "7.24.7", "version": "7.24.7",
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.7.tgz", "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.7.tgz",
"integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==" "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
"dev": true
}, },
"@babel/plugin-bugfix-firefox-class-in-computed-class-key": { "@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
"version": "7.24.7", "version": "7.24.7",
@ -2550,6 +2551,15 @@
"lodash": "^4.17.14" "lodash": "^4.17.14"
} }
}, },
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"dev": true,
"requires": {
"babel-runtime": "6.x"
}
},
"at-least-node": { "at-least-node": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -2570,6 +2580,12 @@
"postcss-value-parser": "^4.2.0" "postcss-value-parser": "^4.2.0"
} }
}, },
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
"dev": true
},
"babel-loader": { "babel-loader": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz", "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@ -2582,6 +2598,38 @@
"schema-utils": "^2.6.5" "schema-utils": "^2.6.5"
} }
}, },
"babel-plugin-component": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
"integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "7.0.0-beta.35"
},
"dependencies": {
"@babel/helper-module-imports": {
"version": "7.0.0-beta.35",
"resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
"integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
"dev": true,
"requires": {
"@babel/types": "7.0.0-beta.35",
"lodash": "^4.2.0"
}
},
"@babel/types": {
"version": "7.0.0-beta.35",
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
"integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
"dev": true,
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.2.0",
"to-fast-properties": "^2.0.0"
}
}
}
},
"babel-plugin-dynamic-import-node": { "babel-plugin-dynamic-import-node": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", "resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@ -2621,6 +2669,30 @@
"@babel/helper-define-polyfill-provider": "^0.6.2" "@babel/helper-define-polyfill-provider": "^0.6.2"
} }
}, },
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"dev": true
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
"dev": true
}
}
},
"balanced-match": { "balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@ -3418,7 +3490,8 @@
"csstype": { "csstype": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true
}, },
"de-indent": { "de-indent": {
"version": "1.0.2", "version": "1.0.2",
@ -3710,6 +3783,20 @@
"integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==", "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==",
"dev": true "dev": true
}, },
"element-ui": {
"version": "2.15.14",
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
"integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
"dev": true,
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"emoji-regex": { "emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
"resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@ -5305,7 +5392,8 @@
"nanoid": { "nanoid": {
"version": "3.3.7", "version": "3.3.7",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz", "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"dev": true
}, },
"negotiator": { "negotiator": {
"version": "0.6.3", "version": "0.6.3",
@ -5394,6 +5482,12 @@
"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
"dev": true "dev": true
}, },
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
"dev": true
},
"npm-run-path": { "npm-run-path": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz", "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@ -5715,7 +5809,8 @@
"picocolors": { "picocolors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz", "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
"dev": true
}, },
"picomatch": { "picomatch": {
"version": "2.3.1", "version": "2.3.1",
@ -5758,6 +5853,7 @@
"version": "8.4.39", "version": "8.4.39",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.39.tgz", "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.39.tgz",
"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
"dev": true,
"requires": { "requires": {
"nanoid": "^3.3.7", "nanoid": "^3.3.7",
"picocolors": "^1.0.1", "picocolors": "^1.0.1",
@ -6084,6 +6180,7 @@
"version": "2.8.8", "version": "2.8.8",
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz", "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"optional": true "optional": true
}, },
"pretty-error": { "pretty-error": {
@ -6352,6 +6449,12 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true "dev": true
}, },
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
"dev": true
},
"resolve": { "resolve": {
"version": "1.22.8", "version": "1.22.8",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
@ -6709,12 +6812,14 @@
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}, },
"source-map-js": { "source-map-js": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"dev": true
}, },
"source-map-support": { "source-map-support": {
"version": "0.5.21", "version": "0.5.21",
@ -6995,6 +7100,12 @@
} }
} }
}, },
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
"dev": true
},
"thunky": { "thunky": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz", "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@ -7165,6 +7276,7 @@
"version": "2.7.16", "version": "2.7.16",
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz", "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==", "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
"dev": true,
"requires": { "requires": {
"@vue/compiler-sfc": "2.7.16", "@vue/compiler-sfc": "2.7.16",
"csstype": "^3.1.0" "csstype": "^3.1.0"
@ -7174,6 +7286,7 @@
"version": "2.7.16", "version": "2.7.16",
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz", "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==", "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"dev": true,
"requires": { "requires": {
"@babel/parser": "^7.23.5", "@babel/parser": "^7.23.5",
"postcss": "^8.4.14", "postcss": "^8.4.14",
@ -7254,7 +7367,8 @@
"vue-router": { "vue-router": {
"version": "3.6.5", "version": "3.6.5",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
"integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
"dev": true
}, },
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
@ -7313,7 +7427,8 @@
"vuex": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==" "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
"dev": true
}, },
"watchpack": { "watchpack": {
"version": "2.4.1", "version": "2.4.1",

17
package.json
View File

@ -3,23 +3,26 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vue-cli-service serve",
"build": "vue-cli-service build" "build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --dest lib packages/index.js"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.8.3", "core-js": "^3.8.3"
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"babel-plugin-component": "^1.1.1",
"element-ui": "^2.15.14",
"sass": "^1.32.7", "sass": "^1.32.7",
"sass-loader": "^12.0.0", "sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",

9
packages/MultifunctionSearch/index.js Normal file
View File

@ -0,0 +1,9 @@
// import pedestal from './src'
// // 为组件提供 install 安装方法，供按需引入
// pedestal.install = function (Vue) {
// Vue.component(pedestal.name, pedestal)
// }
// // 导出组件
// export default pedestal

18
packages/MultifunctionSearch/src/index.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<h1>主组件</h1>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
methods: {},
};
</script>
<style scoped lang='scss'>
</style>

9
packages/agDatePicker/index.js Normal file
View File

@ -0,0 +1,9 @@
import agDatePicker from './src'
// 为组件提供 install 安装方法，供按需引入
agDatePicker.install = function (Vue) {
Vue.component(agDatePicker.name, agDatePicker)
}
// 导出组件
export default agDatePicker

145
packages/agDatePicker/src/index.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<el-date-picker
class="ag-date-picker"
v-model="dateArr"
v-bind="attrs"
v-on="inputListeners"
/>
</template>
<script>
/**
* agDatePicker 时间选择器
*/
import isEmpty from "../../../src/utils/isEmpty";
export default {
name: "agDatePicker",
props: {
value: {
type: Array,
default: () => [null, null],
},
},
data() {
return {
dateArr: [null, null],
};
},
computed: {
attrs() {
return {
size: "small",
type: "daterange",
format: "yyyy/MM/dd",
"value-format": "yyyy-MM-dd",
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"range-separator": "-",
"picker-options": {
disabledDate(time) {
return (
time.getTime() >
new Date(new Date().toLocaleDateString()).getTime() +
24 * 60 * 60 * 1000 -
1
);
},
shortcuts: [
{
text: "本月",
onClick(picker) {
const end =
new Date(new Date().toLocaleDateString()).getTime() +
24 * 60 * 60 * 1000 -
1;
const time = new Date();
time.setDate(1);
time.setHours(0);
time.setSeconds(0);
time.setMinutes(0);
var start = time.getTime();
picker.$emit("pick", [start, end]);
},
},
{
text: "近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
{
text: "近六个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一年",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
picker.$emit("pick", [start, end]);
},
},
],
}, //多选日期
...this.$attrs,
};
},
// 所有父级事件
inputListeners() {
return Object.assign({}, this.$listeners, {
input: (value) => {
let date1 = "";
let date2 = "";
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
date1 = `${value[0]} 00:00:00`;
date2 = `${value[1]} 23:59:59`;
}
this.$emit("input", [date1, date2]);
},
});
},
},
watch: {
value: {
handler(newVal) {
if (!Array.isArray(newVal)) {
throw new Error("agDatePicker date请传入数组");
}
let [date1, date2] = newVal;
if (!this.dateArr) {
this.dateArr = [date1 || "", date2 || ""];
return;
}
this.$set(this.dateArr, 0, date1 || "");
this.$set(this.dateArr, 1, date2 || "");
},
immediate: true,
deep: true,
},
},
methods: {},
};
</script>
<style lang="scss" scoped></style>

9
packages/agDialog/index.js Normal file
View File

@ -0,0 +1,9 @@
import agDialog from './src'
// 为组件提供 install 安装方法，供按需引入
agDialog.install = function (Vue) {
Vue.component(agDialog.name, agDialog)
}
// 导出组件
export default agDialog

91
packages/agDialog/src/index.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<el-dialog
class="ag-dialog"
:title="$slots.title ? '' : title"
:visible.sync="show"
:custom="custom"
v-bind="attrs"
v-on="$listeners"
>
<!-- 有写弹窗头部则采用输入的 -->
<template v-if="$slots.title">
<span slot="title">
<slot name="title" />
</span>
</template>
<!-- 弹窗内容区域 -->
<slot />
<!-- 默认底部 -->
<template v-if="!$slots.footer && custom">
<div slot="footer" class="dialog-footer">
<el-button class="btn" size="small" @click="cancel">取消</el-button>
<el-button class="btn sure" size="small" type="primary" @click="submit"
>确定</el-button
>
</div>
</template>
<!-- 弹窗底部区域,可自定义 -->
<template v-if="$slots.footer">
<span slot="footer">
<slot name="footer" />
</span>
</template>
</el-dialog>
</template>
<script>
//没有输入slot=title的时候，就使用自定义的shot=title
export default {
name: "agDialog",
props: {
visible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
custom: {
type: Boolean,
default: true,
},
},
computed: {
attrs() {
return {
width: "30%",
top: "15vh",
boolean: "dialog",
"show-close": false,
"append-to-body": true,
"modal-append-to-body": true,
"destroy-on-close": true,
...this.$attrs,
};
},
show: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:visible", val); // visible 改变的时候通知父组件
},
},
},
data() {
return {};
},
methods: {
cancel() {
this.$emit("cancel");
},
submit() {
this.$emit("submit");
},
},
};
</script>
<style scoped >
</style>

9
packages/agInput/index.js Normal file
View File

@ -0,0 +1,9 @@
import agInput from './src'
// 为组件提供 install 安装方法，供按需引入
agInput.install = function (Vue) {
Vue.component(agInput.name, agInput)
}
// 导出组件
export default agInput

74
packages/agInput/src/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<el-input
class="ag_input"
:style="{ width }"
v-on="inputListeners"
v-bind="attrs"
>
<slot name="append" slot="append" />
<slot name="prefix" slot="prefix" />
<slot name="suffix" slot="suffix" />
<slot name="prepend" slot="prepend" />
</el-input>
</template>
<script>
/**
* WInput
* @desc 处理输入的输入框(转大写，不能有中文空格等)
*/
export default {
name: "agInput",
props: {
width: {
type: String,
default: "",
},
toUpperCase: {
type: Boolean,
default: true,
},
},
computed: {
attrs() {
return {
size: "small",
clearable: true, // 默认清空
...this.$attrs,
};
},
// 所有父级事件
inputListeners() {
return Object.assign(
{},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
},
blur: (e) => {
let value = e.target.value
.trim()
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
// 失去焦点自动首位去空格
this.$emit("input", value);
},
}
);
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
@import url("~@/static/index.scss");
</style>

9
packages/agNumberRange/index.js Normal file
View File

@ -0,0 +1,9 @@
import agNumberRange from './src'
// 为组件提供 install 安装方法，供按需引入
agNumberRange.install = function (Vue) {
Vue.component(agNumberRange.name, agNumberRange)
}
// 导出组件
export default agNumberRange

118
packages/agNumberRange/src/index.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div class="ag-number-range">
<el-input
:style="{ width: width + 'px' }"
:size="size"
v-model="startValue"
@input="handleStartInput"
@blur="handleInputBlur"
></el-input>
<span class="separator">{{ rangeSeparator }}</span>
<el-input
:style="{ width: width + 'px' }"
:size="size"
v-model="endValue"
@input="handleEndInput"
@blur="handleInputBlur"
></el-input>
</div>
</template>
<script>
/**
* NumberRange
* 数值范围
*/
export default {
name: "agNumberRange",
model: {
prop: "value",
event: "change",
},
props: {
// 绑定的value
value: {
type: Array,
default: function () {
return [];
},
},
// 分隔符
rangeSeparator: {
type: String,
default: "-",
},
// 输入框宽度
width: {
type: [Number, String],
default: "50",
},
size: {
type: String,
default: "small",
},
},
data() {
return {
// 开始数值
startValue: "",
// 结束数值
endValue: "",
};
},
comments: {
},
watch: {
value(newValue) {
if (Array.isArray(newValue)) {
this.startValue = newValue[0];
this.endValue = newValue[1];
}
},
},
methods: {
/**
* 输入框失去焦点
* @emit change
*/
handleInputBlur() {
this.$emit("change", [this.startValue, this.endValue]);
},
/**
* 监听start值
* @param e 当前值
*/
handleStartInput(e) {
this.startValue = this.formatValue(e);
},
/**
* 监听end值
* @param e 当前值
*/
handleEndInput(e) {
this.endValue = this.formatValue(e);
},
/**
* 格式化输入, 只能输入数字 和 .
* @param v
* @return {*}
*/
formatValue(v) {
const reg = /[^\d|.]/g;
return v.replace(reg, "");
},
},
};
</script>
<style scoped>
</style>

9
packages/agPagination/index.js Normal file
View File

@ -0,0 +1,9 @@
import agPagination from './src'
// 为组件提供 install 安装方法，供按需引入
agPagination.install = function (Vue) {
Vue.component(agPagination.name, agPagination)
}
// 导出组件
export default agPagination

36
packages/agPagination/src/index.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<el-pagination class="ag-pagination" v-bind="attrs" v-on="$listeners">
</el-pagination>
</template>
<script>
export default {
name: "agPagination",
props: {
tabsData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
computed: {
attrs() {
return {
total: 0,
"page-size": 20,
"current-page": 1,
"page-sizes": [20, 50, 100, 200],
layout: "total, sizes, prev, pager, next, jumper",
...this.$attrs,
};
},
},
methods: {},
};
</script>
<style scoped lang="scss">
</style>

9
packages/agSelect/index.js Normal file
View File

@ -0,0 +1,9 @@
import agSelect from './src'
// 为组件提供 install 安装方法，供按需引入
agSelect.install = function (Vue) {
Vue.component(agSelect.name, agSelect)
}
// 导出组件
export default agSelect

78
packages/agSelect/src/index.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<el-select
class="ag_select"
:style="{ width }"
v-bind="attrs"
v-on="inputListeners"
>
<slot />
<slot name="prefix" slot="prefix" />
<slot name="empty" slot="empty" />
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<script>
export default {
name: "agSelect",
props: {
width: {
type: String,
default: "",
},
options: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
computed: {
attrs() {
return {
size: "small",
remote: true,
clearable: true,
filterable: true,
...this.$attrs,
};
},
// 所有父级事件
inputListeners() {
return Object.assign(
{},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: (value) => {
this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
},
blur: (e) => {
let value = e.target.value
.trim()
.replace(/\s/g, (match) =>
match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
);
// 失去焦点自动首位去空格
this.$emit("input", value);
},
}
);
},
},
methods: {},
};
</script>
<style lang="scss" scoped></style>

9
packages/agTabs/index.js Normal file
View File

@ -0,0 +1,9 @@
import agTabs from './src'
// 为组件提供 install 安装方法，供按需引入
agTabs.install = function (Vue) {
Vue.component(agTabs.name, agTabs)
}
// 导出组件
export default agTabs

43
packages/agTabs/src/index.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<el-tabs class="ag-tabs" v-bind="$attrs" v-on="$listeners">
<slot v-if="!tabsData.length" name="default" />
<el-tab-pane
v-else
v-for="(item, index) in tabsData"
:key="index"
:name="item.name"
:lazy="item.lazy || false"
:disabled="item.disabled || false"
:closable="item.closable || false"
>
<template #label>
<span>
{{ item.label }}
<i :class="item.icon"></i>
<span v-if="item.remark" class="remark">{{ item.remark }}</span>
</span>
</template>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name: "agTabs",
props: {
tabsData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
</style>

32
packages/index.js Normal file
View File

@ -0,0 +1,32 @@
// 导入组件
import agInput from './agInput/index'
import agSelect from './agSelect/index'
// 组件列表
const components = [
agInput,
agSelect
]
// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
}
export {
// 以下是具体的组件列表
agInput,
agSelect
}

185
src/App.vue
View File

@ -1,32 +1,171 @@
<template> <template>
<div id="app"> <div>
<nav> <el-button type="text" @click="abb = true">点击打开 Dialog</el-button>
<router-link to="/">Home</router-link> | <agTabs ref="ref_Pedestal" :visible.sync="abb">
<router-link to="/about">About</router-link> <!-- <span slot="footer">房价大降分类数据</span> -->
</nav> </agTabs>
<router-view/> <div class="div"><span>888</span></div>
</div> </div>
</template> </template>
<script>
import agTabs from "../packages/agDialog/src/index.vue";
export default {
components: { agTabs },
data() {
return {
value: "",
options: [
{
label: "热门城市",
options: [
{
value: "Shanghai",
label: "上海",
},
{
value: "Beijing",
label: "北京",
},
],
},
{
label: "城市名",
options: [
{
value: "Chengdu",
label: "成都",
},
{
value: "Shenzhen",
label: "深圳",
},
{
value: "Guangzhou",
label: "广州",
},
{
value: "Dalian",
label: "大连",
},
],
},
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
tabsData: [
{
label: "全部",
icon: "el-icon-phone",
disabled: true,
remark: "99",
name: "0",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "100",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "2",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "3",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "4",
total: 0,
},
],
abb: false,
innerVisible: false,
// options: [
// {
// value: "选项1",
// label: "黄金糕",
// },
// {
// value: "选项2",
// label: "双皮奶",
// },
// {
// value: "选项3",
// label: "蚵仔煎",
// },
// {
// value: "选项4",
// label: "龙须面",
// },
// {
// value: "选项5",
// label: "北京烤鸭",
// },
// ],
};
},
methods: {
handleClick() {
console.log(1111);
},
handleSizeChange() {},
handleCurrentChange() {},
handleClose() {},
},
};
</script>
<style lang="scss"> <style lang="scss">
#app { @import '../src/static/index.scss';
font-family: Avenir, Helvetica, Arial, sans-serif; body {
-webkit-font-smoothing: antialiased; background: #918d8d;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} }
.div {
nav { span {
padding: 30px; display: block;
width: 50px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
} }
} }
</style> </style>

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

59
src/components/HelloWorld.vue
View File

@ -1,59 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

12
src/main.js
View File

@ -1,12 +0,0 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

320
src/static/index.scss Normal file
View File

@ -0,0 +1,320 @@
// 当超过宽度时，显示省略号
@mixin ell() {
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
// 当超过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: "";
}
}
@mixin cj1 {
position: absolute;
/* 垂直居中 未知父元素高度 父元素需position: relative; */
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;
}
}

12
src/utils/cloneDeep.js Normal file
View File

@ -0,0 +1,12 @@
export default function cloneDeep(obj, hash = new WeakMap()) {
if (obj == null || typeof obj !== "object") return obj
if (obj instanceof Date) return new Date(obj)
if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
if (hash.has(obj)) return hash.get(obj)
let deepobj = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj))
hash.set(obj, deepobj)
for (const key in obj) {
deepobj[key] = cloneDeep(obj[key], hash);
}
return deepobj
}

24
src/utils/isEmpty.js Normal file
View File

@ -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;
}

5
src/views/AboutView.vue
View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

18
src/views/HomeView.vue
View File

@ -1,18 +0,0 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>

23
vue.config.js
View File

@ -1,4 +1,19 @@
const { defineConfig } = require('@vue/cli-service') module.exports = {
module.exports = defineConfig({ pages: {
transpileDependencies: true index: {
}) entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
}
}