devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3（5）：数据大屏+菜单权限+按钮权限_vue3 大屏

作者：黑客灵魂 | 2024-06-30 21:44:32

赞

踩

vue3 大屏

一、数据大屏

国内echarts镜像站：ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项

echarts图表集：echarts图表集

1.数据大屏适配问题解决

（1）vw与vh单位解决适配问题

vw/vh：新增单位，要求ie8
比如box内部有两个自适应的盒子top和bottom，他们的宽和高都是随着父容器的变化而变化.将box的宽和高设为视图的宽高100vw,100vh.

那么top和bottom的宽高就要计算一个vw是多少。比如100vw=1920px,那么1vw=19.2px，5.2vw=100px.宽就是5.2vw。

缺点：需要计算子容器的宽高；子容器里面的文字不能进行缩放。

  1. .box{
  2.             width: 100vw;
  3.             height: 100vh;
  4.             background-color: blue;
  5.         }
  6.         .top{
  7.             width: 5.2vw;
  8.             height: 9.26vh;
  9.             background-color: black;
  10.             margin-bottom: 2.6vw;
  11.         }
  12.         .bottom{
  13.             width: 5.2vw;
  14.             height: 9.26vh;
  15.             background-color: white;
  16.         }

（2）css3：scale缩放实现

需要计算出缩放比例（返回的比例需要判断用ww还是wh,原则是根据小的这样不会破坏比例），根据比例放大缩小。

缺点：会留白

  1.    <style>
  2.       * {
  3.         margin: 0;
  4.         padding: 0;
  5.       }
  6.       .container {
  7.         width: 100vw;
  8.         height: 100vh;
  9.         background: url(./bg.png) no-repeat;
  10.         background-size: cover;
  11.       }
  12.       .box {
  13.         position: fixed;
  14.         width: 1920px;
  15.         height: 1080px;
  16.         background-color: red;
  17.         transform-origin: left top;
  18.         left: 50%;
  19.         top: 50%;
  20.       }
  21.       .top {
  22.         width: 100px;
  23.         height: 100px;
  24.         background-color: hotpink;
  25.         margin-left: 50px;
  26.       }
  27.       .bottom {
  28.         width: 100px;
  29.         height: 100px;
  30.         background-color: skyblue;
  31.         margin-left: 50px;
  32.         margin-top: 50px;
  33.       }
  34.     </style>
  1. <script>
  2.   // 控制数据大屏缩放
  3.   let box = document.querySelector('.box')
  4.   box.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
  5.   // 计算缩放比例
  6.   function getScale (w=1920,h=1080){
  7.       // 宽缩放比例
  8.       const ww = window.innerWidth/w;
  9.       // 高缩放比例
  10.       const wh = window.innerHeight/h;
  11.       return ww<wh?ww:wh;
  12.   }
  13.   window.onresize = () => {
  14.       box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  15.   }
  16. </script>

2.screen

（1）写好静态，引入image,screen/images

（2）将子组件封装再引入

src/views/screen/index.vue

  1. <template>
  2.     <div class="container">
  3.         <!-- 数据大屏展示内容区域 -->
  4.         <div class="screen" ref="screen">
  5.             <!-- 数据大屏顶部 -->
  6.             <div class="top">
  7.                 <Top />
  8.             </div>
  9.             <div class="bottom">
  10.                 <div class="left">
  11.                     <Tourist class="tourist"></Tourist>
  12.                     <Sex class="sex"></Sex>
  13.                     <Age class="age"></Age>
  14.                 </div>
  15.                 <div class="center">
  16.                     <Map class="map"></Map>
  17.                     <Line class="line"></Line>
  18.                 </div>
  19.                 <div class="right">
  20.                     <Rank class="rank"></Rank>
  21.                     <Year class="year"></Year>
  22.                     <Counter class="count"></Counter>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </template>
  28.  
  29. <script setup lang="ts">
  30. import { ref, onMounted } from "vue";
  31. //引入顶部的子组件
  32. import Top from './components/top/index.vue';
  33. //引入左侧三个子组件
  34. import Tourist from './components/tourist/index.vue';
  35. import Sex from './components/sex/index.vue';
  36. import Age from './components/age/index.vue'
  37.  
  38. //引入中间两个子组件
  39. import Map from './components/map/index.vue';
  40. import Line from './components/line/index.vue';
  41.  
  42. //引入右侧三个子组件
  43. import Rank from './components/rank/index.vue';
  44. import Year from './components/year/index.vue';
  45. import Counter from './components/couter/index.vue'
  46. //获取数据大屏展示内容盒子的DOM元素
  47. let screen = ref();
  48. onMounted(() => {
  49.     screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  50. });
  51. //定义大屏缩放比例
  52. function getScale(w = 1920, h = 1080) {
  53.     const ww = window.innerWidth / w;
  54.     const wh = window.innerHeight / h;
  55.     return ww < wh ? ww : wh;
  56. }
  57. //监听视口变化
  58. window.onresize = () => {
  59.     screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  60. }
  61.  
  62.  
  63. </script>
  64.  
  65. <style scoped lang="scss">
  66. .container {
  67.     width: 100vw;
  68.     height: 100vh;
  69.     background: url(./images/bg.png) no-repeat;
  70.     background-size: cover;
  71.  
  72.     .screen {
  73.         position: fixed;
  74.         width: 1920px;
  75.         height: 1080px;
  76.         left: 50%;
  77.         top: 50%;
  78.         transform-origin: left top;
  79.  
  80.         .top {
  81.             width: 100%;
  82.             height: 40px;
  83.         }
  84.  
  85.         .bottom {
  86.             display: flex;
  87.  
  88.             .right {
  89.                 flex: 1;
  90.                 display: flex;
  91.                 flex-direction: column;
  92.                 margin-left: 40px;
  93.  
  94.                 .rank {
  95.                     flex: 1.5;
  96.                 }
  97.  
  98.                 .year {
  99.                     flex: 1;
  100.  
  101.                 }
  102.  
  103.                 .count {
  104.                     flex: 1;
  105.                 }
  106.             }
  107.  
  108.             .left {
  109.                 flex: 1;
  110.                 height: 1040px;
  111.                 display: flex;
  112.                 flex-direction: column;
  113.  
  114.                 .tourist {
  115.                     flex: 1.2;
  116.                 }
  117.  
  118.                 .sex {
  119.                     flex: 1;
  120.  
  121.                 }
  122.  
  123.                 .age {
  124.                     flex: 1;
  125.                 }
  126.             }
  127.  
  128.             .center {
  129.                 flex: 1.5;
  130.                 display: flex;
  131.                 flex-direction: column;
  132.  
  133.                 .map {
  134.                     flex: 4;
  135.                 }
  136.  
  137.                 .line {
  138.                     flex: 1;
  139.                 }
  140.             }
  141.         }
  142.     }
  143. }
  144. </style>

