时间戳

首页 > 解决方案 > Vue 动态类绑定与计算道具

vue.js - Vue 动态类绑定与计算道具

问题描述

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

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

标签： vue.jsvue-componentcomputed-properties

解决方案

我找到了一个解决方案，我这样做的方式如下：

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

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

推荐阅读