项目（5） - 必掌握知识点 - #博学谷IT学习技术支持#

五、首页—频道编辑

处理页面弹出层

Vant 中内置了 Popup 弹出层 组件。

1、在 data中添加一个数据用来控制弹层的显示和隐藏

data () {
   
  return {
   
    ...
    isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了
  }
}

2、然后在首页模板中的频道列表后面添加弹出层组件

<!-- 频道编辑 -->
<van-popup
  class="edit-channel-popup"
  v-model="isEditChannelShow"
  position="bottom"
  :style="{ height: '100%' }"
  closeable
  close-icon-position="top-left"
>内容</van-popup>
<!-- /频道编辑 -->

.edit-channel-popup {
  padding-top: 100px;
	box-sizing: border-box;
}

测试查看结果。

创建频道编辑组件

1、创建 views/home/components/channel-edit.vue

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

<script>
export default {
     
  name: 'ChannelEdit',
  components: {
     },
  props: {
     },
  data () {
     
    return {
     }
  },
  computed: {
     },
  watch: {
     },
  created () {
     },
  mounted () {
     },
  methods: {
     }
}
</script>

<style scoped lang="less"></style>

2、在首页中加载注册

import ChannelEdit from './components/channel-edit'

export default {
   
  ...
  components: {
   
    ...
    ChannelEdit
  }
}

3、在弹出层中使用频道编辑组件