3.顶部组件Top

（1）pnpm i moment

（2）关于时间动态展示》先存储当前时间》组件挂载完毕利用定时器，每隔一秒刷新时间》展示时间

（3）跳转首页

src/views/screen/components/top/index.vue

  1. <template>
  2.     <div class="top">
  3.         <div class="left">
  4.             <span class="lbtn" @click="goHome">首页</span>
  5.         </div>
  6.         <div class="center">
  7.             <div class="title">智慧旅游可视化大数据平台</div>
  8.         </div>
  9.         <div class="right">
  10.             <span class="rbtn">统计报告</span>
  11.             <span class="time">当前时间:{{ time }}</span>
  12.         </div>
  13.     </div>
  14. </template>
  15.  
  16. <script setup lang="ts">
  17. //@ts-ignore
  18. import moment from 'moment';
  19. //点击首页按钮回到首页
  20. import { useRouter } from 'vue-router';
  21. import { ref, onMounted, onBeforeUnmount } from 'vue';
  22. //获取路由器对象
  23. let $router = useRouter();
  24.  
  25. //存储当前时间
  26. let time = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'));
  27. let timer = ref(0);
  28. //按钮的点击回调
  29. const goHome = () => {
  30.     $router.push('/home')
  31. }
  32. //组件挂载完毕更新当前的事件
  33. onMounted(() => {
  34.     timer.value = setInterval(() => {
  35.         time.value = moment().format('YYYY年MM月DD日 hh:mm:ss');
  36.     }, 1000);
  37. });
  38. // 销毁定时器
  39. onBeforeUnmount(() => {
  40.     clearInterval(timer.value);
  41. })
  42. </script>
  43.  
  44. <style scoped lang="scss">
  45. .top {
  46.     width: 100%;
  47.     height: 40px;
  48.     display: flex;
  49.  
  50.     .left {
  51.         flex: 1.5;
  52.         background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
  53.         background-size: cover;
  54.  
  55.         .lbtn {
  56.             width: 150px;
  57.             height: 40px;
  58.             float: right;
  59.             background: url(../../images/dataScreen-header-btn-bg-l.png) no-repeat;
  60.             background-size: 100% 100%;
  61.             text-align: center;
  62.             line-height: 40px;
  63.             color: #29fcff;
  64.             font-size: 20px;
  65.         }
  66.     }
  67.  
  68.     .center {
  69.         flex: 2;
  70.  
  71.         .title {
  72.             width: 100%;
  73.             height: 74px;
  74.             background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
  75.             background-size: 100% 100%;
  76.             text-align: center;
  77.             line-height: 74px;
  78.             color: #29fcff;
  79.             font-size: 30px;
  80.         }
  81.     }
  82.  
  83.     .right {
  84.         flex: 1.5;
  85.         background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
  86.         background-size: cover;
  87.         display: flex;
  88.         justify-content: space-between;
  89.         align-items: center;
  90.  
  91.         .rbtn {
  92.             width: 150px;
  93.             height: 40px;
  94.             background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
  95.             background-size: 100% 100%;
  96.             text-align: center;
  97.             line-height: 40px;
  98.             color: #29fcff;
  99.         }
  100.  
  101.         .time {
  102.             color: #29fcff;
  103.             font-size: 20px;
  104.         }
  105.  
  106.  
  107.     }
  108. }
  109. </style>

4.左侧三个子组件

4.1游客统计组件tourist

（1）pnpm i echarts

（2）pnpm i echarts-liquidfill水球图组件

Apache ECharts

GitHub - ecomfe/echarts-liquidfill: Liquid Fill Chart for Apache ECharts

src/views/screen/components/tourist/index.vue 

  1. <template>
  2.     <div class="box">
  3.         <div class="top">
  4.             <p class="title">实时游客统计</p>
  5.             <p class="bg"></p>
  6.             <p class="right">可预约总量<span>99999</span>人</p>
  7.         </div>
  8.         <div class="number">
  9.             <span v-for="(item, index) in people" :key="index">{{ item }}</span>
  10.         </div>
  11.         <!-- 盒子将来echarts展示图形图标的节点 -->
  12.         <div class="charts" ref="charts">123</div>
  13.     </div>
  14. </template>
  15.  
  16. <script setup lang="ts">
  17. import 'echarts-liquidfill'
  18. import * as echarts from 'echarts';
  19. import { ref, onMounted } from 'vue';
  20. let people = ref('215908人');
  21.  
  22. //水球图拓展插件
  23.  
  24. //获取节点
  25. let charts = ref();
  26. onMounted(() => {
  27.     //获取echarts类的实例
  28.     let mycharts = echarts.init(charts.value);
  29.     //设置实例的配置项
  30.     mycharts.setOption({
  31.         //标题组件
  32.         title: {
  33.             text: '水球图'
  34.         },
  35.         //x|y轴组件
  36.         xAxis: {},
  37.         yAxis: {},
  38.         //系列:决定你展示什么样的图形图标
  39.         series: {
  40.             type: 'liquidFill',//系列
  41.             data: [0.6, 0.4, 0.2],//展示的数据
  42.             waveAnimation: true,//动画
  43.             animationDuration: 3,
  44.             animationDurationUpdate: 0,
  45.             radius: '100%',//半径
  46.             outline: {//外层边框颜色设置
  47.                 show: true,
  48.                 borderDistance: 8,
  49.                 itemStyle: {
  50.                     color: 'skyblue',
  51.                     borderColor: '#294D99',
  52.                     borderWidth: 8,
  53.                     shadowBlur: 20,
  54.                     shadowColor: 'rgba(0, 0, 0, 0.25)'
  55.                 }
  56.             },
  57.         },
  58.         //布局组件
  59.         grid: {
  60.             left: 0,
  61.             right: 0,
  62.             top: 0,
  63.             bottom: 0
  64.         }
  65.  
  66.     })
  67. })
  68. </script>
  69.  
  70. <style scoped lang="scss">
  71. .box {
  72.     background: url(../../images/dataScreen-main-lb.png) no-repeat;
  73.     background-size: 100% 100%;
  74.     margin-top: 10px;
  75.  
  76.     .top {
  77.         margin-left: 20px;
  78.  
  79.         .title {
  80.             color: white;
  81.             font-size: 20px;
  82.  
  83.         }
  84.  
  85.         .bg {
  86.             width: 68px;
  87.             height: 7px;
  88.             background: url(../../images/dataScreen-title.png) no-repeat;
  89.             background-size: 100% 100%;
  90.             margin-top: 10px;
  91.         }
  92.  
  93.         .right {
  94.             float: right;
  95.             color: white;
  96.             font-size: 20px;
  97.  
  98.             span {
  99.                 color: yellowgreen;
  100.             }
  101.         }
  102.     }
  103.  
  104.     .number {
  105.         padding: 10px;
  106.         margin-top: 30px;
  107.         display: flex;
  108.  
  109.  
  110.         span {
  111.             flex: 1;
  112.             height: 40px;
  113.             text-align: center;
  114.             line-height: 40px;
  115.             background: url(../../images/total.png) no-repeat;
  116.             background-size: 100% 100%;
  117.             color: #29fcff;
  118.         }
  119.     }
  120.  
  121.     .charts {
  122.         width: 100%;
  123.         height: 270px;
  124.     }
  125. }
  126. </style>

 4.2Sex组件

