Vue3+Vant开发：频道编辑

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：前端

内容/作用：知识点/设计/实验/作业/练习

学习：Vue3+Vant开发：频道编辑

当单击频道栏目导航条右侧的按钮的时候，会呈现出一个编辑频道的页面，在这个页面中可以添加频道内容，以及移除对应的频道

1、弹出层组件应用

当单击频道栏目导航条右侧的按钮的时候，会呈现一个页面，在该页面中展示了对应的频道信息。但是这里需要注意的是该页面，是一个弹出层，而不是通过路由跳转到的新页面。

这里我们会使用Vant中的Popup弹出层组件来实现。

这里我们使用的是带有“关闭图标”的弹出层

返回到views/home/index.vue文件，在其频道列表对应的Tabs组件下面添加频道编辑的弹出层组件

<!-- 频道编辑弹出层 -->
    <van-popup
      v-model:show="isChannelEditShow"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    />
    <!-- 频道编辑弹出层 -->

这里需要定义isChannelEditShow状态属性控制弹出层的显示与隐藏。

 const state = reactive({
   
      channels: [],
      isChannelEditShow: false, // 控制编辑频道弹出层的显示与隐藏
    });

当单击面包按钮的时候，将其弹出。

   <van-icon
          name="wap-nav"
          class="hamburger-btn"
          @click="isChannelEditShow = true"
        ></van-icon>

将isChannelEditShow这个状态属性修改为true。

<!-- 频道编辑弹出层 -->
    <van-popup
      v-model:show="isChannelEditShow"
      closeable
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    />
    <!-- 频道编辑弹出层 -->

在上面的代码中，我们将整个弹出层的高度调整为了100%,同时控制了关闭按钮的显示位置，将其显示在顶部左侧区域。

下面返回到浏览器中进行测试。

2、创建频道编辑组件

关于弹出层中展示的频道内容，这里我们将其放到一个单独的组件中，这样管理起来更加的方便。

在views/home/components目录下面创建channel-edit.vue这个组件，该组件中的初步代码如下所示：

<template>
  <div class="channel-edit">频道编辑</div>
</template>

<script>
export default {};
</script>

<style></style>

现在返回到views/home/index.vue中使用一下channel-edit这个组件。

import ArticleList from "./components/article-list.vue";
import ChannelEdit from "./components/channel-edit.vue";

导入ChannelEdit组件，下面需要完成对应的注册：

