• Electron(三)复制转换的Base64图片


    CODE

    <template>
      <div id="wrapper">
        <main>
          <div>文件路径:{{filePath}}</div>
          <el-input
            type="textarea"
            :rows="18"
            style="margin-top: 10px"
            resize="none"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
          <div class="btn" @click="copyToClipBoard">复制转换后的文本</div>
        </main>
      </div>
    </template>
    
    <script>
      export default {
        name: 'landing-page',
        data() {
          return {
            filePath: null,
            textarea: null
          }
        },
        methods: {
          fileLoad() {
            document.addEventListener('drop', (e) => {
              e.preventDefault();
              e.stopPropagation();
              for (const f of e.dataTransfer.files) {
                this.filePath = f.path
              }
              console.log(e.dataTransfer.files)
              let file = e.dataTransfer.files[0];
              let that = this;
              let reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = function (event) {
                that.textarea = event.target.result
              }
            });
            document.addEventListener('dragover', (e) => {
              e.preventDefault();
              e.stopPropagation();
            });
          },
          copyToClipBoard() {
            let txt = document.querySelector('.el-textarea__inner');
            txt.select(); // 选择对象
            document.execCommand('Copy'); // 执行浏览器复制命令
            this.$message({
              showClose: true,
              message: '已经成功复制到剪切板',
              type: 'success'
            });
          }
        },
        mounted() {
          this.fileLoad()
        }
      }
    </script>
    
    <style>
      @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
      /*滚动条样式*/
      ::-webkit-scrollbar {
         8px;
        height: 8px;
        background-color: transparent;
      }
    
      ::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: rgba(0, 0, 0, .2);
      }
    
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
    
      body {
        /*font-family: 'Source Sans Pro', sans-serif;*/
        font-family: "Microsoft YaHei", sans-serif;
      }
    
      #wrapper {
        background: radial-gradient(
          ellipse at top left,
          rgba(255, 255, 255, 1) 40%,
          rgba(229, 229, 229, .9) 100%
        );
        height: 100vh;
        padding: 30px 30px;
         100vw;
        font-size: 14px;
      }
    
      .btn {
        margin-top: 10px;
         100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #666;
        border: 1px solid #666;
        cursor: pointer;
      }
    </style>
  • 相关阅读:
    Phonon
    qt 的mysql的库
    vwmare下安装fedora
    C++标准库
    C#命名空间
    用谷歌Chrome浏览器来当手机模拟器
    Javascript实现ECMAScript 5中的map、reduce和filter函数
    页面变灰实现方案
    jQuery检查元素是否在视口内(屏幕可见区域内)
    兼容浏览器的获取指定元素(elem)的样式属性(name)的方法
  • 原文地址:https://www.cnblogs.com/ronle/p/11865169.html
Copyright © 2020-2023  润新知