<template>
  <div class="yo-form-group">
    <a-form-model-item label="输入框">
      <a-input autocomplete="off" placeholder="请输入文字" />
    </a-form-model-item>
    <a-form-model-item label="只读输入框">
      <a-input autocomplete="off" placeholder="请输入文字" readonly />
    </a-form-model-item>
    <a-form-model-item label="前缀和后缀">
      <a-input addon-after="后缀" addon-before="前缀" autocomplete="off" placeholder="请输入文字" />
    </a-form-model-item>
    <a-form-model-item label="输入框组">
      <a-input-group compact>
        <a-input style="width: 40%" />
        <a-input style="width: 60%" />
      </a-input-group>
      <a-input-group>
        <a-row :gutter="8">
          <a-col :span="10">
            <a-input />
          </a-col>
          <a-col :span="14">
            <a-input />
          </a-col>
        </a-row>
      </a-input-group>
      <a-input-group>
        <a-row type="flex">
          <a-col flex="120px">
            <a-select default-value="Zhejiang">
              <a-select-option value="Zhejiang">Zhejiang</a-select-option>
              <a-select-option value="Jiangsu">Jiangsu</a-select-option>
            </a-select>
          </a-col>
          <a-col flex="auto">
            <a-input default-value="Xihu District, Hangzhou" />
          </a-col>
        </a-row>
      </a-input-group>
      <a-input-group compact>
        <a-select default-value="1">
          <a-select-option value="1">Between</a-select-option>
          <a-select-option value="2">Except</a-select-option>
        </a-select>
        <a-input placeholder="Minimum" style=" width: 100px; text-align: center" />
        <a-input
          disabled
          placeholder="~"
          style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: transparent"
        />
        <a-input placeholder="Maximum" style=" width: 100px; text-align: center; border-left: 0" />
      </a-input-group>
    </a-form-model-item>
    <a-form-model-item class="yo-form--vertical" label="上下布局">
      <span slot="help">
        上下布局，请在
        <a-tag color="pink">a-form-model-item</a-tag>上添加类
        <a-tag color="pink">.yo-form--vertical</a-tag>
      </span>
      <a-input autocomplete="off" placeholder="请输入文字" />
    </a-form-model-item>
  </div>
</template>