（1）基础柱状图 - 柱状图 - 常用图表类型 - 应用篇 - 使用手册 - Apache ECharts

（2）柱状图 的使用

 src/views/screen/components/sex/index.vue

  1. <template>
  2.   <div class="box1">
  3.     <div class="title">
  4.       <p>男女比例</p>
  5.       <img src="../../images/dataScreen-title.png" alt="">
  6.     </div>
  7.     <div class="sex">
  8.       <div class="man">
  9.         <img src="../../images/man.png" alt="">
  10.       </div>
  11.       <div class="women">
  12.         <img src="../../images/woman.png" alt="">
  13.       </div>
  14.  
  15.     </div>
  16.     <div class="rate">
  17.       <p>男士58%</p>
  18.       <p>女士42%</p>
  19.     </div>
  20.     <div class="charts" ref='charts'></div>
  21.   </div>
  22. </template>
  23.  
  24. <script setup lang="ts">
  25. import { ref, onMounted } from 'vue';
  26. import * as echarts from 'echarts';
  27. //获取图形图标的DOM节点
  28. let charts = ref();
  29. onMounted(() => {
  30.   //初始化echarts实例
  31.   let mycharts = echarts.init(charts.value);
  32.   //设置配置项
  33.   mycharts.setOption({
  34.     //组件标题
  35.     title: {
  36.       text: '男女比例',//主标题
  37.       textStyle: {//主标题颜色
  38.         color: 'skyblue'
  39.       },
  40.       left: '40%'
  41.     },
  42.     //x|y
  43.     xAxis: {
  44.       show: false,
  45.       min: 0,
  46.       max: 100
  47.     },
  48.     yAxis: {
  49.       show: false,
  50.       type: 'category'
  51.     },
  52.     series: [
  53.       {
  54.         type: 'bar',
  55.         data: [58],
  56.         barWidth: 20,
  57.         z: 100,
  58.         itemStyle: {
  59.           color: 'skyblue',
  60.           borderRadius: 20
  61.         }
  62.       }
  63.       ,
  64.       {
  65.         type: 'bar',
  66.         data: [100],
  67.         barWidth: 20,
  68.         //调整女士柱条位置
  69.         barGap: '-100%',
  70.         itemStyle: {
  71.           color: 'pink',
  72.           borderRadius: 20
  73.         }
  74.       }
  75.     ],
  76.     grid: {
  77.       left: 0,
  78.       top: 0,
  79.       right: 0,
  80.       bottom: 0
  81.     }
  82.   });
  83. })
  84.  
  85.  
  86. </script>
  87.  
  88. <style scoped lang="scss">
  89. .box1 {
  90.   width: 100%;
  91.   height: 100%;
  92.   background: url(../../images/dataScreen-main-cb.png) no-repeat;
  93.   background-size: 100% 100%;
  94.   margin: 20px 0px;
  95.  
  96.   .title {
  97.     margin-left: 20px;
  98.  
  99.     p {
  100.       color: white;
  101.       font-size: 20px;
  102.     }
  103.   }
  104.  
  105.   .sex {
  106.     display: flex;
  107.     justify-content: center;
  108.  
  109.     .man {
  110.       margin: 20px;
  111.       width: 111px;
  112.       height: 115px;
  113.       background: url(../../images/man-bg.png) no-repeat;
  114.       display: flex;
  115.       justify-content: center;
  116.       align-items: center;
  117.     }
  118.  
  119.     .women {
  120.       margin: 20px;
  121.       width: 111px;
  122.       height: 115px;
  123.       background: url(../../images/woman-bg.png) no-repeat;
  124.       display: flex;
  125.       justify-content: center;
  126.       align-items: center;
  127.     }
  128.  
  129.   }
  130.  
  131.   .rate {
  132.     display: flex;
  133.     justify-content: space-between;
  134.     color: white;
  135.   }
  136.  
  137.   .charts {
  138.     height: 100px;
  139.   }
  140. }
  141. </style>

4.3Age组件

 （1）饼图

