vue-cli@3 + electron开发一款本地小说阅读器（

上一篇：vue-cli@3 + electron开发一款本地小说阅读器（一）

上一章做的样式有点丑，所以就改了下。

本次实现效果：

效果

提示：代码有点多，不一一贴了，只说关键点。样式根据自己的喜好，自己改。

如果想要本章的代码，明天我发到公众号上，一个组件一篇。

公众号在文章下面

---

小说列表

小说列表用的是element-ui的Table组件，当然样式稍微做了修改。
有几个地方可以说一下

1、数据渲染：

:data="tableData"然后data中将数据展示出来，比如：

data() {
            return {
                tableData: [{
                    id:0,
                    name: '这是小说名称',
                    date: '2018-05-05',
                    tab: '默认标签',
                    size: '1024KB',
                    src: 'C://test/test'
                }, {
                    id:1,
                    name: '这是小说名称',
                    date: '2018-05-05',
                    tab: '默认标签',
                    size: '1024KB',
                    src: 'C://test/test'
                }]
            }
        }

2、单击选中状态

只需在组件中配置highlight-current-row属性即可实现单选

 <el-table
                    :data="tableData"
                    highlight-current-row //就是这个
                    @row-dblclick="dblclickRow"
                    height="100%"
                    style="width: 100%">

3、双击打开小说

双击小说的时候，我们需要拿到小说的ID，小说的名称等信息，我们做的是本地的小说阅读，路径和小说名是我们需要的
@row-dblclick="dblclickRow"绑定一个方法

dblclickRow(row) {
                console.log(row.name)
                console.log(row.src)
            }

这样就能拿到小说名字和路径了

父子间传参

思路：

也就是BookList往Header中传参数，但是不建议这样操作，因为我们再传参数的过程中还需要实现小说阅读页面ReadMain组件的展示。
综合下来，我们先让BookList把参数传给App中，然后让App.vue做中间人进行页面的切换或者参数的再传递

BookList传App（子传父）

主要使用$emit
首先，BookList中我们在双击小说（表格的行双击事件）中把小说名称发送出去

 dblclickRow(row) {
                // console.log(row.name)
                // console.log(row.src)

                //向App.vue传参数
                this.$emit('toRead',row.name)
            }

然后到App.vue中接受参数

接受子组件的参数，我们是不是需要知道，哪个子组件传递过来的？所以我们要告诉App.vue你盯着这个组件，这个组件（BookList）要传参数：

<BookLists v-if="list" @toRead="toRead"></BookLists>

这里注意一点，@toRead跟BookList的this.$emit('toReed',row.name)是一样的。后面的引号里的toRead是跟App.vue中的方法名进行绑定。

//App.vue中
methods:{
    //接受BookList.vue传的小说名称
    toRead(data){
      console.log(data);//data就是需要传递的参数，也就是BookList的row.name
    }
  }

App传Header（父传子）

App拿到接受到的参数，可以切换至读书页面的同时把小说名交给Header，我们先处理传参数过去
父传子，主要用到props接受参数。

首先，我们先在App.vue中定义一个data: bookName

//App.vue
data(){
    return{
      list:true,
      bookName:''
    }
  },

然后，App的子组件Header绑定该data：

<Header :bookName="bookName"></Header>

到Header组件中开始接受参数：

export default {
        name: "Header",
        //接受父组件参数
        props:['bookName'],

        data(){
            return{
                list:false
            }
        }
    }

然后渲染到dom层

 <div v-else class="bookName">{{bookName}}</div>

最后，App.vue设置动态改变bookName的值

//App.vue
 methods:{
    //接受BookList.vue传的小说名称
    toRead(data){
      console.log(data);
      //往Header中传参
      this.bookName = data;
    }
  }

其他操作

我们先把整个动态切换实现了

App.vue动态改变小说列表页和阅读页

思路：在接受到BookList传小说名的方法里设置小说列表不显示，阅读页显示；同样的道理，接收到小说阅读页的返回事件传过来的参数（子传父）就设置为阅读页消失，小说列表页显示。

//App.vue
methods:{
    //接受BookList.vue传的小说名称
    toRead(data){
      console.log(data);
      //往Header中传参
      this.bookName = data;
      //切换为阅读页
      this.list =false;
    },
    //返回小说列表页
    backBookList(){
     //切换为小说列表页
      this.list = true
    }
  }

Header切换小说书名和上传小说按钮

思路：当小说名不为空时，就显示小说名；当小说名为空就显示上传按钮。这里需要注意从阅读页返回小说列表页时，需要清空下小说名。

//App.vue
methods:{
    //接受BookList.vue传的小说名称
    toRead(data){
      console.log(data);
      //往Header中传参
      this.bookName = data;
      //切换为read页
      this.list =false;
    },
    //返回小说列表页
    backBookList(){
      this.list = true;
      //清空小说名称
      this.bookName = ''
    }
  }

Header中判断小说名是不是为空：

<div v-if="bookName === ''" class="importBook">
        <div class="headerBtn">
            <i class="el-icon-plus"></i>
        </div>

    </div>
    <div v-else class="bookName">{{bookName}}</div>

---

本章代码，明天我发到公众号上。欢迎关注ITmonkey。

ITmonkey