hw-vue-components

汉卫研究院公共vue组件库

安装

yarn add hw-vue-components
或
npm i hw-vue-components -S

引入hw-vue-components

在 main.js 中写入以下内容：

import Vue from 'vue';
import HwVueComponents from 'hw-vue-componenst';
import App from './App.vue';

Vue.use(HwVueComponents);

new Vue({
  el: '#app',
  render: h => h(App)
});

组件

###Login

####登录页面组件 代码

<template>
  <hw-login
    title="预警决策后台管理系统"
    :logo="logo"
    :bgImg="bgImg"
    :on-login="loginHandle"
    ref="loginDom"
    :on-refresh-code="refreshCode"
    :identifyCode="identifyCode"
    :loading="loading"
  ></hw-login>
</template>

<script>
import logo from "@/assets/img/logo.png";
import bgImg from "@/assets/img/loginBg.jpg";
import { login, getCode } from "@/api/manage/login";

export default {
  data() {
    return {
      logo,
      bgImg,
      identifyCode: ``,
      loading: false
    };
  },
  components: {},
  mounted() {
    this.getCodeHandle();
  },
  methods: {
    loginHandle(formValue) {
      this.loading = true;
      login({
        ...formValue
      }).then(response => {
        if (response.code === 0 || response.code === 2) {
          sessionStorage.setItem(`token`, response.data);
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    refreshCode() {
      this.getCodeHandle();
    },
    getCodeHandle() {
      getCode().then(response => {
        if (response.code === 0 || response.code === 2) {
          this.identifyCode = response.data;
        }
      });
    }
  }
};
</script>

<style lang="scss">
</style>

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | title | 标题 | string | —— | 后台管理系统 | | logo | 登录页面logo | string | —— | —— | | bgImg | 登录页面背景图 | string | —— | —— | | identifyCode | 验证码内容 | string | —— | —— | | loading | 登录按钮的loading状态 | boolean | —— | false | | on-login | 点击登录时的回调 | function(formValue) | —— | —— | | on-refresh-code | 点击验证码刷新时的回调 | function() | —— | —— |