vue 封裝登錄組件

簡單封裝登錄組件，全局注冊，利用element-ui庫

如圖：

定義Login.vue組件

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="請輸入用戶名">
          <i slot="prefix" class="el-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="請輸入密碼"
          show-password
        >
          <i slot="prefix" class="el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login" type="primary" style="width:100%"
          >登錄</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Login",
  components: {},
  props: {
    ruleForm: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
  },
  methods: {
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('event', 'submit');
        }else{
          this.$emit('event', 'errHandle')
        }
      });
    },
  },
};
</script>

　　注冊公共組件

在globalComponent中 index.js中

// 注冊全局組件
import Vue from "vue"
import Login from "../components/Login.vue"

Vue.component('Login',Login)

　　

在main.js引入注冊
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./globalComponents";   //引入公共組件index
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

　　在view文件中登錄頁面。

<template>
  <div>
    <h1>登錄組件</h1>
    <div>
      <Login
        :rule-form="ruleForm"
        :rules="rules"
        @submit="submit"
        @errHandle="errHandle"
      ></Login>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoginPage",
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用戶名不能為空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "用戶名在2-6之間",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密碼不能為空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "密碼在2-6之間",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$message.success("提交成功");
    },
    errHandle() {
      this.$message.error("表單錯誤");
    },
  },
};
</script>

　　至此！  簡單的封裝就ok了！