Vue3 第三十四篇：常用组件：Head导航

JSX:

import style from "./headerMenu.module.css";
import { ref, reactive } from "vue";
const { user } = reactive({
  user: {
	username:'张三丰',
	avatar:'https://oss.dev33.cn/sa-plus/in-file/avatar1.jpg'
  },
});
let now_time = ref("加载中..."); // 当前时间
// 定时器：每秒更新一下时间
setInterval(function () {
  var da = new Date();
  var Y = da.getFullYear(); //年
  var M = da.getMonth() + 1; //月
  var D = da.getDate(); //日
  var h = da.getHours(); //小时
  var sx = "凌晨";
  if (h >= 6) {
    sx = "上午";
  }
  if (h >= 12) {
    sx = "下午";
    if (h >= 18) {
      sx = "晚上";
    }
    h -= 12;
  }
  var m = da.getMinutes(); //分
  var s = da.getSeconds(); //秒
  var z = ["日", "一", "二", "三", "四", "五", "六"][da.getDay()]; //周几
  var zong = "";
  zong +=
    Y + "-" + M + "-" + D + " " + sx + " " + h + ":" + m + ":" + s + " 周" + z;
  now_time.value = zong;
}, 1000);

const HeaderMenu = () => {
  return (
    <>
      <div className={style.navRight1}>
        <div className={style.toolsLeft}>
          <span title="折叠菜单" className={style.toolFox} onClick="">
            <el-icon>
              <Fold />
            </el-icon>
          </span>
          <span title="展开菜单" className={style.toolFox} onClick="">
            <el-icon>
              <Fold />
            </el-icon>
          </span>
          <span title="刷新" className={style.toolFox} onClick="">
            <el-icon style={{ fontWeight: "bold" }}>
              <RefreshRight />
            </el-icon>
          </span>
          <span title="当前时间" className={style.toolFox}>
            <span style="font-size: 0.90em;">{now_time.value}</span>
          </span>
        </div>
        <div className={style.toolsRight}>
          <span
            title="点击登录"
            className={style.toolFox}
            onClick="openLogin()"
          >
            <span style="font-size: 0.8em; font-weight: bold; position: relative; top: -2px;">
              未登录
            </span>
          </span>
          <span
            title="我的信息"
            className={[style.toolFox, style.userInfo]}
            style="padding: 0;"
          >
            <el-dropdown
              onCommand="handleCommand"
              trigger="click"
              size="medium"
            >
              <span
                class="el-dropdown-link user-name"
                style="height: 100%; padding: 0 1em; display: inline-block;"
              >
                <img src={user.avatar} className={style.userAvatar} />
                {user.username}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="drop in dropList"
                  command="drop.name"
                  key="drop.name"
                >
                  {drop.name}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <span title="切换效果" className={style.toolFox} style="padding: 0;">
            <el-dropdown onCommand="toggleSwitch" trigger="click" size="medium">
              <span
                class="el-dropdown-link"
                style="height: 100%; padding: 0 1em; display: inline-block;"
              >
                <i
                  class="el-icon-sort"
                  style="font-weight: bold; transform: rotate(90deg)"
                ></i>
                <span style="font-size: 0.9em;">切换</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  command="s.value"
                  v-for="s in switchList"
                  key="s.name"
                >
                  <span style=" switchV == s.value ? 'color: #44f' : '' ">
                    {s.name}{" "}
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <span title="主题" className={style.toolFox} style="padding: 0;">
            <el-dropdown onCommand="toggleTheme" trigger="click" size="medium">
              <span
                class="el-dropdown-link"
                style="height: 100%; padding: 0 1em; display: inline-block;"
              >
                <i class="el-icon-price-tag" style="font-weight: bold;"></i>
                <span style="font-size: 0.9em;">主题</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  command="t.value"
                  v-for="t in themeList"
                  key="t.name"
                >
                  <span style=" themeV == t.value ? 'color: #44f' : '' ">
                    {t.name}{" "}
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
          <span title="便签" className={style.toolFox} onClick="openNote()">
            <i
              class="el-icon-edit"
              style="font-weight: bold; font-size: 0.9em;"
            ></i>
            <span style="font-size: 0.9em;">便签</span>
          </span>
          <span
            title="全屏"
            className={style.toolFox}
            style="margin-right: 0px;"
            onClick="is_full_screen = true"
          >
            <i
              class="el-icon-rank"
              style="font-weight: bold; position: relative; top: 1px; transform: rotate(45deg)"
            ></i>
          </span>
          <span
            title="退出全屏"
            className={style.toolFox}
            style="margin-right: 0px;"
            onClick="is_full_screen = false"
          >
            <i
              class="el-icon-bottom-left"
              style="font-weight: bold; position: relative; top: 1px; "
            ></i>
          </span>
        </div>
      </div>
    </>
  );
};

export default HeaderMenu;

CSS:

/* 第一行建筑物 */
.navRight1{position: relative; height: 49px; line-height: 49px; border-bottom: 1px #DDD solid; }
.navRight1 *{transition: all 0.2s;}

.navRight1 .toolsLeft{border: 0px #000 solid; float: left;}
.navRight1 .tools-right{float: right;}
.navRight1 .toolFox{padding: 0 1em; margin-right: 4px; display: inline-block; cursor: pointer;}
.navRight1 .toolFox i{margin-right: 3px;}

.navRight1 .userInfo{position: relative; top: -2px;}
.navRight1 .userAvatar{width: 30px; height: 30px; border-radius: 50%; vertical-align: middle;}
.navRight1 .userInfo .user-name{font-size: 0.9em;} 
/*800px之下*/
@media(max-width: 800px) {
	.navRight1 .toolsRight{display: none;}
}
.hide-tabbar .navRight1{border-bottom: 1px #eeeeee solid;}

.navRight1 .toolsRight{float: right;}