vue2中el-input中使用el-tag
时间: 2024-03-05 18:52:49 浏览: 238
在 Vue2 中使用 Element UI 的 el-input 和 el-tag 组件,可以按照如下方式进行:
1. 安装 Element UI:
```bash
npm install element-ui -S
```
2. 引入 Element UI 组件:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
3. 在 el-input 中使用 el-tag 组件:
```vue
<template>
<div>
<el-input v-model="inputValue">
<template slot="prepend">
<el-tag type="success">标签</el-tag>
</template>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
```
4. 在 el-input 的 slot 中添加 el-tag 组件,可以通过 slot 属性指定 el-tag 放置的位置。在上面的示例中,我们将 el-tag 放置到 el-input 的 prepend 位置。
5. 可以通过 v-model 指令绑定 el-input 的值,从而获取用户输入的内容。
阅读全文