圆环图 - 饼图 - 常用图表类型 - 应用篇 - 使用手册 - Apache ECharts

 src/views/screen/components/age/index.vue

  1. <template>
  2.     <div class="box2">
  3.         <div class="title">
  4.             <p>年龄比例</p>
  5.             <img src="../../images/dataScreen-title.png" alt="">
  6.         </div>
  7.         <!-- 图形图标的容器 -->
  8.         <div class="charts" ref="charts"></div>
  9.     </div>
  10. </template>
  11.  
  12. <script setup lang="ts">
  13. import { ref, onMounted } from 'vue';
  14. //引入echarts
  15. import * as echarts from 'echarts';
  16. let charts = ref();
  17. //组件挂载完毕初始化图形图标
  18. onMounted(() => {
  19.     let mychart = echarts.init(charts.value);
  20.     //设置配置项
  21.     let option = {
  22.         tooltip: {
  23.             trigger: 'item'
  24.         },
  25.         legend: {
  26.             right: 30,
  27.             top: 40,
  28.             orient: 'vertical',//图例组件方向的设置
  29.             textStyle: {
  30.                 color: 'white',
  31.                 fontSize: 14
  32.             }
  33.         },
  34.         series: [
  35.             {
  36.                 name: 'Access From',
  37.                 type: 'pie',
  38.                 radius: ['40%', '70%'],
  39.                 avoidLabelOverlap: false,
  40.                 itemStyle: {
  41.                     borderRadius: 10,
  42.                     borderColor: '#fff',
  43.                     borderWidth: 2
  44.                 },
  45.                 label: {
  46.                     show: true,
  47.                     position: 'inside',
  48.                     color:'white'
  49.                 },
  50.  
  51.                 labelLine: {
  52.                     show: false
  53.                 },
  54.                 data: [
  55.                     { value: 1048, name: '军事' },
  56.                     { value: 735, name: '新闻' },
  57.                     { value: 580, name: '直播' },
  58.                     { value: 484, name: '娱乐' },
  59.                     { value: 300, name: '财经' }
  60.                 ]
  61.             }
  62.         ],
  63.         //调整图形图标的位置
  64.         grid: {
  65.             left: 0,
  66.             top: 0,
  67.             right: 0,
  68.             bottom: 0
  69.         }
  70.     };
  71.     mychart.setOption(option);
  72. });
  73. </script>
  74.  
  75. <style scoped lang="scss">
  76. .box2 {
  77.     width: 100%;
  78.     height: 100%;
  79.     background: url(../../images/dataScreen-main-cb.png) no-repeat;
  80.     background-size: 100% 100%;
  81.  
  82.     .title {
  83.         margin-left: 20px;
  84.  
  85.         p {
  86.             color: white;
  87.             font-size: 20px;
  88.         }
  89.     }
  90.  
  91.     .charts {
  92.         height: 260px;
  93.     }
  94.  
  95. }
  96. </style>

5.中间两个子组件

5.1Map组件中国地图

（1）ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项

（2）阿里云网站提供中国地图数据

http://datav.aliyun.com/portal/school/atlas/area_selector

将数据放入map/china.json

注册中国地图》引入json数据》onMounted设置配置项》地图组件

  src/views/screen/components/map/index.vue

  1. <template>
  2.     <div class="box4" ref="map">
  3.         我是地图组件
  4.     </div>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8. import { ref, onMounted } from 'vue';
  9. import * as echarts from 'echarts';
  10. //引入中国地图的JSON数据
  11. import chinaJSON from './china.json'
  12. //获取DOM元素
  13. let map = ref();
  14. //注册中国地图
  15. echarts.registerMap('china', chinaJSON as any)
  16. onMounted(() => {
  17.     let mychart = echarts.init(map.value);
  18.     //设置配置项
  19.     mychart.setOption({
  20.         //地图组件
  21.         geo: {
  22.             map: 'china',//中国地图
  23.             roam: true,//鼠标缩放的效果
  24.             //地图的位置调试
  25.             left: 150,
  26.             top: 150,
  27.             right: 150,
  28.             zoom:1.2,
  29.             bottom: 0,
  30.             //地图上的文字的设置
  31.             label: {
  32.                 show: true,//文字显示出来
  33.                 color: 'white',
  34.                 fontSize: 14
  35.             },
  36.  
  37.             itemStyle: {
  38.                 //每一个多边形的样式
  39.                 color: {
  40.                     type: 'linear',
  41.                     x: 0,
  42.                     y: 0,
  43.                     x2: 0,
  44.                     y2: 1,
  45.                     colorStops: [{
  46.                         offset: 0, color: 'red' // 0% 处的颜色
  47.                     }, {
  48.                         offset: 1, color: 'blue' // 100% 处的颜色
  49.                     }],
  50.                     global: false // 缺省为 false
  51.                 },
  52.                 opacity: .8
  53.             },
  54.             //地图高亮的效果
  55.             emphasis: {
  56.                 itemStyle: {
  57.                     color: 'red'
  58.                 },
  59.                 label: {
  60.                     fontSize: 40
  61.                 }
  62.             }
  63.         },
  64.         //布局位置
  65.         grid: {
  66.             left: 0,
  67.             top: 0,
  68.             right: 0,
  69.             bottom: 0
  70.         },
  71.         series: [
  72.             {
  73.                 type: 'lines',//航线的系列
  74.                 data: [
  75.                     {
  76.                         coords: [
  77.                             [116.405285, 39.904989],  // 起点
  78.                             [119.306239, 26.075302]   // 终点
  79.  
  80.                         ],
  81.                         // 统一的样式设置
  82.                         lineStyle: {
  83.                             color: 'orange',
  84.                             width: 5
  85.                         }
  86.                     },
  87.                     {
  88.                         coords: [
  89.                             [116.405285, 39.904989],  // 起点
  90.                             [114.298572,30.584355]   // 终点
  91.  
  92.                         ],
  93.                         // 统一的样式设置
  94.                         lineStyle: {
  95.                             color: 'yellow',
  96.                             width: 5
  97.                         }
  98.                     }
  99.                 ],
  100.                 //开启动画特效
  101.                 effect: {
  102.                     show: true,
  103.                     symbol: 'arrow',
  104.                     color: 'black',
  105.                     symbolSize: 10
  106.                 }
  107.             }
  108.         ]
  109.     })
  110.  
  111. });
  112. </script>
  113.  
  114. <style scoped></style>

 5.2Line组件游客趋势折线图

 src/views/screen/components/line/index.vue

  1. <template>
  2.     <div class="box5">
  3.         <div class="title">
  4.             <p>未来七天游客数量趋势图</p>
  5.             <img src="../../images/dataScreen-title.png" alt="">
  6.         </div>
  7.         <div class="charts" ref='line'></div>
  8.     </div>
  9. </template>
  10.  
  11. <script setup lang="ts">
  12. import * as echarts from 'echarts';
  13. import { ref, onMounted } from 'vue';
  14. //获取图形图标的节点
  15. let line = ref();
  16. onMounted(() => {
  17.     let mycharts = echarts.init(line.value);
  18.     //设置配置项
  19.     mycharts.setOption({
  20.         //标题组件
  21.         title: {
  22.             text: '访问量'
  23.         },
  24.         //x|y轴
  25.         xAxis: {
  26.             type: 'category',
  27.             //两侧不留白
  28.             boundaryGap: false,
  29.             //分割线不要
  30.             splitLine: {
  31.                 show: false
  32.             },
  33.             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  34.             //轴线的设置
  35.             axisLine: {
  36.                 show: true
  37.             },
  38.             //刻度
  39.             axisTick: {
  40.                 show: true
  41.             }
  42.         },
  43.         yAxis: {
  44.             splitLine: {
  45.                 show: false
  46.             },
  47.             //轴线的设置
  48.             axisLine: {
  49.                 show: true
  50.             },
  51.             //刻度
  52.             axisTick: {
  53.                 show: true
  54.             }
  55.         },
  56.         grid: {
  57.             left: 40,
  58.             top: 0,
  59.             right: 20,
  60.             bottom: 20
  61.         },
  62.         //系列
  63.         series: [
  64.             {
  65.                 type: 'line',
  66.                 data: [120, 1240, 66, 2299, 321, 890, 1200],
  67.                 //平滑曲线的设置
  68.                 smooth: true,
  69.                 //区域填充样式
  70.                 areaStyle: {
  71.                     color: {
  72.                         type: 'linear',
  73.                         x: 0,
  74.                         y: 0,
  75.                         x2: 0,
  76.                         y2: 1,
  77.                         colorStops: [{
  78.                             offset: 0, color: 'red' // 0% 处的颜色
  79.                         }, {
  80.                             offset: 1, color: 'blue' // 100% 处的颜色
  81.                         }],
  82.                         global: false // 缺省为 false
  83.                     }
  84.                 }
  85.             }
  86.         ]
  87.     })
  88. })
  89. </script>
  90.  
  91. <style scoped lang="scss">
  92. .box5 {
  93.     width: 100%;
  94.     height: 100%;
  95.     background: url(../../images/dataScreen-main-cb.png) no-repeat;
  96.     background-size: 100% 100%;
  97.     margin: 0px 20px;
  98.  
  99.     .title {
  100.         margin-left: 10px;
  101.  
  102.         p {
  103.             color: white;
  104.             font-size: 20px;
  105.         }
  106.     }
  107.  
  108.     .charts {
  109.         height: calc(100% - 40px);
  110.     }
  111.  
  112. }
  113. </style>

