README

zl-vue-ui

GitHub issues GitHub All Releases npm GitHub repo size GitHub top language GitHub language count Gitter GitHub code size in bytes GitHub pull requests GitHub closed issues NPM GitHub contributors GitHub last commit GitHub last commit (branch) npm collaborators

文档地址

公司实际项目中编写的一些组件，后续会持续更新，有不足的地方希望大家提出宝贵意见，大家共同进步, 主要组件如下

引入组件

npm install zl-vue-ui -S

全局引用方法

main.js 中引入

import zlVueUi from 'zl-vue-ui'
Vue.use(zlVueUi)

局部引用

import {
  ZlActionSheet,
  ZlAlert,
  ZlAlertPlugin,
  ZlCalendar,
  ZlCell,
  ZlCellGroup,
  ZlCheckbox,
  ZlCircle,
  ZlCol,
  ZlConfirm,
  ZlConfirmPlugin,
  ZlDialog,
  ZlDialogPlugin,
  ZlDivider,
  ZlLoading,
  ZlLoadingPlugin,
  ZlNotify,
  ZlNotifyPlugin,
  ZlRadio,
  ZlRange,
  ZlRow,
  ZlSlideDelete,
  ZlSwitch,
  ZlToast,
  ZlToastPlugin,
} from 'zl-vue-ui'

以下是主要组件

目前内部的组件

ZlCalendar 日历组件，支持单选和双选 git源文件地址
ZlActionSheet 上拉菜单
ZlAlert alert提示框
ZlConfirm confirm提示框
ZlCell, 单元格
ZlCellGroup, 单元格组
ZlCheckbox 多选框
ZlCircle 环形进度条
ZlCol layout布局列表块
ZlDialog dialog弹框
ZlDivider 分割线
ZlLoading loading加载
ZlNotify Notify消息提示
ZlRadio 单选框
ZlRange 价格滑块，双向滑动 git源文件地址
ZlRow layout布局父级块
ZlSlideDelete 左滑删除 git源文件地址
ZlSwitch switch选择器
ZlToast toast提示

ZlActionSheet

上拉菜单

使用方法

html

<zl-switch v-model="show"></zl-switch>
<zl-action-sheet :options="actionOptions" v-model="show" disabled="disabled" @on-cancel="cancel" @on-select="select"></zl-action-sheet>

js

data:{
    show: false,
    actionOptions: [{
        name: '标题1',
        id: 123,
        disabled:true
    },{
        name: '标题2',
        id: 1234
    },{
        name: '标题3',
        id: 1235
    }],
},
methods:{
    cancel(){

    },
    select(item, index){

    }
}

属性

名字	类型	默认值	说明	版本要求
background	String	rgba(0,0,0,.6)	模态框背景颜色	--
options	Array	--	actionsheet 列表	--
name	String	name	列表标题，定义显示的标题字段，必填	--
desc	String	desc	列表副标题，定义显示的副标题字段，没有则不显示	--
cancelText	String	''	取消按钮	--
disabled	String	disabled	列表是否可选中，定义不支持选中字段，没有这个字段则支持选中	--
itemClickHide	Boolean	true	选中列表关闭	--

事件

名字	参数	说明	版本要求
on-select	(item, index)	列表选中时触发，item: 选中的对象, index：选中的下标值	--
on-cancel	--	点击取消时触发	--

ZlAlert

alert 提示框

使用方法

html

<zl-switch v-model="show"></zl-switch>
<zl-alert v-model="show" title="标题" content="内容"></zl-alert>

js

data:{
    show:false
}

属性

名字	类型	默认值	说明	版本要求
show	Boolean	false	使用 v-model 绑定	--
title	String	--	标题	--
content	String	--	内容	--
btnText	String	确定	按钮文字	--
background	String	rgba(0,0,0,.6)	弹层背景色	--

事件

名字	参数	说明	版本要求
on-hide	--	点击按钮时触发	--

ZlAlertPlugin

alert 提示框

使用方法

方法

