ui 项目解析

目录

1. 高级用法解析
2. 项目结构和框架

1. 高级用法解析

<el-button
    :loading="loading"
    type="primary"
    style="width:100%;margin-bottom:30px;"
    @click.native.prevent="handleLogin"
    >登 录</el-button>

prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符

import { mapActions, mapGetters } from "vuex";

this.$refs['loginForm'].resetFields()

data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      passwordType: "password"
    };
},

<style lang="scss">
$bg: #283443;             //定义的可复用的变量
$bg-trans: #28344380;
$text: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}
</style>

CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断，如果支持某个属性可以写一套样式，如果不支持某个属性，可以提供另外一套样式作为替补。

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

在vue⽂件中的style标签上，有⼀个特殊的属性：scoped。当⼀个style标签拥有scoped属性时，它的CSS样式就只能作⽤于当前的组件，也就是说，该样式只能适⽤于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。

父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的scoped CSS 的影响。