![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
hq111111111
编程小学生,怕什么学海无穷,进一寸有一寸的欢喜!
展开
-
树图Tree和 四分屏视频做联动实现
效果图:我这里使用的是iview,element-ui道理是一样 <Tree ref="myTree" :data="tree" @on-check-change="treeChange" :multiple="multipleBoolean" show-checkbox :check-directly="true"> </Tree> <div class="r原创 2021-08-12 11:34:00 · 180 阅读 · 0 评论 -
vant 上传图片加百分比进度
功能给每个上传的图片加可实时展示的进度,方便在网络不好情况下,实时查看上传情况,提升用户使用友好度。代码实现upload.vue<van-uploader :after-read="afterReadAll" v-model="beforeArkList" multiple :max-count="10" :preview-full-image="previewFullImage"></van-uploader> da原创 2021-08-10 17:59:25 · 1638 阅读 · 0 评论 -
element-ui table 展开行
实现效果实现代码 // 当 row 中包含 children 字段时,被视为树形数据。支持子节点数据异步加载。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。 <el-table :data="searchResult" style="width: 100%" height="385" :header-cell-style="{ 'background-color': '#2C2E原创 2021-04-22 15:14:32 · 636 阅读 · 0 评论 -
vue 自定义指令
使用场景要实现的功能没有复杂到需要使用组件,但是又不是一个表达式能解决的。使用方法官方文档示例:// 单独写在 n.js 文件 Vue.directive('n', { bind: function(el, binding){ el.textContent = Math.pow(binding.value, 2) }, update: function(el, binding){ el.textContent = Math.pow(binding.value, 2) }.原创 2021-02-18 14:09:56 · 69 阅读 · 0 评论 -
vue-router使用笔记--嵌套路由
对比以下两种路由配置方法的不同效果:<div class="home" ref="home"> <div class="btn"> <router-link class="route" to="/shopAnalyse/index">店铺</router-link> <router-link class="route" to="/cigareteAnalyse/index">卷烟</router-link&g原创 2021-01-30 16:30:39 · 99 阅读 · 0 评论 -
高德地图解决逆地理坐标问题
逆地理坐标:即从经纬度,转化为城市名称。步骤:申请key 高德api文档开始传参请求,fetch处理跨域,接口返回数据各种转化,异步数据处理。可视化展示总结:当没有按照预期效果运行时,不要觉得自己没问题,要按照步骤一步一步排查可能没出现预期效果的原因。...原创 2020-09-05 13:33:42 · 993 阅读 · 0 评论 -
前端vue环境搭建4步备忘
网络不好会影响下载的包,所以最好在网好的时候下载下载node node下载地址下载vue npm install vue -g下载脚手架 vue-cli (最好用powserShell下载全局cli ) npm install -g @vue/cli vue-cli官网地址然后就可以通过 vue-cli 命令创建项目,下载 echarts / element-ui 等 npm 包npm i element-ui -Snpm install echartsnpm ins原创 2020-05-12 18:24:01 · 133 阅读 · 0 评论 -
vue-cli2 & vue-cli3 的搭建项目步骤
用了很长时间vue-cli3,搭建项目很方便,只需一行命令vue create helloworld。可是由于 Chrome 即将不支持 flash ,所以项目中的流视频要使用的一个 liveplayer 插件,但是 vue-cli3 研究了3个小时,也没把 liveplayer 需要引入的 webpack 配置项配置成功,只能继续使用 vue-cli2 搭建项目开发。事实证明,封装太过了反而不灵活。以下是 vue-cli2 的搭建项目步骤:全局安装vue-clicnpm install -g vu原创 2020-06-04 17:10:14 · 144 阅读 · 0 评论 -
用vue和jquery对比做消息滚动效果
参考资料:https://www.jq22.com/webqd82https://cn.vuejs.org/v2/guide/transitions.html首先是用jquery的实现方法:$(function() { //获得当前<ul> var $uList = $(".scroll-box ul"); var timer = null; /...原创 2019-11-08 19:38:06 · 151 阅读 · 0 评论 -
You may have an infinite update loop in a component render function.问题解决
问题:在构造出来的tabledata对象数组进行渲染表格时再次使用这个对象数组的数据进行其他操作,造成双向绑定过程中的无限循环。解决过程在查询相关类似问题时,找到了灵感,正因为vue是数据的双向绑定渲染页面,在形成表格数据的同时,我为了使第一行的按钮隐藏,又对第一行数据进行判断处理,所以导致循环得到表格数据时又同时调用方法处理这些数据,进而无限循环下去。解决方案直接删除与渲染表格数据同时进行时的其他处理函数,用v-show处理第一行数据的显示隐藏。...原创 2020-07-02 17:54:00 · 2397 阅读 · 0 评论