名字	参数	说明	版本要求
this.$zhenlv.alert.show()	{type:'',content:'',onHide(){}}	弹窗显示	--
this.$zhenlv.alert.hide()	--	弹窗关闭	--

参数1 type: 标题

参数2 content: 内容

参数3 onHide(){}: 点击按钮时触发

ZlCalendar

仿照美团酒店编写的日历组件，展示选中区间

使用方法

html

<zl-switch v-model="show"></zl-switch>
<zl-calendar v-model="show" @change="calendarChange"/>

js

data:{
    selectedData:[],
    show: false
},
methods:{
    calendarChange(val){
        this.selectedData = val
    }
}

属性

名字	类型	默认值	说明	版本要求
close	String	×	关闭文字	--
color	String	rgb(17,55,160)	选中的背景色	--
lightColor	String	rgb(17,55,160,.15)	开始结束之间的背景色	--
title	String	选择日期	标题文字	--
months	[Number,String]	6	月份长度	--
type	String	double	选择类型 // start 开始, end 结束, double 双选	--
selectedDate	Array	[moment().format('YYYY-MM-DD'),moment().add(1, 'd').format('YYYY-MM-DD')]	默认选中日期	--
selectedText	Array	['入店','离店']	选中的文字，顺序不可颠倒	--

事件

名字	参数	说明	版本要求
change	(Array,selectedDate)	切换选中的日期区间	--

ZlCellGroup

单元格分组

使用方法

html

<zl-cell-group title="group标题">
</zl-cell-group>

属性

名字	类型	默认值	说明	版本要求
title	String	--	分组名称	--

ZlCell

单元格

使用方法

html

<zl-cell-group title="group标题">
  <zl-cell v-for="(item, index) in dataList" :key="index" :title="item.title" :ftitle="item.age" :value="item.id" :label="item.text" placeholder="请输入内容" @click="cellClick"></zl-cell>
</zl-cell-group>

js

data:{
    dataList:[
        {
          id:'1',
          title:'他大舅',
          age:'15',
          text:'浩丰科技暗红色的深度国际卡萨丁不过据可靠水电费较轻微日前金额'
        },
        {
          id:'2',
          title:'他二舅',
          age:'16',
          text:'浩丰科技暗红色的深度国际卡萨丁不过据可靠水电费较轻微日前金额啊实sdg打实大概'
        },
        {
          id:'3',
          title:'都是他舅',
          age:'18',
          text:'浩丰科技暗红色的深'
        }
  ],
  cellValue: '内容'
},
methods:{
    cellClick(){
        // 无返回值
    }
}

属性

名字	类型	默认值	说明	版本要求
title	String	--	标题	--
ftitle	String	--	副标题	--
value	String	--	内容 (valueType为input时使用 v-model绑定)	--
label	String	--	描述信息	--
arrow	String	'right'	箭头方向（isLink为true时显示箭头）	--
isLink	Boolean	false	是否带跳转	--
valueType	String	'text'	内容类型（可选 'text', 'input'）	--
center	Boolean	true	内容是否居中	--
placeholder	String	--	valueType为input时展示	--

插槽

名字	说明	版本要求
title-left	标题左侧插槽	--
title-right	标题右侧插槽	--
label	内容描述插槽	--
text-left	内容左侧插槽	--
text-right	内容右侧插槽	--

事件

名字	参数	说明	版本要求
click	--	单元格列表点击	--

ZlCheckbox

多选框

使用方法

html

<zl-checkbox v-model="checked" :len="len" :max="max" @change="change"></zl-checkbox>

js

data:{
    checked:false
},
methods:{
  change(checked){

  }
}

属性

名字	类型	默认值	说明	版本要求
checked	Boolean	false	选中状态	--
disabled	Boolean	false	不可选中	--
len	[Number, String]	--	当前选中长度	--
max	[Number, String]	--	允许选择最大长度	--
canChange	Boolean	true	是否可改变选中框状态	--
size	String	'default'	尺寸(small,default,large)	--

