1. Platform construction (multilingual support)
The vue admin management background only includes Element UI & axios & iconfont & permission control & lint, the current version is v4.0+based onvue-cli
2. Component encapsulation (other components have the same code format)
Dynamically configure component parameters to achieve various business logic and various effects
<!--elMain组件-->
<template>
<!-- superParams[parentNode.resizeMethod] 父级方法 -->
<div :class="parentNode.class" v-resize="superParams[parentNode.resizeMethod]">
<component v-for="(item,index) in parentNode.childrenNode" :key="index" :parentNode="item" :is="item.componentName" />
</div>
</template>
<script>
// 下级需用到的组件
import elContainer from '@/components/Page/elContainer';
import elForm from '@/components/Page/elForm';
import elTable from '@/components/Page/elTable';
import elPagination from '@/components/Page/elPagination';
import elDialog from '@/components/Page/elDialog';
export default{
inject: ['superParams'], // 祖先组件向其所有子孙后代注入的一个依赖
components:{
elContainer,
elForm,
elTable,
elPagination,
elDialog
},
props:{
// 接收组件参数
parentNode:{
type:Object,
require:true
}
}
}
</script>
<style lang="scss" scoped>
</style>
<!--elForm组件-->
<template>
<el-form
@submit.native.prevent
:model="parentNode.model ? superParams[parentNode.model] : {}"
:class="parentNode.class"
:rules="parentNode.formRule ? superParams[parentNode.formRule] : {}"
:label-width="parentNode.labelWidth || ''"
:ref="parentNode.refName || ''"
:label-position="parentNode.labelPosition || 'right'"
>
<component v-for="(item,index) in parentNode.childrenNode" :key="index" :parentNode="item" :is="item.componentName" />
</el-form>
</template>
<script>
import elContainer from '@/components/Page/elContainer';
import elFormItem from '@/components/Page/elFormItem';
export default{
inject: ['superParams'],
components:{
elContainer,
elFormItem
},
props:{
parentNode:{
type:Object,
require:true
}
}
}
</script>
interface use
1. Interface component reference (just introduce an elMain component)
<template>
<elMain id="main" :parentNode="htmlData" />
</template>
<script>
import elMain from '@/components/Page/elMain'
import { htmlData } from "./index";
export default {
//父组件提供参数给子组件（响应式时需设置为对象）
provide(){
return {
superParams:this
}
},
components: {
elMain
},
data(){
return {
htmlData:htmlData,
searchForm:{
deviceName:''
}
}
}
methods: {
//监听浏览器窗口变化
onResize() {
}
}
}
</script>
Component Catalog
interface directory
index.js configuration
Multi-data source configuration function, supporting unlimited levels
export const htmlData = {
componentName:'elMain', // 1 div
class:['accountList','container'],
resizeMethod:'onResize',
childrenNode:[
{
componentName:'elForm', // 1-1 el-form
class:['searchForm','searchUser'],
childrenNode:[
{
componentName:'elContainer', // 1-1-1 div
class:['search-left'],
childrenNode:[
{
componentName:'elFormItem', // 1-1-1-1 el-form-item
label:'form.deviceName',
prop:'',
childrenNode:[
{
componentName:'elInput', // 1-1-1-1-1 el-input
class:['queryProduct'],
vModel:'searchForm.deviceName',
placeholder:['placeholder.pleaseEnter','form.deviceName'],
clearable:true
}
]
}
]
}
]
}
]
}