Vue 组件库

作者: shuta | 来源:发表于2017-10-10 17:38 被阅读0次

vue 组件库

因为测试平台中有一些常见的可以模块化的 UI 界面，使用 Vue 框架之后，将其抽象出来，成为单一的组件。以下是测试平台常用的组件列表。css 文件引用的是 bootstrap.min.css。

select 组件

select

用法

<z-select :options= "options" v-model='optionVal'  ></z-select>
<script>
import Select from 'select.vue'
export default {
         data: function(){
             return {
                  options: [
               {
                   text: '全部状态',
                   value: ''
               },
               {
                   text: '待执行',
                   value: '0'
               },
               {
                   text: '执行中',
                   value: '1'
               },
               {
                   text: '成功',
                   value: '2'
               },
               {
                   text: '失败',
                   value: '-1'
               },
               {
                   text: '取消执行',
                   value: '-2'
               },
               {
                   text: '异常结束',
                   value: '-3'
               },
               {
                   text: '没有执行过',
                   value: '-4'
               },
           ]
                optionVal: ''
                 
             }
         },
         components: {
           "z-select": Select
         },
}
</script>

属性

属性名	描述	类型
title	select元素的标题	String
width	控制select元素的宽度	Number
spanWidth	控制标题的长度	Number
height	控制select元素的高度	Number
value	select的当前option的value	[String,Number]
options	选项列表	Array
disabled	是否disabled当前select,默认值为false	Boolean

事件

事件名	描述
switchOption	当option发生改变时触发，回传的值是options的元单元

说明

如果你想实现的是，当option发生改变时，调ajax或者其他，可以这样写

<z-select :options="select.options" :width="200" v-model="selectVal"></z-select>

import Select from 'select.vue'
export default {
          data: function(){
              return {
                  options:[
                    {
                      text: '张三',
                      value: 'zhangsan'
                    },
                    {
                        text: '李四',
                        value: 'lisi'
                    }
                  ],
                  selectVal: ''
                  
              }
          },
          components: {
            "h-select": Select
          },
          watch: {
              selectVal: {
                    handler: function(newval ,oldVal){
                        //ajax请求
                    }
                     deep: true  //这个选项会监测selecVal每个key值的变化
             }       
            
          },
}

参考链接：

How do I watch all keys in a data object in Vue 2
vue2中watch的官方文档

ZeusDatePicker的用法

datepicker.png

用法

<z-datepicker @choosed="datePicker"></z-datepicker>
<script>
   import ZeusDatePicker from '../../../components/zeusDatePicker.vue'
   export default {

       methods:{
           datePicker: function(dateInfo) {
               console.log(dateInfo) //数据格式{startDate: '2017-08-23', endDate: '2017-08-23'}
           }
       }
   }
</script>

属性

无

事件

事件名	描述
choosed	选择日期时触发

table的用法

特殊一点。可以合并单元格。

合并单元格的table

普通table

普通table的用法

<z-table :data="tableData" :data-render="tableHead" :border="true"
:need-page="true" :total-count="total"></z-table>
<script>
import Table from 'table/table.vue';
    export default {
        components: {
            'z-table': Table
        },
        data: function() {
            return {
                    total: 14,
                tableHead:  [
                    {
                        head: "ID",
                        key: "buildNumber"
            
                    },
                    {
                        head: "开始时间",
                        key: "startTime"
            
                    },
                    {
                        head: "构建人",
                        key: "authorRealName"
                    },
                    {
                        head: "构建用时",
                        key: "duration"
                    },
                    {
                        head: "执行状态",
                        key: "statusName"
                    },
                    {
                        head: "用例通过率",
                        key: "passRate"
                    },
                    {
                        head: "用例总数",
                        key: "cases"
                    },
                    {
                        head: "报告",
                        key: "report"
                    },
                 ],
                tableData: [
                    {
                            buildNumber: 0,
                            startTime: "2017-07-16 10:00:00",
                            authorRealName: "songke",
                            duration: "20秒",
                            status: 0,
                            statusName: "成功",
                            passRate: "90.99%",
                            cases: 100,
                            mobileTaskUri: "mobile/doneReport?taskId=597",
                            jenkinsLogUrl: "http://autotest.vdian.net/job/job_id/build_id/consoleBuild"
                        },
                        {
                            buildNumber: 1,
                            startTime: "2017-07-16 10:00:00",
                            authorRealName: "songke",
                            duration: "20秒",
                            status: 1,
                            statusName: "成功",
                            passRate: "90.99%",
                            cases: 100,                                 mobileTaskUri: "mobile/doneReport?taskId=597",
                            jenkinsLogUrl: "http://autotest.vdian.net/job/job_id/build_id/consoleBuild"
                        },
                ],
            }
        },
    }
