用vue该怎么做输入框

Question

怎么做上面是icon按钮，下方就是输入框，我做的输入框用input是分开的

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

解答： 这个界面可以采用Flex布局来实现，可以将上面的icon按钮和下方的输入框放在同一个Flex容器中。 案例代码如下： HTML代码：

<div class="flex-container">
  <div class="icon">ICON</div>
  <input type="text" placeholder="请输入内容"/>
</div>

CSS代码：

.flex-container {
  display: flex;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px; 
  /* 可以根据需要设置margin值来调整icon和输入框之间的距离 */
}
input[type="text"] {
  height: 50px;
  border: none;
  outline: none;
  flex: 1;
}

使用Flex布局可以方便地实现界面的排版，可以根据实际情况进行样式的调整，达到更好的效果。 效果如下：