1.快速上手

该组件库使用在Vue3的项目 安装

 npm install zn-mobile-ui --save

在main.js中引入zn-mobile-ui

import znMobileUI from "zn-mobile-ui";
const app = createApp(App)
app.use(znMobileUI)
app.mount('#app')

2.基础组件

1.1 znList

该组件是用于移动端的分页，滑动到底部时，会触发事件并加载更多列表项。组件简化了很多分页复杂的逻辑，使分页变得更简单。
该组件内置了axios，所以不需要安装axios，需要安装vant后才能使用。

 npm install vant --save

在main.js中引入vant

import znMobileUI from "zn-mobile-ui";
import { PullRefresh, List, Empty } from 'vant'
import 'vant/lib/index.css';

const app = createApp(App)
app.use(PullRefresh)
app.use(List)
app.use(Empty)
app.use(znMobileUI)
app.mount('#app')

使用示例：

<template>
   <zn-list ref="listRef" :request-data="requestData" :params-resolve="paramsResolve">
        <template #default="{ list }">
            <template v-for="(item, index) in list" :key="index">
                <div class="cell-box" @click="handleClick(item)">
                   <h1>{{ item.title }}</h1>
                   <div>{{ item.content }}</div>
                </div>
            </template>
        </template>
   </zn-list>
</template>
<script setup>
import {getlistTodoTask} from '../api'
import emitter from "@/utils/useEmit";
const listRef = ref(null)

emitter.on("listRefresh", ()=>{
  nextTick(()=>{
    listRef.value.onRefresh()
  })
})

const requestData = (pageNum, config) => {
  // config参数是axios防止重复请求的配置
  return getlistTodoTask({pageNum, pageSize: 10}, config)
}

const paramsResolve = (res) => {
  return {
    paramList: res?.data?.list ?? [],
    paramTotal: +(res?.data?.total ?? 0)
  }
}

const handleClick = (item) => {
  console.log(item);
}
</script>

API

Props

|参数| 说明 |类型|默认值| |---|--------------------------------|---|---| |dataList| 列表数据，支持.sync修饰符 |Array|-| |requestData| 请求加载列表数据的接口函数，返回axios的promise对象 |Function|-| |paramsResolve| 处理请求加载列表数据的接口函数返回的结果，返回值是指定的格式 |Function|-| |errorText| 请求失败显示的文本 |String|请求失败，点击重新加载| |finishedText| 加载完成后显示的文本 |String|没有更多了|

Events

| 事件名 | 说明 | 回调参数 | |-----|--------------------------------|------| |refresh|初始化刷新列表的时候触发|-|

方法

| 方法名 | 说明 | 参数 | 返回值 | |-----------|------------|------|------| | onRefresh | 初始化刷新列表的方法 |-|-|

1.2 znLoadingContent

该组件用于应用列表的加载动画，下滑会有加载动画， 使用者可以选择加载动画的类型，动画开始和结束的时候都会触发事件，可以请求数据。默认模式是加载动画会在duration参数设置的时间后关闭。
该组件不需要其他的依赖。
使用示例：

<template>
  <zn-loading-content :duration="600" :animate-time="200" @success-load="refresh">
    <div class="app-list">
        <h1>应用列表</h1>
        <div class="area">
          <div v-for="(item,index) in commonApp" :key="index" class="app-item">
            <image :src="item.url" />
            <p>{{ item.content }}</p>
          </div>
        </div>
    </div>
  </zn-loading-content>
</template>
<script setup>
import {appList} from "./api"
const commonApp = ref([])

const getAppList = async () => {
  let {data: res} = await appList()
  commonApp.value = res
}

const refresh = () => {
  getAppList()
}

getAppList()
</script>
<style lang="scss">
.app-list {
    height: 300px;
   .area {
     height: 270px;
     display: flex;
     flex-wrap: wrap;
     .app-item {
       width: 70px;
       height: 70px;
       image {
         margin:0 10px;
         width: 50px;
         height: 50px;
       }
       p {
         margin-top: 6px;
         margin-bottom: 0px;
         font-size: 14px;
         line-height: 14px;
       }
     }
   }
}
</style>

在按请求接口，获取到数据后再关闭加载动画的模式下，加载动画不会在duration参数设置的时间后关闭，获取到数据后要调用组件的closeAnimation方法关闭动画。
使用示例：

<template>
  <zn-loading-content ref="znLoadingContentRef" :animate-time="200" request-close @success-load="refresh">
    <div class="app-list">
        <h1>应用列表</h1>
        <div class="area">
          <div v-for="(item,index) in commonApp" :key="index" class="app-item">
            <image :src="item.url" />
            <p>{{ item.content }}</p>
          </div>
        </div>
    </div>
  </zn-loading-content>
</template>
<script setup>
import {appList} from "./api"
const commonApp = ref([])
const znLoadingContentRef = ref(null)

