vue的<slot>列表要怎么动态添加一些class或属性？

  • Z时代
  • 2024-03-11
  • 分类：IT

main.vue

 <menu>
     <template slot="item">
         菜单一
     </template>
     <template slot="item">
         菜单二
     </template>
</menu>

menu.vue

 <div class="menu-list">
     <slot name="item" />
</div>

我需要在 menu.vue 中动态给所有item添加class和计算每个item的位置，不知道要怎么弄，求大佬解答

补充：
我需要计算动态各个菜单项的位置top、left等值，如果放在main.vue加class样式和计算的话，以后就复用不了，我需要把所有逻辑计算都封装在menu.vue中。有人建议用list传入菜单项，再遍历进行计算，但这有个缺点就是菜单项里面要加些图标、html标签等就变得很麻烦，大家还有好的解决方案吗？

回答：

<div class="abc">菜单一</div> 不就得了，slot 又不是只支持文字，标签也是支持的

回答：

main.vue

<menu>
 <template slot="item">
     <div
      v-for="(item, index) in menuList"
      :key="index"
      :class="item.className"
      :style="item.style">
        <i :class="item.icon" v-if="item.icon"><i>
      {{ item.name}}
        <div v-if="item.html" v-html="item.html"></>
    </div>
 </template>
</menu>
<script setup>
import { reactive } from 'vue'
let menuList = reactive([
    {
        name: '菜单一',
        className: 'menuItem1',
        icon: 'icon-item-1',
        html: '<div>html</div>'
        style: {
            position: relative,
            left: '',
            top: ''
        }
    }
    ...
])
</script>

回答：

vue2的话可以拿到插槽里面的vnode，在vnode挂载后可以拿到对应的dom，想怎么搞怎么搞

以上是 vue的&lt;slot&gt;列表要怎么动态添加一些class或属性？ 的全部内容， 来源链接： utcz.com/p/932950.html

回到顶部