教你使用vue-cli快速构建的小说阅读器

mouted: this.getlist(this.booklistId.id);methods: getlist(id) { //每个分类id下对应的数据 子组件接收父组件传过来的id 获取对应的数据  bootd(id).then(res => {  var arrdata = res.data.data;  arrdata.map(item => {   this.booklist.push(item.book);  });  }); }

computed: {  ...mapState(['calbook','shuajiabook']) //书籍信息 书架数据[]  },  methods:{  addbook(){   this.flag=!this.flag   var book= this.calbook; // calbook 是store里存储的书籍信息【 SHEFLBOOK 】   var carbook = JSON.parse(window.localStorage.getItem('book') || '{}')   if(!this.flag){ //加入书架    carbook[book._id] = {     cover: book.cover,     flag:!this.flag,     title: book.title,     lastChapter:book.lastChapter,     id: book._id,     author:book.author,     chapterIndexCache: 0,     bookSource: 0,     pageIndexCache: 0,    }    this.setbook(false)    window.localStorage.setItem('book', JSON.stringify(carbook))   }else{    delete carbook[book._id]    this.setbook(true) //设置的布尔值    window.localStorage.setItem('book', JSON.stringify(carbook))   }  } }

<router-link :to="{name:'read',params:{id:this.books._id,showMulu:true}}" class="mulu" tag="p">

<mulu :id="id" @readShow='readshows' v-show="showMulu" @closeLayer='backGo()'></mulu> // 控制目录显示状态 created() {  this.getBook = JSON.parse(window.localStorage.getItem("SHEFLBOOK")); // book/book.vue 存储的书籍信息  this.getbookhy(this.getBook._id); // 获取小说id所对应的源   if(this.$route.params.showMulu){ //从book.vue传过来的参数   this.showMulu = true  } },// 子组件mulu.vue发送过来的事件，点击时跳转到对应的章节内容 readshows(index){  this.showMulu = false  this.iss = index  this.getBookindex()  this.getcontent(this.booklinkss[this.iss]); //根据booklinkss显示目录章节  this.$refs.dvtop.scrollTop = 0; },

<li v-for="item in list" :key="item.id" @click='getMulu((item.order)-1)'>{{item.title}} <em style="color:red">{{item.isVip?'vip':null}}</em></li>  getMulu(i){   this.$emit('readShow',i) //将点击的章节传给父组件 read.vue  }

created() { this.loadMore(); }, methods: { loadMore() {  bookpl(this.$route.params.id, this.limit).then(res => { // 获取的item组件的路由参数 书籍id  if (res.status === 200) {   this.pinglun = res.data.reviews;   this.limit += 5;  }  });  this.loading = false; } }

//获取小说资源 每本小说有多个资源 根据小说id获取小说的来源  getbookhy(id){  bookhy(id).then(res=>{   this.bookhylist = res.data;   this.getmulu(this.bookhylist[0]._id);  // 根据源 获取目录数据 默认第一个源  })  }, getmulu(id){  this.booklinkss = []; //第N章内容  this.booktitle = []; //第N章标题 push后数据叠加 现将数组数据清空  var bookindexs = JSON.parse( window.localStorage.getItem("bookindex") || "{}" ); //章节位置  bookmulu(id).then(res=>{  if(res.status==200){    res.data.chapters.forEach( item => {   // 内容是根据link来获取的 将link发给服务器，由于// / & # 服务器是无法识别的 所以需要对link转码 最后服务器返回内容     this.booklinkss.push(encodeURIComponent(item.link))    this.booktitle.push(item.title)   });  }  this.iss = bookindexs && bookindexs[this.getBook._id] ? bookindexs[this.getBook._id].bookindex : this.iss;  this.getcontent(this.booklinkss[this.iss]); // 根据目录 获取内容   }) },  // 获取内容  getcontent(link){   var content = []   bookcontent(link).then(res => {    if(res.status == 200){    var datas = res.data.chapter;    content.push({     cpContent:datas.isVip?["vip章节，请购买VIP"]:(datas.cpContent ? datas.cpContent.split("/n") : datas.body.split("/n")),     title:datas.title    })    this.con = content[0]    }   })  },

//获取搜索的书籍 getList() {  booksearch(this.keyword).then(res => {  if (res.data.ok) {   this.searchList = res.data.books.slice(0, 15); //默认展示前15条数据  }  }); },  // 上拉加载 loadBottom() {  this.allLoaded = true; //上滑时出现加载文字  booksearch(this.keyword).then(res=>{   if(this.searchList.length==res.data.books.length){   this.allLoaded = false   }else{   this.searchList = res.data.books.splice(0,this.count*15+15) //每次拉动时在现有基础上加15条 cout++   this.count++   this.allLoaded = false    }  }) },