阿懿的博客 | Ayi

vue父子组件间传值方法

数据在父子组件的传递

在vue中，通常为了结构化，会把一些功能分成组件来写，最后在拼在一起，这样写的话利于维护和管理，但是这样一来，组件之间的传值问题就必须要解决了。父组件传值给子组件的方法父组件的代码 <route-driving ref="RouteDriving" @handle-route="handleRoute" @handle-select="handleS...

Posted by Ayi on October 28, 2018

远程搜索返回搜索列表并在树里高亮显示搜索节点

搜索树实现

代码实现 <el-tree :data="treeData" :props="defaultProps" :load="loadNode" lazy highlight-current node-key="value" ref="tree" accordion auto-expand-parent :current-node-key="currentNodeKey" :def...

Posted by Ayi on October 24, 2018

Element之input框远程搜索功能实现

下拉框不显示问题解决办法

实现代码 <el-autocomplete placeholder="分组名/对象名" v-model="filterText" :fetch-suggestions="querySearchAsync" popper-class="my-autocomplete" @select="handleSearchSelect" size="small"> ...

Posted by Ayi on October 24, 2018

webpack打包问题

样式本地没问题打包后却不显示的解决办法

有时候代码写好以后，本地运行没有问题，但是打包到服务器上就缺失了某些静态文件，比如我之前是这样写的但是这个背景图片打包后不见了，找不到静态文件主要的解决办法是找到webpack的配置文件，修改正确的配置文件就可以了方法如下如果是样式问题修改build中的文件，如果是图片问题，修改config中的文件

Posted by Ayi on October 22, 2018

openlayers+百度Api实现路线规划

路线规划实现

首先感谢@LZU-GIS的博客指导，他写了一篇openlayers+高德API实现路线规划的博客，但是我由于需求不一样，需要用百度API，所以写了这篇博客。博客地址接下来是百度API的实现方法 handleRoute (data, index) { if (index === undefined) { index = 0 // 默认选择第一条路线 ...

Posted by Ayi on October 18, 2018

用settimeout写一个定时器

用settimeout实现定时上传或下载

// 获取统计数据 getstateStatistics () { var _this = this setTimeout(function f () { Api.getstateStatistics() .then(data => { let datas = data.data ...

Posted by Ayi on October 15, 2018

vue+element写一个登录界面

登录功能实现

API // 登录 getLoginApi (name, pwd) { return this._doGetPromise(url4 + '/authorization/Gis/checkuser', { name: name, pwd: pwd }) }, // 判断token是否失效 getLoginIsTimeout (tok...

Posted by Ayi on October 15, 2018

vue+Element循环生成button

button名称为图片

用vue循环生成的button的好处就是可以统一添加样式以及方便与后台进行交互试想，如果你要写四个button，每个button都调用同一个方法，只是传值传的不同而已，如果不用循环写button的话，那么每个button都要绑定一个方法，虽然四个按钮都是调用一个方法，但是代码会显得特别冗余。话不多说，直接上代码 <template> <el-but...

Posted by Ayi on October 9, 2018

一个简单的侧边栏实现

纯css实现一个侧边栏伸出和缩入

实现效果就是一个纯css实现的效果，话不多说直接上代码 <template> <div :class="openCloseOnoff ? 'rightsideBar sideBarOpen' : 'rightsideBar rightsideBarClose'"> <div class="openClose" @click="handle...

Posted by Ayi on October 2, 2018

如何调用后台接口

后台接口使用指南

前言作为一名程序员，特别是一名前端程序员，你一定曾经存在过或者正在有这样的疑惑，每次后台说给个接口，我们用就是了，那我们到底是怎么用的呢。以vue框架为例，在创建好项目以后，在src/api/Index.js的文件下先写入以下代码 import Vue from 'vue' import axios from 'axios' import VueJsonp from 'vue...

Posted by Ayi on September 23, 2018

Ayi