vue的瀑布流组件、分享插件、cookie插件，ElementUI，嵌套布局

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/108598901

vue插件

vue的瀑布流组件
vue的分享插件
nuxt工程中使用ElementUI
vue的cookie插件
嵌套布局

vue的瀑布流组件

一、安装vue的瀑布流组件vue‐infinite‐scroll

cnpm install vue‐infinite‐scroll ‐‐save

二、在plugins目录下创建一个js文件，名字任意
在这里插入图片描述
三、编写vue-infinite-scroll.js文件

import Vue from "vue";
import infiniteScroll from "vue-infinite-scroll"
Vue.use(infiniteScroll)

四、在nuxt配置文件中添加插件配置

plugins:[
  {src:"~/plugins/vue-infinite-scroll.js",ssr:false}
],

五、在<div>中添加属性，属性中添加方法

<div class="activity-list" v-infinite-scroll="loadMore">

methods:{
        loadMore(){
            gatheringApi.searchPage({},++this.page,this.size).then(res=>{
                let list = res.data.data.rows
                this.items = this.items.concat(list)
            })
        }
    }

注意：需要使用concat方法来进行数组的扩充！！
在这里插入图片描述

vue的分享插件

一、在html页面或vue页面中引入js和css

 head: {
        script: [
            { src: 'https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js' }
        ],
        link: [
            { rel: 'stylesheet', href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css' }
        ]
    }

注意：html页面可以直接在<head>中引入

二、添加div

<div class="social-share" data-sites="weibo,wechat" 
:data-title="item.name" data-url="http://www.baidu.com"></div>

url                 : '', // 网址，默认使用 window.location.href
source              : '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
title               : '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
description         : '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
image               : '', // 图片, 默认取网页中第一个img标签
sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
disabled            : ['google', 'facebook', 'twitter'], // 禁用的站点
wechatQrcodeTitle   : '微信扫一扫：分享', // 微信二维码提示文字
wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'

以上选项均可通过标签  data‐xxx  来设置

在这里插入图片描述

nuxt工程中使用ElementUI

一、安装element-ui

cnpm install element-ui --save

二、在plugins目录下，创建element-ui.js，并配置
在这里插入图片描述

import Vue from "vue";
import ElementUI from "element-ui"
Vue.use(ElementUI)

三、在nuxt.config.js文件中配置plugins和css

plugins:[
    
  {src:"~/plugins/element-ui.js",ssr:false}
],
css: [
  'element-ui/lib/theme-chalk/index.css'
],

四、使用

vue的cookie插件

js-cookie

一、安装js-cookie

cnpm install js-cookie

二、编写auth.js工具类，方便保存、读取、删除用户cookie数据

//操作用户cookie的工具类

//使用js-cookie的js类库
import Cookie from "js-cookie"

export default{
    //保存用户数据
    setUser(user){
        Cookie.set("Cookie-Name",user.name)
        Cookie.set("Cookie-Token",user.token)
        Cookie.set("Cookie-Avatar",user.avatar)
    },
    //读取用户数据
    getUser(){
        let name = Cookie.get("Cookie-Name")
        let token = Cookie.get("Cookie-Token")
        let avatar = Cookie.get("Cookie-Avatar")
        //返回用户对象
        return {
            name,
            token,
            avatar
        }
    },
    //清空用户数据
    clear(){
        Cookie.remove("Cookie-Name")
        Cookie.remove("Cookie-Token")
        Cookie.remove("Cookie-Avatar")
    }
}

三、在登录成功时，保存cookie

login(){
           userApi.login(this.mobile,this.password).then(res=>{
        if(res.data.flag){
            //1.保存用户信息到cookie中
            auth.setUser(res.data.data)
            //2.跳转页面到首页
            location.href="/"
        }
    })
}

在这里插入图片描述
四、完成登录后，在右上角显示用户名、头像、退出
首先，在布局页引入auth.js工具类，然后在页面初始化完成后获取cookie中的用户数据

//页面初始化之后执行的逻辑
  mounted(){
    this.user = auth.getUser();
  },

然后，使用v-if和v-else属性进行判断即可

<div v-if="user == undefined || user == null || user.name == null || user.name == undefined" class="sui-nav pull-right info"> 
 <li><a href="/login" target="_blank">注册</a></li> 
 <li><a href="/login" target="_blank" class="sui-btn btn-login">登录</a></li>  
</div> 
<div v-else class="sui-nav pull-right info"> 
 <li><a href="/login" >{{user.name}}</a></li> 
 <li><a href="/login" >
  <img width="30px" height="30px" :src="`${user.avatar}`"/>
 </a></li>  
 <li><a @click="logout">退出</a></li>
</div>

最后，退出登录

 methods:{
    logout(){
      auth.clear();
      location.href="/"
    }
  }

嵌套布局

在这里插入图片描述
一、首先在pages目录下，创建文件manager.vue

配置好头和尾的布局，需要被改变的区域，使用标签

<nuxt-child></nuxt-child>

二、创建文件夹manager，在manager中定义子路由即可
在这里插入图片描述