SOURCE

console 命令行工具 X clear

                    
>
console
var vm = new Vue({
    el: '#app',
    data: {
        list: ['test1','test2','test3','test4','test5']
    }
})

// jQuery
var currentInputIndex
function test(e) {
    var index = $(e).data('index')
    // 实例化小键盘
    currentInputIndex = index
    var kb = new MyKeyboard()
    kb.show()
}

function getData() {
    $.each(vm.list, function(k, v) {
        console.log(v)
    })
}

// 小键盘回车回调监听
$('#keyboard').on('kbInputComplete', function(e,value){
  vm.$set(vm.list, currentInputIndex, value)
})

// 自定义的小键盘类
var MyKeyboard = function() {
  // 最后值
  this.value = ''
  this.input = $("#keyboard input")
}
MyKeyboard.prototype.show = function(){
  $('#keyboard').show()
  var _this = this
  this.input.on('keydown', function(e) {
    // 回车
    if(e.keyCode === 13) {
      _this.value = _this.input.val()
      // 回调
      $("#keyboard input").trigger('kbInputComplete', _this.value)
      _this.hide()
    }
  })
}
MyKeyboard.prototype.hide= function(){
  this.value = ''
  this.input.val('') 
  $('#keyboard').hide()
}
// 各种逻辑...


$(document).on('click', '#getDataBtn', function() {
    getData()
})
<div id="app">
    <div v-for="(item, k) in list" :key="k">
        <input readonly onclick="test(this)" v-modal="item" :data-index="k" v-model="item" />
    </div>
</div>
<button id="getDataBtn">获取结果</button>

<div id="keyboard">
  <p>模拟小键盘弹出</p>
  <input/>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
#keyboard {
  display:none;
}