console
var vm = new Vue({
el: '#app',
data: {
list: ['test1','test2','test3','test4','test5']
}
})
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;
}