Span 行内文本

<template>
<article>
  <section>
    <veui-form :data="formData">
      <veui-fieldset label="span 内容：">
        <veui-field>
          <veui-input v-model="formData.span"/>
        </veui-field>
        <veui-field>
          <veui-input v-model="formData.unit"/>
        </veui-field>
      </veui-fieldset>
      <veui-fieldset
        ui="large"
        tip="使用 <veui-span> 来插入中间非组件内容"
        label="预期收入："
      >
        <veui-field>
          <veui-input
            v-model="formData.start"
            ui="large"
          />
        </veui-field>
        <veui-span ui="large">
          {{ formData.span }}
        </veui-span>
        <veui-field>
          <veui-input
            v-model="formData.end"
            ui="large"
          />
        </veui-field>
        <veui-span ui="large">
          {{ formData.unit }}
        </veui-span>
      </veui-fieldset>

      <veui-fieldset
        tip="使用 <veui-span> 来插入中间非组件内容"
        label="预期收入："
      >
        <veui-field>
          <veui-input v-model="formData.start"/>
        </veui-field>
        <veui-span>{{ formData.span }}</veui-span>
        <veui-field>
          <veui-input v-model="formData.end"/>
        </veui-field>
        <veui-span>{{ formData.unit }}</veui-span>
      </veui-fieldset>

      <veui-fieldset
        ui="small"
        tip="使用 <veui-span> 来插入中间非组件内容"
        label="预期收入："
      >
        <veui-field>
          <veui-input
            v-model="formData.start"
            ui="small"
          />
        </veui-field>
        <veui-span ui="small">
          {{ formData.span }}
        </veui-span>
        <veui-field>
          <veui-input
            v-model="formData.end"
            ui="small"
          />
        </veui-field>
        <veui-span ui="small">
          {{ formData.unit }}
        </veui-span>
      </veui-fieldset>

      <veui-fieldset
        ui="tiny"
        tip="使用 <veui-span> 来插入中间非组件内容"
        label="预期收入："
      >
        <veui-field>
          <veui-input
            v-model="formData.start"
            ui="tiny"
          />
        </veui-field>
        <veui-span ui="tiny">
          {{ formData.span }}
        </veui-span>
        <veui-field>
          <veui-input
            v-model="formData.end"
            ui="tiny"
          />
        </veui-field>
        <veui-span ui="tiny">
          {{ formData.unit }}
        </veui-span>
      </veui-fieldset>

      <veui-fieldset
        ui="micro"
        tip="使用 <veui-span> 来插入中间非组件内容"
        label="预期收入："
      >
        <veui-field>
          <veui-input
            v-model="formData.start"
            ui="micro"
          />
        </veui-field>
        <veui-span ui="micro">
          {{ formData.span }}
        </veui-span>
        <veui-field>
          <veui-input
            v-model="formData.end"
            ui="micro"
          />
        </veui-field>
        <veui-span ui="micro">
          {{ formData.unit }}
        </veui-span>
      </veui-fieldset>
    </veui-form>
  </section>
</article>
</template>

<script>
import { Form, Field, Fieldset, Input, Span } from 'veui'

export default {
  components: {
    'veui-form': Form,
    'veui-fieldset': Fieldset,
    'veui-field': Field,
    'veui-input': Input,
    'veui-span': Span
  },
  data () {
    return {
      formData: {
        span: '-',
        unit: '万',
        start: null,
        end: null
      }
    }
  }
}
</script>