erze-form v1.0.4

erze-form

A Vue.js project

Build Setup

# install dependencies
npm install erze-form -S

# erze 仿 element-ui form 表单组件

引入

• import MyUI from './plugin'

• Vue.use(MyUI);

案例

<template>
  <div id="app">
    <z-form :model="userinfo" :rules="rules" ref="form">
      <ZFormItem label="用户名" prop="user">
        <z-input v-model="userinfo.user" placeholder="请输入用户名"/>
      </ZFormItem>
      <ZFormItem label="密码" prop="pass">
        <z-input v-model="userinfo.pass" type="password" placeholder="请输入密码"/>
      </ZFormItem>
    </z-form>
    <Button @click="handle_Login()">登录</Button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      userinfo: {
        user: "",
        pass: ""
      },
      rules: {
        user: [{ required: true, message: "账号不能为空" }],
        pass: [{ required: true, message: "密码能为空" }]
      }
    };
  },
  methods: {
    handle_Login() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          alert("欢迎你，" + this.userinfo.user);
        } else {
          console.log("error submit!!");
        }
      });
    }
  }
};
</script>