happyElina-优快云博客

原创 vue 实现简易卡包效果

在项目中遇到了实现简易卡包效果的需求，需要在垂直堆叠元素中实现点击展开当前元素，收起其他元素的功能，思路是通过控制每一个堆叠元素的类名来实现，一下是核心实现代码template： <div class="mine-top"> <div class="my-card" v-for="(item,index) in reservationList" :...

2019-10-09 14:36:12 1116 1

原创网页可视化元素操作——svg.js

最近公司的新需求是做一个可以自己编辑页面元素形状，旋转，拖动以及填充图片的功能，经查觉得svg.js是一个较好的实现方式，配合插件svg.draggable.js可实现元素的拖动。踩过的坑：1 项目中需要用到最新的版本，旧版和新版初始化图像的用法不一样我用的svg.js ：3.0.13 svg.draggable.js:3.0.2需要找到对应的版本...

2019-07-03 18:24:33 2493 2

原创 CKEditor5 自定义上传图片

公司的网站中也要集成富文本编辑器，我们选择了CKEditor 5，官方网址在集成的过程中需要完成图片上传到公司服务器，在文档中有三种方法，三种方法，第一种是用CKEditor 的服务肯定是不行，第二种需要后端配置一些东西，最好也不要麻烦别人，第三种就是自己根据引导去写一个自定义插件，因为他都基本写好了，所以比较容易，于是就自己写了一个MyUploadAdapter.js 文件，在需要的地方...

2019-01-09 16:03:47 5268 2

原创调研公司官网的Markdown 新替代

随着公司业务的发展，公司研究贴子模块的Markdown 需要更加完善，换成支持更多功能的，在决定是否能替换前，需要考虑一下几个问题： 1、能否支持完美显示以前的用户编辑内容 2、是否开源 3 、满足原来的缺点改善：例如直接粘贴图片实时预览 4、支持各种复杂的科学公式插入代码经搜查以下三种进入了考虑筛查范围： https://ben...

2019-01-04 16:08:22 462

原创移动端未确定高度元素的高度自适应

项目现状：1：在项目中遇到了tab框中超出内容滚动的效果，页面顶部和底部都已固定高度的元素内容。2：由于项目用到了天猫的移动端自适应解决方案，传统的屏幕高度-已知高度不适用。3：天猫的自适应js http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js 用到页面以后，会根据设备的dpr 来生成对应的me...

2018-07-26 19:54:51 1385

原创 element ui radioGroup 根据json 动态生成radio

数据格式： "paraSelect": { "up": "上涨", "down": "下跌" } <el-radio-group v-model="radioValue" size="mini" @change="changeRadio" > <div v-for="(item,

2018-04-12 20:22:37 3886

原创 vue-cli 单页面手机应用input点击手机端虚拟键盘弹出盖住input

在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素，当点击input框时在安卓手机上出现了： 1 虚拟键盘弹出盖住input2 底部定位的元素被挤上来网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度...

2018-04-11 19:10:42 6617 1

原创页面随机浮动元素效果

由于公司需要在情人节板块在页面呈现随机浮动的气泡和玫瑰，这里保存下当时的代码；可以单独写一个floatObject.js; var bodyWid = document.documentElement.clientWidth; var bodyHei = document.documentElement.clientHeight; //随机新建元素 ...

2018-02-24 15:48:37 614

原创根据后台数据生成动态轮播图

在假期结束之前总结上份工作中最难部分，即根据后端数据自动生成轮播图，轮播图中包含视频，如果遇到视频资料，根据数据要求播放指定次数后继续轮播。以下为代码实现：//生成轮播元素,arr轮播数组数据,id轮播父元素,guige中big,small分别代表大小轮播function getLunboEles(arr,id,guide){ var lis='' ; var width,height...

2018-02-22 11:24:37 5236

原创从dom 图片转换到file对象

最近公司接入另一个公司的jsSDK来做一个简易的图片编辑器，麻烦的是在设定编辑器的图片时只留了两个接口，一个是传入图片的线上地址，另一个是传入图片的file对象，考虑到每更换一张图片就上传服务器的性能和流量消耗，决定还是传入file对象，那么问题来了，如何将调用原生Scheme获得的本地图片路径转化为file对象？流程：路径→ dom img标签 → canvas画出该图 →调用canvas的方

2016-12-10 09:31:48 8128

1、有交互的页面元素一定要设interactive属性为true，否则监听的事件都将无反应。2、空的container无法捕捉到mousedown，mouseup事件。3、使用对象的event.data.global可以转换当前位置为全局位置。4、movieclip.textures = arr,arr为保存texture的数组。5、为container加displaygroup属性可以为元素分层，

2016-11-12 14:38:57 3894

happyElina的博客