4. 物料

4.1 <ha-menu-ver>

• 简介：

  一个垂直的菜单

• props:

  • 具有跟<ha-rectangle>除overflow外一致的props

  • singleOpen:

    1. 是否在打开一个子菜单时关闭其他同级的子菜单
    2. 类型为Boolean
    3. 默认为false

  • menuList:

    1. 该菜单要显示的内容的数据对象

    2. 类型为Object

    3. 默认为空对象{}

    4. 该对象由两种对象组成,一种的表示“group”, 一种表示“item”

    5. “group”对象示例:

       {
         //在打开组时相同`groupId`的组会一起打开, 所以一般设置为独有值。
         groupId: '由任意字符串组成',  // 必需，该组件以此判断是否为“group”         
         menuTitle: '该group的标题', // 可选，但一般有
         menuList: [一个由group或item对象组成的数组], // 可选，但一般有
         icon: '一个表示图标的url' // 可选
       }
       

    6. “item”对象示例:

       {
         title: 'item的标题', // 必需， 该组件以此判断是否为“item”
         route: '与`vue-router`的路由一致', // 可选，但一般有
         icon: '一个表示图标的url' // 可选
       }
       

    7. 整个menuList对象的数据结构示例如下:

    { // 第一层菜单
      menuTitle: 'ha-menu-ver-title', 
      menuList: [
        { // 第二层菜单
          groupId: '1', // 必需，该组件以此判断是否为“group”
          menuTitle: 'groupTitle', 
          icon: '一个表示图标的url',
          menuList: [
            { // 第三层菜单
              groupId: '2', 
              menuTitle: 'g2', 
              menuList: [
                { // 这里是item
                  title: 'list1', // 必需， 该组件以此判断是否为“item”
                  route: '与`vue-router`的路由一致',
                  icon: '一个表示图标的url'
                },
                { // 这里是item
                  title: 'list1', 
                  route: '与`vue-router`的路由一致'
                  icon: '一个表示图标的url'
                },
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
              ] 
            },
            { // 第三层菜单
              groupId: '3',
              menuTitle: 'g3',
              icon: '一个表示图标的url',
              menuList: [
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
                { // 这里是item
                  title: 'list1',
                  route: '与`vue-router`的路由一致'
                },
              ] 
            }
          ]
        }
      ]
    }
    

  • bgColor:

    1. 表示“group”和“item”的颜色
    2. 类型为Array
    3. 值为一个length=2的数组, 分别表示[group的背景颜色, item的背景颜色],
    4. 默认值为undefined
    5. 参照全局颜色中的bgColor

• 实例：

代码：

<ha-coordinater :grid="[[0, 50, 50]]">
  <ha-menu-ver 
    :coor="[[[15,1], [16, 50]]]" 
    :bgColor="['bgc-blue', 'bgc-lightBlue']" 
    :menuList="menuList"
  ></ha-menu-ver>
</ha-coordinater>

其中的menuList为：

menuList:{ // 第一层菜单
  menuTitle: 'menu-title', 
  menuList: [
    { // 第二层菜单
      groupId: '1', // 必需，该组件以此判断是否为“group”
      menuTitle: 'groupTitle', 
      icon: HaIcons['message_white'],
      menuList: [
        { // 第三层菜单
          groupId: '2', 
          menuTitle: 'g2', 
          menuList: [
            { // 这里是item
              title: 'item', // 必需， 该组件以此判断是否为“item”
              route: '/materials/#_4-1-ha-menu-ver',
              icon: HaIcons['message_white']
            },
            { // 这里是item
              title: 'item', 
              route: '/materials/#_4-1-ha-menu-ver',
              icon: HaIcons['message_white']
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
          ] 
        },
        { // 第三层菜单
          groupId: '3',
          menuTitle: 'g3',
          icon: HaIcons['message_white'],
          menuList: [
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-1-ha-menu-ver',
            },
          ] 
        }
      ]
    }
  ]
}

结果：

menu-title

groupTitle

g2

item

item

item

item

g3

item

item

item

item

4.2 <ha-menu-hor>

• 简介：

  一个水平表示的菜单

• props:

  • 与<ha-menu-ver>具有一致的props

• 实例：

代码：

<ha-coordinater :grid="[[0, 50, 50]]">
  <ha-menu-hor 
    :coor="[[[8,15], [32, 5]]]" 
    :bgColor="['bgc-blue', 'bgc-lightBlue']" 
    :menuList="menuList"
  ></ha-menu-hor>
