标签： Vue

开发一个仿朋友圈主题练手博客-Moment

很久没有发过博客了，最近在开发一个仿朋友圈主题的简陋版博客，但也没有完全完成开发，可能算是开发到了一半中的一半吧，期间捡起、放下、再捡起，需要重新看文档进行回忆，所以导致耽误了很长一段时间，即使这样，开发也不是一帆风顺，甚至说是磕磕绊绊，一个小问题可能导致耽误一天的时间。

这个项目我一般还是喜欢称它为：朋友圈，因为对于它的定位我其实也是捉摸不定的，目前权当是练手了。你可以在这里查看目前的内容：点击跳转到 Moment

目前完成了如下内容：

前端
– 昵称、头像、背景图、个性签名
– 动态显示头像、昵称（点击跳转网址链接）、内容、内容标签
– 发布天数
– 点赞
管理后台
– 仪表盘
– 显示发布动态数量
– 发布动态
– 设置
– 修改网址名称
– 修改网址头像
– 修改网址背景

这些看着很多，但其实功能都很简单，但作为刚开始学习的我来说，确实很麻烦，以至于有些地方写的很冗余、杂乱，欠缺考虑。但是也不能一直止步不前，只能在往后的时间里不断优化和完善内容了。

如果，你觉得这个项目对你来说有用处或者也想练练手，你可以选择帮忙一同开发维护，如果不介意，也可以帮忙点个 ⭐ Star。

前端：Moment

服务端：Moment Server

Element Plus Table（表格）点击获取对应 id

网上搜到的内容或许适用于 vue 2 或 Element UI，不适用 vue 3 和 Element Plus。

template：

<el-table-column label="配置" width="120" align="center">
  <template v-slot="scope">
    <el-button link type="primary" size="small">编辑</el-button>
    <el-button link type="primary" @click="deleteNavigation(scope.row.id)" size="small">删除
    </el-button>
  </template>
</el-table-column>

script：

function deleteNavigation(id) {
  console.log(id);
}

使用 vue 的 v-slot 指令，这个指令中是 vue 2.6 新增的，取代了以前的 slot 和 slot-scope，而我使用的是 vue 3，所以网上搜到的很多使用 slot-scope 的方法都失效了。

使用 插槽名.row 可以获取一行的内容，如果要获取行内的某一个字段的值，只需要再点出它的字段名，在我的代码里，就是 scope.row.id。

如果要获取行的索引，使用 插槽名.$index，注意$符号是必不可少的，否则将不起作用。

Vue 3 兄弟组件间传值

Vue 3 中兄弟间传值可以使用 Vuex，但小项目使用过于庞大，我们可以使用 mitt 进行兄弟组件间传值。

操作步骤

第一步：安装 mitt

npm i mitt

第二步：创建文件（例如：eventBus.js）

import mitt from 'mitt'

const emitter = mitt()
export default emitter

第三步：将该文件引入至需要进行发送及接受的 .vue 文件中

import emitter from "../untils/bus";

第四步：发送端写入下列代码

emitter.emit("response", response)

前面是事件，后面是要传入的参数

第五步：接收端写入下列代码

emitter.on("response", (response) => {
    console.log(response)
})

这样两个组件间就可以进行传值通信了。

Vue 3 锚点实现方式

当我们使用 Vue 3 有时候需要做业内锚点跳转，使用传统的 a href 已经不是很推荐了，我们可以尝试采用以下方法来进行替代

标题锚点

<div class="cardTagContainer">
    <div class="cardTag" v-for="(cardGroup,index) in card.cardInfo" :key="cardGroup" @click="goAnchor('#tag' + index)">
        {{ cardGroup.title }}
    </div>
</div>

跳转内容

<h1 :id="'tag' + index">
    {{ cardGroup.title }}
</h1>

相关方法

// 标题锚点
function goAnchor(selector) {
    // console.log(selector)
    document.querySelector(selector).scrollIntoView({
        behavior: "smooth",
        block: "start"
    });
}

.scrollIntoView 属性方法

该 scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的可见区域。

PS：根据其他元素的布局，元素可能无法完全滚动到顶部或底部。

TIPS：页面（容器）可滚动时才有用！


element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; // 布尔参数
element.scrollIntoView（scrollIntoViewOptions）; // 对象参数