当前位置： 首页 > news >正文

vue前端杂记

news 来源：原创 2025/6/10 3:26:45

1、携带id跳转前端页面

import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
// 跳转到会议详情
const goToMeetingDetail = (id) => {
    router.push(`/conference/meeting/${id}`)
}
{
    path: "meeting/:id",
    component: () => import("@/views/conference/MeetingDetail.vue"),
},
const meetingId = ref(route.params.id);

2、将MarkDown文本展示出来

npm install marked

<template>
  <!-- 使用v-html将转换后的HTML渲染到页面上 -->
  <div v-html="htmlContent"></div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { marked } from 'marked'

// 假设articleResponseData.content是Markdown格式的文本
const articleResponseData = {
  content: '# Hello World\nThis is a *Markdown* content.'
}

// 用ref存储渲染的HTML
const htmlContent = ref('')

// 使用watchEffect监听Markdown内容的变化，并将其转换为HTML
// 使用onMounted钩子函数，在组件加载时异步转换Markdown
onMounted(async () => {
  htmlContent.value = await marked(articleResponseData.content)
})
</script>

3、转换时间格式

/ 处理时间的函数
export const getFormattedLocalTime = (now) => {
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

转换方式：

<script setup>
import { computed, ref } from 'vue'
import { getFormattedLocalTime } from "@/api/common.js";

const articleResponseData = ref({
  // ...其他字段
  updateTime: "2023-07-15T08:30:00Z" // 假设这是后端返回的时间格式
});

// 方式1：使用计算属性（推荐）
const formattedUpdateTime = computed(() => {
  // 处理可能的空值
  if (!articleResponseData.value.updateTime) return '';
  
  // 将字符串转换为Date对象
  const date = new Date(articleResponseData.value.updateTime);
  return getFormattedLocalTime(date);
});

// 方式2：直接在模板调用的方法
const formatTime = (timeString) => {
  if (!timeString) return '';
  return getFormattedLocalTime(new Date(timeString));
};

// 当从接口获取数据时（示例）
const fetchData = async () => {
  const res = await getArticleData(); // 假设的API调用
  articleResponseData.value = {
    ...res.data,
    // 如果需要保持原始时间数据，可以新增一个格式化字段
    formattedTime: getFormattedLocalTime(new Date(res.data.updateTime))
  };
};
</script>

<template>
  <!-- 使用计算属性 -->
  <div>更新时间：{{ formattedUpdateTime }}</div>
  
  <!-- 直接调用方法 -->
  <div>更新时间：{{ formatTime(articleResponseData.updateTime) }}</div>
  
  <!-- 如果新增了格式化字段 -->
  <div>更新时间：{{ articleResponseData.formattedTime }}</div>
</template>

最佳实践推荐：

<script setup>
import { computed } from 'vue';
import { getFormattedLocalTime } from "@/api/common.js";

const articleResponseData = ref({
  // ...初始化数据
});

// 优化后的计算属性处理
const timeInfo = computed(() => ({
  createTime: formatTimestamp(articleResponseData.value.createTime),
  updateTime: formatTimestamp(articleResponseData.value.updateTime)
}));

const formatTimestamp = (timestamp) => {
  try {
    return timestamp ? getFormattedLocalTime(new Date(timestamp)) : '--';
  } catch (e) {
    console.error('时间格式错误:', timestamp);
    return '无效时间';
  }
};
</script>

<template>
  <div class="time-display">
    <p>创建时间：{{ timeInfo.createTime }}</p>
    <p>最后更新：{{ timeInfo.updateTime }}</p>
  </div>
</template>

<style scoped>
.time-display {
  color: #666;
  font-size: 0.9em;
  margin-top: 10px;
}
</style>

关键点说明：

  1. 时间处理安全
  • 添加了空值判断 (?. 操作符)
  • 使用 try-catch 捕获无效时间格式
  • 返回默认值 (‘–’) 保持界面友好
  1. 响应式处理
  • 使用 computed 自动追踪依赖
  • 当原始时间值变化时自动更新
  1. 国际化扩展建议
// 在common.js添加
export const formatWithLocale = (date, locale = 'zh-CN') => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).format(date);
};

// 使用示例
const formatTimestamp = (timestamp) => {
  // ...
  return formatWithLocale(new Date(timestamp));
};
  1. 时区处理建议
// 如果后端返回UTC时间
const utcDate = new Date(timestamp + 'Z'); 
// 或使用库如day.js/moment-timezone
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);

const formatTimestamp = (timestamp) => {
  return dayjs(timestamp).utc().format('YYYY-MM-DD HH:mm:ss');
};
  1. 性能优化
  • 避免在模板中直接调用方法（每次渲染都会执行）
  • 优先使用计算属性（带缓存）
  • 批量处理多个时间字段

完整方案集成：

<script setup>
import { computed } from 'vue';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);

const articleResponseData = ref({
  // ...初始化数据
});

const timeInfo = computed(() => ({
  createTime: formatTime(articleResponseData.value.createTime),
  updateTime: formatTime(articleResponseData.value.updateTime)
}));

const formatTime = (timestamp) => {
  if (!timestamp) return '--';
  
  try {
    // 带时区转换的格式化
    return dayjs(timestamp)
      .utc()
      .format('YYYY-MM-DD HH:mm:ss');
    
    // 或者使用原生Date
    // return getFormattedLocalTime(new Date(timestamp));
  } catch (e) {
    console.warn('时间格式化失败:', timestamp);
    return '无效时间';
  }
};
</script>

