问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

element ui的el-input如何监听回车键。

头像
陶中之马
    4522897127

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

    javascripthtmlcssvue.jselement-ui
    阅读 39.3k
    6 个回答
    得票最新
    头像
    waterc
      52426
      ✓ 已被采纳

      @keyup.enter.native

      头像
      Charles
        221

        <el-input type="password" v-model="loginForm.password" placeholder="密码" @keyup.enter.native="loginSubmit"></el-input>

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

        头像
        茂_onster
          3817

          @keyup.enter.native=“xxx”

          头像
          四月的桜和猫
            3.3k52955

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

            clipboard.png

            头像
            大师兄
              5
              新手上路，请多包涵

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

              头像
              Chobits
                7.4k2827
                <!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>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