z-ui

Install

yarn add '@zzxcncz/z-ui'

Config

edit main.js:

import zui from '@zzxcncz/z-ui'
import '@zzxcncz/z-ui/lib/zui.css'

Usage

<z-button></z-button>

<z-image-preview :img-list="imgList"></z-image-preview>

plugins

z-button

button with effects

options

Attribute	Default	Type	Description
type	''	string
hover	''	string	grow,pulse,float,buzz
color	''	string
backgroundColor	''	string
borderColor	''	string

usages

      <z-button hover="grow" @click="preview" background-color="#ffffff" color="red">grow</z-button>
      <z-button hover="pulse" @click="preview" color="#409eff" background-color="#ecf5ff" border-color="#ecf5ff">pulse</z-button>
      <z-button hover="float" @click="preview">float</z-button>
      <z-button hover="buzz" @click="preview">buzz</z-button>

overview

z-image-preview

options

Attribute	Default	Type	Description
imgList	[]	Array	image list
width	150px	string
height	150px	string
fit	cover	string	refer to native object-fit style
customClass	cover	string	custom class name

usages

e.g.

<template>
    <div id="app">
        <z-image-preview :img-list="imgList"></z-image-preview>
        <button @click="preview">showPreview</button>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data() {
            return {
                imgList: ['https://chevereto.zhuangzexin.top/images/2021/07/27/image.png',
                    'https://chevereto.zhuangzexin.top/images/2021/04/06/imagec8d56ccba4b0c67d.png']
            }
        },
        methods: {
            preview () {
                this.$ZPreviewer({
                    imgList: this.imgList,
                    nowImgIndex: 1
                })
            }
        }
    }
</script>

overview

ZPreviewer

it can be used to preview image by invoke global function

usages

                this.$ZPreviewer({
                    imgList: this.imgList,
                    nowImgIndex: 1
                })

ZRank

a simple ranking component

options

Attribute	Default	Type	Description
title	[]	string	排行榜
shadow	false	boolean
width	''	string
customClass	''	custom style
list	[]	string	rank data

usage

    <div>
      <z-rank title="排榜行" width="600px" :list="rankList" @click="rankClick"></z-rank>
    </div>
    <script>
    export default {
        name: 'App',
        data() {
            return {
                rankList: [{
                    name: '张三',
                    count: '100',
                    desc: '这是一个描述'
                },{
                    name: '李四',
                    count: '100'
                },{
                    name: '王五',
                    count: '100'
                },{
                    name: '赵六',
                    count: '100'
                },{
                    name: '孙七',
                    count: '100'
                },{
                    name: '周八',
                    count: '100'
                },{
                    name: '吴九',
                    count: '100'
                },{
                    name: '郑十',
                    count: '100'
                },{
                    name: '王十一',
                    count: '100'
                }]
            }
        },
        methods: {
            rankClick (data) {
                console.log(data)
            }
        }
    }
    </script>

overview