zsui

usage

npm install zsui --save

import zsui from 'zsui'
import 'zsui/dist/style.css'
import 'zsui/reset.css'
 

API

input

配置：

props: {
    disbaled: //Boolean 是否禁止,
    type: //String （类型： 如'text', 'number'）
    placeholder: //String, 默认'请输入'
    readonly: //Boolean 是否只读,
    maxlength: //Number 最大字数,
    minlength: //Number 最小字数,
    value: //[String, number]
}
 
event: {
    @blur: //失焦事件
    @focus: //聚焦事件
    @input: //输入
    @change: //绑定值发生变化
}

示例：

<zs-input
    :disabled="true"
    :readonly="false"
    v-model="value"
    :placeholder="请输入balabala"
    :maxlength="200"
    :minlength="100">
</zs-input>

select

配置:

 
props: {
    value: //默认为null,
    optionList: [{ //下拉选项，需提供label值与value值
        label: //,
        value: //
    }],
    disabled: //Boolean 是否禁用,
    readonly: //Boolean 选择输入框是否只读， 默认为只读，如需要可输入功能，则设为false,
    filterable: //Boolean 是否可搜索，若需要此功能，需将readonly属性设为false
}
 
event: {
    @change: //绑定值发生变化
}

示例：

基本使用：

<zs-select
    :optionList="list"
    v-model="value"
    @change="handleChange">
</zs-select>
 
备注：重置时，将绑定值设为null

输入：

<zs-select
    :optionList="list"
    :readonly="false">
</zs-select>

搜索：

<zs-select
    :optionList="list"
    :readonly="false"
    :filterable="true">
</zs-select>

paging

示例：

<zs-paging
    :current='1'
    :all='10'
    @paging='paging'>
</zs-paging>

button

options

name	type	default
text	String	'点击'
type	String	'blue'('blue','white','disable')
widthType	String	'normal'('normal','mini')
icon	String	(iconfont名称)

event

name	description
click	type为'disable'不触发

example

<zs-button
    type='white'
    text='猛击'
    widthType='mini'
    @click='click'>
</zs-button>

toast

this.$toast({
    msg:'这是信息',
    type:'success',//success或者error
    duration:'3000'
})
//简易写法
this.$toast.success('成功')
this.$toast.error('失败')
this.$toast.warn('警告')

confirm

this.$confirm({
    msg:'这是信息',//default '这是提示信息'
    title:'这是标题',//default '提示'
    enterText:'确定按钮文本',//default '确定'
    closeText:'取消按钮文本'//default '取消'
}).then(res=>{
    if(res){
        console.log('按了确定键')
    }else{
        console.log('按了取消键')
    }
})

alert

this.$alert({
    title:'提示',//default '提示'
    enterText:'确定按钮文本',//default '确定'
    enterAlign: 'center',//default 'center'
    type:'success',//default 'success'
    msgTitle:'标题',//default '标题'
    msg:'信息',//default '这是提示信息'
    canClose: true //default true,(false不显示关闭按钮)
}).then(res=>{
    if(res){
        console.log('按了确定键')
    }else{
        console.log('点击X')
    }
})
//简易写法(需要传入标题和副标题)
this.$alert.success({msgTitle:'成功',msg:'abc'})
this.$alert.error({msgTitle:'失败',msg:'abc'})
this.$alert.warn({msgTitle:'警告',msg:'abc'})

dialog

options

name	type	default
show	Boolean	false
title	String	'这是一个对话框'
enterText	String	'确定'
enterAlign	String	'right'

slot

name	description
main	dialog主区域

event

name	description
enter	确定按钮回调
close	取消按钮回调

cascader

配置：

props: {
    data: Array, //下拉选项
    value: Array, //可设置默认值
    placeholder: String,
    disabled: //Boolean,
    allowClear: //Boolean, 是否有删除按钮， 默认为true
}
 
event: {
    @change: //绑定值发生变化时触发
}

示例：

