vuejs经验交流之-components(组件)
Vue的组件化功能可谓是它的一大亮点,通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。
子组件 setmap.vue
<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="100"> <Collapse v-model="formValidate.value" accordion> <Panel name="1"> 2D模式 <p slot="content"> <Form-item label="地图名称" prop="name" :label-width="80"> <Input v-model="formValidate.name" placeholder="请输入地图名称"></Input> </Form-item> <Form-item label="地图类型" prop="maptype" :label-width="80"> <Radio-group v-model="formValidate.maptype"> <Radio label="gisMap">Gis地图</Radio> <Radio label="staticMap">静态地图</Radio> </Radio-group> </Form-item> <Form-item v-show="gisMap" label="地图服务" prop="mapservre" :label-width="80"> <Input v-model="formValidate.mapservre" placeholder="请输入地图服务"> </Input> </Form-item> <Form-item v-show="staticMap" label="地图文件" prop="mapservre" :label-width="80"> <Input v-model="formValidate.mapservre" placeholder="请输入地图服务"> </Input><Button style="cursor: pointer;position: absolute;background-color: #5d5d5d;left:398px;top:2px;border:0px;" @click="addSysPic" type="text">预览</Button> </Form-item> <input type="file" @change="onSysFileChange" id="fileSysGrade" style="display: none"> <Form-item label="级别" prop="zoomLevel" :label-width="80"> <Select v-model="formValidate.zoomLevel" placeholder="请选择级别"> <Option v-for="item in carLevel" :key="item" :value="item.value">{{item.label}}</Option> </Select> </Form-item> <Form-item label="中心点" prop="center" :label-width="80"> <Input v-model="formValidate.center" placeholder="请输入中心点"></Input> </Form-item> <Form-item label="地图范围" prop="extent" :label-width="80"> <Input v-model="formValidate.extent" placeholder="请输入地图范围"></Input> </Form-item> </p> </Panel> <Panel name="2"> 2.5D模式 <p slot="content">2.5D模式</p> </Panel> <Panel name="3"> 3D模式 <p slot="content">3D模式</p> </Panel> </Collapse> <Form-item class="mapSaveButton" style="height: 20px;border-top: 1px solid #5d5d5d;"> <Button type="ghost" @click="handleReset('formValidate')" style="margin-left:334px;margin-bottom: -12px;margin-right: 10px;">取消</Button> <Button type="primary" @click="handleSubmit('formValidate')" style="margin-bottom: -12px;">保存</Button> </Form-item> </Form> </template> <script> export default { data() { return { formValidate: { id: '', name: '', center: '', zoomLevel: '3', extent: '', maptype: 'gisMap', mapservre: '', isstatic: false, value: '1', type: '2D' }, staticMap: false, gisMap: true, carLevel: [{'value': '1', 'label': '1级'}, {'value': '2', 'label': '2级'}, {'value': '3', 'label': '3级'}, {'value': '4', 'label': '4级'}, {'value': '5', 'label': '5级'}, {'value': '6', 'label': '6级'}, {'value': '7', 'label': '7级'}], ruleValidate: { name: [ { required: true, message: '服务名不能为空', trigger: 'blur' } ], center: [ { required: true, message: '中心点不能为空', trigger: 'blur' } ], zoomLevel: [ { required: true, message: '级别不能为空', trigger: 'blur' } ], extent: [ { required: true, message: '地图范围不能为空', trigger: 'blur' } ], mapservre: [ { required: true, message: '地图服务不能为空', trigger: 'blur' } ], maptype: [ { required: true, message: '地图类型不能为空', trigger: 'blur' } ] } } }, components: { }, computed: { }, created() { }, watch: { }, methods: { }, mounted() { }, beforeDestroy() { } } </script> <style scoped> </style>
父组件mapConfig.vue
<template> <div class="mapSet"> <div class="addMap">添加地图</div> <div class="mapConfig"> <setMap @saveClick='homeSaveClick'></setMap> //引用 setMap组件 </div> </div> </template> <script> import setMap from './setmap.vue' //import导入 export default { data() { return { } }, components: { setMap //注册 }, created() { }, watch: { }, computed: { }, methods: { }, mounted() { }, beforeDestroy() { } } </script> <style scoped> .mapSet { background-color: #171717; padding: 28px 16px 1px 11px; width: 598px; border-radius: 5px 5px 5px 5px; position: fixed; left: 620px; top: 146px } .mapConfig { background-color: #171717; } .addMap { background-color: #5d5d5d; top: -28px; position: relative; width: 598px; height: 51.32px; left: -11px; padding: 12px 0px 0px 19px; border-radius: 5px 5px 0 0; font-size: 14px; } </style>