6.右侧三个子组件

6.1Rank组件

 src/views/screen/components/rank/index.vue

  1. <template>
  2.     <div class="box6">
  3.         <div class="title">
  4.             <p>热门景区排行</p>
  5.             <img src="../../images/dataScreen-title.png" alt="">
  6.         </div>
  7.         <!-- 图形图标的容器 -->
  8.         <div class="charts" ref='charts'></div>
  9.     </div>
  10. </template>
  11.  
  12. <script setup lang="ts">
  13. import * as echarts from 'echarts';
  14. import { ref, onMounted } from 'vue';
  15. //获取DOM节点
  16. let charts = ref();
  17. //组件挂载完毕
  18. onMounted(() => {
  19.     //一个容器可以同时展示多种类型的图形图标
  20.     let mychart = echarts.init(charts.value);
  21.     //设置配置项
  22.     mychart.setOption({
  23.         //标题组件
  24.         title: {
  25.             //主标题
  26.             text: '景区排行',
  27.             link: 'http://www.baidu.com',
  28.             //标题的位置
  29.             left: '50%',
  30.             //主标题文字样式
  31.             textStyle: {
  32.                 color: 'yellowgreen',
  33.                 fontSize: 20
  34.             },
  35.             //子标题
  36.             subtext: "各大景区排行",
  37.             //子标题的样式
  38.             subtextStyle: {
  39.                 color: 'yellowgreen',
  40.                 fontSize: 16
  41.             }
  42.         },
  43.         //x|y轴组件
  44.         xAxis: {
  45.             type: 'category',//图形图标在x轴均匀分布展示
  46.         },
  47.         yAxis: {},
  48.         //布局组件
  49.         grid: {
  50.             left: 20,
  51.             bottom: 20,
  52.             right: 20
  53.         },
  54.         //系列:决定显示图形图标是哪一种的
  55.         series: [
  56.             {
  57.                 type: 'bar',
  58.                 data: [10, 20, 30, 40, 50, 60, 70],
  59.                 //柱状图的:图形上的文本标签，
  60.                 label: {
  61.                     show: true,
  62.                     //文字的位置
  63.                     position: 'insideTop',
  64.                     //文字颜色
  65.                     color: 'yellowgreen'
  66.                 },
  67.                 //是否显示背景颜色
  68.                 showBackground: true,
  69.                 backgroundStyle: {
  70.                     //底部背景的颜色
  71.                     color: {
  72.                         type: 'linear',
  73.                         x: 0,
  74.                         y: 0,
  75.                         x2: 0,
  76.                         y2: 1,
  77.                         colorStops: [{
  78.                             offset: 0, color: 'black' // 0% 处的颜色
  79.                         }, {
  80.                             offset: 1, color: 'blue' // 100% 处的颜色
  81.                         }],
  82.                         global: false // 缺省为 false
  83.                     }
  84.                 },
  85.                 //柱条的样式
  86.                 itemStyle: {
  87.                     borderRadius:[10, 10, 0, 0],
  88.                     //柱条颜色
  89.                     color:function(data:any){
  90.                         //给每一个柱条这是背景颜色
  91.                         let arr =['red','orange','yellowgreen','green','purple','hotpink','skyblue']
  92.                          return arr[data.dataIndex];
  93.                     }
  94.                 }
  95.             },
  96.             {
  97.                 type:'line',
  98.                 data:[10,20,30,40,50,60,90],
  99.                 smooth:true,//平滑曲线
  100.             },
  101.             {
  102.                 type: 'bar',
  103.                 data: [10, 20, 30, 40, 50, 60, 70],
  104.                 //柱状图的:图形上的文本标签，
  105.                 label: {
  106.                     show: true,
  107.                     //文字的位置
  108.                     position: 'insideTop',
  109.                     //文字颜色
  110.                     color: 'yellowgreen'
  111.                 },
  112.                 //是否显示背景颜色
  113.                 showBackground: true,
  114.                 backgroundStyle: {
  115.                     //底部背景的颜色
  116.                     color: {
  117.                         type: 'linear',
  118.                         x: 0,
  119.                         y: 0,
  120.                         x2: 0,
  121.                         y2: 1,
  122.                         colorStops: [{
  123.                             offset: 0, color: 'black' // 0% 处的颜色
  124.                         }, {
  125.                             offset: 1, color: 'blue' // 100% 处的颜色
  126.                         }],
  127.                         global: false // 缺省为 false
  128.                     }
  129.                 },
  130.                 //柱条的样式
  131.                 itemStyle: {
  132.                     borderRadius:[10, 10, 0, 0],
  133.                     //柱条颜色
  134.                     color:function(data:any){
  135.                         //给每一个柱条这是背景颜色
  136.                         let arr =['red','orange','yellowgreen','green','purple','hotpink','skyblue']
  137.                          return arr[data.dataIndex];
  138.                     }
  139.                 }
  140.             },
  141.         ],
  142.         tooltip:{
  143.             backgroundColor:'rgba(50,50,50,0.7)'
  144.         }
  145.     })
  146. })
  147. </script>
  148.  
  149. <style scoped lang="scss">
  150. .box6 {
  151.     width: 100%;
  152.     height: 100%;
  153.     background: url(../../images/dataScreen-main-cb.png) no-repeat;
  154.     background-size: 100% 100%;
  155.     margin: 20px 0px;
  156.  
  157.     .title {
  158.         margin-left: 5px;
  159.  
  160.         p {
  161.             color: white;
  162.             font-size: 20px;
  163.         }
  164.     }
  165.  
  166.     .charts {
  167.         height: calc(100% - 30px);
  168.     }
  169. }
  170. </style>