</ha-coordinater>

其中的menuList为：

menuList:{ // 第一层菜单
  menuTitle: 'menu-title', 
  menuList: [
    { // 第二层菜单
      groupId: '1', // 必需，该组件以此判断是否为“group”
      menuTitle: 'groupTitle', 
      icon: HaIcons['message_white'],
      menuList: [
        { // 第三层菜单
          groupId: '2', 
          menuTitle: 'g2', 
          menuList: [
            { // 这里是item
              title: 'item', // 必需， 该组件以此判断是否为“item”
              route: '/materials/#_4-2-ha-menu-hor,
              icon: HaIcons['message_white']
            },
            { // 这里是item
              title: 'item', 
              route: '/materials/#_4-2-ha-menu-hor,
              icon: HaIcons['message_white']
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-2-ha-menu-hor,
            },
            { // 这里是item
              title: 'item',
              route: '/materials/#_4-2-ha-menu-hor,
            },
          ] 
        }
      ]
    },
    { // 第三层菜单
      groupId: '3',
      menuTitle: 'g3',
      icon: HaIcons['message_white'],
      menuList: [
        { // 这里是item
          title: 'item',
          route: '/materials/#_4-2-ha-menu-hor,
        },
        { // 这里是item
          title: 'item',
          route: '/materials/#_4-2-ha-menu-hor,
        },
        { // 这里是item
          title: 'item',
          route: '/materials/#_4-2-ha-menu-hor,
        },
        { // 这里是item
          title: 'item',
          route: '/materials/#_4-2-ha-menu-hor,
        },
      ] 
    }
  ]
}

结果：

menu-title

groupTitle

g2

item

item

item

item

g3

item

item

item

item

4.3 <ha-input>

• 简介：

  一个有错误提示的输入框

• props:

  • 具有跟<ha-rectangle>除overflow外一致的props

  • type:

    1. 表示输入框的类型
    2. 类型为String,
    3. 默认值为'text'
    4. 可选值为：'text','number','password', 'date', 'color'

  • value:

    1. 该输入框的值
    2. 类型为String
    3. 默认为undefined
    4. 支持v-model指令

  • labe

    1. 表示该输入框的lable
    2. 类型为String,
    3. 默认为undefined

  • name:

    1. 该输入框的名字
    2. 类型为String,
    3. 默认为undefined
    4. 为<input>标签的name属性使用
    5. 为<lable>标签的for属性使用

  • bgColor:

    1. 设置背景颜色
    2. 类型为String
    3. 默认为undefined
    4. 参照全局颜色中的bgColor

  • checkFun:

    1. 一个检验名为value的prop的值的函数,

    2. 类型为Function

    3. 默认为:

       function(val) {
         return {
           msg: undefined,
           bgColor: this.bgColor
         }
       }
       

    4. 该函数需要返回一个对象:

       {
         msg: '一个提示的字符串',
         bgColor: '提示时的背景颜色'
       }
       

• 实例：

代码：

  <ha-coordinater :grid="[[0, 50, 50]]">
    <ha-input 
      :coor="[[[4,2], [42, 8]]]" 
      lable="text输入框："
      name="input"
      type='text'
      border="solid 1px #ddd"
      radius="5px"
      bgColor="bgc-blue" 
      :checkFun="checkFun1"
      v-model="value1"
    ></ha-input>
    <ha-input 
      :coor="[[[4,11], [42, 8]]]" 
      lable="密码："
      name="input"
      type="password"
      border="solid 1px #ddd"
      radius="5px"
      bgColor="bgc-yellow" 
      :checkFun="checkFun2"
      v-model="value2"
    ></ha-input>
    <ha-input 
      :coor="[[[4,20], [42, 8]]]" 
      lable="数字："
      name="input"
      type="number"
      border="solid 1px #ddd"
      radius="5px"
      bgColor="bgc-orange" 
      :checkFun="checkFun3"
      v-model="value3"
    ></ha-input>
    <ha-input 
      :coor="[[[4,29], [42, 8]]]" 
      lable="日期："
      name="input"
      type="date"
      border="solid 1px #ddd"
      radius="5px"
      bgColor="bgc-purple" 
      :checkFun="checkFun4"
      v-model="value4"
    ></ha-input>
    <ha-input 
      :coor="[[[4,38], [42, 8]]]" 
      lable="颜色："
      name="input"
      type="color"
      border="solid 1px #ddd"
      radius="5px"
      bgColor="bgc-grey" 
      :checkFun="checkFun5"
      v-model="value5"
    ></ha-input>
  </ha-coordinater>