<zs-cascader
    :data="data"
    v-model="val"
    @change="handleChange"
>
</zs-cascader>

 
data: [
    {
        label: 'test1',
        value: 'test1',
        children: [
            {label: 'test11', value: 'test11'},
            {label: 'test12', value: 'test12'},
        ]
    },
    {
        label: 'test2',
        value: 'test2',
        children: [
            {
                label: 'test21',
                value: 'test21'
            },
            {
                label: 'test22',
                value: 'test22',
                children: [
                    {label: 'test221', value: '221'}
                ]
            },
        ]
    }
]
 
val: ['test2', 'test22', 'test221']
 
handleChange(val){
    //val为新值
}

breadcrumb

示例：

<zs-breadcrumb>
    <zs-breadcrumb-item :to='{name: "routeA"}'>招生信息</zs-breadcrumb-item>
    <zs-breadcrumb-item :to='{name: "routeB"}'>学生信息</zs-breadcrumb-item>
    <span slot="right-option">
        <zs-button :text="添加"></zs-button>
    </span>
</zs-breadcrumb>

picshow

示例：

<zs-picshow :imgUrl="imgUrl" :show='imgshow' @close="imgshow=false"></zs-picshow>

imgUrl: "图片地址"   //默认图片为 “暂无图片”
imgshow: false

tabbar

示例：

<zs-tabbar @change='change' :tabData='tabData'></zs-tabbar>

tabData:[
        {label: 'aaa', value: 1 , click: true },
        {label: 'bbb', value: 2 , click: false},
        {label: 'ccc', value: 3 , click: false }
    ]
 
change($event){
    console.log($event)
}

radio

示例：

<zs-radio v-model="testRadio" label="1">选项一</zs-radio>
<zs-radio v-model="testRadio" label="1">选项一</zs-radio>

radioGroup

<zs-radio-group v-model="testGroup">
    <zs-radio label="1">选项一</zs-radio>
    <zs-radio label="2" >选项二</zs-radio>
</zs-radio-group>

tooltip

示例：

1. placement设置共有 "top" "bottom" "left" "right"四个方向，配合 "start" "end"两个位置
2. 具名为content的slot内为tooltip中展示的内容

 <zs-tooltip placement="top-end" :showArrow="false">
    <span class="iconfont icon-xiugai" @click.stop="handleEditClass(item)"></span>
    <div slot="content">
        修改
    </div>
 </zs-tooltip>

main

<zs-main
//侧边栏
:leftMenuList='[{
      "routerName": "schoolManage",
      "title": "nihaoya",
      "isPermissions": false,
      "icon": "icon-success",
      "items": [
          {
              "itemName": "kaixin",
              "routerName": "bbb"
          }
      ]
}]'
:leftMenuConfig='{
      titleName: "title",
      iconName: "icon",
      permissionName: "isPermissions",
      listItemName: "items",
      itemName: "itemName",
      routerName: "routerName"
}'
 
//路由多匹配
:filterRouteName='{
    list:["list1","list2"],
    detail:["detail1","detail2"]
}'
 
//系统切换
currentSystem='system name'
:systemList='[
    {
        name:"system name",
        url:"system url"
    }
]'
:systemConfig='{
    name:"name",
    url:"url"
}'
//是否显示系统切换（默认true）
:systemListShow='false'
//角色切换
currentRole='name'
:roleList='[
    {
        name:"rolename",
        key:"key"
    }
]'
:roleConfig='{
    name:"name",
    key:"key"
}'
//是否显示角色切换（默认true）
:roleListShow='false'
//跳转
:exitUrl='url'
:homeUrl='url'
//logo图片地址
logoUrl='xxx.png'
//logo名称
logoName='xxxxxx'
//学校名称
schoolName='xxxxx'
//是否显示学校名称（默认false）
:schoolNameShow='true'
//用户名称
:username='name'
 
//选择角色事件
@roleClick='roleClick'
</zs-main>