vue3封装公共组件——模块标题-包括点击事件、背景图片、插槽、下方内容区

最新推荐文章于 2024-06-21 15:52:58 发布
最新推荐文章于 2024-06-21 15:52:58 发布
阅读量1.7k 收藏 6
点赞数 1
分类专栏： vue3.0知识 vue3+ts-运维 文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/121724869
版权
本文展示了如何在Vue中封装一个公共组件`titleHeader`，包含标题点击事件、背景图片、插槽和装饰线功能。组件在不同场景下被使用，如无装饰线的简略版、带有静态数据的详细版以及结合ECharts接口数据的详细版。通过插槽`mark`实现了自定义内容，并且在详细版中展示了动态加载ECharts图表，分别呈现了去年和今年的全网最大负荷对比及各省历史与昨日最大负荷数据。
摘要由CSDN通过智能技术生成

封装公共组件——模块标题-包括点击事件、背景图片、插槽、下方内容区

1、效果

在这里插入图片描述

2、封装的代码

src/components/header/titleHeader.vue

<script lang="ts" setup>
import icon from '@/assets/yfdd-bs/right/title/titleyuansu.png'
const props = defineProps({
  src: {
    type: String,
    required: true,
    default: ''
  },
  needLine: {
    type: Boolean,
    required: false,
    default: false
  },
  lineWidth: {
    type: Array as () => Array<number>,
    required: false,
    default: () => []
  }
})

// 展示弹框
const emit = defineEmits(['is-dialog'])
const isDialog = () => {
  emit('is-dialog', '')
}
</script>

<template>
  <div class="header-container">
    <div
      class="title"
    >
        <!--两斜杠图标-->
      <img
        style="margin-right: 20px"
        :src="icon"
      >
        <!-- title文字图片 -->
      <img
        @click="isDialog"
        class="header"
        :src="props.src"
      >
         <!-- 长装饰线 -->
      <div
        class="line1"
        :style="{ width: props.lineWidth[0] + 'px' }"
        v-if="props.needLine"
      />
         <!-- 短装饰线 -->
      <div
        class="line2"
        :style="{ width: props.lineWidth[1] + 'px' }"
        v-if="props.needLine"
      />
    </div>
    <div class="mark">
      <slot
        name="mark"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 93px;
  font-size: 24px;
  .title {
    height: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 93px;
    font-size: 24px;
      padding-left: 34px;
      .header{
        cursor: pointer;
      }
      .line1 {
        margin-left: 40px;
        height: 26px;
        border-bottom: 1px solid #FEFEFE;
      }
      .line2 {
        margin-left: 10px;
        height: 26px;
        border-bottom: 1px solid #C9E9FD;
      }

  }
  .mark{
    position: absolute;
    right: 45px;
    top: 20px;
  }
}
</style>
3、页面使用
3.1、简略版

效果-无装饰线

在这里插入图片描述

index.vue

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
import img from '@/assets/yfdd-bs/left/title/zysx.png'
</script>

<template>
  <div class="container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[210, 24]"
    />
      <!-- 下方内容区 -->
    <div class="content">
      666
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .container{
      background-image: url(@/assets/yfdd-bs/right/back2.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .content{
          height: calc(100% - 110px);
      }
  }
</style>
3.2、详细版-静态数据

效果-有插槽

在这里插入图片描述

index.vue

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
// 引入echarts
import * as echarts from 'echarts'
import { onMounted } from 'vue'

import img from '@/assets/yfdd-bs/main/left/qwfh.png'

onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  const myChart = echarts.init(document.getElementById('myChart123'))
  // 绘制图表
  myChart.setOption({
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20px',
      left: '70px',
      right: '50px',
      bottom: '40px'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11-15', '11-16', '11-17', '11-18', '11-19', '11-20', '11-21', '11-22', '11-23', '11-24', '11-25', '11-26', '11-27', '11-28'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          textStyle: {
            color: '#ffffff'
          }
        }
      }
    ],
    color: ['#ff552c', '#ffe879'],
    series: [
      {
        name: '去年全网最大负荷',
        type: 'line',
        stack: 'Total',
        smooth: true, // 设置折线图平滑
        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '今年全网最大负荷',
        type: 'line',
        stack: 'Total',
        smooth: true, // 设置折线图平滑
        data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
      }
    ]
  })
  window.onresize = function () { // 自适应大小
    myChart.resize()
  }
})
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[790, 24]"
      class="father"
    >
      <template #mark>
        <div class="mark">
          <span class="color a" />去年全网最大负荷
          <span class="color b" />今年全网最大负荷
        </div>
      </template>
    </titleHeader>
    <div
      id="myChart123"
      :style="{width: '100%', height: '200px'}"
    />
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: a;
  background: url(@/assets/yfdd-bs/main/left/back1.png) no-repeat;
  background-size: 100% 100%;
  .father{
    position: relative;
    .mark{
      display: flex;
      align-items: center;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      .color{
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 10px;
        border-radius: 50%;
      }
      .a{
        background-color: #FF552E;
      }
      .b{
        margin-left: 50px;
        background-color: #FFE778;
      }
    }
  }
}
</style>
3.3、详细版-接口数据

