iView的Input输入框，希望用户点到输入框的时候，自动全选输入框里内容，方便用户直接输入新的文字内容。 可以使用@on-focus来实现，给on-focus绑定方法，$event.target.select()来全选内容，如下： <i-input v-model="cg.inSh" type="text" @on-focus="$event.target.select()" style="width: 250px;" :maxlength="50"> <span slot="prepend"…
iView中的Input输入框虽然可以限制type="number"，限制只能输入数字（任能输入小数点、+/-号），但是不能满足如下需求： 仅限制输入数字（整数）或者不带小数点，等其他随意限制的情况；另外希望VueJS原生的input也能限制自定义的输入。 我们可以利用@on-keydown监听键盘输入的内容（keyCode），给需要能输入的内容加入白名单，不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。 Html代码如下： <i-input v-model=…
VUE项目中，可能需要用到监听路由变化的场景，例如：在Header组件中，需要根据当前的路由，来动态改成Header中的图片或者其他内容。 我们知道vue中使用watch来监听data内容的变化，要如何监听route的变化呢？代码如下 watch: { $route (newRoute) { var path = newRoute.path; if(path === '/login') { this.backgroundImg = require('../assets/home_bg2.jpg'); } else …
iView的表格虽然有了很多定制化的功能，不过有一个需求，官方始终没有实现，那就是表格的分组功能，来看下这个需求，客户想要实现如图的分组功能： 根据时间的不同，按照『今天』，『昨天』，『一周内』，『一个月内』，『更早』，另外根据其他需求的不同，根据其他类别进行分组展示。 虽然官方没有提供现成的解决方案，不过iView表格文档的『特定样式』进行改造，来实现这部分效果。这部分网上查了没有相关的实现，是我自己想出来的，应该算是独家吧，哈哈。 如上图，分组显示的列其实也是普通的一行，只是使用列合并把整行都跨过去了。另外针对…
Vant里面日历，需要设置比如周末是不可选的，默认看文档说明是van-calendar有min-date和max-date两个属性，是分别设置可选的最早日期和最晚日期，不过还是不能满足设置特定的日期不可选这个功能。 经过一番搜索和研究，可以使用:formatter来实现，文档是有提到formatter不过没有具体的示例，来看一下。 <van-calendar :formatter="formatter" :show-confirm="false" v-model="showCalendar" @confirm…
RT Vant的Dialog对话框，有个需求，就是按确定的时候，我们可能是请求后端的API，但是后端可能返回不成功，这个时候，就不应该关闭对话框了。 Dialog有个属性是before-close可以在这里面阻止对话框的关闭。 例如： <van-dialog v-model="showIdCardDialog" :before-close="saveIdCardClicked" title="身份证号" show-cancel-button> <van-field v-model="idCard"…
微信公众号里的网页支付，网上很多说的是使用纯JS的方式（包括官方的例子，也是距离的纯JS的实现方式），如果我们使用的vue搭建的项目，也是类似的，下面给出我的实现方式。 package.json加入"weixin-js-sdk": "^1.6.0"，如下： { "name": "test-wx", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service …
打开一个vue项目，里面有SASS语法，其中CSS里用到/deep/，发现编译报错，如下： ERROR Failed to compile with 1 errors 10:34:52 AM error in ./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true& Module build failed (from ./node_modules/sa…
默认情况下我们在Vue项目中引入了axios，是哟好难过axios进行post请求，是用application/json的方式去请求的，不过可能后端API的请求方式是form-data(application/x-www-form-urlencoded) package.json下增加qs: "qs": "^6.10.1" { "name": "newproject", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-servi…
Vue下，一般是使用路由router来打开其他页面，例如：this.$router.push("/home")，有时候需要在vue里打开外部的链接。 如果在html里用a标签打开外部链接，那就直接这样做： <a href='https://www.baidu.com' target='blank'></a> 如果在JS代码中打开 # 把当前页面替换成新页面（history历史记录中不会多一个，也就是说不能按返回来到上一个页面） window.location.replace('https:/…
