vue开发时候的注意小点

1、动态绑定style

子组件动态绑定颜色

:style="{ color: TextColor }"

 接收父组件传递过来的颜色数据

 props: {
    // #090DEF
    TextColor: {
      type: String,
      default: "#999",
    },
}

2、动态绑定Class

冒号后面为True，则为true

  :class="{ boxActive: checkNum == 5 }"

3、颜色渐变（向左边渐变）

 background: linear-gradient(
    to left,
    rgba(6, 118, 103, 0.4),
    rgba(6, 118, 103, 0.1)
  );

4、图片背景铺满

 background: url(../../../assets/images/energy/statusGreen.png) no-repeat;
 background-size: 100% 100%;

5、密码效验（自定义校验器rules）放在data里面，return上面

  data() {
    // 校验确认密码是否一致
    const validateRepPassword = (rule, value, callback) => {
      if (value === this.formData.newPassword) {
        // 相等,则通过
        callback();
      } else {
        callback(new Error("两次输入的密码不一致"));
      }
    };

    return {
      formData: {}, //表单
      // 校验
      rules: {
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
        repPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validateRepPassword, trigger: "blur" },
        ],
      },
    };
  },

6、echars引入注意方式

记得下载echars4.9版本，不指定版本。默认下载最新版，5.0以上版本当时报了一个找不到init方法的错误

npm install echarts@4.9 --save

 具体哪个页面引用就局部引用就行

import echarts from "echarts";

export default {

  mounted() {
    this.showMain();
  },

  methods: {
    async showMain() {
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById('main'))
      // 或者 this.$refs.main
      // var myChart = echarts.init(this.$refs.main);
      var myChart = echarts.init(document.getElementById('main'))
}}

7、全局引入字体样式

比如这个这个echars中的20，用的是ZhanKuQingKeHuangYouTi-2字体，

字体地址资源

在main.js中引入

import '@/assets/font/ZhanKuQingKeHuangYouTi-2.css';

比如就在上面的圆环中使用该字体

 title: [
          {
            text: this_.nowNumber,
            x: "47%",
            y: "32%",
            textAlign: "center",
            textStyle: {
              fontSize: 26,
              fontWeight: "normal",
              color: "#e8f7ff",
              fontFamily: "ZhanKuQingKeHuangYouTi-2",
              //   fontWeight:20
              fontWeight: "bolder",
            },
          },

8、引入阿里图标库组件

在main.js中全局引入

import './assets/icon/iconfont.js' //引入阿里巴巴图标库js
import './assets/icon/iconfont.css'//引入阿里巴巴图标库css

 使用的方法

  <div class="temperatureOne">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="iconTem"></use>
            </svg>
  </div>

  iconTem: "#icon-icon_qingtian",

因为我使用图标用于天气显示，所以需要动态绑定

7、@click.native

@click.native 原生点击事件：

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）

2，等同于在自组件中：

子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

<boxTitle
      :name="tileBoxChoose"
      class="titleBox"
      @click.native="chooseBBB()"
    />

8、window作用

window.location.href（当前URL）

结果如下：
http://www.myurl.com:8866/test?id=123&username=xxx

window.location.protocol（协议）

结果如下：
http:

window.location.host（域名 + 端口）

结果如下：
www.myurl.com:8866

window.location.hostname（域名）

结果如下：
www.myurl.com

window.location.port（端口）

结果如下：
8866

window.location.pathname（路径部分）

结果如下：
/test

window.location.search（请求的参数）

结果如下：
?id=123&username=xxx