vue之实现 公共组件抽离到mixin用法

最新推荐文章于 2023-08-25 14:07:04 发布
最新推荐文章于 2023-08-25 14:07:04 发布
阅读量357 收藏 1
点赞数
分类专栏： vue后台管理系统 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/121188022
版权

目录

vue之实现 公共组件抽离到mixin用法

在这里插入图片描述

mixins / commomCardMixins.js

import CommomCard from "../views/childCom/TopView/CommomCard.vue";
export default {
  components: {
    CommomCard
  },
}

CommomCard.vue

<!-- 公共的card组件 -->
<template>
  <div class="commom_card">
    <div class="title">{{ title }}</div>
    <div class="value">{{ value }}</div>
    <div class="chart">
      <slot name="chart"></slot>
    </div>
    <div class="line"></div>
    <div class="totla">
      <slot name="totla"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommomCard",
  props: {
    title: String,
    value: String,
  },
  data() {
    return {};
  },
  methods: {},
  components: {},
};
</script>
<style  lang="scss" scoped>
.commom_card {
  width: 100%;
  height: 100%;
  .title {
    font-size: 12px;
    color: #999;
  }
  .value {
    margin-top: 5px;
    font-size: 25px;
    color: #000;
    letter-spacing: 1px;
  }
  .chart {
    height: 50px;
    /* background: pink; */
  }
  .line {
    margin: 10px 0;
    height: 1px;
    background: #eee;
  }
  .totla {
    color: #666;
    font-size: 12px;
  }
}
</style>
<style lang="scss">
.emphasis {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}
</style>

使用组件

TopView / index.vue

<!-- TopView -->
<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <TotalSales />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <TotalOrders />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <TodayUsers />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" shadow="hover">
          <TotalUsers />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TotalSales from "./TotalSales.vue";
import TotalOrders from "./TotalOrders.vue";
import TodayUsers from "./TodayUsers.vue";
import TotalUsers from "./TotalUsers.vue";
export default {
  name: "index",
  components: {
    TotalSales,
    TotalOrders,
    TodayUsers,
    TotalUsers,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

TotalSales.vue

<!-- 累积销售额 totalSales -->
<template>
  <div class="commom_card">
    <CommomCard title="累积销售额" :value="salesVal">
      <template v-slot:chart>
        <div class="charts_wrap">
          <div class="charts">
            <span>日同比 </span>
            <span class="emphasis">7.33%</span>
            <!-- <div class="increase"></div> -->
          </div>
          <div class="charts">
            <span>月同比 </span>
            <span class="emphasis">8.55</span>
            <!-- <div class="decrease"></div> -->
          </div>
        </div>
      </template>
      <template v-slot:totla>
        <span>昨日销售额</span>
        <span class="emphasis">2000</span>
      </template>
    </CommomCard>
  </div>
</template>

<script>
import commomCardMixin from "../../../mixins/commomCardMixins.js";
export default {
  name: "TotalSales",
  components: {},
  mixins: [commomCardMixin],
  data() {
    return {
      salesVal: "1000",
    };
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
.commom_card {
  .charts_wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .charts {
      margin-top: 2px;
      width: 100%;
      color: #333;
      font-size: 12px;
    }
  }
}
</style>

TotalOrder.vue

<!-- 累积订单量 -->
<template>
  <div>
    <CommomCard title="累积订单量" :value="oederVal">
      <template v-slot:chart>
        <div
          id="totta_order_chart"
          :style="{
            height: '100%',
            width: '100%',
          }"
        ></div>
      </template>
      <template v-slot:totla>
        <span>昨日订单量</span>
        <span class="emphasis">2000</span>
      </template>
    </CommomCard>
  </div>
</template>

<script>
import commomCardMixin from "../../../mixins/commomCardMixins.js";
export default {
  name: "TotalOrder",
  components: {},
  mixins: [commomCardMixin],
  mounted() {
    const chartDom = document.getElementById("totta_order_chart");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      xAxis: {
        type: "category",
        show: false,
        boundaryGap: false, // x轴极限拉伸
      },
      yAxis: {
        type: "value",
        show: false,
      },
      // 调整图的 位置
      grid: {
        left: "0",
        top: "0",
        right: "0",
        bottom: "0",
      },
      series: [
        {
          data: [12, 40, 25, 38, 22, 44],
          type: "line",
          areaStyle: {
            color: "purple",
          },
          smooth: true,
          itemStyle: {
            opacity: 0,
          },
          // y折轴线 的颜色
          lineStyle: {
            width: 0,
          },
        },
      ],
    });
  },
  data() {
    return {
      oederVal: "2000",
    };
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

TodayUser.vue

<!-- 今日销售额 -->
<template>
  <div>
    <CommomCard title="今日交易用户数" :value="tadayVal">
      <template v-slot:chart>
        <div
          id="today_users_chart"
          :style="{
            height: '100%',
            width: '100%',
          }"
        ></div>
      </template>
      <template v-slot:totla>
        <span>退货率</span>
        <span class="emphasis">5.12%</span>
      </template>
    </CommomCard>
  </div>
</template>

<script>
import commomCardMixin from "../../../mixins/commomCardMixins.js";
export default {
  name: "TodayUser",
  components: {},
  mixins: [commomCardMixin],
  data() {
    return {
      tadayVal: "2000",
    };
  },
  mounted() {
    const chartDom = document.getElementById("today_users_chart");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效，sahdow为阴影，鼠标放下去的时候显示后面的阴影
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        show: false,
        data: ["00:00", "01:00", "02:00", "03:00", "04:00","05:00"],
      },
      yAxis: {
        type: "value",
        show: false,
      },
      // 调整图的 位置
      grid: {
        left: "0",
        top: "0",
        right: "0",
        bottom: "0",
      },
      series: [
        {
          data: [12, 40, 25, 38, 22, 44],
          type: "bar",
          barWidth: "35%", //这是柱子的宽度
          itemStyle: {
            barBorderRadius: 2,
          },
        },
      ],
    });
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

