@tripmini/caas-frontend-ui v1.0.9

Install 前置依赖

### 暂无

全局加载

import caasFrontendUi from '@tripmini/caas-frontend-ui'
import '@tripmini/caas-frontend-ui/lib/styles/caas-frontend-ui.css'

Vue.use(caasFrontendUi)

按需引用

方式1：手动加载js和css

import LoginUipage from '@tripmini/caas-frontend-ui/lib/login-uipage'
import '@tripmini/caas-frontend-ui/lib/styles/login-uipage.css'

Vue.component('login-uipage', LoginUipage)

方式2：通过 babel-plugin-component 自动转换

npm install --save-dev babel-plugin-component

Configure your .babelrc file like this

{
    "plugins": [
        ["component", {
            "libraryName": "@tripmini/caas-frontend-ui",
            "libDir": "lib",
            "styleLibrary": {
                "name": "styles",
                "base": false, // no base.css file
                "path": "[module].css"
            }
        }]
    ]
}

The you can import component on demand, and you don't need to care about importing styles, the babel plugin will do it automaticly.

import Vue from 'vue'
import { LoginUipage } from '@tripmini/caas-frontend-ui'

Vue.component('login-uipage', LoginUipage)

组件使用 (其他组件一样)

<template>
  <login-uipage
    :submitBtnDisable="submitBtnDisable"
    @submit="submitForm"
    @reset="resetForm"
  >
  </login-uipage>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      submitBtnDisable: false,
    };
  },
  methods: {
    resetForm(formName) {
      formName[1].$refs[formName[0]].resetFields();
    },
    submitForm(formName) {
      let _this = this;
      formName[1].$refs[formName[0]].validate((valid) => {
        if (valid) {
          _this.submitBtnDisable = true;
          let params = {
            account: formName[1].ruleForm.account,
            password: formName[1].ruleForm.password,
          };
          _this.$http.post(
            _this.$Api.LOGIN,
            params,
            (res) => {
              _this.submitBtnDisable = false;
              if (res.status === 0) {
                _this.$router.replace("/reset_password");
              } else {
                window["permissionMgr"].setPermissions.bind(_this)(
                  undefined,
                  function () {
                    window.location.replace("/index.html");
                  }
                );
              }
              window.sessionStorage.setItem("token", res.token);
            },
            function (res) {
              _this.$message.error(res.errmsg);
              _this.submitBtnDisable = false;
            }
          );
          // 5秒后自动解禁
          setTimeout(function () {
            _this.submitBtnDisable = false;
          }, 3000);
        } else {
          return false;
        }
      });
    }
  },
};
</script>