Ayi

无钱莫入众，言轻莫劝人，待到功成时，把酒问初心

多个input框自动获取焦点

填写完一个input焦点自动跳到下一个

应用场景 有很多input框需要用户填写，需要做到当用户填写完其中一个，自动跳到下一个不为空的input框里，比如一些登录页面或者表单的填写。同理可以扩展到很多自动跳转的标签上，但是这里只展示input的写法 代码实现 // 遍历所有的input判断是否为空 handleJudgeInput () { let inputRoute = document.ge...

Posted by Ayi on December 25, 2018

wgs84,bd09,gcj02坐标切换

坐标转换算法

利用百度api，高德api做前端页面的时候可能会涉及到一些坐标转换的问题，因此借鉴网上一些代码后，整理了一份js版的坐标转换代码 JS版 const xpi = 3.14159265358979324 * 3000.0 / 180.0 // π const pi = 3.1415926535897932384626 // 长半轴 const a = 6378245.0 // 扁率 con...

Posted by Ayi on December 25, 2018

弹窗可以拖动位置，弹窗大小可以改变

Element组件之dialog的拖拽

实现效果 实现代码 <el-dialog title="气泡参数设置" :visible.sync="settingOnoff" center :modal="false" width="20%" v-dialogDrag custom-class="popupdialog"> </el-dialog> 在dialog属性中加上v-dialogDrag ...

Posted by Ayi on December 19, 2018

个人前端笔记

零散知识点记录

更新时间：2018年12月26日 关于element组件tree中props的理解 <el-tree :data="treedata" :props="defaultProps" :indent="10" highlight-current></el-tree> defaultProps: { children: 'children', label: ...

Posted by Ayi on December 19, 2018

Popover在表格中错误显示和关闭的问题

Element组件之popover在表格中的应用

截止到element2.4.11版本，关于popover在表格中的显示的bug仍然还没修复，表现为，如果在表格终的某个单元格里嵌套一个popover弹窗，点击某一个单元格中的button出发弹窗显示的时候，每一行的popover都会显示 但是这样也不是没有解决办法 方法一 <el-popover style="display:inline-block;margin-left:2p...

Posted by Ayi on December 19, 2018

CSS实现文字过长显示省略号的方法

溢出文字隐藏

代码 .demo { width: 100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 说明 宽度一定要设置 white-space:nowrap是禁止文字折行 text-overflow表示当文本溢出时是否显示省略标记，有两个值： clip：不显示省...

Posted by Ayi on December 19, 2018

vue如何将方法单独抽象出来

方法抽象

在vue的开发中，有时候会有一些方法在很多组件中都会使用到，就如同有一些模块会在很多地方使用到的时候，我们会使用组件化，将模块单独抽出来，在需要引用就好，同理，可以将方法单独抽出来，在需要的时候调用就好。 方法一 const GeneralMethods = { domId (id) { return document.getElementById(id) } }...

Posted by Ayi on December 13, 2018

CSS美化滚动条

scrollbar美化方法

滚动条构造图 构造说明 ::-webkit-scrollbar： 滚动条的整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button： 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变现实效果。 ::-webkit-scrol...

Posted by Ayi on December 13, 2018

图片预览放大功能实现

纯CSS或插件实现

如何利用纯css实现放大和缩小 页面布局和数据定义 <div id="Imgs"> <img :id="'myImg' + index" class="imgplus" v-for="(item, index) in picArr" :key="index" :src="item.picPath" height="120"> </div> ...

Posted by Ayi on December 5, 2018

openlayers添加落点的方法

利用openlayers在加载的地图中根据坐标值落点 let centerF = new ol.Feature(new ol.geom.Point(center)) // center是一个数组坐标 let vectorSource = new ol.source.Vector({ features: [centerF] // 这里必须是一个数组 ...

Posted by Ayi on December 5, 2018

FEATURED TAGS
JS CSS markdown pro注册码 微信小程序 快速搭建个人博客 科学上网 layerUI Element Vue openlayers webpack 笔记 坐标转换
ABOUT ME

和世界交手这么多年,你是否光彩依旧,兴致盎然.

✉️ 837205989@qq.com

FRIENDS