Vue 动态 class 与计算道具绑定

Question

我正在尝试通过计算的开关盒将 class 从 parent 组件绑定到 child 组件到插槽。 Parent:

<template>
  <mcTooltip :elementType="'text'"><p>Test</p></mcTooltip>
</template>

<script>
import mcTooltip from '@/components/mcTooltip/index.vue';

export default {
  components: {
    mcTooltip
  }
};
</script>

Child:

<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 对我的计算道具说“（评估期间出错）”。

Answer 1

我找到了解决方法，方法如下：

  <div
    v-show="showTooltip"
    ref="mcTooltipChild"
    :class="['tooltip__' + elementType]"
  ></div>

    elementType: {
      type: String,
      default: 'small',
    },

Vue 动态 class 与计算道具绑定

Vue dynamic class binding with computed props

vue.js

computed-properties

vue-component