注释说明-vue项目

注释说明：

一. data属性说明：

【1】、单行属性，注释写在行尾
good:

activeName: 'actList',// 活动名称

bad:

// 活动名称
activeName: 'actList',

【2】、多行属性，注释写在行上
good:

// 表格配置
tableConfig: [
          {
            name: "SKU",
            val: "product_model"
          }, {
            name: "活动已售",
            val: "sold"
          }, {
            name: "待拼成订单",
            val: "pending"
          },
        ],

bad:

tableConfig: [ // 表格配置
          {
            name: "SKU",
            val: "product_model"
          }, {
            name: "活动已售",
            val: "sold"
          }, {
            name: "待拼成订单",
            val: "pending"
          },
        ],

Array>Object结构的，只注释第一个对象内部属性接可。
good:

tableConfig: [
          {
            name: "SKU",//表头名字
            val: "product_model"//对应的接口字
          }, {
            name: "活动已售",
            val: "sold"
          }, {
            name: "待拼成订单",
            val: "pending"
          },
        ],

bad:

tableConfig: [
          {
            name: "SKU",//表头名字
            val: "product_model"//对应的接口字
          }, {
            name: "活动已售",//表头名字
            val: "sold"//对应的接口字
          }, {
            name: "待拼成订单",//表头名字
            val: "pending"//对应的接口字
          },
        ],

Object>简单类型的，每一个属性都进行说明，书写位置，规则如上。
good:

   params: {
          email: null,// 邮箱
          name: null,// 名称     
        },

bad:

   params: {
          // 邮箱
          email: null,
         // 名称
          name: null,     
        },

二. props、computed、watch说明：

统一采用行上注释

三. methods说明：

方法分为两种类型：
1、无参型
2、有参型

[1]、无参型，需进行功能说明。格式采用 "//"
good:

// 重置
reset(){
    this.params = {}
    this.page = 1
    this.per_page = 10
    this.search()
  },

bad:

 /**
 * @desc  重置
 */ 
reset(){
    this.params = {}
    this.page = 1
    this.per_page = 10
    this.search()
  },

[2]、有参型，需进行功能、参数、返回值说明。如果是单参的，可以采用双斜线在功能后追加说明。
good:

 //  获取全选的数组   languages  [Array]   获取数据的表单名称
    filterSelectAll(languages){
      let arr = []
      for(let i = 0;i<languages.length;i++){
        arr.push(languages[i].key)
      }
     this.selectArr = arr
    },

bad:

如果是多个参数的，采用多行注释
good:

/**
 *@desc  改变状态
 *@param  id      [String]  改变对象的id
 *@param  status  [String]  改变对象的status
 *@return config  [Object]  配置对象
 */
changeStatus(id, status) {
  let self = this
    return config = {
    url: api.changeBannerStatus,
    loading: "loading",
    param: {
      banner_position_id: id,
      status: status
    }
  };

bad:

//  改变状态    id  [String]  改变对象的id ;  status  [String]  改变对象的status；return config  [Object]  配置对象
changeStatus(id, status) {
  let self = this
    return config = {
    url: api.changeBannerStatus,
    loading: "loading",
    param: {
      banner_position_id: id,
      status: status
    }
  };

or:

//  改变状态     
//  id      [String]  改变对象的id 
//  status  [String]  改变对象的status
//  config  [Object]  配置对象
changeStatus(id, status) {
  let self = this
    return config = {
    url: api.changeBannerStatus,
    loading: "loading",
    param: {
      banner_position_id: id,
      status: status
    }
  };

四. vue配置项说明：

统一行上注释，格式 //
good:

 export default {

    // 组件名称
    name: 'comName',

    // 父子通信
    props: {},

    // 注册组件
    components: {},

    // 数据
    data() {
      return {}
    },

    // 方法
    methods: {},

    // 数据init
    created(){},

    // DOM加载完成
    mounted(){}
  }

bad:
other