<view class='content'>
  <view class='input-box'>
    <input type='text' placeholder='请输入姓名' v-model='name' class='input'>
  </view>
  <view class='input-box'>
    <input type='text' placeholder='请输入年龄' v-model='age' class='input'>
  </view>
  <view class='input-box'>
    <input type='text' placeholder='请输入地址' v-model='address' class='input'>
  </view>
  <button type='default' @click='onShare()' class='share-btn'>点击分享</button>
</view>
<style>
  .content {
    max-width: 500px;
    border-radius: 10px;
    padding: 20px;
  }
  .input-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
  }
  .input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
  }
  .share-btn {
    background-color: #f00;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
简约风格的用户信息输入框和分享按钮

原文地址: https://www.cveoy.top/t/topic/n6fH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录