随笔分类 -  VUE及相关UI框架

vue,elementUI, vantUI
js 获取树结构的节点深度
摘要:需求:获取树结构的节点深度。 实现util.js: // 获取节点深度 参数为树结构array function getMaxFloor(treeData){ let deep = 0; function eachData(data, index) { data.forEach(elem => { 阅读全文
posted @ 2020-12-17 20:46 羽丫头不乖 阅读(2960) 评论(0) 推荐(0)
vue 树形数据增加属性并计算树节点的深度
摘要:需求:在一组菜单树结构中转换数据结构(增加一些属性),并计算该树结构的节点深度。 实现util.js: function transferTreeData(arr, vm, list, level, deep={maxLevel: 0}){ if(Object.prototype.toString. 阅读全文
posted @ 2020-12-17 20:39 羽丫头不乖 阅读(1400) 评论(0) 推荐(0)
vue+vuex 修复数据更新页面没有渲染问题
摘要:不解: 为什么在关闭开关后,已经将data里的属性和vuex属性初始化后,页面就是不响应??? 问题: 由于切换路由后,获取到vuex的数据在created中赋值到data相对应的属性中,在关闭开关后请求接口将vuex和data里的属性全部初始化,数据变更成功页面不渲染。(接口只做请求,不做数据返回 阅读全文
posted @ 2020-10-29 17:18 羽丫头不乖 阅读(3197) 评论(0) 推荐(0)
移动端评论区页面设计
摘要:需求:评论界面样式设计。 PS:界面比较粗糙,参考的朋友可自己细化。 实现如下图: 代码: 1 <template> 2 <div class="ym-comment"> 3 <div class="comment-title"> 4 <p> 5 <span>游戏评论 <em>共<i>3</i>条< 阅读全文
posted @ 2020-10-22 19:16 羽丫头不乖 阅读(516) 评论(0) 推荐(0)
导出文件,responseType设置了blob,实际返回了JSON格式的错误信息的处理方式
摘要:下载Blob流文件,成功和错误提示返回信息的方法记录;文件转换:文件转二进制,文件转base64。 阅读全文
posted @ 2020-10-22 15:13 羽丫头不乖 阅读(3849) 评论(0) 推荐(0)
vue 页面生成图片保存
摘要:需求:将页面中的元素转成图片,支持保存或下载。要求下载的图片包含页面背景,头像,用户名,文本为“我的邀请码”和个人二维码。 实现:将页面绘制到canvas中,生成base64图片链接,支持移动端的长按保存图片。 技术与插件:vue,qrcodejs2,html2canvas,nutUI 示例:以下将 阅读全文
posted @ 2020-10-20 14:27 羽丫头不乖 阅读(5449) 评论(0) 推荐(0)
promise+axios,axios,fetch,ajax请求
摘要:** promise+axios: /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function fetch(url,params={}){ return new Promise((resolve,r 阅读全文
posted @ 2020-04-27 12:21 羽丫头不乖 阅读(243) 评论(0) 推荐(0)
vue 弹窗禁止底层滚动
摘要:原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件。 let mo=function(e){e.preventDefault();}; stop(){ document.bo 阅读全文
posted @ 2019-01-29 18:09 羽丫头不乖 阅读(2804) 评论(0) 推荐(0)
vue 倒计时 iOS无效
摘要:vue实现的倒计时在苹果手机上无效,原因是因为后台返回的时间格式是‘2019-1-29 17:13:04’,而苹果手机只能解析这种时间格式‘YYYY/MM/DD HH:mm:ss’,修改后测试成功的代码如下: npm install moment -save; this.countdown(); c 阅读全文
posted @ 2019-01-29 17:16 羽丫头不乖 阅读(739) 评论(0) 推荐(0)
axios之增删查改操作
摘要:一、get方法获取数据 axios.get('url') .then(function (res) { console.log(res); }).catch(function (error) { console.log(error); }); 二、post方法新增数据 axios.post('url 阅读全文
posted @ 2018-09-08 16:29 羽丫头不乖 阅读(2772) 评论(0) 推荐(0)
vue Element-ui el-menu 左侧导航条
摘要:<template> <!--实现左侧导航条动态渲染(三级)--> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique- 阅读全文
posted @ 2018-09-07 20:41 羽丫头不乖 阅读(23823) 评论(2) 推荐(0)