VueJS

分类下相关文章

vant button 组件动态添加/删除 loading 属性

例如,vant 的 button 组件,有一个 loading 属性。 <van-button loading type="danger" loading-text="加载中..." /> 有 loading 属性时,按钮会显示一个进行中的动态效果 没有 loading 属性时,则是一个普通的按钮样式 通常在调用后台 api 时,会在 button 组件上,添加 loading 属性。当 api 调用结束, 则删除该属性。 简单的实现方法: <van-button :loading="handling ? true : ...

阅读全文...

Vue 组件库 Vant 的 Picker 选择器使用问题汇总

van-popup 不显示 bug 现象: 触发 picker 弹出事件后,van-overlay 黑色背景已出现,但是包含 van-picker 的 van-popup 并未显示出来。 Chrome 工具里看了一下, fixed 并未生效,虽然 position: fixed; 并没有被覆盖,但是显然是没有生效。 StackOverflow 上搜索了一下,说可能是父级元素使用 transform 影响到了 fixed 的生效。 于是,将父级元素中的 -webkit-transform: translateZ(0); 注释掉。果然 van-popup 就可以看到了。 translateZ( ...

阅读全文...

Vuejs 输入框监听回车事件

例如,我想在一个输入框输入内容之后,点击回车,自动触发一个处理输入内容的函数。 使用 @keyup.enter 即可: <input v-model="input" type="text" class="form-control" @keyup.enter="convert_code_to_name" placeholder="颜色代码或名称"> 演示效果: 颜色转换工具 demo ...

阅读全文...

v-show 与 v-if 的区别

平时在 vuejs 中用 v-if 使用习惯了,当突然看到 v-show 时,不由的产生了疑惑,既然有了 v-if, 为何还要 v-show. v-if 条件渲染,即,使用了 v-if 如果满足条件,则整个子节点都会被渲染出来,包括事件的绑定等 如果不满足条件,则整个子节点都会被删除,包括事件也会被解绑 v-show 实际上就是 display:none 的快捷方式。 v-show 只是隐藏了节点的显示,但是节点还在,其绑定的事件也都还在。 v-if 和 v-show 的不同使用场景 从两者的原理可以看出,v-if 的来回切换成本很高。而 v-show 在初始化时,需要全部渲染,成本相对 ...

阅读全文...

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); }, }); ...

阅读全文...

近期节日

2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日