@toolspack/ttd-pdfjs 0.1.3 → 0.1.4

package/src/packages/pdfjs/SwitchPage.vue

@@ -1,198 +1,198 @@
-<template lang="html">
-  <div class="ttd-pdfjs-switch-page" ref=switchPageBox>
-    <div class='switch-page-btn'>
-      <el-button size="mini" @click="switchPage('prev')" icon=el-icon-arrow-up>上一页</el-button>
-      <el-button size="mini" @click="switchPage('next')" icon=el-icon-arrow-down>下一页</el-button>
-      <span style="margin-left: 6px">
-        <el-input v-model.number="itemPage" style="width: 50px;margin: 0 4px; font-size:14px;" size="mini"
-          @keyup.native.enter="goPage"  @change="goPage"></el-input>/{{numPages}}
-      </span>
-    </div>
-    <div class='switch-page-scale'>
-      <el-button size="mini" :disabled="!zoomEnable" @click="zoomIn" icon=el-icon-minus></el-button>
-      <el-button size="mini" :disabled="!zoomEnable" @click="zoomOut" icon=el-icon-plus></el-button>
-      <el-select v-model="itemScale" :disabled="!zoomEnable" @change=onZoomChange size="mini" style="margin-left:10px" placeholder="请选择">
-        <el-option
-          v-for="item in EnumOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-    </div>
-    <div class='switch-page-rotate'>
-      <el-button size="mini" @click="rotateRight" :disabled="!rotateEnable" icon=el-icon-refresh-right>
-        <span class=hidden-text>顺时针旋转</span>
-      </el-button>
-      <el-button size="mini" @click="rotateLeft" :disabled="!rotateEnable" icon=el-icon-refresh-left>
-        <span class=hidden-text>逆时针旋转</span>
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { maxscale, minscale } from './PdfView216.vue'
-
-export const EnumOptions = [
-  // { label: '自动缩放', value: '' },
-  // { label: '实际大小', value: '' },
-  // { label: '适合页面', value: '' },
-  // { label: '适合页宽', value: 'auto' },
-  { label: '50%', value: '50%' },
-  { label: '75%', value: '75%' },
-  { label: '100%', value: '100%' },
-  { label: '125%', value: '125%' },
-  { label: '150%', value: '150%' },
-  { label: '200%', value: '200%' },
-  { label: '300%', value: '300%' },
-]
-export default {
-  name: 'switch-page',
-  props: {
-    numPages: {
-      type: [Number, String],
-    },
-    page: {
-      type: [Number, String],
-      default: 1,
-    },
-    scale: {
-      type: [Number],
-      default: 1,
-    },
-    zoomEnable: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    rotateEnable: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-  },
-  data() {
-    return {
-      itemPage: '', // 内部保存的页码，
-      EnumOptions,
-      itemScale: 'auto',
-      itemRotate: 0,
-    }
-  },
-  watch: {
-    page: {
-      handler(value) {
-        this.itemPage = value
-      },
-      immediate: true,
-    },
-    numPages: {
-      handler(value) {
-        this.itemPage = 1
-      },
-    },
-    scale: {
-      handler(value) {
-        this.itemScale = `${Math.round(value * 100)}%`
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    mounted() {
-
-    },
-    switchPage(str) {
-      if (str === 'prev') {
-        if (this.itemPage === 1) {
-          return
-        }
-        this.itemPage--
-      }
-      if (str === 'next') {
-        if (this.itemPage === this.numPages) {
-          this.$message({ message: '当前已是最后一页', type: 'warning' })
-          return
-        }
-        this.itemPage++
-      }
-      this.$emit('page', this.itemPage)
-    },
-    setPage(page = 1) {
-      this.itemPage = page
-    },
-    goPage() {
-      if (this.itemPage > 0) {
-        if (this.itemPage >= this.numPages) {
-          this.itemPage = this.numPages
-        }
-      } else {
-        this.itemPage = 1
-      }
-      this.$emit('page', this.itemPage)
-    },
-    zoomIn() {
-      let numScale = window.parseInt(this.itemScale)
-      if (Number.isNaN(numScale)) {
-        numScale = 100
-        this.itemScale = `${numScale}%`
-        this.$emit('zoom', numScale / 100)
-      }
-      if (numScale > minscale * 100) {
-        numScale -= 10
-        this.itemScale = `${numScale}%`
-        this.$emit('zoom', numScale / 100)
-      }
-    },
-    zoomOut() {
-      let numScale = window.parseInt(this.itemScale)
-      if (Number.isNaN(numScale)) {
-        numScale = 100
-        this.itemScale = `${numScale}%`
-        this.$emit('zoom', numScale / 100)
-      }
-      if (numScale < maxscale * 100) {
-        numScale += 10
-        this.itemScale = `${numScale}%`
-        this.$emit('zoom', numScale / 100)
-      }
-    },
-    onZoomChange() {
-      const numScale = window.parseInt(this.itemScale)
-      this.$emit('zoom', numScale / 100)
-    },
-    rotateRight() {
-      this.$emit('rotate', this.itemRotate + 90)
-    },
-    rotateLeft() {
-      this.$emit('rotate', this.itemRotate - 90)
-    },
-  },
-}
-</script>
-
-<style lang="less">
-.ttd-pdfjs-switch-page {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  .switch-page-scale{
-    flex: 1;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    .el-select{
-      width: 140px;
-    }
-  }
-  button {
-    font-size: 14px;
-    padding: 6px !important;
-  }
-  @media (max-width: 731px) {
-    .hidden-text {
-      display: none;
-    }
-  }
-}
-</style>
+<template lang="html">
+  <div class="ttd-pdfjs-switch-page" ref=switchPageBox>
+    <div class='switch-page-btn'>
+      <el-button size="mini" @click="switchPage('prev')" icon=el-icon-arrow-up>上一页</el-button>
+      <el-button size="mini" @click="switchPage('next')" icon=el-icon-arrow-down>下一页</el-button>
+      <span style="margin-left: 6px">
+        <el-input v-model.number="itemPage" style="width: 50px;margin: 0 4px; font-size:14px;" size="mini"
+          @keyup.native.enter="goPage"  @change="goPage"></el-input>/{{numPages}}
+      </span>
+    </div>
+    <div class='switch-page-scale'>
+      <el-button size="mini" :disabled="!zoomEnable" @click="zoomIn" icon=el-icon-minus></el-button>
+      <el-button size="mini" :disabled="!zoomEnable" @click="zoomOut" icon=el-icon-plus></el-button>
+      <el-select v-model="itemScale" :disabled="!zoomEnable" @change=onZoomChange size="mini" style="margin-left:10px" placeholder="请选择">
+        <el-option
+          v-for="item in EnumOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+    <div class='switch-page-rotate'>
+      <el-button size="mini" @click="rotateRight" :disabled="!rotateEnable" icon=el-icon-refresh-right>
+        <span class=hidden-text>顺时针旋转</span>
+      </el-button>
+      <el-button size="mini" @click="rotateLeft" :disabled="!rotateEnable" icon=el-icon-refresh-left>
+        <span class=hidden-text>逆时针旋转</span>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { maxscale, minscale } from './PdfView216.vue'
+
+export const EnumOptions = [
+  // { label: '自动缩放', value: '' },
+  // { label: '实际大小', value: '' },
+  // { label: '适合页面', value: '' },
+  // { label: '适合页宽', value: 'auto' },
+  { label: '50%', value: '50%' },
+  { label: '75%', value: '75%' },
+  { label: '100%', value: '100%' },
+  { label: '125%', value: '125%' },
+  { label: '150%', value: '150%' },
+  { label: '200%', value: '200%' },
+  { label: '300%', value: '300%' },
+]
+export default {
+  name: 'switch-page',
+  props: {
+    numPages: {
+      type: [Number, String],
+    },
+    page: {
+      type: [Number, String],
+      default: 1,
+    },
+    scale: {
+      type: [Number],
+      default: 1,
+    },
+    zoomEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    rotateEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+  },
+  data() {
+    return {
+      itemPage: '', // 内部保存的页码，
+      EnumOptions,
+      itemScale: 'auto',
+      itemRotate: 0,
+    }
+  },
+  watch: {
+    page: {
+      handler(value) {
+        this.itemPage = value
+      },
+      immediate: true,
+    },
+    numPages: {
+      handler(value) {
+        this.itemPage = 1
+      },
+    },
+    scale: {
+      handler(value) {
+        this.itemScale = `${Math.round(value * 100)}%`
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    mounted() {
+
+    },
+    switchPage(str) {
+      if (str === 'prev') {
+        if (this.itemPage === 1) {
+          return
+        }
+        this.itemPage--
+      }
+      if (str === 'next') {
+        if (this.itemPage === this.numPages) {
+          this.$message({ message: '当前已是最后一页', type: 'warning' })
+          return
+        }
+        this.itemPage++
+      }
+      this.$emit('page', this.itemPage)
+    },
+    setPage(page = 1) {
+      this.itemPage = page
+    },
+    goPage() {
+      if (this.itemPage > 0) {
+        if (this.itemPage >= this.numPages) {
+          this.itemPage = this.numPages
+        }
+      } else {
+        this.itemPage = 1
+      }
+      this.$emit('page', this.itemPage)
+    },
+    zoomIn() {
+      let numScale = window.parseInt(this.itemScale)
+      if (Number.isNaN(numScale)) {
+        numScale = 100
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+      if (numScale > minscale * 100) {
+        numScale -= 10
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+    },
+    zoomOut() {
+      let numScale = window.parseInt(this.itemScale)
+      if (Number.isNaN(numScale)) {
+        numScale = 100
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+      if (numScale < maxscale * 100) {
+        numScale += 10
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+    },
+    onZoomChange() {
+      const numScale = window.parseInt(this.itemScale)
+      this.$emit('zoom', numScale / 100)
+    },
+    rotateRight() {
+      this.$emit('rotate', this.itemRotate + 90)
+    },
+    rotateLeft() {
+      this.$emit('rotate', this.itemRotate - 90)
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.ttd-pdfjs-switch-page {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  .switch-page-scale{
+    flex: 1;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    .el-select{
+      width: 140px;
+    }
+  }
+  button {
+    font-size: 14px;
+    padding: 6px !important;
+  }
+  @media (max-width: 731px) {
+    .hidden-text {
+      display: none;
+    }
+  }
+}
+</style>

package/src/packages/utils/index.js

@@ -1,16 +1,16 @@
-export const getUrl = (str) => {
-  let obj = {}
-  if (str) {
-    if (typeof str === 'string' && /^{/.test(str)) {
-      obj = JSON.parse(str)
-    } else {
-      obj = str
-    }
-  }
-  if (obj.url) {
-    obj.url = decodeURI(obj.url)
-  }
-  return obj
-}
-
-export default { getUrl }
+export const getUrl = (str) => {
+  let obj = {}
+  if (str) {
+    if (typeof str === 'string' && /^{/.test(str)) {
+      obj = JSON.parse(str)
+    } else {
+      obj = str
+    }
+  }
+  if (obj.url) {
+    obj.url = decodeURI(obj.url)
+  }
+  return obj
+}
+
+export default { getUrl }

package/src/styles/base.scss

@@ -1,3 +1,3 @@
-$click-color: #2E6BE6;
-$btn-color: #222222;
-$base-color2: #41C89D;
+$click-color: #2E6BE6;
+$btn-color: #222222;
+$base-color2: #41C89D;

package/src/styles/common.scss

@@ -1,22 +1,22 @@
-@import '@/styles/components/reset.scss';
-
-@import '@/styles/base.scss';
-
-@import '@/styles/components/table.scss';
-
-@import '@/styles/components/input.scss';
-
-@import '@/styles/components/button.scss';
-
-@import '@/styles/components/el-pagination.scss';
-
-@import '@/styles/components/file-group.scss';
-
-@import '@/styles/components/message.scss';
-
-
-
-.wh-100 {
-  width: 100%;
-  height: 100%
-}
+@import '@/styles/components/reset.scss';
+
+@import '@/styles/base.scss';
+
+@import '@/styles/components/table.scss';
+
+@import '@/styles/components/input.scss';
+
+@import '@/styles/components/button.scss';
+
+@import '@/styles/components/el-pagination.scss';
+
+@import '@/styles/components/file-group.scss';
+
+@import '@/styles/components/message.scss';
+
+
+
+.wh-100 {
+  width: 100%;
+  height: 100%
+}

package/src/styles/components/el-pagination.scss

@@ -1,21 +1,21 @@
-.detail-pageination {
-  padding: 18px 20px;
-
-  .el-pagination .btn-next:disabled,
-  .el-pagination .btn-prev:disabled {
-    background: transparent;
-  }
-
-  .el-pager li,
-  .btn-prev,
-  .btn-next {
-    background: transparent;
-  }
-
-  .el-pager li.active {
-    display: inline-block;
-    border: 1px solid #666;
-    background: #fff;
-    color: #666;
-  }
-}
+.detail-pageination {
+  padding: 18px 20px;
+
+  .el-pagination .btn-next:disabled,
+  .el-pagination .btn-prev:disabled {
+    background: transparent;
+  }
+
+  .el-pager li,
+  .btn-prev,
+  .btn-next {
+    background: transparent;
+  }
+
+  .el-pager li.active {
+    display: inline-block;
+    border: 1px solid #666;
+    background: #fff;
+    color: #666;
+  }
+}

package/src/styles/components/file-group.scss

@@ -1,4 +1,4 @@
-.file-group-wrapper {
-  margin-top: -8px;
-  margin-bottom: -20px;
-}
+.file-group-wrapper {
+  margin-top: -8px;
+  margin-bottom: -20px;
+}

package/src/styles/components/message.scss

@@ -1,54 +1,54 @@
-.el-alert {
-  padding: 10px 8px;
-
-  .title-msg-header {
-    margin-top: 8px;
-
-    .icon-left {
-      font-size: 21px;
-      color: #1990fc;
-      vertical-align: middle;
-    }
-
-    .title {
-      margin-left: 8px;
-      font-size: 16px;
-      color: #222222;
-      letter-spacing: 0;
-      line-height: 24px;
-      vertical-align: middle
-    }
-
-    overflow: hidden;
-  }
-
-  .title-msg-body {
-    display: inline-block;
-    padding: 0 30px;
-    margin-bottom: 8px;
-  }
-}
-
-.el-alert__title {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.el-alert__closebtn {
-  font-size: 16px;
-}
-
-.el-alert .el-alert__description {
-  font-size: 14px;
-  letter-spacing: 0;
-  line-height: 22px;
-  margin: 8px 0 0 0;
-}
-
-.el-alert--info.is-light {
-  background-color: rgba(51, 111, 255, 0.1);
-}
-
-.el-alert--info .el-alert__description {
-  color: #4B5973;
+.el-alert {
+  padding: 10px 8px;
+
+  .title-msg-header {
+    margin-top: 8px;
+
+    .icon-left {
+      font-size: 21px;
+      color: #1990fc;
+      vertical-align: middle;
+    }
+
+    .title {
+      margin-left: 8px;
+      font-size: 16px;
+      color: #222222;
+      letter-spacing: 0;
+      line-height: 24px;
+      vertical-align: middle
+    }
+
+    overflow: hidden;
+  }
+
+  .title-msg-body {
+    display: inline-block;
+    padding: 0 30px;
+    margin-bottom: 8px;
+  }
+}
+
+.el-alert__title {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.el-alert__closebtn {
+  font-size: 16px;
+}
+
+.el-alert .el-alert__description {
+  font-size: 14px;
+  letter-spacing: 0;
+  line-height: 22px;
+  margin: 8px 0 0 0;
+}
+
+.el-alert--info.is-light {
+  background-color: rgba(51, 111, 255, 0.1);
+}
+
+.el-alert--info .el-alert__description {
+  color: #4B5973;
 }

package/src/styles/components/reset.scss

@@ -1,8 +1,8 @@
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td {
-  margin: 0;
-  padding: 0
-}
-
-ul, li {
-  list-style: none;
-}
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td {
+  margin: 0;
+  padding: 0
+}
+
+ul, li {
+  list-style: none;
+}