统计面板组件开发

骨架屏优化体验

使用element-plus中的骨架屏组件

数字滚动动画实现

1
npm i gsap

为了方便使用,封装至/components/CountTo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
{{ d.num }}
</template>

<script setup>
import { reactive } from "vue"
import gsap from "gsap"

const props = defineProps({ // 父亲组件传过来的值
value: { // 希望滚动到的终点
type: Number,
default:0
}
})

const d = reactive({
num: 0
})

function AnimateToValue () {
gsap.to(d, {
duration: 0.5,
num: props.value
})
}

AnimateToValue()

</script>

为了防止set up执行完后才修改value的值,我们可以使用watch监听

1
watch(()=>props.value,()=>AnimateToValue())

然后在父亲组件需要使用的位置

1
2
3
<span class="text-3xl font-bold text-gray-500">
<CountTo :value="item.value" />
</span>

echarts图表组件开发

  1. npm i echarts
    
    1
    2
    3

    2. ```html
    <div ref="el" id="chart" style="width: 100%;height: 300px;"></div>
  2. import * as echarts from 'echarts';	// 引入echarts
    import { onMounted, onBeforeUnmount } from 'vue';  // 引入生命周期获得DOM元素
    import {
        getStatistics3
    } from "~/api/index.js"  // 调用方法获取接口数据
    
    var myChart = null
    onMounted(() => {   // 页面渲染完成后,再获得ODM,进行init
        var chartDom = document.getElementById('chart');
        if (chartDom) {
            myChart = echarts.init(chartDom);
            getData() // 4中定义的获取数据方法
        }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

    4. ```js
    function getData () {
    let option = {
    xAxis: {
    type: 'category',
    data: [] // 数据去掉
    },
    yAxis: {
    type: 'value'
    },
    series: [
    {
    data: [], // 数据去掉
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
    color: 'rgba(180, 180, 180, 0.2)'
    }
    }
    ]
    };

    myChart.showLoading() // 开启加载动画
    getStatistics3(current.value).then(res => { // 请求接口数据
    option.xAxis.data = res.x // 赋值
    option.series[0].data = res.y // 赋值

    myChart.setOption(option) // 开启渲染
    }).finally(() => {
    myChart.hideLoading() // 关闭加载动画
    })
  3. 为了避免出现白屏情况

    1
    2
    3
    4
    5
    import { onBeforeUnmount } from 'vue';

    onBeforeUnmount(() => {
    if (myChart) echarts.dispose(myChart) // 销毁ehcarts实例
    })
  4. 图表跟随页面视图进行等比例缩放,使用VueUse提供的useResizeObserver方法

    1
    2
    3
    4
    <div ref="el" id="chart" style="width: 100%;height: 300px;"></div> // 绑定ref

    const el = ref(null)
    useResizeObserver(el, (entries) => myChart.resize()) // 再调用echarts提供的resize方法

v-permission指令按钮级权限控制(一)

  1. 只有数组里的接口和vuex中存储的ruleNames中存在此接口,才可以使用该组件。

    1
    <IndexChart v-permission="['getStatistics3,GET']" />
  2. 新建/directives/permission.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import store from "~/store"

    function hasPermission(value,el = false){ // 判断ruleNames中是否有该接口
    if(!Array.isArray(value)){
    throw new Error(`需要配置权限,例如 v-permission="['getStatistics3,GET']"`)
    }
    const hasAuth = value.findIndex(v=>store.state.ruleNames.includes(v)) != -1
    if(el && !hasAuth){
    el.parentNode && el.parentNode.removeChild(el)
    }
    return hasAuth
    }

    export default { // 自定义
    install(app){
    app.directive("permission",{
    mounted(el,binding){ // el为当前节点
    hasPermission(binding.value,el)
    }
    })
    }
    }
  3. 在main.js中引入

    1
    2
    3
    import permission from './directives/permission.js'

    app.use(permission)

图库模块开发

布局实现

  1. 使用element-plus提供的comtainer容器

  2. 为了让图库部分占满剩余部分的空间

    1
    2
    3
    // 浏览器的高度 = 浏览器可视部分高度 || dom的height+padding,不包括滚动条
    const windowHeight = window.innerHeight || document.body.clientHeight
    const h = windowHeight - 64 - 44 - 40 // 40为padding
  3. el-container中绑定动态style

    1
    <el-container class="bg-white rounded" :style="{ height: (h + 'px') }">
  4. 局部滚动