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>