弹出模块原型图

弹出模块原型图

弹出模块代码

<template> <div> <van-popup v-model="show" position="bottom" :style="{ height: '80%' }"> <!-- 我的频道 --> <van-cell title="我的频道11"> <template #default> <!-- <van-button type="danger" round plain size="mini" v-if="cross=== false" @click="cross=true">编辑</van-button> <van-button type="danger" round plain size="mini" v-else @click="cross=false">完成</van-button> --> <van-button type="danger" round plain size="mini" @click="cross = !cross" >{{ cross === false ? '编辑' : '完成' }}</van-button > </template> </van-cell> <van-grid> <van-grid-item class="itemf" v-for="(item, index) in channelList" :key="index" > <template #text> <span class="myword">{{ item.name }}</span ><van-icon v-if="cross" class="items" name="clear" /> </template> </van-grid-item> </van-grid> <!-- 频道推荐 --> <van-cell title="频道推荐"></van-cell> <van-grid> <van-grid-item @click="addChannel(item)" v-for="(item, index) in tuijianChannel" :key="index" :text="item.name" /> </van-grid> </van-popup> </div> </template> <script> import { apiGetAllChannel, processChannel } from '@/api/channel.js' import { localSet } from '../../../../utils/mylocal' export default { props: ['channelList'], data () { return { // 控制面板的显示与隐藏 show: false, // 控制叉叉的显示与隐藏 cross: false, allChannel: [] } }, methods: { async getAllChannel () { const res = await apiGetAllChannel() this.allChannel = res.data.data.channels }, async addChannel (item) { // 添加额外属性 this.$set(item, 'articleList', []) this.$set(item, 'loading', false) this.$set(item, 'finished', false) this.$set(item, 'isLoading', false) this.channelList.push(item) const token = this.$store.state.userInfo.token if (!token) { localSet(this.channelList, 'channels') } else { var newArr = this.channelList.slice(1).map((item, index) => { return { id: item.id, seq: index + 2 } }) await processChannel(newArr) } } }, created () { // 得到所有的频道数据 this.getAllChannel() }, computed: { tuijianChannel () { const ids = this.channelList.map(item => { return item.id }) const newArr = this.allChannel.filter(item => { return !ids.includes(item.id) }) return newArr } } } </script> <style lang="less" scoped> .itemf { position: relative; .items { position: absolute; top: 0; right: 0; color: #666; font-size: 12px; } .myword { color: #646566; font-size: 12px; } } </style>