6.2Year组件

 src/views/screen/components/year/index.vue

  1. <template>
  2.   <div class="box7">
  3.     <div class="title">
  4.       <p>年度游客量对比</p>
  5.       <img src="../../images/dataScreen-title.png" alt="">
  6.     </div>
  7.     <div class="charts" ref="charts"></div>
  8.   </div>
  9. </template>
  10.  
  11. <script setup lang="ts">
  12. import * as echarts from 'echarts';
  13. import { ref, onMounted } from 'vue';
  14. //获取DOM节点
  15. let charts = ref();
  16. //组件挂载完毕
  17. onMounted(() => {
  18.   //一个容器可以同时展示多种类型的图形图标
  19.   let mychart = echarts.init(charts.value);
  20.   //设置配置项
  21.   mychart.setOption({
  22.     title: {
  23.       text: '散点图',
  24.       left: '40%',
  25.       textStyle: {
  26.         color: 'white'
  27.       }
  28.     },
  29.     xAxis: {
  30.       type: 'category',
  31.       show: true,
  32.     },
  33.     yAxis: {
  34.       show: false
  35.     },
  36.     grid: {
  37.       left: 20,
  38.       top: 20,
  39.       right: 0,
  40.       bottom: 20
  41.     },
  42.     series: {
  43.       type: 'scatter',
  44.       data: [33, 88, 21, 9, 88, 234, 113, 1231, 674, 3, 88, 33, 21, 888, 3332, 313, 123, 5, 657, 7],
  45.       //标记图形设置
  46.       symbol: 'diamond',
  47.       symbolSize: 16,
  48.       //图文标签
  49.       label: {
  50.         show: true,
  51.         position: 'top',
  52.         color: 'red'
  53.       },
  54.       //散点图标记的颜色
  55.       itemStyle: {
  56.         color: {
  57.           type: 'linear',
  58.           x: 0,
  59.           y: 0,
  60.           x2: 0,
  61.           y2: 1,
  62.           colorStops: [{
  63.             offset: 0, color: 'red' // 0% 处的颜色
  64.           }, {
  65.             offset: 1, color: 'blue' // 100% 处的颜色
  66.           }],
  67.           global: false // 缺省为 false
  68.         }
  69.       }
  70.     }
  71.  
  72.   })
  73. })
  74. </script>
  75.  
  76. <style scoped lang="scss">
  77. .box7 {
  78.   width: 100%;
  79.   height: 100%;
  80.   background: url(../../images/dataScreen-main-cb.png) no-repeat;
  81.   background-size: 100% 100%;
  82.   margin: 20px 0px;
  83.  
  84.   .title {
  85.     p {
  86.       color: white;
  87.       font-size: 18px;
  88.     }
  89.   }
  90.  
  91.   .charts {
  92.     height: calc(100% - 30px);
  93.   }
  94.  
  95. }
  96. </style>

6.3Couter组件

 src/views/screen/components/couter/index.vue

  1. <template>
  2.   <div class="box8">
  3.     <div class="title">
  4.       <p>数据统计</p>
  5.       <img src="../../images/dataScreen-title.png" alt="">
  6.     </div>
  7.     <div class="charts" ref="charts"></div>
  8.   </div>
  9. </template>
  10.   
  11. <script setup lang="ts">
  12. import * as echarts from 'echarts';
  13. import { ref, onMounted } from 'vue';
  14. //获取DOM节点
  15. let charts = ref();
  16. //组件挂载完毕
  17. onMounted(() => {
  18.   //一个容器可以同时展示多种类型的图形图标
  19.   let mychart = echarts.init(charts.value);
  20.   let option = {
  21.     title: {
  22.       text: '游客消费统计',
  23.       textStyle:{
  24.         color:'white'
  25.       }
  26.     },
  27.     radar: {
  28.       // shape: 'circle',
  29.       indicator: [
  30.         { name: '消费', max: 6500 },
  31.         { name: '好感', max: 16000 },
  32.         { name: '出行', max: 30000 },
  33.         { name: '小吃', max: 38000 },
  34.         { name: '爱好', max: 52000 },
  35.         { name: '景点', max: 25000 }
  36.       ]
  37.     },
  38.     series: [
  39.       {
  40.         name: 'Budget vs spending',
  41.         type: 'radar',
  42.         data: [
  43.           {
  44.             value: [4200, 3000, 20000, 35000, 50000, 18000],
  45.             name: '购物'
  46.           },
  47.           {
  48.             value: [5000, 14000, 28000, 26000, 42000, 21000],
  49.             name: '吃饭'
  50.           }
  51.         ]
  52.       }
  53.     ]
  54.   };
  55.   //设置配置项
  56.   mychart.setOption(option)
  57. })
  58. </script>
  59.   
  60. <style scoped lang="scss">
  61. .box8 {
  62.   width: 100%;
  63.   height: 100%;
  64.   background: url(../../images/dataScreen-main-cb.png) no-repeat;
  65.   background-size: 100% 100%;
  66.   margin-top: 20px;
  67.  
  68.   .title {
  69.     p {
  70.       color: white;
  71.       font-size: 18px;
  72.     }
  73.   }
  74.  
  75.   .charts {
  76.     height: calc(100% - 30px);
  77.   }
  78.  
  79. }
  80. </style>