效果-含接口数据和插槽

在这里插入图片描述

index.vue

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
// 引入echarts
import * as echarts from 'echarts'
import { onMounted } from 'vue'

import img from '@/assets/yfdd-bs/main/left/gsj.png'
import { getLoadList } from '@/api/yfdd-bs/PowerLoad'

const provinceArr:Array<string> = [] // 省份
const yesterdayArr:Array<string> = [] // 昨天最大负荷
const historyArr:Array<string> = [] // 历史最大负荷
/**
 * 加载列表数据
 */
const loadList = async () => {
  try {
    const res = await getLoadList()
    res.forEach((item:Object) => {
      provinceArr.push(item.provinceName)
      yesterdayArr.push(item.yesterdayMaxLoad)
      historyArr.push(item.historyMaxLoad)
    })
    // 需要获取到element,所以是onMounted的Hook
    const myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption(option)
    window.onresize = function () { // 自适应大小
      myChart.resize()
    }
  } catch (err) {
  }
}

const option = {
  tooltip: {
    // trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '20px',
    left: '70px',
    right: '50px',
    bottom: '40px'
  },
  xAxis: [
    {
      type: 'category',
      data: provinceArr,
      axisLabel: {
        show: true,
        color: '#ffffff'
      },
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      axisLabel: {
        color: '#ffffff'
      }
    }
  ],
  series: [
    {
      name: '历史最大负荷',
      type: 'bar',
      barWidth: '20px',
      data: historyArr,
      itemStyle: {
        normal: {
          color: '#FFE778'
        }
      }
    },
    {
      name: '昨日最大负荷',
      type: 'bar',
      barWidth: '20px',
      data: yesterdayArr,
      itemStyle: {
        normal: {
          color: '#FF552E',
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示// 数值样式
            color: '#ffffff',
            fontSize: 16
          }
        }
      }
    }
  ]
}

onMounted(() => {
  // 调用数据接口
  loadList()
})
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[790, 24]"
      class="father"
    >
      <template #mark>
        <div class="mark">
          <span class="color a" />各省历史最大负荷
          <span class="color b" />各省昨日最大负荷
        </div>
      </template>
    </titleHeader>
    <div
      id="myChart"
      :style="{width: '100%', height: 'calc(100% - 110px)'}"
    />
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: c;
  background: url(@/assets/yfdd-bs/main/left/back1.png) no-repeat;
  background-size: 100% 100%;
  #myChart{
    color: white;
  }
  .father{
    position: relative;
    .mark{
      display: flex;
      align-items: center;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      .color{
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 10px;
      }
      .a{
        background-color: #FFE778;
      }
      .b{
        margin-left: 50px;
        background-color: #FF552E;
      }
    }
  }

}
</style>

接口方法

src/api/yfdd-bs/PowerLoad.ts

/**
 * 请求各省级电网负荷数据
 */