事件

名字	参数	说明	版本要求
change	(Boolean)	切换选中样式时触发	--

ZlCircle

环形进度条

使用方法

html

<zl-circle
    :percent="percent"
    :stroke-color="['#04BE02', '#3FC7FA']">
    <span>{{ percent }}%</span>
</zl-circle>
<button @click="circleClick">circle增加</button>

js

data:{
    percent: 0
},
methods:{
    circleClick(){
      this.percent += 10
    },
}

属性

名字	类型	默认值	说明	版本要求
strokeWidth	Number	5	描边宽度	--
strokeColor	[String,Array]	#3FC7FA	描边颜色，数组格式为渐变颜色，目前只支持2种颜色渐变	--
trailWidth	Number	5	背景线条宽度	--
trailColor	String	#D9D9D9	背景线条颜色	--
percent	Number	0	进度百分比	--
strokeLinecap	String	round	路径两端的形状，可选属性 butt	round
anticlockwise	Boolean	false	按逆时针方向展示百分比， false:顺时针，true:逆时针	--

插槽

名字	说明	版本要求
默认插槽	圆圈中间显示内容	--

ZlRow ZlCol

confirm layout布局

使用方法

html

<zl-row :gutter="20" align="center" :bottom="10" justify="space-between">
  <zl-col class="col" :span="6" offset="4">col</zl-col>
  <zl-col class="col" :span="6">col</zl-col>
  <zl-col class="col" :span="6">col</zl-col>
  <zl-col class="col" :span="6" offset="1">col</zl-col>
  <zl-col class="col" :span="6">col</zl-col>
  <zl-col class="col" :span="6">col</zl-col>
  <zl-col class="col" :span="6">col</zl-col>
</zl-row>

ZlRow 属性

名字	类型	默认值	说明	版本要求
justify	String	start	对齐方式(可选: start, end, space-between, space-around, center)	--
align	String	top	垂直对齐方式	--
bottom	[Number, String]	--	行间距	--

ZlCol 属性

名字	类型	默认值	说明	版本要求
span	[String, Number]	--	一共分成24份，列所占的宽度百分比	--
offset	[String, Number]	--	偏移宽度	--

ZlConfirm

confirm 提示框

使用方法

html

<zl-switch v-model="show"></zl-switch>
<zl-confirm v-model="show" title="标题" content="内容"></zl-confirm>

js

data:{
    show:false
}

属性

名字	类型	默认值	说明	版本要求
show	Boolean	false	使用 v-model 绑定	--
title	String	--	标题	--
content	String	--	内容	--
leftText	String	取消	左侧文字	--
rightText	String	确定	右侧文字	--
background	String	rgba(0,0,0,.6)	弹层背景色	--

事件

名字	参数	说明	版本要求
on-cancel	--	取消时触发	--
on-confirm	--	确定时触发	--

ZlConfirmPlugin

confirm 提示框

使用方法

方法

名字	参数	说明	版本要求
this.$zhenlv.confirm.show()	{type:'',content:'',onConfirm(){},onCancel(){}}	弹窗显示	--
this.$zhenlv.confirm.hide()	--	弹窗关闭	--

参数1 type: 标题

参数2 content: 内容

参数3 onConfirm(){}: 确认时触发

参数4 onCancel(){}: 取消时触发

ZlDialog

dialog弹框

使用方法

html

<zl-dialog v-model="show"  @change="change"></zl-dialog>

js

data:{
    show:false
},
methods:{
  change(show){

  }
}

属性

名字	类型	默认值	说明	版本要求
show	Boolean	false	使用 v-model 绑定	--
background	String	rgba(0,0,0,.6)	弹框背景色	--

ZlDialogPlugin

dialog弹框

使用方法, 暂无默认值，推荐使用 ZlDialog引入

方法

名字	参数	说明	版本要求
this.$zhenlv.dialog.show()	{background: ''}	弹窗显示	--
this.$zhenlv.dialog.hide()	--	弹窗关闭	--

