VueJS

分类下相关文章

VueJS 实现管理后台新订单的语音提醒

逻辑 当新订单数量接口返回的数字大于之前缓存的值时,就播放提示音;并弹窗提醒。 实现代码 第一次用 js 调用音频播放,没想到这么简单。。。 new Vue({ el: "#sidebar", data: { "new_order_count": 0, }, mounted: function() { var audio = new Audio('/new_order.mp3'); var that = this; this.fetch_data('new_order_count', '/new_or ...

阅读全文...

v-charts 图表组件 - 基于 Vue 和 echarts 封装

现在稍微复杂一点的前端界面,我发现离开了 Vue 就写不动。 目前正在做一个数据的图表展示,发现 v-charts 真是个神器。完美结合了 Vue 和 echarts 的优点。 效果如图 配置方便直观 设置别名 双 Y 轴 很轻松实现,文档示例也非常人性化,比 echarts 官网文档更直观。 代码实现 模板 <ve-histogram :title="{text: '订单趋势', left: 'center', top: 'bottom'}" :data="order_data" :settings=" ...

阅读全文...

Vue 变量如何方便的绑定 laravel form 输入框

vuejs v-model 绑定 html input 输入框后,需要注意 v-model 变量并不能由 html input 的值进行初始化 但是 v-model 变量可以同步数据到 html input 所以,在 v-model 变量需要在 vue mounted 时进行初始化。例如, this.input_value = {!! $some_var !!}; 之后,就不需要做特殊处理了,v-model 会自动把值同步到 input 组件的 value 上。 具体说明,参考 vuejs 官方文档 https://vuejs.org/v2/guide/forms.html ...

阅读全文...

从 CDN 引入的 Vant,调用 Toast 提示时报错 Toast is not defined

例如在页面 script 中执行 Toast.success('抄底成功'); 报错 Toast is not defined 正确的用法是 vant.Toast.success('抄底成功'); ...

阅读全文...

使用 Vue 的 Vant.js List 列表组件实现无限下拉

拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景。 最近在使用的 Vant (轻量、可靠的移动端 Vue 组件库),实现起来就非常方便。 模板实现代码 <div id="app" v-cloak> <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="load_more_items" > ...

阅读全文...

VueJS 将 404 图片替换为默认图片

在后台数据源不可控的情况下,很有可能出现商品图片 404 的情况,而随之而来的就是界面布局错乱。例如,下图,右侧商品图片丢失,导致图片外层 div 无法计算高度,以至于排版错乱。 VueJS 处理 404 的方法: 首先在 HTML 模板中,加上 error 处理函数 <img :src="product.image" alt="" @error="show_default_image"> 然后在 vue 实例的方法中加上对应的处理函数,使用默认图片替换 404 错误的图片 show_default_image: fu ...

阅读全文...

Vue 阻止点击事件向父级传递

实际案例 点击图片中间的删除按钮,则触发删除逻辑 点击图片其他区域,触发图片放大预览逻辑 正确的实现如下 <li v-for="(element, index) in images" @click="preview(index)" > ... <span> <i @click.stop="remove(index)"></i> </span> ... </li> 如果不加 stop 的话,在点 ...

阅读全文...

Vue 实现多图上传并可以调整图片顺序

由于 Element UI 的 Upload 上传组件只支持多图上传,但并不支持图片的顺序调整,而实际使用场景中,例如,产品封面轮播图,经常要用到图片顺序调整功能。所以,找了一下解决方案。 一些备选方案 JQuery UI sortable 效果演示,参考:https://codepen.io/malkafly/pen/gbVYZb 上面示例中使用的排序组件是 jquery ui 中的 sortable 功能。 但是,我测试的过程中,感觉 jquery ui 的这个功能非常不流畅,经常出现没有响应的情况。 Sortablejs 找到一个竞品 sortablejs, 从对比视频上看,优化效果明显 ...

阅读全文...

使用 Function.prototype.bind 为 vuejs 组件的回调函数添加额外参数

在使用 Element UI VueJS 的上传图片组件时,遇到一个问题。需要在一个列表中使用多个 el-upload 组件,当其中一个组件数据更新时(上传成功,或者删除成功),能够及时更新绑定的变量。 on-success 回调,默认支持的三个参数是 res, 上传图片的后台接口返回 file, 新增的图片文件 fileList,图片列表 默认是不支持当前循环的 index 。 解决方法是使用 Function.prototype.bind <tr v-for="(item, index) in items" class="array-row&quot ...

阅读全文...

坑:Vue 动态添加的数据属性,双向绑定渲染异常

代码示例,使用 element ui 的 el-table, 将返回的数据列表,逐行渲染到 table row 上,每行可以编辑 staffs 字段,即用 el-select v-model 绑定了 staffs 字段。 <template slot-scope="scope"> <el-select v-model="scope.row.staffs" multiple ... 问题的现象是,数据在初始化之后,可以正确的渲染到视图上,但是后续修改的内容没有同步渲染到视图上。 有问题的代码。 var that = this; ...

阅读全文...

使用 vue-router 获取 URL 查询参数

引入 vue-router.min.js,然后与 Vue 实例绑定即可 例如: http://www.sunzhongwei.com/test_vue?name=zhongwei var router = new VueRouter({ mode: 'history', routes: [] }); new Vue({ router, el: '#my_app', mounted: function() { var name = this.$route.query.name; console.log(name); }, }); ...

阅读全文...

VueJS 的树形下拉框组件

现实场景 多级分类,且大分类下的二级分类中,存在同名二级分类的问题。在添加产品时,从线性单列下拉框中选择对应的子分类非常困难,甚至可以说是 mission impossible。 那么,层级化的树形下拉框组件就非常合适了。 网上找了个 VueTreeselect 组件,网址 https://vue-treeselect.js.org/ 是用 VueJS 实现的一个组件。 无法通过 ajax 初始化数据 通过 ajax 拉取的后台数据,在前端怎么也展示不出来。 原来 options 只能在初始化时设置,在之后通过 ajax 回调中赋值是无效的。。。负分! 无法选择父级节点 去掉下面的配置 :d ...

阅读全文...

使用 vue 为 image src 赋值

今天写了这么一段代码 <img src="{{ img_src }}" > img_src 是 vue 里存储图片地址的一个变量。然后,这段代码报错了。。。 Google 了一下,才知道正确的写法应该是 <img :src="img_src" /> 原来我是个大xx。。。 mustache 的变量括号不能用于 HTML 属性 对应 HTML 属性,需要使用 v-bind,即 <img v-bind:src="img_src" /> v-bind 可以缩写为 :, 即 <img :src= ...

阅读全文...

vuex 的基本概念

在 weex 的 demo 项目 hacknews 里看到了 vuex 的使用。于是了解了一下 vuex 的基本概念。 可以将 vuex 理解为一个前端 MVC 的规范。 如果没有 vuex 世界是怎样的? 场景一: 新闻类 APP,首页需要拉取新闻列表 只需要在页面初始化时 ajax 获取新闻列表即可,获取之后给对应的变量赋值。 然后页面自动渲染。 这种情况,似乎没有 vuex 什么事情。 硬要说有什么关系的话,那就是把访问服务器的逻辑剥离出来。方便复用。(然而,这里根本复用不了。。。) 场景二: APP 中需要登录之后,才能拉取部分数据,而这些接口都需要用到代表登录态的 token。 即, ...

阅读全文...

VueJS 2 导致 HTML5 Canvas 绘制的图像无法显示

在使用 vuejs 2.1.8 时,出现一个奇怪的问题,原页面 canvas 绘制的图像,之前可以正常显示。 但是引入 vuejs 2 ,并实例了一个 vue 对象,图像在页面刷新后就不显示了。只有当动画继续绘制几秒之后,才会出现。console 中也没有任何报错信息,通过日志来看,js 代码的确运行正常,只是看不到图像。。。 代码结构如下 var ctx = document.getElementById('ca').getContext('2d'); var app = new Vue(...); 完全没有头绪,只能 Google 了,发现一个完全类似的情况 Vue interferin ...

阅读全文...

近期节日

2019年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日