组件功能点

name

image.png
详细说明

props

image.png

  1. mounted 、 created 作为vue组件的生命周期，其他的（watch / computed）方法以对象形式
  1. props: {
  2.     info: {
  3.       type: Object,
  4.       defalut: {},
  5.     },
  6.     tagName: {
  7.       type: String,
  8.       defalut: "",
  9.     },
  10.   },

watch

image.png

  1.  watch: {
  2.     isEdit(newVal) {
  3.       if (newVal == true) {
  4.         this.getDetail()
  5.       } else {
  6.         this.ruleConfigDataSource()
  7.       }
  8.     },
  9.   },

computed

image.png

  1.  computed: {
  2.     typeName() {
  3.       if (
  4.         this.info.effectType &&
  5.         this.info.effectType != null &&
  6.         this.info.effectType != ""
  7.       ) {
  8.         if (this.info.effectType == 1) {
  9.           return this.effectPic == "" ? "复原后情况" : "复原后照片";
  10.         } else if (this.info.effectType == 2) {
  11.           return this.effectPic == "" ? "复绿后情况" : "复绿后照片";
  12.         } else if (this.info.effectType == 3) {
  13.           return this.effectPic == "" ? "复原或复绿后情况" : "复原或复绿后照片";
  14.         }
  15.       } else {
  16.         return this.effectPic == "" ? "复原后情况" : "复原后照片";
  17.       }
  18.     },
  19.   },

mounted

image.png

  1.  mounted() {
  2.     this.getDataSource()
  3.   },

created

image.png

  1. created() {
  2.     this.ruleConfigDataSource()
  3. },

组件书写规则

示例：
image.png

注释规范

  1. /**
  2.      * empty 内容为空
  3.      * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
  4.      * @tutorial https://www.uviewui.com/components/empty.html
  5.      * @property {String} color 文字颜色（默认#c0c4cc）
  6.      * @property {String} text 文字提示（默认“无内容”）
  7.      * @property {String} src 自定义图标路径，如定义，mode参数会失效
  8.      * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
  9.      * @property {String} mode 内置的图标，见官网说明（默认data）
  10.      * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
  11.      * @property {String} img-height 图标的高度，单位rpx（默认auto）
  12.      * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
  13.      * @property {Boolean} show 是否显示组件（默认true）
  14.      * @event {Function} click 点击组件时触发
  15.      * @event {Function} close 点击关闭按钮时触发
  16.      * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
  17.      */

命名规范

尽量模仿使用小写加横线的模式定义组件