效果图 

二、菜单权限

1. 路由拆分 

将项目路由拆分为：

  • 静态路由：login、404、home、screen
  • 异步路由：权限管理（包含三个子路由）、商品管理（包含四个子路由）
  • 任意路由：任意路由

src/router/routes.ts

  1. // 对外暴露配置路由（常量路由）:全部用户都可以访问到的路由
  2. export const constantRoute = [
  3.   {
  4.     // 登录
  5.     path: '/login',
  6.     component: () => import('@/views/login/index.vue'),
  7.     name: 'login',
  8.     meta: {
  9.       title: '登录',
  10.       hidden: true,
  11.       icon: 'Moon',
  12.     },
  13.   },
  14.   {
  15.     // 登录成功以后展示数据的路由
  16.     path: '/',
  17.     component: () => import('@/layout/index.vue'),
  18.     name: 'layout',
  19.     meta: {
  20.       title: '',
  21.       hidden: false,
  22.       icon: '', // 菜单文字左侧的图标,支持element-plus全部图标
  23.     },
  24.     redirect: '/home',
  25.     children: [
  26.       {
  27.         path: '/home',
  28.         component: () => import('@/views/home/index.vue'),
  29.         meta: {
  30.           title: '首页',
  31.           hidden: false,
  32.           icon: 'Sunny',
  33.         },
  34.       },
  35.     ],
  36.   },
  37.   {
  38.     // 404
  39.     path: '/404',
  40.     component: () => import('@/views/404/index.vue'),
  41.     name: '404',
  42.     meta: {
  43.       title: '404',
  44.       hidden: true,
  45.       icon: 'Moon',
  46.     },
  47.   },
  48.   {
  49.     path: '/screen',
  50.     component: () => import('@/views/screen/index.vue'),
  51.     name: 'Screen',
  52.     meta: {
  53.       title: '数据大屏',
  54.       hidden: false,
  55.       icon: 'Platform',
  56.     },
  57.   }
  58. ]
  59. //异步路由
  60. export const asnycRoute = [
  61.    {
  62.     path: '/acl',
  63.     component: () => import('@/layout/index.vue'),
  64.     name: 'Acl',
  65.     meta: {
  66.       title: '权限管理',
  67.       icon: 'Lock',
  68.     },
  69.     redirect: '/acl/user',
  70.     children: [
  71.       {
  72.         path: '/acl/user',
  73.         component: () => import('@/views/acl/user/index.vue'),
  74.         name: 'User',
  75.         meta: {
  76.           title: '用户管理',
  77.           icon: 'User',
  78.         },
  79.       },
  80.       {
  81.         path: '/acl/role',
  82.         component: () => import('@/views/acl/role/index.vue'),
  83.         name: 'Role',
  84.         meta: {
  85.           title: '角色管理',
  86.           icon: 'UserFilled',
  87.         },
  88.       },
  89.       {
  90.         path: '/acl/permission',
  91.         component: () => import('@/views/acl/permission/index.vue'),
  92.         name: 'Permission',
  93.         meta: {
  94.           title: '菜单管理',
  95.           icon: 'Monitor',
  96.         },
  97.       },
  98.     ],
  99.   },
  100.   {
  101.     path: '/product',
  102.     component: () => import('@/layout/index.vue'),
  103.     name: 'Product',
  104.     meta: {
  105.       title: '商品管理',
  106.       icon: 'Goods',
  107.     },
  108.     redirect: '/product/trademark',
  109.     children: [
  110.       {
  111.         path: '/product/trademark',
  112.         component: () => import('@/views/product/trademark/index.vue'),
  113.         name: 'Trademark',
  114.         meta: {
  115.           title: '品牌管理',
  116.           icon: 'ShoppingCartFull',
  117.         },
  118.       },
  119.       {
  120.         path: '/product/attr',
  121.         component: () => import('@/views/product/attr/index.vue'),
  122.         name: 'Attr',
  123.         meta: {
  124.           title: '属性管理',
  125.           icon: 'ChromeFilled',
  126.         },
  127.       },
  128.       {
  129.         path: '/product/spu',
  130.         component: () => import('@/views/product/spu/index.vue'),
  131.         name: 'Spu',
  132.         meta: {
  133.           title: 'SPU管理',
  134.           icon: 'Calendar',
  135.         },
  136.       },
  137.       {
  138.         path: '/product/sku',
  139.         component: () => import('@/views/product/sku/index.vue'),
  140.         name: 'Sku',
  141.         meta: {
  142.           title: 'SKU管理',
  143.           icon: 'Orange',
  144.         },
  145.       },
  146.     ],
  147.   },
  148.  
  149. ]
  150. // 任意路由
  151. export const anyRoute = 
  152.   {
  153.     // 任意路由
  154.     path: '/:pathMatch(.*)*',
  155.     redirect: '/404',
  156.     name: 'Any',
  157.     meta: {
  158.       title: '任意路由',
  159.       hidden: true,
  160.       icon: 'Moon',
  161.     },
  162.   }
  163.  
  164.

 2 . 菜单权限业务实现 

