Question

我正在尝试通过计算的开关盒到插槽将类从父组件绑定到子组件。父母：

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

Answer 1

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

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

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

具有计算道具的Vue动态类绑定

1 个答案: