[vue] plugin collection

1. Copy and paste vue-clipboard2

1. Install vue-clipboard2

npm install ue-clipboard2

2. Main.js introduces the plug-in

// 复制
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3. Page usage

<el-button
         size="mini"
         type="text"
         ref="copyButton"
         v-clipboard:copy="scope.row.copy"//要复制的数据
         v-clipboard:success="onCopy"//复制成功的回调
         v-clipboard:error="onError"//复制失败的回调
        >复制 
</el-button>



onCopy() {
      this.$notify({
        type: "success",
        position: "bottom-left",
        message: "复制成功",
        duration: 2000,
        offset: 100,
      });
    },
    onError() {
      this.$notify({
        type: "success",
        position: "bottom-left",
        message: "复制shibai",
        duration: 2000,
        offset: 100,
      });
    },

Two, print vue-print-nb

1. Installation

npm install vue-print-nb

2. Main.js introduces the plug-in

import Print from "vue-print-nb"; //引入
Vue.use(Print); //注册

3. Page usage

<template>
<div id="printMe"> //第一步，给盒子添加id
        <div
          style="page-break-after: always; margin: 0"//遇到特定的组件时，打印机会重新开始一个新的打印页
          v-for="(item, index) in samplelist"
          :key="index"
        >
          <div class="b" style="margin-bottom: 20px">
            <div style="border: 1px solid #000; border-bottom: none">
              <img src="../../assets/dlylogo.png" width="120px" />
              <div class="b-1" style="padding: 10px 10px; text-align: center">
                <div>样品编号/Sample No.</div>
                <div>{
   
   { item.sampleno }}</div>
              </div>
            </div>
            <el-descriptions class="descriptions" :column="1" border>
              <el-descriptions-item label="项目编号/Item No.">{
   
   {
                item.no
              }}</el-descriptions-item>
              <el-descriptions-item label="样品名称/Name">{
   
   {
                item.samplename
              }}</el-descriptions-item>
              <el-descriptions-item label="型号规格/Model">{
   
   {
                item.type
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
<el-button type="primary" v-print="'#printMe'">打印</el-button> //第二步，给按钮添加v-print
</template>
 
<style lang="scss">
//页面样式
#Put {
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    font-size: 12px;
    border: 1px solid #747474 !important;
    padding: 12px 10px !important;
  }
  .b-2 {
    display: flex;
    justify-content: space-around;
    padding: 12px 5px;
    border: 1px solid #747474;
    border-top: none;
  }
}
// 打印页的样式（一定要写在这里面）
@media print {
  #printMe {
    width: 90%;
    height: 100%;
    margin: auto;
  }
  .b {
    margin: auto;
    margin-bottom: 0px !important ;
    font-size: 10px !important;
    img {
      width: 70px !important;
    }
    .b-1 {
      padding: 0px 2px 2px !important;
      font-size: 10px !important;
    }
    .b-2 {
      font-size: 10px !important;
      padding: 2px 5px;
      border: 1px solid #000;
      border-top: none;
      color: #000;
    }
  }
  .el-descriptions-item__label {
    width: auto !important;
  }
  .el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 0px !important;
  }
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    color: #000;
    font-size: 10px !important;
    border: 1px solid #000 !important;
    padding: 3px 2px !important;
  }
  .el-checkbox {
    font-size: 6px !important;
    // margin-right: 6px !important;
  }
  .el-checkbox__label {
    display: inline-block;
    padding-left: 3px !important;
    line-height: 19px;
    font-size: 10px !important;
    color: #000;
  }
  .el-checkbox__inner {
    border: 1px solid #000 !important;
  }
}
</style>
>

The final rendered style

Because my id is placed outside the loop, it will display all at once. If the style is not right, you can adjust his settings, and then I adjusted his margin and zoom here.

 Because I use a thermal printer that only has black ink, so colors other than black cannot be printed.

Before using the thermal printer, adjust the basic settings of the printer

 

 Page Setup: Create the size of the paper to be printed (I have already made it 40mm x60mm), choose portrait

Roll: way to choose heat transfer

 If there is a picture, select None for color mixing in the graphics, it will be clearer