src/store/modules/user.ts

  1. //创建用户相关的小仓库
  2. import { defineStore } from 'pinia'
  3. //引入接口
  4. import { reqLogin, reqUserInfo, reqLogout } from '@/api/user'
  5. import type {
  6.   loginFormData,
  7.   loginResponseData,
  8.   userInfoResponseData,
  9. } from '@/api/user/type'
  10. import type { UserState } from './types/type'
  11. //引入操作本地存储的工具方法
  12. import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'
  13. //引入路由(常量路由)
  14. import { constantRoute, asnycRoute, anyRoute } from '@/router/routes'
  15.  
  16. //引入深拷贝方法
  17. //@ts-expect-error
  18. import cloneDeep from 'lodash/cloneDeep'
  19. import router from '@/router'
  20. //用于过滤当前用户需要展示的异步路由
  21. function filterAsyncRoute(asnycRoute: any, routes: any) {
  22.   return asnycRoute.filter((item: any) => {
  23.     if (routes.includes(item.name)) {
  24.       if (item.children && item.children.length > 0) {
  25.         //硅谷333账号:product\trademark\attr\sku
  26.         item.children = filterAsyncRoute(item.children, routes)
  27.       }
  28.       return true
  29.     }
  30.   })
  31. }
  32.  
  33. //创建用户小仓库
  34. const useUserStore = defineStore('User', {
  35.   //小仓库存储数据地方
  36.   state: (): UserState => {
  37.     return {
  38.       token: GET_TOKEN(), //用户唯一标识token
  39.       menuRoutes: constantRoute, //仓库存储生成菜单需要数组(路由)
  40.       username: '',
  41.       avatar: '',
  42.       //存储当前用户是否包含某一个按钮
  43.       buttons: [],
  44.     }
  45.   },
  46.   //异步|逻辑的地方
  47.   actions: {
  48.     //用户登录的方法
  49.     async userLogin(data: loginFormData) {
  50.       //登录请求
  51.       const result: loginResponseData = await reqLogin(data)
  52.       //登录请求:成功200->token
  53.       //登录请求:失败201->登录失败错误的信息
  54.       if (result.code == 200) {
  55.         //pinia仓库存储一下token
  56.         //由于pinia|vuex存储数据其实利用js对象
  57.         this.token = result.data as string
  58.         //本地存储持久化存储一份
  59.         SET_TOKEN(result.data as string)
  60.         //能保证当前async函数返回一个成功的promise
  61.         return 'ok'
  62.       } else {
  63.         return Promise.reject(new Error(result.data))
  64.       }
  65.     },
  66.     //获取用户信息方法
  67.     async userInfo() {
  68.       //获取用户信息进行存储仓库当中[用户头像、名字]
  69.       const result: userInfoResponseData = await reqUserInfo()
  70.       //如果获取用户信息成功，存储一下用户信息
  71.       if (result.code == 200) {
  72.         this.username = result.data.name
  73.         this.avatar = result.data.avatar
  74.         this.buttons = result.data.buttons
  75.         //计算当前用户需要展示的异步路由
  76.         const userAsyncRoute = filterAsyncRoute(
  77.           cloneDeep(asnycRoute),
  78.           result.data.routes,
  79.         )
  80.         //菜单需要的数据整理完毕
  81.         this.menuRoutes = [...constantRoute, ...userAsyncRoute, anyRoute]
  82.         //目前路由器管理的只有常量路由:用户计算完毕异步路由、任意路由动态追加
  83.         ;[...userAsyncRoute, anyRoute].forEach((route: any) => {
  84.           router.addRoute(route)
  85.         })
  86.         return 'ok'
  87.       } else {
  88.         return Promise.reject(new Error(result.message))
  89.       }
  90.     },
  91.     //退出登录
  92.     async userLogout() {
  93.       //退出登录请求
  94.       const result: any = await reqLogout()
  95.       if (result.code == 200) {
  96.         //目前没有mock接口:退出登录接口(通知服务器本地用户唯一标识失效)
  97.         this.token = ''
  98.         this.username = ''
  99.         this.avatar = ''
  100.         REMOVE_TOKEN()
  101.         return 'ok'
  102.       } else {
  103.         return Promise.reject(new Error(result.message))
  104.       }
  105.     },
  106.   },
  107.   getters: {},
  108. })
  109. //对外暴露获取小仓库方法
  110. export default useUserStore

刷新的时候是异步路由，有可能获取到用户信息，异步路由还没有加载完毕，出现空白的效果！！

解决方法：在全局前置守卫中，获取用户信息后改成next({...to})

next() ：直接放行（这种写法会导致刷新产生空白的效果）
next({...to})：等待路由加载完毕再放行

 src/permission.ts

三、按钮权限

1.用户按钮权限信息存储

src/store/modules/user.ts 

  1. ......
  2. state: (): UserState => {
  3.     return {
  4.       ......
  5.       //存储当前用户是否包含某一个按钮
  6.       buttons: [],
  7.     }
  8. ......
  9. async userInfo() {
  10.       ......
  11.       // 如果获取信息成功，存储下用户信息
  12.       if (result.code === 200) {
  13.         ......
  14.         this.buttons = result.data.buttons
  15.         ......
  16.       }

2.定义全局自定义指令

src/directive/has.ts 

  1. import pinia from "@/store"
  2. import useUserStore from "@/store/modules/user"
  3. const userStore = useUserStore(pinia)
  4. export const isHasButton = (app: any) => {
  5.     // 获取对应的用户仓库
  6.     // 全局自定义指令：实现按钮的权限
  7.     app.directive('has', {
  8.         // 代表使用这个全局指令的DOM|组件挂载完毕的时候会执行一次
  9.         mounted(el: any, options: any) {
  10.             // 自定义指令右侧的数值：如果在用户信息buttons数组中没有
  11.             // 从DOM树上干掉
  12.             if (!userStore.buttons.includes(options.value)) {
  13.                 el.parentNode.removeChild(el)
  14.             }
  15.         },
  16.     })
  17. }

 在main.ts文件中引入自定义指令文件

  1. // 引入自定义指令文件
  2. import { isHasButton } from '@/directive/has'
  3. isHasButton(app)

3.使用自定义指令配置按钮权限

此处以trademark作为例子，项目中其他按钮的权限都需要配置

src/views/product/trademark/index.vue

<el-button type="primary" size="default" icon="Plus" @click="addTrademark" v-has="'btn.Trademark.add'">

完结！后续还会复习项目总结一波！也会在做一个项目，有需要的可以关注！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/774062
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号