使用计算属性进行Vue动态类绑定
使用计算属性进行Vue动态类绑定
提问于 2020-07-28 17:11:10
我正在尝试通过计算的开关案例将一个类从父组件绑定到子组件，并将其绑定到插槽。父级：
<template>
<mcTooltip :elementType="'text'"><p>Test</p></mcTooltip>
</template>
<script>
import mcTooltip from '@/components/mcTooltip/index.vue';
export default {
components: {
mcTooltip
}
};
</script>孩子：
<template>
<div>
<slot :class="[elementClass]" />
</div>
</template>
<script>
export default {
props: {
elementType: {
type: String,
required: true,
// must have one of these elements
validator: (value) => {
return ['text', 'icon', 'button'].includes(value);
}
}
},
data() {
return {};
},
computed: {
elementClass: () => {
// return this.elementType ? 'tooltip--text' : 'tooltip--text';
// calls prop value for verification
switch (this.elementType) {
case 'text':
return 'tooltip--text';
case 'icon':
return 'tooltip--icon';
case 'button':
return 'tooltip--button';
default:
return 'tooltip--text';
}
}
},
};
</script>
<style lang="scss" scoped>
.tooltip--text {
text-decoration: underline dotted;
cursor: pointer;
&:hover {
background: $gray_220;
}
}
</style>不管我怎么尝试，我似乎都不能让它工作。这是我最新的尝试。vue devtools会对我的计算属性说“(评估过程中出错)”。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-07 23:58:24
我找到了一个解决方案，我这样做的方式如下：
<div
v-show="showTooltip"
ref="mcTooltipChild"
:class="['tooltip__' + elementType]"
></div>
elementType: {
type: String,
default: 'small',
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63130721
复制相关文章
相似问题
腾讯云开发者
