1、mpvue中使用vant-weapp的方式
2、mpvue引入vant-weapp后,mpvue自动将px转换为rpx单位的问题
参考
https://www.jianshu.com/p/5fb497ec2e5d
如果不想自己写的单位被mpvue转换,就将px单位写为PX, 大写的就不会转换为rpx单位了。
如果想把vant-weapp的px单位转换为rpx, 就需要修改配置文件。
在build/webpack.base.conf.js中安装上面的连接修改
var relative = require('relative')
// 添加+++++++
var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });
// +++++++
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
// 修改这个配置函数内的代码
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: path.resolve(config.build.assetsRoot, './static'),
transform(content, path) {
if (path.endsWith('.wxss')) {
return px2rpxIns.generaterpx(content.toString(), 1)
} else {
return content
}
},
ignore: ['.*']
}
])
然后重新打包编译,就生效了。
3 使用vant-weapp vant-field 表单组件,没有办法双向数据绑定?
对的,微信本身也没有这个,mpvue也没有实现表单的双向数据绑定。需要认为的触发监听change事件,自己改动data中的值。
对的,就是这么坑。就是这么坑。
<van-field
:value="phoneNum"
clearable
maxlength="11"
placeholder="请输入手机号码"
@change="changePhoneNum"
/>
changePhoneNum (v) {
this.phoneNum = v.mp.detail
},
主要,获取值的时候,不要忘了mp
哦!!!
ps 为啥不上MLGB
,????