From feddb657f78b1f359ccdad48a4bfa9b3acf720f3 Mon Sep 17 00:00:00 2001
From: joeyyyyyyyy <745559787@qq.com>
Date: Sat, 2 Jul 2022 19:04:19 +0800
Subject: [PATCH] =?UTF-8?q?elementui=202.0=E7=89=88=E6=9C=AC=E7=9A=84vue-p?=
 =?UTF-8?q?lugin-hiprint@0.0.25-beat1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |   6 +-
 public/index.html         |   1 +
 src/demo/custom/index.vue | 173 +++++++++++++++++----------------
 src/demo/design/index.vue | 199 ++++++++++++++++++++++----------------
 src/demo/tasks/index.vue  | 165 ++++++++++++++++---------------
 src/main.js               |   2 +
 src/plugins/elementui.js  |   9 ++
 7 files changed, 303 insertions(+), 252 deletions(-)
 create mode 100644 src/plugins/elementui.js

diff --git a/package.json b/package.json
index d37242c..c5157c6 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,12 @@
   },
   "dependencies": {
     "ant-design-vue": "^1.7.8",
+    "concurrent-tasks": "^1.0.7",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.9",
     "vue": "^2.5.11",
-    "concurrent-tasks": "^1.0.7",
     "vue-ls": "^4.0.0",
-    "vue-plugin-hiprint": "^0.0.17"
+    "vue-plugin-hiprint": "0.0.25-beta1"
   },
   "browserslist": [
     "> 1%",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
+    "babel-plugin-component": "^1.1.1",
     "less-loader": "^6.1.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue-template-compiler": "^2.6.11",
diff --git a/public/index.html b/public/index.html
index 1ee85e0..cfe7933 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <!-- hiprint 拖拽图标需要 -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+      <link href="https://hzy-cdn.oss-cn-zhangjiakou.aliyuncs.com/res/print-lock.css" media="print" rel="stylesheet">
     <!-- 初次加载  -->
     <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;text-align:center;transform:translate(-50%,-100%)}.loading-tips{margin-top: 10px;color: grey;font-size: 14px}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:40px;width:40px;height:40px;box-sizing:border-box}.loading-dot i{width:20px;height:20px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
   </head>
diff --git a/src/demo/custom/index.vue b/src/demo/custom/index.vue
index b5b6d2d..cd7597d 100644
--- a/src/demo/custom/index.vue
+++ b/src/demo/custom/index.vue
@@ -1,83 +1,81 @@
 <template>
-  <a-card>
-    <a-row :gutter="[8,0]" style="margin-bottom: 10px">
-      <a-col :span="4">
+  <el-card>
+    <el-row style="margin-bottom: 10px">
+      <el-col :span="4">
         <!-- 模板选择 -->
-        <a-select v-model='mode' showSearch @change="changeMode" :defaultValue="0" option-label-prop="label"
+
+        <el-select v-model='mode' filterable @change="changeMode" :defaultValue="0" option-label-prop="label"
                   style="width: 100%;">
-          <a-select-option v-for='(opt,idx) in modeList' :key='idx' :label="opt.name" :value='idx'>
+          <el-option v-for='(opt,idx) in modeList' :key='idx' :label="opt.name" :value='idx'>
             {{ opt.name }}
-          </a-select-option>
-        </a-select>
-      </a-col>
+          </el-option>
+        </el-select>
+      </el-col>
       <a-col :span="20">
-        <a-space>
           <!-- 纸张设置 -->
-          <a-button-group>
-            <template v-for="(value,type) in paperTypes">
-              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
-                {{ type }}
-              </a-button>
-            </template>
-            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
-              <div slot="content">
-                <a-input-group compact style="margin: 10px 10px">
-                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
-                           placeholder="宽(mm)"/>
-                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
-                           placeholder="~" disabled
-                  />
-                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
-                           placeholder="高(mm)"/>
-                </a-input-group>
-                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
-              </div>
-              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
-            </a-popover>
-          </a-button-group>
-          <a-button type="text" icon="zoom-out" @click="changeScale(false)"></a-button>
-          <a-input-number
-            :value="scaleValue"
-            :min="scaleMin"
-            :max="scaleMax"
-            :step="0.1"
-            disabled
-            style="width: 70px;"
-            :formatter="value => `${(value * 100).toFixed(0)}%`"
-            :parser="value => value.replace('%', '')"
-          />
-          <a-button type="text" icon="zoom-in" @click="changeScale(true)"></a-button>
+          <el-button-group style="margin:0 10px">
+            <el-button   v-for="(value,type) in paperTypes" :type="curPaperType === type ? 'primary' : ' '" @click="setPaper(type,value)" :key="type">
+              {{ type }}
+            </el-button>
+          </el-button-group>
+          <el-input-number style="margin:0 10px" :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin" :max="scaleMax" @change="changeScale"></el-input-number>
+        <el-popover
+            placement="bottom"
+            width="300"
+            title="设置纸张宽高(mm)"
+            v-model="paperPopVisible">
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
+            <el-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center" place="宽（mm）"></el-input>~
+            <el-input type="number" v-model="paperHeight" style=" width: 100px; text-align: center" place="高（mm）"></el-input>
+          </div>
+          <div>
+            <el-button type="primary" style="width: 100%" @click="otherPaper" size="mini">确定</el-button>
+          </div>
+          <el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button>
+        </el-popover>
+
+<!--          <a-button-group>-->
+<!--            <template v-for="(value,type) in paperTypes">-->
+<!--              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">-->
+<!--                {{ type }}-->
+<!--              </a-button>-->
+<!--            </template>-->
+<!--            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">-->
+<!--              <div slot="content">-->
+<!--                <a-input-group compact style="margin: 10px 10px">-->
+<!--                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"-->
+<!--                           placeholder="宽(mm)"/>-->
+<!--                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"-->
+<!--                           placeholder="~" disabled-->
+<!--                  />-->
+<!--                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"-->
+<!--                           placeholder="高(mm)"/>-->
+<!--                </a-input-group>-->
+<!--                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>-->
+<!--              </div>-->
+<!--              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>-->
+<!--            </a-popover>-->
+<!--          </a-button-group>-->
+
           <!-- 预览/打印 -->
-          <a-button-group>
-            <a-button type="primary" icon="eye" @click="preView">
-              预览
-            </a-button>
-            <a-button type="primary" @click="print">
-              直接打印
-              <a-icon type="printer"/>
-            </a-button>
-          </a-button-group>
-          <!-- 保存/清空 -->
-          <a-button-group>
-            <a-button type="primary" icon="save" @click="save">
+          <el-button-group>
+          <el-button type="primary" icon="el-icon-view" @click="preView">
+            预览
+          </el-button>
+          <el-button  type="primary" icon="el-icon-printer" @click="print">
+            直接打印
+          </el-button >
+            <el-button type="primary" icon="el-icon-s-management" @click="save">
               保存
-            </a-button>
-            <a-popconfirm
-              title="是否确认清空?"
-              okType="danger"
-              okText="确定清空"
-              @confirm="clearPaper"
-            >
-              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
-              <a-button type="danger">
-                清空
-                <a-icon type="close"/>
-              </a-button>
-            </a-popconfirm>
-          </a-button-group>
-        </a-space>
+            </el-button>
+            <el-button  type="danger"  icon="el-icon-delete" @click="clearPaper">
+              清空
+            </el-button >
+          </el-button-group>
+          <!-- 保存/清空 -->
+
       </a-col>
-    </a-row>
+    </el-row>
     <a-row :gutter="[8,0]">
       <a-col :span="4">
         <a-card style="height: 100vh">
@@ -102,13 +100,13 @@
     </a-row>
     <!-- 预览 -->
     <print-preview ref="preView"/>
-  </a-card>
+  </el-card>
 </template>
 
 <script>
 
 import printPreview from './preview'
-
+import {MessageBox} from 'element-ui'
 import {hiprint} from 'vue-plugin-hiprint'
 import providers from './providers'
 import printData from './print-data'
@@ -119,6 +117,7 @@ export default {
   components: {printPreview},
   data() {
     return {
+      paperPopVisible: false,
       // 模板选择
       mode: 0,
       modeList: [],
@@ -228,7 +227,9 @@ export default {
         this.$message.error(`操作失败: ${error}`)
       }
     },
-    changeScale(big) {
+    changeScale(currentValue,oldValue) {
+      let big = false
+      currentValue <= oldValue ? big = false :big = true
       let scaleValue = this.scaleValue;
       if (big) {
         scaleValue += 0.1;
@@ -239,10 +240,25 @@ export default {
       }
       if (hiprintTemplate) {
         // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
-        hiprintTemplate.zoom(scaleValue, true);
+        hiprintTemplate.zoom(scaleValue);
         this.scaleValue = scaleValue;
       }
     },
+    clearPaper() {
+      MessageBox.confirm('是否确认清空模板信息?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        try {
+          hiprintTemplate.clear();
+        } catch (error) {
+          this.$message.error(`操作失败: ${error}`);
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
     otherPaper() {
       let value = {}
       value.width = this.paperWidth
@@ -277,13 +293,6 @@ export default {
       templates[payload.name] = payload.json
       this.$ls.set('KEY_TEMPLATES', templates)
       this.$message.info('保存成功')
-    },
-    clearPaper() {
-      try {
-        hiprintTemplate.clear();
-      } catch (error) {
-        this.$message.error(`操作失败: ${error}`);
-      }
     }
   }
 }
diff --git a/src/demo/design/index.vue b/src/demo/design/index.vue
index d67d56e..11ac209 100644
--- a/src/demo/design/index.vue
+++ b/src/demo/design/index.vue
@@ -1,65 +1,58 @@
 <template>
-  <a-card>
+  <el-card>
     <a-space style="margin-bottom: 10px">
-      <a-button-group>
-        <template v-for="(value,type) in paperTypes">
-          <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
+      <el-button-group>
+          <el-button   v-for="(value,type) in paperTypes" :type="curPaperType === type ? 'primary' : ' '" @click="setPaper(type,value)" :key="type">
             {{ type }}
-          </a-button>
-        </template>
-      </a-button-group>
-      <a-button type="text" icon="zoom-out" @click="changeScale(false)"></a-button>
-      <a-input-number
-        :value="scaleValue"
-        :min="scaleMin"
-        :max="scaleMax"
-        :step="0.1"
-        disabled
-        style="width: 70px;"
-        :formatter="value => `${(value * 100).toFixed(0)}%`"
-        :parser="value => value.replace('%', '')"
-      />
-      <a-button type="text" icon="zoom-in" @click="changeScale(true)"></a-button>
-      <a-button type="primary" icon="eye" @click="preView">
+          </el-button>
+      </el-button-group>
+      <el-input-number :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin" :max="scaleMax" @change="changeScale"></el-input-number>
+      <el-button type="primary" icon="el-icon-view" @click="preView">
         预览
-      </a-button>
-      <a-button type="primary" icon="printer" @click="print">
+      </el-button>
+      <el-button  type="primary" icon="el-icon-printer" @click="print">
         直接打印
-      </a-button>
-      <a-button type="primary" @click="onlyPrint">
+      </el-button >
+      <el-button  type="primary" @click="onlyPrint">
         Api单独打印
-      </a-button>
-      <a-button type="primary" @click="onlyPrint2">
+      </el-button >
+      <el-button  type="primary" @click="onlyPrint2">
         Api单独直接打印
-      </a-button>
-      <a-popconfirm
-        title="是否确认清空?"
-        okType="danger"
-        okText="确定清空"
-        @confirm="clearPaper"
-      >
-        <a-icon slot="icon" type="question-circle-o" style="color: red"/>
-        <a-button type="danger">
-          清空
-          <a-icon type="close"/>
-        </a-button>
-      </a-popconfirm>
+      </el-button >
+      <el-button  type="danger" @click="clearPaper" icon="el-icon-delete">
+        清空
+      </el-button >
+      <el-button  type="primary" @click="selectEls" >
+        获取选中元素
+      </el-button >
+      <el-button  type="primary" @click="updateFontSize('12')">
+        选中元素字体12pt
+      </el-button >
+      <el-button  type="primary" @click="updateFontWeight">
+        选中元素字体Bolder
+      </el-button >
+      <el-button  type="primary" @click="setMultEleHorizontal">
+        多选元素水平间距10
+      </el-button >
+      <el-button  type="primary" @click="setMultEleVertical">
+        多选元素垂直间距10
+      </el-button >
     </a-space>
-    <a-row :gutter="[8,0]">
-      <a-col :span="4">
-        <a-card style="height: 100vh">
-          <a-row>
-            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
-              <a-row class="drag_item_title">拖拽组件列表</a-row>
-              <a-row style="height: 100px;">
-                <a-col :span="12" class="drag_item_box">
+    <el-row >
+      <el-col :span="4">
+        <el-card style="height: 100vh">
+          <el-row>
+            <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
+              <el-row class="drag_item_title">拖拽组件列表</el-row>
+              <el-row style="height: 100px;">
+                <el-col :span="12" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.text" style>
                       <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                       <p class="glyphicon-class">文本</p>
                     </a>
                   </div>
-                </a-col>
+                </el-col>
                 <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.image" style>
@@ -68,88 +61,88 @@
                     </a>
                   </div>
                 </a-col>
-              </a-row>
-              <a-row style="height: 100px;">
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+              </el-row>
+              <el-row style="height: 100px;">
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.longText">
                       <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
                       <p class="glyphicon-class">长文</p>
                     </a>
                   </div>
-                </a-col>
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                </el-col>
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.tableCustom" style>
                       <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                       <p class="glyphicon-class">表格</p>
                     </a>
                   </div>
-                </a-col>
-              </a-row>
-              <a-row class="drag_item_title">辅助</a-row>
-              <a-row style="height: 100px;">
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                </el-col>
+              </el-row>
+              <el-row class="drag_item_title">辅助</el-row>
+              <el-row style="height: 100px;">
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.hline" style>
                       <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                       <p class="glyphicon-class">横线</p>
                     </a>
                   </div>
-                </a-col>
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                </el-col>
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.vline" style>
                       <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                       <p class="glyphicon-class">竖线</p>
                     </a>
                   </div>
-                </a-col>
-              </a-row>
-              <a-row style="height: 100px;">
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                </el-col>
+              </el-row>
+              <el-row style="height: 100px;">
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.rect">
                       <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                       <p class="glyphicon-class">矩形</p>
                     </a>
                   </div>
-                </a-col>
-                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
+                </el-col>
+                <el-col :span="12" class="drag_item_box" tid="defaultModule.text">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.oval">
                       <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                       <p class="glyphicon-class">椭圆</p>
                     </a>
                   </div>
-                </a-col>
-              </a-row>
-            </a-col>
-          </a-row>
-        </a-card>
-      </a-col>
-      <a-col :span="15">
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="15">
         <a-card class="card-design">
           <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
         </a-card>
-      </a-col>
-      <a-col :span="5" class="params_setting_container">
+      </el-col>
+      <el-col :span="5" class="params_setting_container">
         <a-card>
           <a-row class="hinnn-layout-sider">
             <div id="PrintElementOptionSetting"></div>
           </a-row>
         </a-card>
-      </a-col>
-    </a-row>
+      </el-col>
+    </el-row>
     <!-- 预览 -->
     <print-preview ref="preView"/>
-  </a-card>
+  </el-card>
 </template>
 
 <script>
 import {disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
 // disAutoConnect();
-
+import {MessageBox} from 'element-ui'
 let hiprintTemplate;
 import panel from './panel'
 import printData from './print-data'
@@ -245,6 +238,32 @@ export default {
     this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
   },
   methods: {
+    /**
+     * 获取选中元素
+     */
+    selectEls(){
+      let els = hiprintTemplate.getSelectEls()
+      console.log(els)
+    },
+    updateFontSize(val){
+      hiprintTemplate.updateOption('fontSize',val)
+
+    },
+    updateFontWeight(){
+      hiprintTemplate.updateOption('fontWeight','700')
+    },
+    /**
+     * 设置多选元素水平间距
+     */
+    setMultEleHorizontal(){
+      hiprintTemplate.setElsSpace(10, true)
+    },
+    /**
+     * 设置多选元素垂直间距
+     */
+    setMultEleVertical(){
+      hiprintTemplate.setElsSpace(10, false)
+    },
     /**
      * 设置纸张大小
      * @param type [A3, A4, A5, B3, B4, B5, other]
@@ -263,7 +282,9 @@ export default {
         this.$message.error(`操作失败: ${error}`)
       }
     },
-    changeScale(big) {
+    changeScale(currentValue,oldValue) {
+      let big = false
+      currentValue <= oldValue ? big = false :big = true
       let scaleValue = this.scaleValue;
       if (big) {
         scaleValue += 0.1;
@@ -323,11 +344,19 @@ export default {
       this.$message.error('客户端未连接,无法直接打印')
     },
     clearPaper() {
-      try {
-        hiprintTemplate.clear();
-      } catch (error) {
-        this.$message.error(`操作失败: ${error}`);
-      }
+      MessageBox.confirm('是否确认清空模板信息?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        try {
+          hiprintTemplate.clear();
+        } catch (error) {
+          this.$message.error(`操作失败: ${error}`);
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
     }
   }
 }
diff --git a/src/demo/tasks/index.vue b/src/demo/tasks/index.vue
index 00a87f6..aa5b8fd 100644
--- a/src/demo/tasks/index.vue
+++ b/src/demo/tasks/index.vue
@@ -1,97 +1,88 @@
 <template>
-  <a-card>
-    <a-row :gutter="[8,0]" style="margin-bottom: 10px">
-      <a-col :span="24">
+  <el-card>
+    <el-row style="margin-bottom: 10px">
+      <el-col :span="24">
         <a-space>
           <!-- 纸张设置 -->
-          <a-button-group>
-            <template v-for="(value,type) in paperTypes">
-              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
-                {{ type }}
-              </a-button>
-            </template>
-            <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
-              <div slot="content">
-                <a-input-group compact style="margin: 10px 10px">
-                  <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
-                           placeholder="宽(mm)"/>
-                  <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
-                           placeholder="~" disabled
-                  />
-                  <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
-                           placeholder="高(mm)"/>
-                </a-input-group>
-                <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
-              </div>
-              <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
-            </a-popover>
-          </a-button-group>
+          <el-button-group>
+            <el-button   v-for="(value,type) in paperTypes" :type="curPaperType === type ? 'primary' : ' '" @click="setPaper(type,value)" :key="type">
+              {{ type }}
+            </el-button>
+          </el-button-group>
+          <el-popover
+              placement="bottom"
+              width="300"
+              title="设置纸张宽高(mm)"
+              v-model="paperPopVisible">
+            <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
+              <el-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center" place="宽（mm）"></el-input>~
+              <el-input type="number" v-model="paperHeight" style=" width: 100px; text-align: center" place="高（mm）"></el-input>
+            </div>
+            <div>
+              <el-button type="primary" style="width: 100%" @click="otherPaper" size="mini">确定</el-button>
+            </div>
+            <el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button>
+          </el-popover>
           <!-- 打印数量 -->
           打印数量：
-          <a-slider v-model="count" style="width: 200px" :min="1" :max="10000"/>
-          <a-input-number v-model="count" :min="1" :max="10000" style="margin-left: 16px"/>
+          <el-slider
+              style="width: 300px"
+              v-model="count"
+              :max="10000"
+              show-input>
+          </el-slider>
+
+<!--          <a-slider v-model="count" style="width: 200px" :min="1" :max="10000"/>-->
+<!--          <a-input-number v-model="count" :min="1" :max="10000" style="margin-left: 16px"/>-->
           <!-- 预览/打印 -->
-          <a-button-group>
-            <a-button type="primary" icon="eye" @click="preView">
+          <el-button-group>
+            <el-button type="primary" icon="el-icon-view" @click="preView">
               预览
-            </a-button>
-            <a-button type="primary" @click="print">
+            </el-button>
+            <el-button  type="primary" icon="el-icon-printer" @click="print">
               直接打印
-              <a-icon type="printer"/>
-            </a-button>
-          </a-button-group>
-          <!-- 保存/清空 -->
-          <a-button-group>
-            <a-button type="primary" icon="save" @click="save">
+            </el-button >
+            <el-button type="primary" icon="el-icon-s-management" @click="save">
               保存
-            </a-button>
-            <a-popconfirm
-              title="是否确认清空?"
-              okType="danger"
-              okText="确定清空"
-              @confirm="clearPaper"
-            >
-              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
-              <a-button type="danger">
-                清空
-                <a-icon type="close"/>
-              </a-button>
-            </a-popconfirm>
-          </a-button-group>
+            </el-button>
+            <el-button  type="danger"  icon="el-icon-delete" @click="clearPaper">
+              清空
+            </el-button >
+          </el-button-group>
         </a-space>
-      </a-col>
-    </a-row>
-    <a-row :gutter="[8,0]">
-      <a-col :span="4">
-        <a-card style="height: 100vh">
-          <a-row>
-            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
-            </a-col>
-          </a-row>
-        </a-card>
-      </a-col>
-      <a-col :span="14">
-        <a-card class="card-design">
+      </el-col>
+    </el-row>
+    <el-row >
+      <el-col :span="4">
+        <el-card style="height: 100vh">
+          <el-row>
+            <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="14">
+        <el-card class="card-design">
           <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
-        </a-card>
-      </a-col>
-      <a-col :span="6" class="params_setting_container">
-        <a-card>
-          <a-row class="hinnn-layout-sider">
+        </el-card>
+      </el-col>
+      <el-col :span="6" class="params_setting_container">
+        <el-card>
+          <el-row class="hinnn-layout-sider">
             <div id="PrintElementOptionSetting"></div>
-          </a-row>
-        </a-card>
-      </a-col>
-    </a-row>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
     <!-- 预览 -->
     <print-preview ref="preView"/>
-  </a-card>
+  </el-card>
 </template>
 
 <script>
 
 import printPreview from './preview'
-
+import {MessageBox} from 'element-ui'
 import {hiprint} from 'vue-plugin-hiprint'
 import TaskRunner from 'concurrent-tasks';
 import panel from './panel'
@@ -104,6 +95,7 @@ export default {
   components: {printPreview},
   data() {
     return {
+      paperPopVisible:false,
       // 打印数量
       count: 1,
       // 当前纸张
@@ -140,7 +132,6 @@ export default {
         }
       },
       // 自定义纸张
-      paperPopVisible: false,
       paperWidth: '80',
       paperHeight: '60',
     }
@@ -280,7 +271,7 @@ export default {
         description: '点击关闭所有任务',
         btn: h => {
           return h(
-            'a-button',
+            'el-button',
             {
               props: {
                 type: 'danger',
@@ -309,12 +300,20 @@ export default {
       this.$message.info('保存成功')
     },
     clearPaper() {
-      try {
-        hiprintTemplate.clear();
-      } catch (error) {
-        this.$message.error(`操作失败: ${error}`);
-      }
-    }
+      MessageBox.confirm('是否确认清空模板信息?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        try {
+          hiprintTemplate.clear();
+        } catch (error) {
+          this.$message.error(`操作失败: ${error}`);
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 9448439..ebc8371 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,8 @@ import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 Vue.use(Antd);
 
+import '@/plugins/elementui'
+
 import {hiPrintPlugin} from 'vue-plugin-hiprint'
 Vue.use(hiPrintPlugin);
 
diff --git a/src/plugins/elementui.js b/src/plugins/elementui.js
new file mode 100644
index 0000000..7b9b71b
--- /dev/null
+++ b/src/plugins/elementui.js
@@ -0,0 +1,9 @@
+// 按需引入 elementui组件
+import Vue from 'vue'
+import 'element-ui/lib/theme-chalk/index.css';
+import {  Button, Loading, ButtonGroup,Input,
+    InputNumber,Card, Row,
+    Col,  Select,Slider,
+    Option,Popover } from 'element-ui'
+Vue.use(Button).use(Loading).use(ButtonGroup).use(InputNumber).use(Input)
+    .use(Card).use(Row).use(Col).use(Select).use(Option).use(Slider).use(Popover)
-- 
Gitee