循环输出dom节点

2022-07-05  本文已影响0人  有一个程序媛
      <div class="layout-header-trigger layout-header-trigger-min"
          v-for="item in iconList"
          :key="item.icon.name" >
        <n-tooltip placement="bottom">
          <template #trigger>
            <n-icon size="18">
              <component :is="item.icon" v-on="item.eventObject || {}" />
            </n-icon>
          </template>
          <span>{{ item.tips }}</span>
        </n-tooltip>
      </div>

      // 图标列表
      const iconList = [
        {
          icon: 'SearchOutlined',
          tips: '搜索',
        },
        {
          icon: 'GithubOutlined',
          tips: 'github',
          eventObject: {
            click: () => window.open('https://github.com/jekip/naive-ui-admin'),
          },
        },
        {
          icon: 'LockOutlined',
          tips: '锁屏',
          eventObject: {
            click: () => useLockscreen.setLock(true),
          },
        },
      ]
上一篇 下一篇

猜你喜欢

热点阅读