vue开发时候的注意小点

Posted 2021-12-28 捡黄金的少年

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()"
    />