Vue3 + TS 使用 Element Plus 创建推送任务组件 - Push.vue

<template>
  <div>
    <h2>推送任务</h2>
    <div>
      <label for="role">推送角色：</label>
      <input type="text" id="role" v-model="roleInput" />
    </div>
    <div>
      <label for="time">推送时间：</label>
      <el-time-picker v-model="time" placeholder="选择时间"></el-time-picker>
    </div>
    <div>
      <label for="enable">启用：</label>
      <el-switch v-model="enable"></el-switch>
    </div>
    <div>
      <label>推送：</label>
      <el-radio-group v-model="pushDay">
        <el-radio label="Monday">周一</el-radio>
        <el-radio label="Tuesday">周二</el-radio>
        <el-radio label="Wednesday">周三</el-radio>
        <el-radio label="Thursday">周四</el-radio>
        <el-radio label="Friday">周五</el-radio>
        <el-radio label="Saturday">周六</el-radio>
        <el-radio label="Sunday">周日</el-radio>
      </el-radio-group>
    </div>
    <div>
      <button @click="submit">提交</button>
      <button @click="goBack">返回</button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ElTimePicker, ElSwitch, ElRadio, ElRadioGroup } from 'element-plus';

export default defineComponent({
  name: 'Push',
  components: {
    ElTimePicker,
    ElSwitch,
    ElRadio,
    ElRadioGroup,
  },
  data() {
    return {
      roleInput: '',
      time: '',
      enable: false,
      pushDay: '',
    };
  },
  methods: {
    submit() {
      // 提交逻辑
    },
    goBack() {
      // 返回逻辑
    },
  },
});
</script>
<style scoped>
h2 {
  margin-bottom: 20px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  width: 200px;
  height: 30px;
}
button {
  margin-right: 10px;
}
</style>