vue elementui input ip加端口号

你可以使用 ElementUI 的 Input 组件以及自定义的 slot 来实现输入 IP 地址和端口号的功能。

具体方法如下：

1. 在模板中，使用 Input 组件，并设置 type 属性为 text。同时，为了方便用户输入，可以设置 placeholder 属性为“IP 地址:端口号”的格式。

2. 使用自定义的 slot，将一个包含两个 input 组件的 div 元素插入到 Input 组件的尾部。第一个 input 组件用来输入 IP 地址，第二个 input 组件用来输入端口号。

3. 在样式中，设置自定义 slot 中的 div 元素的样式为 flex 布局，并设置两个 input 组件的宽度和 margin-right 属性，以便让它们排列在一行上。

下面是示例代码：

<template>
  <el-input type="text" placeholder="IP 地址:端口号">
    <template slot="append">
      <div class="ip-port-input">
        <el-input v-model="ip" size="small" placeholder="IP 地址"></el-input>
        <el-input v-model="port" size="small" placeholder="端口号"></el-input>
      </div>
    </template>
  </el-input>
</template>

<style scoped>
.ip-port-input {
  display: flex;
  align-items: center;
}

.ip-port-input > .el-input {
  width: 120px;
  margin-right: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      ip: '',
      port: ''
    };
  }
};
</script>

这样，用户就可以在一个输入框中方便地输入 IP 地址和端口号了。