-components of Vuejs Experience Exchange (component)

Sub-component Setmap.vue

<template> <form ref= "formvalidate": Model= "formvalidate": rules= "Rulevalidate" label-position= "left": LA Bel-width= "> <collapse v-model=" formvalidate.value "accordion> <panel name=" 1 ">2D Mode<p slot= "Content" > <form-item label= "map name" prop= "name": label-width= "+" > <                Input v-model= "formvalidate.name" placeholder= "Please enter map name" ></Input> </Form-item> <form-item label= "Map type" prop= "Maptype": label-width= "> <radio-group v-model=" formvalidate.ma PType "> <radio label=" gismap ">gis map </Radio> <radio label=" STATICMA P "> Static maps </Radio> </Radio-group> </Form-item> <form-i TEM v-show= "Gismap" label= "Map Service" prop= "Mapservre": label-width= "> <input v-model=" formvalidate.m Apservre "placeholder=" Please enter map service > </Input> </Form-item> < Form-item v-show= "Staticmap" label= "Map File" prop= "Mapservre": label-width= "> <input v-model=" formv Alidate.mapservre "PlaceHolder= "Please enter map service" > </input><button style= "Cursor:pointer;position:absolute;background-color:  #5d5d5d; left:398px;top:2px;border:0px; "  @click = "Addsyspic" type= "text" > Preview </Button> </Form-item> <input type= "File" @change = "Onsysfilechange" id= "Filesysgrade" style= "Display:none" > <form-item label= "Level" prop= "zooml                    Evel ": label-width=" > <select v-model= "formvalidate.zoomlevel" placeholder= "Please select Level" > <option V- for= "Item in Carlevel": key= "item": Value= "Item.value" >{{item.label}}</Option> </Select>                  </Form-item> <form-item label= "Central point" prop= "center": label-width= "+" >                <input v-model= "Formvalidate.center" placeholder= "Please enter center point" ></Input> </Form-item> <form-item label= "map range" prop= "extent": label-width= "> <input v-model=" Formvalidate.ex Tent "placeholder=" Please enter the map range ></Input> </Form-item> </p> </pa Nel> <panel name= "2" > 2. 5D Mode<p slot= "Content" >2.5d mode </p> </Panel> <panel name= "3" >3D Mode<p slot= "Content" >3d mode </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; " > Cancel </Button> <button type= "PRIMARY" @click = "handlesubmit (' formvalidate ')" style= "Margin-bottom: 12 px; " > Save </Button> </Form-item> </Form></template><script>Exportdefault{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 level '}, {' Value ': ' 3 ', ' label ': ' 3 '}, {' Value ': ' 4 ', ' label ': ' 4 '}, {' Value ': ' 5 ', ' label ': ' 5 '}, {' Value ': ' 6 ', ' label ': ' 6 level '}, {' Value ': ' 7 ', ' label ': ' 7 '}], Rulevalidate: {name: [{required:true, message: ' Service name cannot be empty ', Trigger: ' Blur '}], center: [{required:true, message: ' Center point cannot be empty ', Trigger: ' Blur '}], Zoomlevel: [{required:true, message: ' Level cannot be empty ', Trigger: ' Blur '}], extent: [{required:true, message: ' Map range cannot be empty ', Trigger: ' Blur '}], Mapservre: [{required:true, message: ' Map service cannot be empty ', Trigger: ' Blur '}], Maptype: [{required:true, message: ' Map type cannot be empty ', Trigger: ' Blur '}]}}, components: {}, computed: {}, created () {}, watch: {}, methods: {}, Mounte D () {}, Beforedestroy () {}}</script><style scoped></style>

Parent Component Mapconfig.vue

<template> <div class= "Mapset" > <div class= "addmap" > Add map </div> <div class= "mapconf IG "> <setmap @saveClick = ' Homesaveclick ' ></setMap>//reference Setmap components </div> </div></ Template><script>Import Setmap from'./setmap.vue '//import ImportExportdefault{data () {return{}}, components: {setmap//registration}, 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>

Vuejs-components (component) of experience exchange