天下无坑

天下无坑


使用局部组件解决switch多个分支内容相同的问题

<style lang="less">
  @import "~@/styles/z.less";
</style>
<template>
  <inside-switch :href="href" :type="type">
   <div> {{d.n}} </div>
  </inside-switch>
</template>
<script>
export default {
  name: 'z-item',
  components: {
    'inside-switch': {
      props: {
        type: String,
        href: [String, Object]
      },
      template: `
        <router-link :to="href" class="z-item" v-if="type == 'link'">
          <slot></slot>
        </router-link>
        <a :href="href || 'javascript:;'" class="z-item" v-else-if="type == 'a'">
          <slot></slot>
        </a>
        <div class="z-item" v-else>
          <slot></slot>
        </div>
      `,
    }
  },
  props: {
    type: {
      type: String,
      validator (value) {
        return ['link', 'a', 'div'].includes(value)
      },
      default: 'div'
    },
    href: [String, Object],
    item: Object
  }
}
</script>

页面列表

ITEM_HTML