const getAppList = async () => {
  let {data: res} = await appList()
  commonApp.value = res
  return true
}

const refresh = async () => {
  await getAppList()
  znLoadingContentRef.value.closeAnimation()
}

getAppList()
</script>
<style lang="scss">
.app-list {
    height: 300px;
   .area {
     height: 270px;
     display: flex;
     flex-wrap: wrap;
     .app-item {
       width: 70px;
       height: 70px;
       image {
         margin:0 10px;
         width: 50px;
         height: 50px;
       }
       p {
         margin-top: 6px;
         margin-bottom: 0px;
         font-size: 14px;
         line-height: 14px;
       }
     }
   }
}
</style>

API

Props

|参数| 说明 |类型|默认值| |---|---------------------|---|---| |loadingAreaHeight| 加载动画区域的高度 |String|100px| |animationName| 动画名称，有move和beat两种动画 |String|move| |duration| 动画持续的时间（ms） |Number|3000| |animateTime| 自动上滑的时间（ms） |Number|500| |requestClose| 是否按请求接口，获取到数据后再关闭加载动画的模式 |Boolean|false|

Events

| 事件名 | 说明 | 回调参数 | |-----|----------------|------| |startLoad| 下滑后加载动画开始的时候触发 |-| |successLoad| 滑动成功的时候触发 |-| |finishLoad| 加载动画结束的时候触发 |-|

方法

| 方法名 | 说明 | 参数 | 返回值 | |-----------|------------|------|------| | closeAnimation | 在请求接口，获取到数据后再关闭加载动画的模式中，加载动画不会在duration参数设置的时间后关闭，获取到数据后要调用该方法关闭动画 |-|-|

1.3 znChart

该组件封装了echarts的容器操作，数据变化和自适应的逻辑，使用者可以快速地开发图表，不仅图表能够自动的自适应，并且在图表自适应方面有更灵活的定制能力。

基础用法

<template>
   <zn-chart height="400px" :options="options" />
   <button @click="changeData">改变数据</button>
</template>
<script>
import { reactive } from "vue"
export default {
  name: 'App',
  setup(){
    let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let yAxisData = [150, 230, 224, 218, 125, 147, 260]
    let options = reactive({
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: yAxisData,
          type: 'line'
        }
      ]
    })

    yAxisData = [350, 270, 245, 228, 115, 157, 270]
    options.series[0].data = yAxisData

    function changeData(){
      yAxisData = [370, 240, 275, 258, 185, 187, 230]
      options.series[0].data = yAxisData
    }
    
    return {
      xAxisData,
      yAxisData,
      options,
      changeData
    }
  },
}
</script>

自定义图表的自适应

如果设计稿的宽度是750px，设计稿图表的字体是14px，字体大小需要在屏幕不同的宽度下变化，需要设置resizeSize为true，在resize事件中调用组件的setSize方法。 示例：

<template>
   <zn-chart ref="znChartRef" height="400px" :device-width="750" :options="options" @resize="resizeChart" resizeSize/>
   <button @click="changeData">改变数据</button>
</template>
<script>
import { ref, reactive } from "vue"
export default {
  name: 'App',
  setup(){
    let znChartRef = ref(null)
    let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let yAxisData = [150, 230, 224, 218, 125, 147, 260]
    let options = reactive({
      xAxis: {
        type: 'category',
        axisLabel: {
          fontSize: 14
        },
        data: xAxisData
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: 14
        },
      },
      series: [
        {
          data: yAxisData,
          type: 'line'
        }
      ]
    })

    yAxisData = [350, 270, 245, 228, 115, 157, 270]
    options.series[0].data = yAxisData

    function changeData(){
      yAxisData = [370, 240, 275, 258, 185, 187, 230]
      options.series[0].data = yAxisData
    }

    function resizeChart(){
      options.xAxis.axisLabel.fontSize = znChartRef.value.setSize(14)
      options.yAxis.axisLabel.fontSize = znChartRef.value.setSize(14)
    }
    
    return {
      xAxisData,
      yAxisData,
      znChartRef,
      options,
      changeData,
      resizeChart
    }
  },
}
</script>

API

Props

|参数| 说明 |类型|默认值| |---|---------------------|---|---| |width| 容器的宽度 |String|100%| |height| 容器的高度 |String|300px| |options| 图表配置项，与echarts一样 |Object|-| |deviceWidth| 移动端设计稿的宽度，设置图表的字体自适应的时候会用到该配置项 |Number|375| |resizeSize|是否开启字体自适应|Boolean|false|

Events

| 事件名 | 说明 | 回调参数 | |-----|----------------|------| |resize| 设备宽度变化时重绘图表前执行 |-|

方法

| 方法名 | 说明 | 参数 | 返回值 | |-----------|------------|------|------| | setSize | 设置图表的字体自适应的方法，传的size参数是设计稿的字体大小，调用方法后会算出当前设备宽度对应的字体大小 |size:Number|Number|