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>