vue+element ui学习笔记之input加搜索icon组合选取数据

最新推荐文章于 2024-07-26 10:31:01 发布

NAME-CJF

最新推荐文章于 2024-07-26 10:31:01 发布

阅读量3.7k

点赞数

分类专栏： vue-element ui学习 javascript 文章标签： html aa

本文链接：https://blog.csdn.net/changjiufu/article/details/82982714

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue-element ui学习

5 篇文章 1 订阅

订阅专栏

首先我们来看一下效果图:

具体的代码实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
	  <el-input  class="innerbox" v-model="input22" class="input-with-select" readonly @keyup.native.delete="clearIpt">
	    <el-button slot="append" icon="el-icon-search" ></el-button>
	</el-input>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
        	input22: '11' 
        }
      },
      methods:{
      	clearIpt:function(){
      		this.input22 = '';
      
      	}
      }
    })
  </script>
  </html>

这里实用的方法是@keyup.native.delete="",用来监听到键盘的删除事件。