vue之实现 公共组件抽离到mixin用法
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e53f7ee4bfe8eb5d499930eecd822851.png#pic_center)
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;
}
.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,
},
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,
},
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: {
type: "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: {
type: "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]);
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>