export default {
   
  components: {
   
    ArticleList,
    ChannelEdit,
  },

在弹出层组件中使用ChannelEdit组件。

 <!-- 频道编辑弹出层 -->
    <van-popup
      v-model:show="isChannelEditShow"
      closeable
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <channel-edit></channel-edit>
    </van-popup>

返回到浏览器中进行测试。

3、页面布局实现

首先让文字与关闭按钮直接有一定的填充距

<style>
.channel-edit {
   
  padding: 85px 0;
}
</style>

关于“我的频道”这项内容通过Cell单元格组件来完成布局。

<template>
  <div class="channel-edit">
    <van-cell>
        <!--使用了cell中的title插槽-->
      <template #title> 我的频道 </template>
      <van-button type="danger" round size="mini" plain>编辑</van-button>
    </van-cell>
  <!--使用Grid宫格组件展示内容，并且使用的是带有格子间距的Grid组件--->
    <van-grid :gutter="10">
      <van-grid-item v-for="value in 8" :key="value" text="文字" />
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell>
      <template #title> 频道推荐 </template>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item v-for="value in 8" :key="value" text="文字" />
    </van-grid>
  </div>
</template>

4、样式调整

设置标题的样式：

 <template #title>
        <span class="title-text">我的频道</span>
      </template>
      
       <template #title>
        <span class="title-text">频道推荐</span>
      </template>

css样式

.channel-edit {
   
  padding: 85px 0;
}
.channel-edit .title-text {
   
  font-size: 20px;
  color: #333;
}

编辑按钮的样式：

 <van-button type="danger" round size="mini" plain class="edit-btn"
        >编辑</van-button

.channel-edit .edit-btn {
   
  width: 85px;
  height: 38px;
  font-size: 16px;
}

下面给Grid宫格组件添加基本的样式：

 <van-grid-item
        class="grid-item"
        v-for="value in 8"
        :key="value"
        text="文字"
      />

  <van-grid-item
        v-for="value in 8"
        :key="value"
        text="文字"
        class="grid-item"
      />

样式

.channel-edit .grid-item {
   
  width: 86px;
  height: 66px;
  background-color: #f4f5f6;
}

下面设置宫格内的文字样式：通过审查元素，发现对应的选择器为van-grid-item__text

.channel-edit .van-grid-item__text {
   
  font-size: 16px;
  color: #222;
}

下面，我们要实现的效果就是给频道推荐栏目中的每个频道名称前面添加一个加号，后期单击该加号，可以把频道添加到我的频道中。

 <van-grid :gutter="10" class="recommend-grid">
      <van-grid-item
        v-for="value in 8"
        :key="value"
        text="文字"
        class="grid-item"
        icon="plus"
      />
    </van-grid>

给"推荐频道"对应的Grid-Item中添加了icon=plus图标，同时给Grid组件添加了一个类选择器recommend-grid.

下面设置样式：

.channel-edit .recommend-grid .van-grid-item__content {
   
  /* 水平排列 */
  flex-direction: row;
}

这里审查元素，发现图标对应的父元素是.van-grid-item__content,这里让其元素进行水平排列就可以了。

下面控制一下图标的大小，这里还是审查元素，找到图标的选择器(选择器为：van-icon)，为其设置大小。同时控制一下文字与图标之间的间距

.channel-edit .recommend-grid .van-icon {
   
  /* 图标的大小 */
  font-size: 16px;
   margin-right: 5px;
}

通过查看效果，发现文字与图标没有对齐。

这里选中“文字”发现有一个上边距，这里将上边距去掉就可以了。

.channel-edit .van-grid-item__text {
   
  font-size: 16px;
  color: #222;
    /*取消上边距*/
  margin-top: 0; 
}

同时，这里还要考虑一下“文字”比较多以后，会出现换行的情况：

<van-grid-item
        v-for="value in 8"
        :key="value"
        text="文字你好"
        class="grid-item"
        icon="plus"
      />

在上面的"推荐频道中的Grid"中的text属性中又添加了两个字以后，发现换行了。

这里我们不希望换行。

.channel-edit .recommend-grid .van-grid-item__content {
   
  /* 水平排列 */
  flex-direction: row;
  /* 进制换行 */
  white-space: nowrap;
}

当然，如果文字比现在还多的话，效果就不好看了，当然，这种情况我们也不用担心，因为在后台系统中，当添加频道的名称的时候一定会限制文字的个数的。

下面要考虑的是，当单击“编辑”按钮的时候，“我的频道”中的文字的右上角会出现一个关闭的按钮。

<van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="grid-item"
        v-for="value in 8"
        :key="value"
        text="文字"
        icon="clear"
      />
    </van-grid>

这里给grid组件添加一个类选择器my-grid,同时给grid-item添加一个icon图标。

下面添加对应的样式，这里使用了绝对定位。

.channel-edit .my-grid .grid-item .van-icon-clear {
   
  position: absolute;
  right: -5px;
  top: -5px;
  font-size: 17px;
  z-index: 2;
  color: #cacaca;
}

通过审查元素，发现图标的类选择器为.van-icon-clear.

这里控制了定位的right与left的位置，同时控制了图标的大小以及颜色。

最后，通过浏览发现，Grid组件的边框线在图标的前面，所以通过z-index控制了显示的层级。让其图标在Grid的上层显示

5、展示“我的频道”数据

我的频道中的数据，其实就是我们前面在首页中的频道列表中的数据

这里我们为了获取"我的频道"中的数据可以重新发送异步请求来获取，也可以把首页中的频道列表中的数据直接传递过来。

这里我们返回到views/home/index.vue文件中，

 <!-- 频道编辑弹出层 -->
    <van-popup
      v-model:show="isChannelEditShow"
      closeable
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <channel-edit :my-channels="channels"></channel-edit>
    </van-popup>
    <!-- 频道编辑弹出层 -->

给channel-edit组件中传递了channels这个数组中的内容。

下面返回到home/components/channel-edit.vue这个组件中，接受传递过来的数据。

<script>
export default {
   
  props: {
   
    myChannels: {
   
      type: Array,
      required: true,
    },
  },
  setup(props) {
   
    // console.log(props.myChannels);
  },
};
</script>

把接受到的数据在模板中进行展示。

 <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="grid-item"
        v-for="channel in myChannels"
        :key="channel.id"
        :text="channel.name"
        icon="clear"
      />
    </van-grid>

这时候，返回到浏览器中查看对应的效果。

6、处理激活频道高亮

当我们单击了首页中的频道列表中的某一项的时候，切换到频道的编辑组件的时候，在我的频道中的对应的频道会被选中。

下面说一下基本的实现思路：

第一：将首页中的激活的标签索引传递给频道编辑组件

第二：在频道编辑组件中遍历“我的频道列表”的时候判断遍历项的索引是否等于激活的频道标签的索引，如果相等则添加一个高亮的css类名。

在views/home/index.vue文件中，将所选中的频道的编号传递到channel-edit组件中。

 <!-- 频道编辑弹出层 -->
    <van-popup
      v-model:show="isChannelEditShow"
      closeable
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <channel-edit :my-channels="channels" :active="active"></channel-edit>
    </van-popup>
    <!-- 频道编辑弹出层 -->

在上面的代码中，传递了active

下面返回到home/components目录下的channel-edit.vue`中进行接收。

export default {
   
  props: {
   
    myChannels: {
   
      type: Array,
      required: true,
    },
    active: {
   
      type: Number,
      required: true,
    },
  },

下面要做的就是修改我的频道的模板内容。

 <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="grid-item"
        v-for="channel in myChannels"
        :key="channel.id"
        icon="clear"
        ><span class=