CodingNoob

最近在做城市管网项目，项目中需要绘制一些管道路线，压力点位，和区域等，为了满足项目需求，于是基于高德地图实现了一个简单的编辑器。

【代码】高德地图实现gps轨迹坐标定位代码。

随着5G网络的渐渐普及，物联网在人们的生活中渐渐广泛使用，社会向着越来越智能化的方向发展。当康科技经过不懈努力，研发属于自己的一款3D可视化编辑器，助力企业应用实现3D可视化服务。......

import { randomString } from '@/utils/index.js';import router from '@/router/index.js';// ws配置信息export const webSocket = { ws: null, // ws实例 recTime: 5 * 1000, // 重连刷新时间 webSocketTime: null, // 定时请求发送心跳包id reconnentTime: null, // 唱失败从重连id par.

<template><div class="bmap-layout"> <tipsBar/> <div class="unit" v-if="mapType == 'heat'"> <div class="unitItem"> <span class="text">锅炉房：</span> <span class="isNum">{{dataSys.guoLuF...

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobject.

<template> <div class="tab-wrapper" :id="'tab_' + tabType"> <!-- <span class="active-bar" :style="{'top': `${activeIndex * 30}px`}"></span> --> <span class="active-bar" :style="{'top': `${currentIdx * 30}px`}" v-.

入口文件：<template> <div class="menu" id="menu"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <menuItem v-for="item in menuList" :key="item.id" :data="item" class="hor

效果如下：<template> <div class="sign"> <div class="content"> <canvas id="canvas" :width="width" :height="height"/> </div> <div class="btn"> <button @click="clearCanvas()">清除</button&gt

我们在开发项目的时候经常会遇到一些树形结构的数据结构，比如部门、班级、关系等等层级结构的数据，通常常规的展示方式一般是通过树的结构来展示出来，现在我们自己就来实现一个可以新增、修改、删除的树。实现的过程很简单，树一般都会采用递归思路，然后将数据展示出来。<div class="tree" id="Tree" ref="TreeNode"> <ul> ...

我们平时扫码付款的时候，经常会输入一些数字进行付款，仔细看了下键盘和系统的键盘有点不一样，于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说，直接上代码。结果如下：代码如下：<template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM" @...

效果图如下：代码如下：<template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in TOTAL" :key="n"> &lt...

父组件：&amp;lt;template&amp;gt; &amp;lt;div class=&quot;demo&quot; @click='toggle'&amp;gt; &amp;lt;box-bar v-if='box' :deviceid='id'&amp;gt;&amp;lt;/box-bar&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;/

最近在用vue做项目的时候遇到一个在当前数据列表里面实现可复制，并且可以编辑然后保存功能，如果是单纯的复制，那很简单，直接往数据里面添加一条数据就可以了。 但是需求是要求复制，并可以编辑保存。自己想了一下，然后写了一些demo.最终效果如下图所示：代码如下：&lt;template&gt; &lt;div class="demo"&gt; &lt;div clas...

Vue.js实现表格数据增、删、改、查效果 代码如下所示：（注意需引入jquery） index

index

小图标是引入font-awesome字体图标库绘制的。效果如下图所示： index

最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。代码如下：&lt;template&gt; &lt;div class="index"&gt; &lt;!--header-bar&gt;&lt;/header-bar--&gt; &lt;div style="margin:20px;"&am

代码如下：&lt;template&gt; &lt;div class="slider"&gt; &lt;div class="wrapbox"&gt; &lt;div class="item" v-for="(item, index) in items" style=""&gt;{{ite

最近一直在用vue，有个功能是要实现全选和取消全选的功能，于是想了一下要怎么做。效果如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue实现checkbox全选和全不选&lt;/t

最近项目一直在使用vue，以前只是用vue做过一些简单的demo对数据进行增删改，并没有用于实际开发项目，。今天就想了一下如何用vue实现常见的图片上传前本地预览效果。效果预览：&lt;template&gt; &lt;div class="image-view"&gt; &lt;div class="addbox"&gt; &lt;...

&lt;template&gt; &lt;div class="tab-slider"&gt; &lt;div class="tab"&gt; &lt;span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click=&

代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&

一直在发博客，突然注意到在发布博客的时候选中对应的标签时的一个功能，最近一直在接触vue，于是想了一下要自己要怎么实现。原图如下：代码如下：&lt;template&gt; &lt;div class="checkbox"&gt; &lt;h1&gt;选中的ID值：{{checkboxValue}}&lt;/h1&gt; &lt;div ...

代码如下：&lt;template&gt; &lt;div class="checkbox"&gt; &lt;div class="input"&gt; &lt;p v-for="item in inputs"&gt; &lt;span&gt;自定义字段：&lt;/span&

github效果在线预览仓库地址： https://github.com/zhongyoucong/vuejs/vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：登入后： 登入前： 登录框: 注册框： html代码部分：