heyui
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HeyUI</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heyui/themes/index.css">
</head>
<body>
  <div id="app" v-padding="20">
    <div v-height="50">
      <SwitchList :datas="labels" v-model="labelPosition" :small="true"></SwitchList>
    </div>
    <h-form ref="form" :label-position="labelPosition" :label-width="90" :rules="validationRules" :model="model">
      <h-formitem label="用户名" prop="name">
        <input type="text" v-model="model.name" />
      </h-formitem>
      <h-formitem label="密码" prop="password">
        <input type="password" v-model="model.password" />
      </h-formitem>
      <h-formitem>
        <h-button color="primary" :loading="isLoading" @click="submit">提交</h-button>&nbsp;&nbsp;&nbsp;
        <h-button @click="reset">取消</h-button>
      </h-formitem>
    </h-form>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/heyui"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    isLoading: false,
    labelPosition: "left",
    labels: {
      left: 'Label左对齐',
      right: 'Label右对齐',
    },
    model: {
      name: "",
      password: ""
    },
    validationRules: {
      required: [
        'name',
        'password'
      ]
    }
  },
  methods: {
    submit() {
      this.isLoading = true;
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        this.$Message("验证成功");
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      } else {
        this.isLoading = false;
      }
    },
    reset() {
      this.$refs.form.reset();
    }
  }
})
</script>
</html>