其中各个checkFun为：

checkFun1(val) {
  if(val!=='text') {
    return {
      msg: '不是text',
      bgColor: 'bgc-red'
    }
  }else {
    return {
      msg: '是text',
      bgColor: 'bgc-green'
    }
  }
},
checkFun2(val) {
  if(val!=='1234') {
    return {
      msg: '错误！密码是1234',
      bgColor: 'bgc-red'
    }
  }else {
    return {
      msg: '正确！密码是1234',
      bgColor: 'bgc-green'
    }
  }
},
checkFun3(val) {
  if(val!=='123456') {
    return {
      msg: '错误!不是123456',
      bgColor: 'bgc-red'
    }
  }else {
    return {
      msg: '正确！是123456',
      bgColor: 'bgc-green'
    }
  }
},
checkFun4(val) {
  if(val!=='2020-05-20') {
    return {
      msg: '错误！日期是2020-5-20',
      bgColor: 'bgc-red'
    }
  }else {
    return {
      msg: '正确！日期是2020-5-20',
      bgColor: 'bgc-green'
    }
  }
},
checkFun5(val) {
  return {
    msg: '选择的颜色为' + val,
    bgColor: 'bgc-grey'
  }
}

结果：

text输入框：

密码：

数字：

日期：

颜色：

4.4 <ha-table>

• 简介：

  一个基础的表格

• props:

  • 具有跟<ha-rectangle>除overflow外一致的props

  • hcHeght:

    1. 设置表格头部和内容的高度
    2. 类型为Array
    3. 值为一个length为2的数组, 分别表示[头部高度, 内容高度]
    4. “头部高度”和“内容高度”与css的height一致
    5. 默认为['15%', '85%']

  • datas:

    1. 表格的数据

    2. 类型为Object

    3. 值为一个对象, 示例如下

       {
         head:  ['列一','列二','列三','列四', '列5','列6','列7','列8','列9'], // 表头，
         rows: [ 
           {
             bgColor: 'bgc-blue', // 可选，独立设置该行颜色
             row: [1,'这是ha-table的一个单元格',3,4,5,6,7,8,9]
           }, 
           {
             bgColor: 'bgc-red',//可选，独立设置该行颜色
             row: [{
               data: 1,
               bgColor: 'bgc-yellow'// 可选，独立设置该单元格颜色
             },2,3,4,5]
           }, 
           [1,2,3,4,5], 
           [1,2,3,4,5], 
           [{
             data: 0,
             bgColor: 'bgc-blue'
           },0,0,0],
           [0,0,0,0],
           [0,0,0,0]
         ]
       }
       

  • bgColor:

    1. 设置背景颜色
    2. 类型为Array
    3. 默认为undefined
    4. 值为一个length为3的数组, 分别表示：

    [表头的颜色, 除去表头行数为奇数的行的颜色,  除去表头行数为偶数的行的颜色]
    

    5. 参照全局颜色中的bgColor

• 实例

代码：

<ha-coordinater :grid="[[0, 50, 50]]">
  <ha-table 
    :coor="[[[1,1], [50, 50]]]" 
    :hcHeght="['15%', '85%']"
    :bgColor="['bgc-white', 'bgc-lightGrey', 'bgc-white']" 
    :datas="datas"
  ></ha-table>
</ha-coordinater>

其中datas为：

datas: {
  head:  ['列一','列二','列三','列四', '列5','列6','列7','列8','列9'], // 表头，
  rows: [ 
    {
      bgColor: 'bgc-lightBlue', // 设置该行颜色
      row: ['这行的颜色是lightBlue',2,3,4,5,6,7,8,9]
    }, 
    {
      bgColor: 'bgc-red',// 设置该行颜色
      row: [{
        data: '黄色格子',
        bgColor: 'bgc-yellow'// 设置该单元格颜色
      },
      2,3,4,'这行的颜色是yellow']
    }, 
    [1,2], 
    [1,2,3,4,5], 
    [{
      data: '蓝色格子',
      bgColor: 'bgc-blue'
    },0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0],
    [0,0,0,0]
  ]
}

结果：

列一

列二

列三

列四

列5

列6

列7

列8

列9

这行的颜色是lightBlue

2

3

4

5

6

7

8

9

黄色格子

2

3

4

这行的颜色是yellow

1

2

1

2

3

4

5

蓝色格子

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0