TotalUsers.vue

<!-- 累积用户 -->
<template>
  <div>
    <CommomCard title="累积用户数目" :value="totalUserVal">
      <template v-slot:chart>
        <div
          id="total_users_chart"
          :style="{
            height: '100%',
            width: '100%',
          }"
        ></div>
      </template>
      <template v-slot:totla>
        <span>日同比</span>
        <span class="emphasis">8.12%</span>
        <span>月同比</span>
        <span class="emphasis">12.12%</span>
      </template>
    </CommomCard>
  </div>
</template>

<script>
import commomCardMixin from "../../../mixins/commomCardMixins.js";
export default {
  name: "TotalUsers",
  components: {},
  mixins: [commomCardMixin],
  data() {
    return {
      totalUserVal: "9000",
    };
  },
  mounted() {
    const chartDom = document.getElementById("total_users_chart");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效，sahdow为阴影，鼠标放下去的时候显示后面的阴影
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "value",
        show: false,
        data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00"],
      },
      yAxis: {
        type: "category",
        show: false,
      },
      // 调整图的 位置
      grid: {
        left: "0",
        top: "0",
        right: "0",
        bottom: "0",
      },
      series: [
        {
          data: [200],
          type: "bar",
          itemStyle: {
            color: "#45c9d6",
            barBorderRadius: 2,
          },
          stack: "总量", // 合并两条柱子
          barWidth: "20%", //这是柱子的宽度
        },
        {
          data: [300],
          type: "bar",
          itemStyle: {
            color: "#eee",
            barBorderRadius: 2,
          },
          stack: "总量",
          barWidth: "20%", //这是柱子的宽度
        },
        {
          data: [200],
          type: "custom",
          stack: "总量",
          renderItem: (params, api) => {
            const value = api.value(0);
            const endPoint = api.coord([value, 0]);
            // console.log("endPoint", endPoint);
            return {
              type: "group",
              position: endPoint,
              children: [
                {
                  type: "path",
                  shape: {
                    // 形状
                    d: "M933.875 301.059l-421.898 421.803-421.852-421.803h843.75z",
                    x: -10,
                    y: -22,
                    width: 20,
                    height: 20,
                    layout: "center",
                    style: {
                      // 样式
                      fill: "red",
                    },
                  },
                },
                {
                  type: "path",
                  shape: {
                    // 形状
                    d: "M798.42534744 570.33913716l-572.85069488 0 286.42534744-343.71041693z",
                    x: -10,
                    y: 2,
                    width: 20,
                    height: 20,
                    layout: "center",
                    style: {
                      // 样式
                      fill: "red",
                    },
                  },
                },
              ],
            };
          },
        },
      ],
    });
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>
<svg t="1636248019035" class="icon" viewBox="0 0 1024 1024" version="1.1" 
xmlns="http://www.w3.org/2000/svg" p-id="4942" width="200" height="200">
<path d="M798.42534744 570.33913716l-572.85069488 0 286.42534744-343.71041693z" 
p-id="4943"></path></svg>
<svg t="1636248074895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" width="200" height="200">
<path d="M933.875 301.059l-421.898 421.803-421.852-421.803h843.75z" p-id="5071"></path>
</svg>
小小liang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】将组件抽离到store中，全系统公用的方法
qq_39920109的博客
04-15 902
在项目中，会遇到很多全系统共用的组件块，例如共用弹框一类的。现在贴出核心代码： 第一步：首先要定义好一个store文件，如：renKouInfo.js import { peopleDetail } from '@/api/basicInfo' export default { namespaced: true, state: { visible: false, type: 1, info: { basic:{} } }, mutations: {
Web前端vue必做笔记之一：mixin抽离组件公共逻辑
qq_42302014的博客
11-07 573
Web前端vue必做笔记之一：mixin抽离组件公共逻辑 //这是App.vue中的代码 <template> <div id="app"> <comp-a></comp-a> <hr> <comp-b></comp-b> </div> </template> <script> import CompA from './co
vue+elementUI抽离公共布局组件
黄小堆
05-05 2524
前言 因为在做项目的时候，我们绝大部分的界面布局都是一样的。所以做一个简单的公共布局组件出来，后期维护或者改样式的时候，就会方便很多。这也是公共组件抽离的思维。 用的是elementUI的插槽slot 代码 // 公共的布局组件 <template> <el-container style="border:1px solid #ccc;margin: 0 1px...
Vue之mixin（全局）
china_bomber_20的博客
01-11 7252
先贴上官方定义。 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例（方法，过滤器and so on） 使用场景：货币单位，时间格式。这些如果在用到的页面使用的话代码会重复的很多，所以在全局混入这些实例会减少代码量，可维护性也比较高。 ex： step1: 先定义mixin.js const mixin = { methods: { /** * 格式化
组件化----组件抽离
qq_52522995的博客
11-19 993
功能分析： 在网页上显示两个个姓名及年龄的输入框及一个提交按钮，并让输入框的内容同步到网页上显示； 抽离前： class App extends Component { state={name:'Guo努力',age:22} //同步数据 handleChange1=(e)=>{ this.setState({ name:e.target.value }) } handleChange2=(e)=>{ this.setState({
vue实现公共方法抽离
10-15
总结来说，Vue实现公共方法抽离是一种常见的代码优化手段，它有助于保持代码的模块化和可维护性。通过将重复使用的逻辑代码封装为公共方法，我们可以在多个组件间共享这些方法，减少代码冗余，并使得功能的修改和...
Vue使用mixin分发组件的可复用功能
10-16
但需要注意的是，使用mixin也可能导致代码难以追踪，因为mixin中的逻辑可能会影响到使用它的组件，特别是在mixin和组件中定义了相同命名的属性和方法时。 Vue官方推荐，如果mixin中包含同名的钩子函数，最好将这些...
Vue一次性简洁明了引入所有公共组件的方法
10-17
通过以上步骤，我们就可以实现一次性将modal文件夹下所有公共组件引入到Vue项目中，不再需要逐个手动导入。这种方法在大型项目中尤其有用，能极大提高开发效率和组件复用率。 需要注意的是，虽然使用require....
Vue 之孙组件向爷组件通信的实现
10-17
在Vue框架中，组件间的通信是其核心特性之一，它使得复杂的UI结构得以优雅地组织。本篇文章将详细探讨如何实现在Vue中实现孙组件向爷组件（爷爷组件）通信的过程，通过具体的代码示例来阐述这一过程。 首先，我们要...
vue中 组件抽离方法合并实验 mixin.js
m0_53006021的博客
06-24 324
vue中 组件抽离方法合并实验 mixin.js
mixins抽离公共的逻辑
dell_wu_gao_jian的博客
07-22 229
创建一个mixin.js文件 export default { data () { return { msg: '这是一首简单的小情歌' } } } 然后在需要引入mixin.js文件的组件中 import mixinmy from './mixin.js' export default { name: 'act', mixins: [mixinmy] } 就可以使用mixin.js中定义的数据 ...
Vue Mixin 用法(实质是抽离出一个公共的vue实例)
muzidigbig的博客
03-29 1696
一、 介绍 vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。 index.vue与mixin.js中的数据，计算属性，方法等将进行合并； 如果两者有相同的数据，index.vue文件将覆盖前者； 生命周期钩子入mounted之类的内容两者将都会执行，同名的生命周期钩子，mixin.js中的内容将先执行； index.vue和mixin.js中的数据可以任意方式组合使用，但是为了提高封装性，请尽量避免在mixin.js中使用index.vue的数据或方法，可以在mixin
vue项目中某一页面不想引用公共组件app.vue解决办法
热门推荐
彳亍的博客
04-15 1万+
Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%...
页面拆分公共模板与组件化
Kofe_Chen的博客
10-21 558
App.vue 首先我们要明白的是，页面是在 App.vue 开始启动的 <template> <div id="app"> <router-view/> </div> </template> 上面的代码是 App.vue 的初始状态，需要注意的是 <template> 下还必须有一个父元素 <di...
Vue中混入（mixin）的使用
最新发布
qq_44962364的博客
08-25 1787
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
Vue 打包优化之 externals 抽离公共的第三方库
天问博客-专注于大前端技术
11-29 3376
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
vue开发抽取组件方式思路
Harrietjia的博客
09-07 1298
vue开发经常用到的组件要抽取出统一的组件方便后续使用
vue2.x中使用TS来构建mixin步骤
baidu_38603918的博客
01-26 1736
在vue2.x的版本中，我们经常会使用mixin来进行重复代码的抽离，JS的用法能在网络上找到很多资源，这里就不在赘述了。在此主要想介绍一下怎么通过TS来进行mixin组件的抽离。 首先构建mixin文件，此处和JS构建的方式不一样，JS一般的构建方式是通过创建mixin.js文件然后在文件内部通过export来进行导出，然后得到抽离出来的公共部分。而TS需要创建的是一个xxx.vue的文件，而后在vue文件中构建<script lang="ts">的标标签来抽取公共部分的。代码如下：
vue公共方法抽离
weixin_41770018的博客
07-11 8936
demo：制作一个点击按钮增加或者减少数字现在vue组件内部测试一下功能&lt;template&gt; &lt;div class="all"&gt; &lt;p&gt;还未抽离&lt;/p&gt; &lt;button @click="SubNum()"&gt;-&lt;/button&gt; &lt;input type="num
vue怎么使用公共组件
06-10
要使用公共组件，你需要先在 Vue 项目中注册该组件。在Vue中注册组件有两种方式：全局注册和局部注册。 全局注册： 在Vue项目的入口文件（比如main.js）中，使用Vue.component()方法来全局注册组件。例如，我们要注册一个名为"my-component"的组件： ``` // main.js import Vue from 'vue'; import MyComponent from './components/MyComponent.vue'; Vue.component('my-component', MyComponent); ``` 接着，在任何Vue组件中，都可以使用<my-component>标签来使用该组件。 局部注册： 局部注册允许你在某个组件中注册并使用另一个组件。这种注册方式仅在当前组件及其子组件中可用，因此可以避免全局命名冲突。在Vue组件中，可以通过components选项来进行局部注册。例如，我们要在一个名为"my-view"的组件中注册名为"my-component"的组件： ``` // MyView.vue <template> <div> <my-component /> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { name: 'MyView', components: { 'my-component': MyComponent } } </script> ``` 上述代码中，我们在MyView.vue组件中使用了<my-component>标签，并在该组件的components选项中注册了名为"my-component"的组件。 无论是全局注册还是局部注册，都需要先在Vue项目中创建组件，然后才能进行注册和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值