input控件回显不了经过函数处理过的值

前端框架： ivew

我在工作上有个需求，input控件只是我用来回显，让用户感知到这块是需要自己设定值的。看图

image.png

因为值太多，不方便展示，所有我放在另外一个组件modal里面呢，点击查看

image.png

所有在modal里面修改的值，我在input那边都会回显出来，超出的长度显示...，回显出来之前，肯定需要进来处理，才能把对象组装成可读的string类型，不能直接回显我当前对象。

那么问题来了，input控件的model绑定不了函数，会报错，直接绑定对象，显示的是[object,object]，那么我们只能自己处理。
参照ivew里面slot写法：

<div style="position: absolute;z-index: 1;top: 0;left: 0;height: 100%; text-align: center; padding-left: 7px">
            // 将对象变为可读的string类型
           {{fontNumber(getText(item.value))}}
</div>

较完整代码：

image.png

input里面有禁用，但是因为灰底框不适合我的需求，所以我加了个遮罩层，代码通用，如下：

<div style="width: 100%;height: 100%;position: absolute;z-index: 999">
</div>