Form 表单

将组件内的用户输入的 switch、input、checkbox、slider、radio、picker 提交。

当点击 form 中 form-type 为 submit 的 <se-button /> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

<se-form @submit="submit" @reset="reset">
  <se-input name="word" />
  <p>
    <se-checkbox-group name="checkboxGroup" :value="selected">
      <se-checkbox
        v-for="(item, i) in options"
        :key="i"
        :value="item.value"
        :disabled="item.disabled"
      >
        {{item.label}}
      </se-checkbox>
    </se-checkbox-group>
  </p>
  <p>
    <se-radio-group name="radioGroup" :value="fruit">
      <se-radio
        v-for="(item, i) in radioOptions"
        :key="i"
        :value="item.value"
        :disabled="item.disabled"
      >
        {{item.label}}
      </se-radio>
    </se-radio-group>
  </p>
  <p>
    <se-switch name="my-switch" />
  </p>
  <p>
    <se-slider name="slider" style="width: 300px" />
  </p>
  <se-button form-type="submit">提交</se-button>
  <se-button form-type="reset">重置</se-button>
</se-form>
<script>
  export default {
    data() {
      return {
        fruit: 'b',
        selected: [],
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ],
        radioOptions: [
          { label: '选项A', value: 'a', disabled: true },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd', disabled: true }
        ]
      }
    },
    methods: {
      submit(e) {
        console.log(e.detail.value)
      },
      reset() {
        console.log('reset data')
      }
    }
  }
</script>

Events