[Vue]移动端number类型的输入框获取value时的怪异表现
在<input type="number">
输入框中,除了可以输入数字,还可以输入-(负号)
、.(小数点)
、e(指数符号)
。在Vue开发移动端应用时,如果想要控制用户仅仅可以输入数字,最好的办法就是使用watch
:
...
watch: {
inputVal(newVal){
// 在这里检查、过滤newVal
}
}
...
在<input type="number">
输入框中,除了可以输入数字,还可以输入-(负号)
、.(小数点)
、e(指数符号)
。在Vue开发移动端应用时,如果想要控制用户仅仅可以输入数字,最好的办法就是使用watch
:
...
watch: {
inputVal(newVal){
// 在这里检查、过滤newVal
}
}
...
目前,能够提供Vue文件格式化的插件只有Vetur。Vetur对Vue中的JavaScript,内置了3种格式化工具,默认的是prettier,它对HTML和JavaScript,默认都是过长的行自动换行,JavaScript中换行的情况更多,比如链式调用、参数列表等等。
马上就2020年了,作为一个有多年工作经验的前端开发,竟然不知道移动端浏览器支持小于12px的font-size设置。
可能是思维定势,PC端的浏览器对字体大小有限制,就认为移动端同样有限制,竟然没有亲手试试,真是太不应该了。并且,前端同事都是这样认为的……
https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/
jszip和filesaver的下载链接可以从上面的链接中找到
阅读了大神的这篇文章,正好工作中需要用到这个技术,于是就练习了一下jszip
的用法。
要实现的效果是:用js生成多张图片,打包到zip文件中,并下载到本地。
这篇文章介绍了在普通的布局和在flex布局中,margin: auto
的不同点,其最大的区别就是:在flex布局中,margin: auto
会让元素在垂直方向也居中,而普通布局中只能让元素水平居中。
注意:本文基于单文件组件开发模式,假定已经编写了一个名为store的js用来返回一个Vuex Store,导入了Vuex并添加了Vue.use(Vuex)等必要的代码
state
是Vuex
存储数据的地方。
在用webpack配置项目中,常会用到一些nodejs字段,包括一些函数,全局变量等,最常用的大概有以下几个:
下文中,data
的duration
不要setData
,因为页面并没有引用这个变量,setData
中会浪费性能,直接赋值就行了:this.data.duration = 0;
。如果是在Page
中,可在Page
的配置中自定义一个变量,但在组件中是不行的。文中用的是组件。
可能方法比较原始,如果各位大神有高大上的方法,请不吝赐教。
效果图(可能录屏软件帧数低,实际是没有卡顿和跳动的。动画起始和结束位置都是2):
wxs
的作用wxs
和Vue
中的计算属性
一样,作用都是用来辅助处理绑定的数据。
wxs
的使用文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
wxs
很简单,只要看文档就行了。
可以直接在wxml
文件中写<wxs></wxs>
标签,也可以直接在wxml
文件目录中建立.wxs
文件。推荐第二种做法,因为第一种做法,wxs
语法完全没有任何提示和语法高亮(指在微信开发者工具中,其他编辑器不清楚),出错时,在控制台甚至不输出错误信息。