export const getLoadList = () => {
  return request({
    method: 'GET',
    url: '/yfddprovincepowerload/selectAll'
  })
}
viceen
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2或Vue3 echarts公共组件
weixin_46022934的博客
02-08 3609
前言 一、为什么要封装Echarts（背景） 如下图所示（会使用到很多的图表）： 二、封装Echarts公共组件的步骤 第一步：如何在Vue3中使用Echarts？ 点击👇🔗 第二步：如何创建Echarts组件 第一步的🔗 1.创建一个Echars组件（TypeScript）： 代码如下（可以直接CV到组件里面） 2.需要转化的数据格式如下 这里的数据主要是mock（自行定夺使用） 3.写一个对步骤二数据转化的公共方法 代码如下 代码说明，如下图所示 4.写一个公共的方法（创建图标的Options）：
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
`webpack5-vue3.0`这个压缩包文件很可能包含了使用Webpack5配置的Vue3项目模板，其中包括了项目的源码、配置文件（如webpack.config.js）、package.json（定义项目依赖）以及其他必要的开发文件。 总的来说，这个...
封装一个vue3的公共组件
Jet_Lover的博客
04-02 2207
如果你发现某个组件在多个地方重复使用，那么将其封装成公共组件是很有意义的。：定义一个公共的快递组件选择，首先在项目的src下面定义一个文件夹components，然后在里面创建文件ExpressList.vue。：当有一些组件是业务无关的，并且可以在不同的项目中重复使用时，将其封装成公共组件。：有些复杂的组件可以被拆分成若干公共组件，每个公共组件承担不同的责任，这样做不但提高了可维护性，也方便了代码的重用。到这里一个基础的下拉选择快递的公共组件模版就完成了，最后那么在项目里面怎么使用呢？
vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解）
最新发布
qq_45796592的博客
06-21 761
vue：vue2与vue3如何全局注册公共组件（包括涉及到的相关方法函数的讲解），包括require.context()、import.meta.glob()和import.meta.globEager()方法
VUE3.0表格的公共组件
放风喽的博客
04-12 1053
一、目的 一般在后台控制台之类的项目中，表格和图标是应用最多的地方，我们今天来封装一个表格的公共组件，用起来非常的简单。 二、表格公共组件代码 // src/components/mytable.vue <template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-for="col in tableConfig" :ke
vue3 注册全局组件（公用组件）
热门推荐
agua001的博客
03-10 1万+
vue3 注册全局组件
vue3+typescript开发公共组件
qq_28745941的博客
01-15 607
记录一下vue3+typescript开发公共组件的注意事项项目结构|-- examples 放置用于测试组件的代码 | |-- App.vue | |-- main.ts |-- packages 放置组件的代码 | |-- index.ts | |-- shims-vue.d.ts | |-- assets | | |-- logo.png | |-- components | |-- helloWorld | |-- HelloWorld
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
在Vue3中，为了提高代码复用性和用户体验，开发者经常需要封装一些全局的、通用的UI组件，例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript...
Vue v-model组件封装(类似弹窗组件)
10-15
Vue.js 是一个流行的前端框架，它提供了一种优雅的方式来构建用户界面。`v-model` 是 Vue 中的一个核心特性，主要用于双向数据绑定，通常用于表单元素如 ...这种组件封装使得代码更模块化，易于维护，提高了开发效率。
基于vue-upload-component封装一个图片上传组件的示例
01-19
点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到 vue-upload-component 组件，...
vue3 自动批量注册公共组件
greed
09-17 808
自动批量注册组件 思路分析 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。 然后 context 函数会返回一个导入函数 importFn 它有一个属性 keys() 获取所有的文件路径 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象 遍历的同时进行全局注册即可 具体代码 // 其实就是vue插件，扩展vue功能，全局组件、指令、函数 （vue.30取消过滤器） // 当你在mian.js导入，使
Vue组件化开发--公共组件的封装
一步一个脚印，踏实努力，向着目标前进
08-03 1211
在Vue中，组件是构建用户界面的基本单位。封装公共组件是一种良好的实践，可以提高代码的可复用性和可维护性。下面是一个示例，演示了如何封装一个公共的按钮组件。首先，创建一个名为Button.vue的Vue组件文件。这个组件将封装一个可定制的按钮，具有不同的样式和点击事件。在Button.vue在上面的代码中，我们定义了一个名为Button的Vue组件。type和size，分别表示按钮的样式和尺寸。默认情况下，按钮的样式是default，尺寸是medium。在模板中，我们使用:class绑定动态类，根据。
vue3 vant4 NavBar 导航栏封装公共组件
weixin_47432301的博客
09-10 782
vue3 vant4 NavBar 导航栏封装公共组件。只做左侧公共封装，标题，右边需求不同，根据情况填充。别忘记声明leftTetx值。
vue3公共组件,自定义自动导入插件(unplugin-vue-components)
zhw_1219的博客
05-30 280
vue3公共组件,自定义自动导入插件(unplugin-vue-components)
vue3怎么封装和调用公共方法
范天缘的博客
05-29 2886
业务中经常会碰见同一方法需要多次调用,这时候如果每次都写一遍就显得代码不够优雅了,所以封装公共方法是非常有必要的。1.在vue项目中src/untils/ 创建ts文件 例：common.ts。2.在main.ts 引用 然后设置成vue的全局变量。这里我们就封装好了示例公共方法,接着我们如何显示调用。3.common.ts写一个实例。
Vue3 组件示例工程（一） —— 标题组件
Lyrelion的博客
02-23 1590
目录 1.标题组件 title-base 编写 2.标题组件 title-base 使用 3.关于 color: car(--font-color1)，这是通过 变量 设置颜色，变量存储于 variable.scss 文件中 4.字体颜色渐变原理 5.实现需求：在 ios 上使用苹方字体，在 windows 上使用微软雅黑，同时无论哪种设备，所有引号都要使用宋体 6.修改 input type=number 的样式【指上下按钮+-】 7.Google 记住密码之后，账号密码框自动填充，输入框.
vue3封装组件
qq_42556628的博客
05-06 1246
vue3封装组件 封装好的inputNumberEx.ts文件 封装好的inputNumberEx.vue文件 未封装前的inputNumberEx.ts组件 未封装前的inputNumberEx.vue组件
Vue3 项目工程-组件封装
qq_40505914的博客
11-03 192
如果需要注册全局组件 需要在plugins里，往app.component注入。定义公共组件首先在src目录下的components组件文件夹新建想要的文件。组件封装的好处：代码可重复利用，维护方便，提升开发效率。components里可以引入其他组件。写公共组件和平常开发的页面区别不大，定义defineComponent，生命周期setup里放方法和实现类。执行的方法通过emit传回到外部。props里接收外部传参。
vue3封装vite-plugin-svg-icons插件封装SvgIcon组件
08-13
Vue3中封装vite-plugin-svg-icons插件并封装SvgIcon组件的步骤如下： 1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖包，可以使用以下命令进行安装： ``` npm i vite-plugin-svg-icons npm i fast-glob ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值