vuejs经验交流之-components(组件)

子组件 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>
时间: 2024-10-05 08:59:53

vuejs经验交流之-components(组件)的相关文章

vuejs经验交流之-安装(NPM)

(1)检查node版本 在安装vue的环境之前,安装NodeJS环境是必须的.可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境. 当然,没有安装的话,去Node.js的官网下载一下,各种下一步,傻瓜式安装就好,非常方便. tips:这里说一下我自己踩过的一个坑,我最开始,安装的是国外官网上最新的7.3.0的版本,然后再最后npm run dev的时候各种报错.最后的解决方式是把node的版本回退到了6.2.0.所以这里推介大家安装NodeJs 4~6之间的版本. (

vuejs经验交流之-watch 深度监测

formValidate是一个对象,想要监测对象的每一个为属性的变化 formValidate: { handler() { //要干的事情 }, deep: true }

vuejs经验交流之-开发环境和生产环境的启动

vue开发环境 首先要下载必要的包 命令  cnpm install/yarn install 1 启动后台服务  npm run server 2  启动前台 服务 npm run server vue生产环境 首先要下载必要的包 命令  cnpm install/yarn install 生产环境要把前段代码的打包,后端不需要打包,打完包把client文件下的内容全部删掉,这时就是一个完整的生产环境的包,再用下面的命令启动(2) 1 打包 npm run build 2 启动  npm ru

网上开店的经验交流

第一.网店装修篇: 1.首先要把网店好好化妆一下,把宝贝描述.公告.分类都美化一下,这样我的店虽然刚开,但起码给客户感觉我是打算用心做好这个店.至于如何美化,自己动手或者购买网店装修都可以,我的网店是自己做的. 2.有必要的朋友,建议买个简易的商品小摄影棚(200元),这样拍出来的实物很漂亮,一眼就能吸引客户,但描述中一定要实事求是,不要夸大汇品国际网络创业平台http://www.hp116.com. 3.购物的说明/协议/可能发生问题的处理方法,最好想的仔细些,在商品中列出来,重要的放在前面

[经验交流] (最新)移动App应用安全漏洞分析报告 !

漏洞扫描方式主要分为静态和动态,静态扫描的漏洞类型主要包含SQL注入风险.webview系列.文件模式配置错误.https不校验证书.database配置错误等.动态扫描的漏洞类型主要包含拒绝服务攻击.文件目录遍历漏洞.file跨域访问等. 本报告选取11类android app中同等数量的热门app,其活跃用户量可覆盖83%的移动端网民,根据阿里巴巴移动安全中心对这些app的漏洞检测,得到以下结论: 参与检测的android app中,近97%的app都存在漏洞问题,且平均漏洞量高达40个.

2017级软工经验交流体验

在本次交流会上,我最喜欢的一款软件是来自第十组的同学制作的名叫教室派的软件.尽管该软件在功能上有些许不足,但其美观的界面,浮标的设计,新颖的想法给了我相比于其他软件不一样的体验. 打开教室派软件首先有个自动切换的功能介绍界面,然后进入教室查询功能,之后还可以编辑自己的课表,可以查询成绩.制作人告诉我说,他们还将加入澡堂实时使用情况的功能,这一设想我觉得非常有用.然而这个软件却存在许多问题.第一,查课表功能在选择了其他教室时,再选择其他天(除周一)会跳到基教的该天.第二,编辑课表存在字数过多无法显

[经验交流] Active-Active 方式设置 kubernetes master 多节点高可用

关于 kubernetes master 多节点以及高可用,网上的方法多采取 Active-Standby 方式,即: 通过 pacemaker 等软件使得某种 master 服务(apiserver,scheduler,controller-manager)同一时间只运行一个实例.具体来说,如果有多台master node,上面都安装了scheduler,controller-manager, apiserver: 对于schduler服务,同一时间只在一台master 节点上运行, 对于co

深圳本土web前端经验交流

群号:125776555  深圳本土web前端技术交流群 baidu tencent前端拒绝垃圾广告.吹水,欢迎讨论技术.跳槽经验期待您的加入

[经验交流] kubeadm 安装 kubernetes 一年过期的解决办法

转载注明原作者地址:http://www.cnblogs.com/hahp kubeadm 是 kubernetes 提供的一个初始化集群的工具,使用起来非常方便.但是它创建的集群证书默认只有一年的有效期,一年之后随着证书失效,各个节点以及 apiserver 都将停止服务.官方推荐一年之内至少用 kubeadm upgrade 更新一次 kubernetes 系统,更新时也会自动更新证书.不过,在产线环境或者无法连接外网的环境频繁更新 kubernetes 不太现实.可以修改 kubeadm