0

框架：Vue3 + Element plus。

我需要将注销图标设置在 NavBar 的最右侧。

我尝试在“el-menu-item”或“el-icon”中设置“float:right”，但它们也不起作用。

<el-menu-item style="float: right;">
            <el-icon v-on:click="logout" style="font-size: 30px;color: #222;padding-top: 8px;">
                <i-switch-button />
            </el-icon>
</el-menu-item>

<el-menu-item>
    <el-icon v-on:click="logout" style="float: right;font-size: 30px;color: #222;padding-top: 8px;">
      <i-switch-button />
    </el-icon>
</el-menu-item>

整个代码

<div>
    <el-menu
            :default-active="'/index'"
            router
            mode="horizontal"
            background-color="white"
            text-color="#222"
            active-text-color="red"
            style="min-width: 1300px"
    >
        <el-menu-item  v-for="(item,index) in navList" :key="index" :index="item.name">
            {{item.navItem}}
        </el-menu-item>

        <el-menu-item style="float: right;">
            <el-icon v-on:click="logout" style="font-size: 30px;color: #222;padding-top: 8px;">
                <i-switch-button />
            </el-icon>
        </el-menu-item>

    </el-menu>
</div>

这是目前的情况

我真的需要帮助，谢谢！！！

4

1 回答 1

0

简单使用style='margin-left: auto;'代替style="float: right;"

var Main = {
    data() {
      return {
            navList: [{ name: 'item1', navItem: 'Link 1'}]
      }
    },
    methods: {
        logout()  {
        }          
    }
  };
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
    <el-menu
            :default-active="'/index'"
            router
            mode="horizontal"
            background-color="white"
            text-color="#222"
            active-text-color="red">
        <el-menu-item v-for="(item,index) in navList" :key="index" :index="item.name">
            {{item.navItem}}
        </el-menu-item>
        <el-menu-item v-on:click="logout" style='margin-left: auto;'>
          Logout
        </el-menu-item>
    </el-menu>
</div>
</body>
</html>

于 2021-11-10T10:05:47.413 回答