基本フォームにさわる

input, radio, select, checkboxあたりの部品に触ってみる

Element Plus - The world's most popular Vue 3 UI framework

<template lang="pug">
el-form
  el-form-item(label="Text")
    el-input(
      placeholder="Email Address"
      name="email"
      v-model="formModel.email"
      clearable
    )
    el-input(
      placeholder="Url"
      name="url"
      v-model="formModel.url"
    )
      template(#prepend) Http://
    el-input(
      placeholder="Password"
      name="password"
      v-model="formModel.password"
      show-password
    )
    el-input(
      placeholder="Input freeword"
      name="freeword"
      v-model="formModel.freeword"
    )
      template(#prepend)
        el-select(
          v-model="formModel.select"
          placeholder="Select"
          style="width: 120px;"
        )
          el-option(label="Address" value="1")
          el-option(label="Name" value="2")
          el-option(label="E-Mail" value="3")
  el-form-item(label="Select")
    el-select(
      name="choice"
      v-model="formModel.choice"
    )
      el-option(label="OK" value="ok")
      el-option(label="NG" value="ng")
  el-form-item(label="Switch")
    el-switch(
      name="switch"
      v-model="formModel.switch"
    )
  el-form-item(label="CheckBox")
    el-checkbox(label="A" v-model="formModel.checks.a")
    el-checkbox(label="B" v-model="formModel.checks.b")
    el-checkbox(label="C" v-model="formModel.checks.c")
  el-form-item(label="Radio")
    el-radio(label="a" v-model="formModel.radio")
    el-radio(label="b" v-model="formModel.radio")
  el-form-item(label="DatePicker")
    el-date-picker(
      type="date"
      v-model="formModel.dt"
    )
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "FormUiPage",
  setup() {
    const formModel = reactive({
      email: "a@b.c",
      password: "abcdefg123",
      url: "www.google.com/",
      age: 20,
      freeword: "",
      select: "",
      choice: "",
      switch: true,
      checks: {
        a: true,
        b: false,
        c: false,
      },
      radio: "b",
      dt:"",
    });
    return {
      formModel,
    };
  },
});
</script>