组件中通过:before(伪类)给文字前面加样式-vue
要求实现效果:如果不是组件内使用把props中传的参数改为data中挂载即可实现方案1.<div class="status"><div class="outer-circle" :style="{'margin-left':left}"><span :class="colorClass"></span>...
·
要求实现效果:
如果不是组件内使用把props中传的参数改为data中挂载即可
实现方案1.
<div class="status">
<div class="outer-circle" :style="{'margin-left':left}">
<span :class="colorClass"></span>
<span>{{ text }}</span>
</div>
</div>
export default{
data () {
return {
colorClass: ''
}}
props: {
text: {
type: String,
required: false,
default: ''
}
}
}
<style>
.circle{
width: 8px;
height: 8px;
margin-right: 0.3em;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
&.yellow{
background: $yellow;
}
&.green{
background: $green;
}
&.blue{
background-color: $blue;
}
&.red{
background-color: $red;
}
&.gray{
background-color: $gray;
}
}
</style>
在状态前面加入一个div去盛放这个有颜色的⚪
性能不好,会形成很多没必要的div块而且形成的dom树比较复杂以后修改的话不好修改
下面有一种更好的方法
实现方案2.
<span :class="colorClass">{{ text }}</span>
export default {
data () {
return {
text : ''
}}
props: {
text: {
type: String,
required: false,
default: ''
},
colorClass: {
type: String,
required: false,
default: '',
// 校验规则
validator: function (value) {
const colorList = ['red', 'green', 'yellow', 'blue', 'gray', '']
return colorList.indexOf(value) > -1
}
}
}
}
<style>
.red, .green, .yellow, .blue, .gray{
padding-left:20px;
position: relative;
&:before{
content: '';
left:0.5em;
top: 0.5em;
position:absolute;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.red:before{
background-color:$red;
}
.green:before{
background-color:$green;
}
.yellow:before{
background-color:$yellow;
}
.blue:before{
background-color:$blue;
}
.gray:before{
background-color:$gray;
}
</style>
先用padding-left给⚪腾一个位置,然后通过伪类的width,height创建出一个⚪,把它直接定位到文字前面的空间里,
然后再通过colorClass动态控制它的颜色
更多推荐
已为社区贡献1条内容
所有评论(0)