zl-vue-ui v1.1.1

zl-vue-ui

• 文档地址

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

引入组件

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){

    }
}

属性

事件

ZlAlert

alert 提示框

使用方法

html

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

js

data:{
    show:false
}

属性

事件

ZlAlertPlugin

alert 提示框

使用方法

方法

参数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
    }
}

属性

事件

ZlCellGroup

单元格分组

使用方法

html

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

属性

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(){
        // 无返回值
    }
}

属性

插槽

事件

ZlCheckbox

多选框

使用方法

html

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

js

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

  }
}

属性

事件

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
    },
}

属性

插槽

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 属性

ZlCol 属性

ZlConfirm

confirm 提示框

使用方法

html

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

js

data:{
    show:false
}

属性

事件

ZlConfirmPlugin

confirm 提示框

使用方法

方法

参数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){

  }
}

属性

ZlDialogPlugin

dialog弹框

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

方法

参数说明

background: 弹框背景色

ZlDivider

分割线

使用方法

html

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

ZlLoadingPlugin

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){
        
    }
}

属性

事件

ZlNotifyPlugin

notify提示

使用方法

方法

show 参数说明

ZlRadio

单选框

使用方法

html

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

js

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

  }
}

属性

事件

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
    },
}

属性

事件

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)
    },
}

属性

事件

ZlSwitch

switch选择器

使用方法

html

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

js

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

  }
}

属性

事件

ZlToastPlugin

toast提示

使用方法

方法

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

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

time 持续时间, 默认 2000