参数说明

background: 弹框背景色

ZlDivider

分割线

使用方法

html

<zl-divider>我是有底线的</zl-divider>

ZlLoadingPlugin

loading加载

使用方法

方法

名字	参数	说明	版本要求
this.$zhenlv.loading.show({text:'正在加载',background:'red'})	--	loading显示	--
this.$zhenlv.loading.hide()	--	loading关闭	--

text 目前可选文字: 自己定义的 text值, 默认加载中

background 背景颜色，默认无背景色，支持自定义

ZlNotify

notify提示

使用方法

html

<zl-switch v-model="show"></zl-switch>
<zl-notify v-model="show" @change="change" text="提示文案"/>

js

data:{
    show: false
},
methods:{
    change(val){
        
    }
}

属性

名字	类型	默认值	说明	版本要求
show	Boolean	false	控制notify显示，使用v-model绑定	--
time	Number	2000	显示时间	--
text	String	--	提示文字	--
height	String	40	提示高度	--
color	String	#fff	提示颜色	--
background	String	#f44	提示背景颜色	--
enterClass	String	bounceInDown	显示动画效果，更改动画效果请参考animate.css	--
leaveClass	String	slideOutUp	隐藏动画效果，更改动画效果请参考animate.css	--

事件

名字	参数	说明	版本要求
change	(Boolean)	notify显示状态切换	--

ZlNotifyPlugin

notify提示

使用方法

方法

名字	参数	说明	版本要求
this.$zhenlv.notify.show()	参考以下show()参数说明	notify显示	--
this.$zhenlv.toast.hide()	--	notify关闭	--

show 参数说明

名字	类型	默认值	说明	版本要求
time	Number	2000	显示时间	--
text	String	--	提示文字	--
height	String	40	提示高度	--
color	String	#fff	提示颜色	--
background	String	#f44	提示背景颜色	--
enterClass	String	bounceInDown	显示动画效果，更改动画效果请参考animate.css	--
leaveClass	String	slideOutUp	隐藏动画效果，更改动画效果请参考animate.css	--

ZlRadio

单选框

使用方法

html

<zl-radio v-model="checked" @change="change"></zl-radio>

js

data:{
    checked:false
},
methods:{
  change(checked){

  }
}

属性

名字	类型	默认值	说明	版本要求
checked	Boolean	false	选中状态	--
disabled	Boolean	false	不可选中	--
size	String	'default'	尺寸(small,default,large)	--

事件

名字	参数	说明	版本要求
change	(Boolean)	切换选中样式时触发	--

ZlRange

价格滑块，双向滑动，开发人员可以自定义最大值和最小值

使用方法

html

<v-range
  :max="rangeOptions.max"
  :min="rangeOptions.min"
  :space="150"
  :step="50"
  :point="3"
  :min-value="storeRange.minValue"
  :max-value="storeRange.maxValue"
  :status="showFlag"
  @min-move="minMove"
  @max-move="maxMove">
</v-range>

js

data:{
    rangeOptions: {
        min: 0,
        max: 1050,
    },
    storeRange:{
        minValue:0,
        maxValue:1050
    },
    showFlag: false,
    
}
methods:{
    minMove (val) {
        this.storeRange.minValue = val
    },
    maxMove (val) {
        this.storeRange.maxValue = val
    },
}

属性

名字	类型	默认值	说明	版本要求
step	[String, Number]	1	步长，默认是1像素	--
min	[String, Number]	0	可选的最小值	--
max	[String, Number]	100	可选的最大值	--
minValue	[String, Number]	0	选中的最小值	--
maxValue	[String, Number]	--	选中的最大值	--
space	[String, Number]	10	每步滑动的像素	--
point	[String, Number]	10	一共滑几次到头	--
status	Boolean	true	弹框显示状态	--

事件

名字	参数	说明	版本要求
minMove	(String)	切换最小值时触发	--
maxMove	(String)	切换最大值时触发	--

ZlSlideDelete

