VueJS

分类下相关文章

VueJS v-model 自动将输入框获取的字符串转换为数字

JS 的类型转换容易出现 bug html input 输入框即便指定 type="number",也经常出现 v-model 获取到的值为字符串的情况。 于是就出现了,在数值计算逻辑中,数字与字符串相加的情况。 > 100 + "2.35" "1002.35" 而我们预期的是: 100 + 2.35 102.35 在钱相关的计算中,这非常危险。 所以,不得不使用 parseFloat() 或者 Number() 对字符串进行转换。 VueJS 自动转换 <input v-model.number="pric ...

阅读全文...

移动网页端使用 Vue Vant 组件上传文件

非图片文件如何显示预览图标 默认支持非图片文件的预览图标,效果可以接受。同时,可以看到文件名的前面一部分。 限制接受的文件类型 accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" 限制上传的单个文件大小 max-size 文件大小限制,单位为 byte。 默认超出文件大小时,没有任何提示。但是该组件在文件超出大小时,会触发 oversize 事件。 模板中设置文件大小上限,并添加事件监听: <van-uploader :max-size=10485760 @ov ...

阅读全文...

Vue Element UI upload 组件上传文件之后 file list 依旧是空数组

在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步。。。 这个体验太差了。 无奈只能手动实现,设置 on-success 和 on-remove 的回调处理。 模板代码 <div id="upload_file"> <el-upload class="upload-demo" action="/api/upload" :on-success="han ...

阅读全文...

设置 Element UI 组件默认加载英文语言包

Element UI 默认使用的是中文 locale,在英文网站中使用,会发现大量的组件提示信息为中文。 我是从 CDN 引入的 Element UI 文件,找到一个切换 locale 的解决方案。 首先,从 CDN 引入英文语言包 locale/en.js 然后,设置 element locale 为英文 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js& ...

阅读全文...

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 的话,在点 ...

阅读全文...

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日