将input玩出一朵花
前言
这几天比较闲-0-,然后有一天晚上我下班回去后台发来一个图片,是Input里面包含一个路径,然后跟我嗦”还可以这样,修改不了”。一眼瞄过去我知道大概是某个属性起作用。今天突然脑(闲)洞(的)大(要)开(死),打算深入一下。
正文
首先来看这张图
它默认有个路径但是无法修改只能复制。
在mdn中可以看到一个readonly就能解决。
也就是下面这一句话就能解决
<input type="text" value="/test/linshuizhaoying" readonly="">
考虑一下应用场景应该是在文件管理,那么一开始这个value应该是自动获取来的参数,我们可以用vue模拟一下。
非常简单的用法,代码也很简单:
<template>
<input type="text" value="" readonly="">
<button v-on:click="change"> 改变路径</button>
</template>
<script>
module.exports = {
data:{
data:"/vue/linshuizhaoying"
},
ready:function(){
},
methods: {
change: function (e) {
this.data = "/change/linshuizhaoying";
}
},
}
</script>
然后闲的没事继续看,有个autofocus属性。
这是之前没注意到的,它可以在页面加载的时候自动把光标移到你指定的Input. 经过测试,如果多个Input设置autofocus=”true”,那么只有第一个会发光。
这个时候我突然想到vue官方文档中的一个例子。它可以定义一个过滤器,在把来自视图( 元素)的值写回模型之前转化它.
因为之前没怎么用过filter,因此花了点时间去熟悉,后来找到了使用方法。
我们先来看官方的代码
Vue.filter('currencyDisplay', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return '$'+val.toFixed(2)
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
但这里有个问题,它会报错。
Uncaught TypeError: t.toFixed is not a function
在stackoverflow找到根源。
我们需要强制转换一下类型。因此,具体可运行代码如下:
<template>
<input type="text" v-model="data | datachange">
</template>
<script>
var Vue = require("vue")
Vue.filter('datachange', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
//记得强制转换下类型
return '$'+parseFloat(val).toFixed(2)
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
module.exports = {
data:{
data:"123"
},
ready:function(){
},
methods: {
change: function (e) {
this.data = "/change/linshuizhaoying";
}
},
}
</script>
这个应用我们可以用到很多地方,比如输入一连串的数字,在某个位置自动用斜线把它分开。
根据上面的思路我们写个简单的demo来看下:
Vue.filter('datachange', {
// model -> view
// 在更新 `<input>` 元素之前格式化值
read: function(val) {
return val;
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var position = 4;
var insert = "-";
var s = val.toString().replace(/-/g, "");
if(val.length <= position){
return val
}else{
return [s.slice(0, position), insert, s.slice(position)].join('');
}
}
})
定义var s = val.toString().replace(/-/g, "");
这句是为了过滤原本有的横线。这样不会重复添加横线。
然后看到这个效果,我突然又想到了一个东东。很早之前别人给我看的一个效果。是这样的:
当初看到这个效果蛮惊艳的,后来经过查找问人,是formatter.js这个插件。
粗略的看了一遍源码。在配合官方给出的例子.
大概实现思路就是给一个pattern,给Input赋初始值。然后监听事件,对各个按键进行处理。
虽然讲的很简单,但是源码也有近千行了,感兴趣的可以去阅读。
结尾
好久没写点东东,最近在看高程和其他几本书。也在不断学习。