天下无坑

天下无坑


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

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

页面列表

ITEM_HTML