vue中el-input使用el-tag

可以使用vue的slot来实现这个功能。具体步骤如下：

1. 在el-input组件中添加一个slot，用于显示el-tag组件。

<el-input v-model="inputValue">
  <template slot="suffix">
    <el-tag>{{ tagValue }}</el-tag>
  </template>
</el-input>

2. 在data中定义inputValue和tagValue两个变量，并在methods中添加一个addTag方法，用于将inputValue的值添加到tagValue中。

data() {
  return {
    inputValue: '',
    tagValue: ''
  }
},
methods: {
  addTag() {
    if (this.inputValue) {
      this.tagValue = this.inputValue;
      this.inputValue = '';
    }
  }
}

3. 在el-input组件中添加一个按键事件，当用户按下回车键时，调用addTag方法。

<el-input v-model="inputValue" @keyup.enter.native="addTag">
  <template slot="suffix">
    <el-tag>{{ tagValue }}</el-tag>
  </template>
</el-input>

相关问题

vue2中el-input中使用el-tag

在 Vue2 中使用 Element UI 的 el-input 和 el-tag 组件，可以按照如下方式进行：

1. 安装 Element UI：

npm install element-ui -S

2. 引入 Element UI 组件：

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 组件：

<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 的值，从而获取用户输入的内容。

如何在vue2中el-input中嵌套使用使用el-tag

在 Vue2 中使用 Element UI 的 el-input 和 el-tag 组件嵌套，可以按照如下方式进行：

1. 安装 Element UI：

npm install element-ui -S

2. 引入 Element UI 组件：

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 组件：

<template>
  <div>
    <el-input v-model="inputValue">
      <el-tag slot="prepend" type="success">标签</el-tag>
    </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 的值，从而获取用户输入的内容。