</script>

合并单元格table的用法

唯一的不同是tableData 属性，每一条记录需要在增加rowspan属性，

tableData: [
  {
     ....
    rowspan: {
       appName: {
          stopRowSpan: false,  //需要合并的列是appName，从本条记录开始合并，合并 crossLine 行
          crossLine: 2
       }
     },
 {
     ....
    rowspan: {
       appName: {
          stopRowSpan: true,  //本条记录的appName列被上一条记录合并
          crossLine: 0
       },
     }
  }，
{
     ....
    rowspan: {
       appName: {
          stopRowSpan:false,  //从本条记录开始，
          crossLine: 0
       },
     }
  }，
]

<z-table :data="tableData" :data-render="tableHead" :border="true":merge-cell="true"></z-table>
<script>
import Table from 'table/table.vue';
    export default {
        components: {
            'z-table': Table
        },
        data: function() {
            return {
                    total: 14,
                tableHead:  [
                    {
                        head: "ID",
                        key: "buildNumber"
            
                    },
                    {
                        head: "开始时间",
                        key: "startTime"
            
                    },
                    {
                        head: "构建人",
                        key: "authorRealName"
                    },
                    {
                        head: "构建用时",
                        key: "duration"
                    },
                    {
                        head: "执行状态",
                        key: "statusName"
                    },
                    {
                        head: "用例通过率",
                        key: "passRate"
                    },
                    {
                        head: "用例总数",
                        key: "cases"
                    },
                    {
                        head: "报告",
                        key: "report"
                    },
                 ],
                tableData: [
                    {
                            buildNumber: 0,
                            startTime: "2017-07-16 10:00:00",
                            authorRealName: "songke",
                            duration: "20秒",
                            status: 0,
                            statusName: "成功",
                            passRate: "90.99%",
                            cases: 100,
                            mobileTaskUri: "mobile/doneReport?taskId=597",
                            jenkinsLogUrl: "http://autotest.vdian.net/job/job_id/build_id/consoleBuild",
                             rowspan : {
                                    'appName':{stopRowSpan: true, crossLine: 1},
                            }
                        },
                        {
                            buildNumber: 1,
                            startTime: "2017-07-16 10:00:00",
                            authorRealName: "songke",
                            duration: "20秒",
                            status: 1,
                            statusName: "成功",
                            passRate: "90.99%",
                            cases: 100,                                 mobileTaskUri: "mobile/doneReport?taskId=597",
                            jenkinsLogUrl: "http://autotest.vdian.net/job/job_id/build_id/consoleBuild",
                             rowspan : {
                                    'appName':{stopRowSpan: false, crossLine:   
                        1},  /
                        },
                ],
            }
        },
    }
</script>

属性

属性名	描述	类型
mergeCell	是否合并单元格。默认false	Boolean
dataRender	表格头部信息，包含头部标题和index	Array
data	表格数据信息	Array
needPage	是否需要分页	Boolean
totalCount	table的总数据	Number
countPerPage	一页显示多少行数据	Number
needExpand	有展开的效果,设置该属性为true时，不能合并单元格	Boolean
expandHeadKey	第几列被点击时，会显示或者隐藏下一列	String
widthUnit	thead的宽度，默认值是%	String

事件

无

page组件

用法

<z-pagination :total="50"></z-pagination>

<script>
  import pagination from 'page.vue'
  export default {
    components: {
      'z-pagination': pagination
    }
  }
</script>

属性

属性名	描述	类型
size	是否合并单元格。默认false	Boolean
page-size	每页多少条数据	Number
total	一共多少条数据	Number

事件

事件名	描述
currentPage	当页面发生改变时，事件触发

zeusReverseTable组件

reverseTable.png

用法

 <z-reverseTable :table-data="jobInfo" :head-data="jobHead"
                            custom-class="zeus-tableless" th-width="100px">

</z-reverseTable>

<script>
  import zeusReverseTable from 'zeusReverseTable/zeusReverseTable.vue'
  export default {
    components: {
      'z-reverseTable': zeusReverseTable,
    },
    data() {
        return {
            jobHead:[
               {
                   key: "testTypeName",
                   head: "测试类型",
               },
              {
                   key: "authorRealName",
                   head: "创建人"
              },
             {
                 key: "triggerConfig",
                  head: "执行规则"
             },
            ],
            jobInfo： {
              testTypeName: '接口测试',
              authorRealName: ''fdsfdsf"，
              triggerConfig："环境部署(应用:xxxx;环境:日常;分支:dev,master)"
          }
        }
    }
  }
</script>

属性

属性名	描述	类型
tableData	table的数据	Array
headData	table的标题	Array
border	table的样式，是否需要边界，默认false	Boolean
customClass	自定义table的样式	String
thWidth	table标题栏的宽度，自带单位,如'150px','10%'	String

事件
无

zeusSwitchTab组件

zeusSwitchTab.png

用法

<z-tab :navs="navInfos" v-model='initNav'></z-tab>

import zeusSwitchTab from '../../components/zeusSwitchTab.vue'
export default {
    components: {
                'z-tab': zeusSwitchTab,
      },
     data: function() {
        navInfos: [
            {
                text: '接口测试',
                value: 0
            },
            {
                text: 'UI测试',
                value: 1
            },
        ],
        initVal:0
     }
}

属性

属性名	描述	类型
navInfos	见用法	Array
value	获取当前active的tab的value	String,Number

事件

无

zeusSearch组件

zeusSearch

用法

 <z-search v-model="searchVal" @search="searchCaseName"></z-search>
 <script>
  import zeusSearch from 'zeusSearch/zeusSearch.vue'
  
  export default {
       components:{
           'z-search': zeusSearch
       },
       data: function() {
           return  {
               searchVal: ''
           }
       },
       methods:{
           searchCaseName: function() {
               console.log("from parent " + this.searchVal)
           }
       }
   }
 </script>

属性

属性名	描述	类型
placeholder	input框的placehoder	String
value	获取当前input框的值，可以不传	String
searchTitle	search组件的标题	String
width	控制input框的长度	Number

事件

事件名	描述
search	当输入框按下enter或者点击搜索按钮，即可触发

如果某个组件依赖了别的组件，是不是需要package.json，把它下下来。

alert组件

alert.png

用法

 <h-alert :type="alert.type"  v-model="alert.show"  
 :text="alert.text"
              custom-class="alert-center" :timeout="2000" ></h-alert>
 <script>
  import alert from 'Alert/Alert.vue'
  
  export default {
       components:  {
           'h-alert': alert
       },
       data: function() {
           return  {
               alert: {
                       type: "success",
                       show: false,
                       text: '谢谢'
              }
           }
       },
       
   }
 </script>

属性

属性名	描述	类型
type	类型，info，danger等等	String
v-model	控制当前alert显示或者不显示	String
text	alert显示的提示文案	String
custom-class	自定义class	String
timeout	多长时间alert自动消失，单位毫秒	Number

事件

无

zeusInput组件

zeusInput.png

 <z-input   input-label="Job名"
             v-model="jobName"  :disable-when-not-empty="true" ></z-input>
  import zeusInput from 'zeusInput/zeusInput.vue';
  
  export default {
       components:  {
           'z-input': zeusInput,
       },
       data: function() {
           return  {
               jobName: 'testng接口测试Job',
               
           }
       },
       
   }
 </script>

属性

属性名	描述	类型
inputLabel	输入框的标题	String
value	输入框的值	String
width	输入框的长度	Number
spanWidth	标题的长度	Number
disableWhenNotEmpty	当输入框的初始值不为空时，disable掉这个input	Boolean
clear	为true时，清除input框	Boolean
hasHelp	为true时，显示问号	Boolean

事件

事件名	描述
helped	点击help图标时，触发该事件

zeusRadios组件

radios.png

<z-radios label-for-radios="应用平台" :radios="radios" v-model="chooseRadioVal"></z-radios>

  import zeusRadios from 'zeusRadios/zeusRadios.vue';
  
  export default {
       components:  {
           'z-radios': zeusRadios,
       },
       data: function() {
           return  {
               radios: [
                     {
                         text:'Java', 
                          value: 'Java'
                     },
                     {
                         text:'NodeJS', 
                         value: 'NodeJS'
                     },
                    {
                       text:'Android', 
                       value: 'Android'
                     },
                     {
                       text:'iOS', 
                       value: 'iOS'
                     }
],
               chooseRadioVal: "Java"
           }
       },
       
   }
 </script>

属性

属性名	描述	类型
labelForRadios	单选项列表的标题	String
radios	单选项列表，数据格式见上面的类型	Array
value	单选项列表，当前被选的radio的值	String,Number,Boolean
spanWidth	单选项列表的标题的长度	Number
disabled	disabled 单选项，默认false	Boolean
neccessary	是否需要必填的标识符，默认值false	Boolean

事件

无

zeusTextarea

zeusTextarea.png

<z-textarea v-model="commands" title="构建命令"  :neccessary= "neccessary" :width="elementWidth" ></z-textarea>
 
    import zeusTextarea from 'zeusTextarea/zeusTextarea.vue'
   
   export default {
        components:  {
            'z-textarea': zeusTextarea
        },
        data: function() {
            return  {
              commands: "mvn clean test 命令换行",
              title: '构建命令',
              neccessary: true,
            }
        },
    }
  </script>

属性

属性名	描述	类型
title	textarea的标题	String
spanWidth	标题的长度	Number
value	textarea的值	String
width	textarea的长度	Number
placeholder	textarea的placeholder	String
neccessary	是否显示必填的标识符，默认为false,不显示	Boolean
disabled	是否disabled掉textarea，默认为false，不disabled	Boolean

事件

无

zeusCheckboxes

zeusCheckbox

<z-checkboxes :checkboxes="checkboxes"  
                v-model="currentCheckbox" directions="vertical">
 </z-checkboxes>
                
   //其中slot和checkboxes属性的value保持一致
 
 import zeusCheckboxes from 'zeusCheckboxes/zeusCheckboxes.vue'
   
   export default {
        components:  {
            'z-checkboxes': zeusCheckboxes
        },
        data: function() {
            //value 返回值1
            return  {
              checkboxes: ["定时"],
              currentCheckbox:["定时"]
            }
            
           //value 返回值2
           return {
            checkboxes: [
                {value: 1,text: 'alice'},
                {value: 2,text: 'lily'},
                {value: 3,text: 'bob'},
            ],
              currentCheckbox: {
                  1： "true",
                  2: "false",
                  3: ""
            }
           }  
        },
        
    }
  </script>

属性

属性名	描述	类型
labelForCheckBoxes	checkboxes的标题	String
directions	checkbox水平排列，还是垂直排列	String,默认值'horizontal',vertical
checkboxes	checkbox的选项值	Array([1,2,3]或者[{value: 123,text: number}]
neccessary	该group是否是必填性	Boolean,默认值true
value	checkboxes的值，是数组或者object,由变量returnArrayOrJson 决定	Array或者Object.其中
returnArrayOrJson	返回值是array还是json,默认是array	Boolean

事件

无

multiSelect 组件

支持ajax实时更新option

multi-select

 <m-select v-model="recipients" :options="users" :multiple="true" :neccessary="false" :internal-search="false" title="通知人"
    @search-change="searchForUsers" label="realName">
</m-select>

import multiSelect from 'vue-multiSelect/Multiselect.vue'
export default{
     components: {
         'm-select': multiSelect
     }，
     data(){
        return {
          recipients：[] ，//数据格式和users一样
          users：[] 
      }
    },
    methods: {
        searchForUsers: function(search) {
              axios.get(API.searchForUsers, {
                          params: {
                              search: search
                          }
                      })
              .then(res => {
                  this.users =  res.data  //res.data的数据格式
[
                //   {
                //     userName: "zhangsan",
                //     realName: "张三"
                //   },
                //   {
                //     userName: "lisi",
                //     realName: "李四"
                //   }
                // ],
              })
              .catch(e => {
//                  this.alert = JSON.parse(JSON.stringify(CONFIG.internalErrorMsg));
              })
        }
    }
}

属性

属性名	描述	类型
value	输入框的值	Array
options	所有可供选择的筛选项	String
multiple	支持多选	Boolean
neccessary	是否显示必填项的标识符, 默认false	Boolean
title	标题	String
width	输入框长度	Number
disabled	是否disabled输入框,默认false	Boolean
spanWidth	标题长度	Number
clear	为true时，清除select框中所有选项，默认false	Boolean
label	输入框中展示的是options属性中的哪个键值，比如上面例子中显示的是realName	String

事件

事件名	描述
searchChange	当用户输入的值发生变化时，该事件触发

zeusBreadcrumb

zeusBreadcrumb.png

js代码

<z-breadcrumb :crumb-list="crumbInfos"></z-breadcrumb>

<script>
 import zeusBreadcrumb from '../../components/zeusBreadCrumb.vue'

export default {
 components:  {
            'z-breadcrumb': zeusBreadcrumb
        },
  data() {
      return {
         crumbInfos:  [
                            {
                                text: '目录测试-1',
                                href: `/ci/businessLine#/1/目录测试-1`
                            },
                            {
                                text: '测试应用1',
                                href: `/ci/appDetail#/3`
                            },
                            {
                                text: 'testng接口测试Job',
                                href: `/ci/jobReport#/3`
                            },
                        ]
      }
}
}
</script>

属性

属性名	描述	类型
crumbList	面包屑数据，格式如上述例子	Array

事件
无

图表

之前在 echart 的基础上二次封装一些图表组件，包括柱折混合图，水滴图等。后来发现，一旦引用封装后的图表组件，会使编译后的 js 文件十分大，影响性能，因此不展示图表组件。但是有兴趣的同学，可以和我联系，代码可发你一份。