Compare commits
No commits in common. "e49e410488c919d261a6db7f112086f52a801930" and "cb04369abd295cd0007b7b0c4df7860770ff7f95" have entirely different histories.
e49e410488
...
cb04369abd
|
|
@ -1,16 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset',
|
||||
["@babel/preset-env", { "modules": false }]
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
import Vue from 'vue'
|
||||
import App from '../src/App.vue'
|
||||
|
||||
//基于element组件封装，引入element组件库
|
||||
import { Input, Select } from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.use(Input);
|
||||
Vue.use(Select);
|
||||
|
||||
// 导入组件库
|
||||
import erp_element_ui from '../packages'
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(erp_element_ui)
|
||||
import myui from '../packages'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(myui)
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
|
|
|
|||
|
|
@ -10,18 +10,16 @@
|
|||
},
|
||||
"main": "./lib/myErpElement.umd.min.js",
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5"
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.19",
|
||||
"@vue/cli-plugin-eslint": "~4.5.19",
|
||||
"@vue/cli-service": "~4.5.19",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"element-ui": "^2.15.14",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import mButton from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
mButton.install = function (Vue) {
|
||||
Vue.component(mButton.name, mButton)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default mButton
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="button">
|
||||
<slot name="default" :datas="datas">{{ datas.a }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mButton',
|
||||
props: {
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datas:{
|
||||
a:'666',
|
||||
b:'successs'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
width: 100px;
|
||||
border: 1px solid #000;
|
||||
padding: .5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: aliceblue;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import mButton1 from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
mButton1.install = function (Vue) {
|
||||
Vue.component(mButton1.name, mButton1)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default mButton1
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="button">
|
||||
<slot v-bind:data="name">{{ name.a }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mButton1',
|
||||
props: {
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: { a: '777', b: '888' }
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
width: 100px;
|
||||
border: 1px solid #000;
|
||||
padding: .5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: aliceblue;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// import pedestal from './src'
|
||||
|
||||
// // 为组件提供 install 安装方法，供按需引入
|
||||
// pedestal.install = function (Vue) {
|
||||
// Vue.component(pedestal.name, pedestal)
|
||||
// }
|
||||
|
||||
// // 导出组件
|
||||
// export default pedestal
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>主组件</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import agInput from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agInput.install = function (Vue) {
|
||||
Vue.component(agInput.name, agInput)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agInput
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<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></style>
|
||||
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import agSelect from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agSelect.install = function (Vue) {
|
||||
Vue.component(agSelect.name, agSelect)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agSelect
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<template>
|
||||
<el-select
|
||||
class="ag_select"
|
||||
:style="{ width }"
|
||||
:value="value"
|
||||
:size="size"
|
||||
v-on="inputListeners"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
<!-- <slot name="options" slot="options" /> -->
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloneDeep from "../../../src/utils/cloneDeep";
|
||||
export default {
|
||||
name: "agSelect",
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "small",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: "",
|
||||
options: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
attrs() {
|
||||
if (this.$attrs["remote-method"]) {
|
||||
let obj = cloneDeep(this.$attrs);
|
||||
Reflect.deleteProperty(obj, "remote-method");
|
||||
return { ...obj, clearable: true, filterable: true, remote: true };
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 所有父级事件
|
||||
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);
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.removeMethod(newVal);
|
||||
this.model = newVal;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async removeMethod(keywords) {
|
||||
if (this.$attrs["remote-method"]) {
|
||||
let opts = await this.$attrs["remote-method"](keywords);
|
||||
this.options = opts;
|
||||
}
|
||||
},
|
||||
handleChange(value) {
|
||||
this.$emit("input", value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,32 +1,32 @@
|
|||
// 导入组件
|
||||
import agInput from './agInput/index'
|
||||
import agSelect from './agSelect/index'
|
||||
// 导入button组件
|
||||
import mButton from './Button/index'
|
||||
import mButton1 from './Button1/index'
|
||||
|
||||
// 组件列表
|
||||
const components = [
|
||||
agInput,
|
||||
agSelect
|
||||
]
|
||||
// 组件列表
|
||||
const components = [
|
||||
mButton, mButton1
|
||||
]
|
||||
|
||||
// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
|
||||
const install = function (Vue) {
|
||||
// 定义 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) {
|
||||
// 判断是否是直接引入文件
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
export default {
|
||||
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
|
||||
install,
|
||||
}
|
||||
export {
|
||||
}
|
||||
export {
|
||||
install,
|
||||
// 以下是具体的组件列表
|
||||
agInput,
|
||||
agSelect
|
||||
}
|
||||
mButton,
|
||||
mButton1,
|
||||
}
|
||||
38
src/App.vue
38
src/App.vue
|
|
@ -1,45 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<agSelect ref="ref_Pedestal" :value="value" @input="changeInput">
|
||||
</agSelect>
|
||||
<moduleName></moduleName>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import agSelect from "../packages/agSelect/src/index";
|
||||
import moduleName from "../packages/Button/src/index.vue";
|
||||
export default {
|
||||
components: { agSelect },
|
||||
components: { moduleName },
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeInput() {
|
||||
// console.log(this.value);
|
||||
},
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #81aa6e;
|
||||
}
|
||||
<style scoped lang='scss'>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
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
|
||||
}
|
||||
Loading…
Reference in New Issue