左滑删除，可以自定义滑动或不滑动，主要内容需根据组件需求而定义

git源文件地址

使用方法

html

<zl-slide-delete 
  :options="dataList"
  @delete-item="deleteFn" 
  @editor="editorFn"/>

js

data:{
dataList:[
    {
      id:1,
      title:'他大舅',
      content:[
        12,
        '臻旅科技你们的超级旅伴，机票酒店火车票火车票抢票景点'
      ]
    },
    {
      id:2,
      title:'他二舅',
      content:[
        15,
        '臻旅科技你们的超级旅伴，机票酒店火车票火车票抢票景点，臻旅科技你们的超级旅伴，机票酒店火车票火车票抢票景点'
      ]
    },
    {
      id:3,
      title:'都是他舅',
      content:[
        19,
        '臻旅科技你们的超级旅伴，机票酒店火车票火车票抢票景点'
      ]
    }
],// 数组里的content必须存在
}
methods:{
    editorFn(item){
      console.log(1,item)
    },
    deleteFn(index){
      this.dataList2.splice(index, 1)
    },
}

属性

名字	类型	默认值	说明	版本要求
options	Array	--	传入的列表	--
left	String	none，目前可选 'none', 'editor'	左侧编辑，删除选项	--
right	String	none，目前可选 'none', 'editor'	右侧选中，编辑选项	--
slideDelete	Boolean	true，true 可以左滑删除， false 不可以左滑删除	是否支持左滑删除	--
editor	Boolean	true，true 可以编辑， false 不可以编辑	列表是否可编辑	--
leftImgOptions	Object	{ img: require('./img/editor.png'),width: '20px',height: '20px' }	左侧内容，当left不为none显示	--
rightImgOptions	Object	{ img: require('./img/editor.png'),width: '20px',height: '20px' }	右侧内容，当right不为none显示	--

事件

名字	参数	说明	版本要求
delete-item	(index，item)	index, Number 删除的索引，item, Object 数组中的某一项	--
editor	(item)	item, Object 数组中的某一项, 开发人员可以根据item 做编辑删除操作	--

ZlSwitch

switch选择器

使用方法

html

<zl-switch v-model="checked" @change="change"></zl-switch>

js

data:{
    checked:false
},
methods:{
  change(checked){

  }
}

属性

名字	类型	默认值	说明	版本要求
checked	Boolean	false	选中状态	--
disabled	Boolean	false	不可选中	--
options	Object	--	{show:'选中文案', hide: '不选中文案'}	--

事件

名字	参数	说明	版本要求
change	(Boolean)	切换选中样式时触发	--

ZlToastPlugin

toast提示

使用方法

方法

名字	参数	说明	版本要求
this.$zhenlv.toast.show()	{text:'提示文字', time: 2000, type: 'rhombus'}	toast显示	--
this.$zhenlv.toast.hide()	--	toast关闭	--

type 目前可选toast提示类型: --, 可选 'rhombus'

text 目前可选文字: 自己定义的 text值, 无默认值

time 持续时间, 默认 2000

Usage no npm install needed!

README

zl-vue-ui

引入组件

全局引用方法

局部引用

以下是主要组件

ZlActionSheet

使用方法

ZlAlert

使用方法

ZlAlertPlugin

使用方法

ZlCalendar

使用方法

ZlCellGroup

使用方法

ZlCell

使用方法

ZlCheckbox

使用方法

ZlCircle

使用方法

ZlRow ZlCol

使用方法

ZlConfirm

使用方法

ZlConfirmPlugin

使用方法

ZlDialog

使用方法

ZlDialogPlugin

使用方法, 暂无默认值，推荐使用 ZlDialog引入

ZlDivider

使用方法

ZlLoadingPlugin

使用方法

ZlNotify

使用方法

ZlNotifyPlugin

使用方法

ZlRadio

使用方法

ZlRange

使用方法

ZlSlideDelete

使用方法

ZlSwitch

使用方法

ZlToastPlugin

使用方法