大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
意义
vue被广大前端推崇很重要一点就是组件封装,但是在组件封装的时候,组件可能在各处都要用到,但是在各处的样式可能不太一样,例如:按钮组件,这时怎么办,难道不同样式但是结构相同的组件进行多次封装么?很明显是很不合算的。
用代码说话
父组件:
<template>
<el-container class="layout_container">
<el-header height="auto"><header-top></header-top></el-header>
<el-container>
<el-aside width="auto"><aside-left></aside-left></el-aside>
<el-main>
<zonghe-nengli></zonghe-nengli>
/重点看此处:
<my-button
:title="biaoti"
:color="activeColor"
:size="fontSize"
></my-button>
///
<skill-hot></skill-hot>
<learning-path></learning-path>
<bar-chart></bar-chart>
<radar></radar>
<tupu-fenxi></tupu-fenxi>
</el-main>
</el-container>
</el-container>
</template>
<script>
import HeaderTop from "../../components/layout/header";
import MyButton from "../../components/common/button";
import AsideLeft from "../../components/layout/aside";
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar";
import TupuFenxi from "../../components/common/tupufenxi";
import SkillHot from "../../components/putong/skillhot";
import LearningPath from "../../components/putong/learningpath";
import BarChart from "../../components/common/barchart";
export default {
components: {
HeaderTop,
AsideLeft,
ZongheNengli,
Radar,
TupuFenxi,
SkillHot,
LearningPath,
BarChart,
MyButton,
},
data() {
return {
///
biaoti: 20,
activeColor: "black",
fontSize: 30,
///
};
},
created() {
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
.layout_container {
height: 100%;
}
.el-aside {
margin-top: 21px;
background: #ffffff;
box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.35);
}
.el-main {
margin-top: 40px;
margin-left: 37px;
background-color: burlywood;
}
</style>
子组件(重点看看):
<template>
<div class="button_container" :style="{color:activeColor,fontSize:fontSize + 'px'}">
{
{
title }}
</div>
</template>
<script>
export default {
/接受传过来的参数
props: ["title","color","size"],
data() {
return {
activeColor: this.color,
fontSize: this.size,
};
},
created() {
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
</style>
效果图:
想要封装可以动态改变样式的组件,必须得熟练掌握vue组件的class和style绑定,这样才能游刃有余
2、除了这中传值来改变组件样式,当然还是通过行内样式,或者给组件添加一个class类来改变组件样式
当在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
//1、行内样式
<tupu-fenxi style="margin: 10px 0 0 3px"></tupu-fenxi>
//1、添加类名
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
//然后在使用它的时候添加一些 class:
<my-component class="baz boo"></my-component>
//HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
//3、对于带数据绑定 class 也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
//当 isActive 为 truthy 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193248.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...