electron开发pdf合并工具（一）

本文目录：

前言布局页面组件代码实际效果参考一番今日

前言

前面我们已经对electron即相关的electron-vue、element-ui等做了一定的了解。

今天一番开始着手去做一个实际的小程序了，还是以战代练。

目前准备先做两个小工具，一个是pdf合并的工具，一个是将网址转化为pdf的工具。

先从pdf合并工具工具开始。

布局页面

组件

组件里我们用vue去做布局，涉及到的组件包括图片、标题、按钮、可输入文本框。

这里我们用了element-ui的按钮和自适应文本框，看起来还是比之前的tkinter的界面要好看多了，而且主界面大小可以自适应。

更多的组件可以在参考里的element-ui官网中查看。

代码

代码语言：javascript复制

<template>
  <div id="wrapper" align="center">
    <img id="logo" src="~@/assets/logo_efonmark.png" alt="electron-vue" align="center">
    <div align="center">
      <span class="title">
        Welcome to EfonMark!
      </span>
    </div>

    <div align="center">
    <el-input id="input01"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 10}"
      placeholder="请选择文件"
      v-model="textarea">
    </el-input>
    </div>
    <el-button type="primary" round>选择文件</el-button>
    <el-button type="primary" round>合并</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

实际效果

参考

• element-ui : (https://element.eleme.cn/#/zh-CN)

electron vue.js

0 人点赞