elinput 组合键_element ui的el-input如何监听回车键。

官方暴露的事件中貌似没有enter事件,然后直接在el-input上写@keyup.enter也没能捕抓到事件,望大神赐教~~

@keyup.enter.native

element-ui api中表示 并没有onkeyup这个事件 所以 建议还是换input 如果非得用这个事件的话

同意@CoquettishPoppy的观点,建议撸个原生input吧,样式写个相似的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link href="http://cdn.bootcss.com/element-ui/1.2.7/theme-default/index.css" rel="stylesheet" />

</head>

<body>

<div id="app">

<el-input v-model="input" v-enter @enter.native="log" placeholder="请输入内容"></el-input>

</div>

<script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>

<script src="http://cdn.bootcss.com/element-ui/1.2.7/index.js"></script>

<script>

Vue.directive('enter', {

bind: function (el, binding, vnode) {

const input = el.getElementsByTagName('input')[0];

input.addEventListener('keypress', function (e) {

var key = e.which || e.keyCode;

if (key === 13) { // 13 is enter

// code for enter

el.dispatchEvent(new Event('enter'))

}

})

},

unbind: function (el, binding, vnode) {

}

})

new Vue({

el: '#app',

data() {

return {

input: null

}

},

methods: {

log() {

console.log(this.input)

}

}

})

</script>

</body>

</html>

@keyup.enter.native就可以触发了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值