这种实现方式可以：

  1. 自动处理UTC时间转换
  2. 提供友好的错误提示
  3. 兼容不同的时间格式输入
  4. 保持响应式更新
  5. 方便扩展多语言支持

使一个元素在不影响其他元素的情况下，靠在最右

可以使用 Flex 布局实现右对齐效果，修改容器为 flex 容器并添加 margin-left: auto 到编辑按钮。修改后的代码如下：关键：display: flex; align-items: center+margin-left: auto

<div style="background-color: #efeeee">
  <!-- 添加 display: flex 到这一层 -->
  <div style="display: flex; align-items: center">
    <span style="background-color: rgb(251, 127, 127); color: white">{{
      articleResponseData.articleType
    }}</span>
    <span
      style="margin-left: 20px; margin-right: 20px; cursor: pointer"
      >{{ userInfo.username }}</span
    >
    <span
      v-html="'已于&nbsp;' + formattedUpdateTime + '&nbsp修改'"
    ></span>
    <!-- 这里添加 margin-left: auto -->
    <span style="cursor: pointer; margin-left: auto">编辑</span>
  </div>
  <div v-for="(tag, index) in tags" :key="index" class="hot-item">
    <el-text>文章标签：</el-text>
    <el-button style="color: blue">{{ tag.name }}</el-button>
  </div>
</div>

关键修改点：

  1. 在包含编辑按钮的父级容器添加 display: flex
  2. 在编辑按钮的样式添加 margin-left: auto
  3. 建议添加 align-items: center 保持内容垂直居中

4、将网站的顶部导航栏设置为不随页面滚动而被遮挡

一、使用固定定位（Fixed Positioning）

通过 position: fixed 将导航栏固定在视口顶部，并设置 z-index 保证其位于其他内容之上。
实现代码示例：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* 确保导航栏在最上层 */
  background: #fff; /* 可选背景色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选阴影效果 */
  width: 100%;
}

同时，为避免导航栏遮挡页面主体内容，需给页面内容容器添加顶部内边距或外边距：

body {
  padding-top: 100px; /* 根据导航栏实际高度调整 */
}

此方法适用于需要导航栏始终可见的场景，如电商网站或长页面浏览。

二、使用粘性定位（Sticky Positioning）

通过 position: sticky 实现导航栏在滚动到特定位置时固定，灵活性更高：

.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
}

此方法适合导航栏初始位置在页面中上部（而非绝对顶部）的情况，例如带横幅的页面布局。

三、调整页面内容的间距

若导航栏未固定但需要避免遮挡，可通过以下方式调整内容位置：

  1. 外间距法：为内容容器添加 margin-top：
    .content {
  margin-top: 80px; /* 与导航栏高度匹配 */
}
  2. 内边距法：为页面主体添加 padding-top（推荐）：
    body {
  padding-top: 80px;
}

这两种方法均能避免内容被遮挡，但需确保数值与导航栏实际高度一致。

四、处理锚点跳转的遮挡问题

当用户通过导航栏内的链接跳转到页面内锚点时，使用 scroll-margin-top 属性为目标元素预留空间：

.target-section {
  scroll-margin-top: 100px; /* 等于导航栏高度 */
}

此属性会在滚动到目标元素时自动留出顶部空间，避免被固定导航栏遮挡。

五、响应式设计适配

针对移动端等小屏幕设备，可通过媒体查询调整导航栏样式：

@media (max-width: 768px) {
  .navbar {
    position: static; /* 取消固定定位 */
    /* 其他样式调整（如折叠菜单） */
  }
  body {
    padding-top: 0; /* 移除顶部间距 */
  }
}

此方法确保在不同设备上导航栏与内容的协调性。

总结建议

  • 优先方案：固定定位（position: fixed）配合 padding-top 调整内容间距，适合大多数需导航栏常显的场景。
  • 进阶优化：结合 scroll-margin-top 处理锚点跳转，提升用户体验。
  • 注意事项：务必测试导航栏的 z-index 值，避免被其他元素覆盖；移动端需考虑折叠菜单等响应式设计。

相关文章：

  • 亚马逊云科技Marketplace（中国区）上架专业服务产品， “云生态连接器”价值凸显
  • flask 安装后不能识别
  • 系统架构设计师-第3章 数据库设计
  • 【mysql】有索引和没有索引字段更新时锁的不同
  • 使用Spring AI调用AI模型
  • YOLOv8改进SPFF-LSKA大核可分离核注意力机制
  • docker oracle11
  • windows2012部署redis5并安装为服务
  • svn 通过127.0.01能访问 但通过公网IP不能访问，这是什么原因？
  • Nacos简介、安装与使用(保姆级教程！！！)
  • ProfibusDP主站转ModbusTCP网关如何进行数据互换
  • 学习日记-250305
  • 大数据环境（单机版） Flume传输数据到Kafka
  • C++ JSON库的使用示例
  • MambaMorph：基于 Mamba 的医学 MR-CT 可变形配准框架
  • scBaseCamp：一个AI代理的可持续扩充的单细胞数据存储库
  • Huggingface transformers库使用教程（翻译）--------（2）使用piplines进行推理
  • IDC权威认证！永洪科技入选 IDC「GBI图谱」，点亮生成式 BI 价值灯塔
  • 【Linux】使用问题汇总
  • MySQL-多表查询
  • 企业网站建设策划书范文/有哪些可以免费推广的平台
  • 网站开发容易做吗/成功的软文营销案例
  • 京东的网站建设介绍/网络营销有哪些方式
  • 濮阳做网站推广/品牌推广策略
  • wordpress 漫画网站/济南seo官网优化
  • 视频做网站/如何建一个自己的网站