n20-common-lib 1.3.3 → 1.3.6

package/src/components/NstcG6Components/NstcPagination/NstcPagination.vue

@@ -1,430 +0,0 @@
-<template>
-  <div
-      :class="[
-      'pagination',
-      isInterFace ? 'pagination-interface' : 'pagination-default',
-    ]"
-  >
-    <div class="pagination-wrap">
-      <div class="arrow" @click="prev">
-        <i class="el-icon-arrow-left"/>
-      </div>
-      <div class="arrow" @click="next">
-        <i class="el-icon-arrow-right"/>
-      </div>
-      <div class="pages">
-        <span>{{ current }}</span
-        >/{{ totalPage }}
-      </div>
-
-      <el-select
-          v-if="isShowConfig ? false : true"
-          class="pagination-total"
-          v-model="paginationChange"
-          placeholder=""
-          @change="handleSizeChange"
-      >
-        <el-option
-            v-for="item in settings"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        >
-        </el-option>
-      </el-select>
-
-      <div class="page-jumper">
-        <span>至第</span>
-        <el-input
-            v-model="input"
-            class="el-pagination__editor is-in-pagination"
-            :min="1"
-            :max="totalPage"
-            type="number"
-            @keyup.enter.native="handleChange(input)"
-            @change="handleChange"
-        />
-<!--        v-nstc-number="{ min: 1 }"-->
-        <span>页</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {on, off} from "element-ui/src/utils/dom";
-import setPageNumIcon from "./setPageNum.png";
-import setPageDefaultIcon from "./setpagedefault.png";
-
-export default {
-  name: "NstcPagination",
-  props: {
-    configSettings: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    page: Number,
-    pageSize: Number,
-    total: Number,
-    isInterFace: {
-      type: Boolean,
-      default: false,
-    },
-    isShowConfig: {
-      type: Boolean,
-      default: false,
-    },
-    isNeedThousand: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      paginationChange: 20,
-      settings: [],
-      // settings: [20, 50, 100],
-      current: 1,
-      size: 20,
-      totalPage: 1,
-      input: 1,
-      sizeInput: "",
-      showSetting: false,
-      pagination: {
-        page: 1,
-        limit: 20,
-        total: 0,
-      },
-      setPageUrl: setPageDefaultIcon,
-    };
-  },
-  watch: {
-    size() {
-      let index = this.settings.indexOf(this.size);
-      if (index < 0) this.sizeInput = this.size;
-      else this.sizeInput = "";
-    },
-    page(newVal) {
-      this.current = newVal;
-      this.input = newVal;
-    },
-    pageSize: {
-      immediate: true,
-      handler(newVal) {
-        this.size = newVal;
-        console.log(newVal, "newVal----------");
-        this.paginationChange = newVal;
-        this.handleTotal();
-      },
-    },
-
-    total() {
-      this.handleTotal();
-    },
-  },
-
-  created() {
-    let settings = [
-      {value: 10, label: '10条/页'},
-      {value: 20, label:'20条/页'},
-      {value: 50, label: '50条/页'},
-      {value: 100, label: '100条/页'},
-    ];
-    if (this.configSettings && this.configSettings.length > 0) {
-      settings = this.configSettings;
-    }
-    this.isNeedThousand &&
-    settings.push({value: 1000, label: '1000条/页'});
-    this.settings = settings;
-  },
-
-  mounted() {
-    this.current = this.page;
-    this.handleTotal();
-  },
-  methods: {
-    prevent(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    handleTotal() {
-      if (this.total) {
-        this.totalPage = Math.ceil(this.total / this.size);
-        // this.totalPage = this.total % this.size === 0 ? count : count + 1;
-      } else {
-        this.totalPage = 1;
-      }
-    },
-    handleChange(v) {
-      v = v === "" ? 1 : v;
-      v = parseInt(v);
-      if (v > this.totalPage) v = this.totalPage;
-      if (v < 1) v = 1;
-
-      this.input = v;
-      this.current = v;
-
-      this.pagination = {
-        page: this.current !== "" ? this.current : 1,
-        limit: this.size,
-        total: this.total,
-      };
-      this.$emit("pagination-change", this.pagination);
-    },
-    handleSizeChange(v) {
-      v = parseInt(v);
-      if (v < 1) v = 1;
-
-      this.size = v;
-
-      this.current = 1;
-      this.handleTotal();
-      this.pagination = {
-        page: this.current !== "" ? this.current : 1,
-        limit: this.size,
-        total: this.totalPage,
-      };
-      this.$emit("pagination-change", this.pagination);
-    },
-    prev() {
-      this.handleChange(this.current - 1);
-    },
-    next() {
-      this.handleChange(this.current + 1);
-    },
-    goSetting(e) {
-      this.showSetting = !this.showSetting;
-      this.setPageUrl = this.showSetting ? setPageNumIcon : setPageDefaultIcon;
-      if (this.showSetting) {
-        setTimeout(() => {
-          on(document, "click", this.handleDocumentClick);
-        }, 100);
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    handleDocumentClick() {
-      this.showSetting = false;
-      off(document, "click", this.handleDocumentClick);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-
-.el-pagination__editor {
-  height: 26px;
-}
-
-.el-pagination__editor.el-input {
-  width: 46px;
-}
-
-.el-pagination__editor .el-input__inner {
-  padding: 0;
-  text-align: center;
-  font-size: 10px;
-
-  border: 1px solid #bac4cf;
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-
-.el-pagination__editor.el-input .el-input__inner {
-  height: 26px !important;
-}
-
-.el-input.is-active .el-input__inner,
-.el-input__inner:focus {
-  // border-color: @primaryColor;
-  // background-color:#3d7fff;
-}
-
-.pagination-total {
-  height: 26px;
-  width: 89px !important;
-  margin-right: 6px;
-  font-size: 12px;
-
-  .el-input__inner, .el-input {
-    height: 26px !important;
-  }
-
-  .el-input {
-    display: flex;
-
-    .el-input__inner {
-      width: 100%;
-    }
-  }
-
-  .el-input__suffix-inner {
-    .el-select__caret {
-      width: 15px;
-      line-height: 24px;
-    }
-  }
-
-  .el-input--suffix .el-input__inner {
-    padding-right: 20px;
-    padding-left: 9px;
-  }
-}
-.cl-button {
-  margin-left: 4px;
-}
-
-.cl-button + .cl-button {
-  margin-left: 4px;
-}
-
-.border {
-  border: 1px solid #bac4cf;
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-
-.cl-close {
-  width: calc(100% - 101px) !important;
-}
-
-.pagination-interface {
-  position: fixed;
-  right: -5px;
-  bottom: 0;
-  background-color: #fff;
-  transition: width 0.3s;
-  width: calc(100% - 258px);
-  height: 61px;
-  margin-right: 33px;
-  padding: 10px;
-  // border-radius: 10px;
-  z-index: 999;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 -2px 6px 0 rgba(92, 100, 113, 0.11);
-}
-
-.pagination-default {
-  width: 100%;
-  height: 61px;
-  background-color: #fff;
-}
-
-.pagination {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-
-  .el-button--default {
-    background-color: #fff;
-    border: 1px solid #bac4cf;
-    color: #666;
-  }
-
-  .pagination-wrap {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  .arrow {
-    width: 26px;
-    height: 26px;
-    line-height: 26px;
-    text-align: center;
-    font-size: 12px;
-    font-weight: bold;
-    color: #666;
-    cursor: pointer;
-    border: 1px solid #bac4cf;
-    border-radius: 2px;
-    box-sizing: border-box;
-
-    &:hover {
-      border: 1px solid #007AFF;
-      color: #007AFF;
-    }
-  }
-
-  .arrow + .arrow {
-    margin-left: 6px;
-  }
-
-  .pages {
-    font-size: 10px;
-    color: #3D4A57;
-    margin: 0 6px;
-
-    span {
-      color: #007AFF;
-    }
-  }
-
-  .page-jumper {
-    font-size: 10px;
-    color: #3D4A57;
-    margin-right: 12px;
-
-    .jumper-input {
-      width: 46px;
-    }
-  }
-
-  .pagination-button {
-    font-size: 10px;
-    width: 26px;
-    border-radius: 2px;
-    padding: 2px 0;
-  }
-
-  .setting {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-  }
-
-  .setting-wrapper {
-    position: absolute;
-    bottom: 40px;
-    right: -10px;
-
-    background: white;
-    padding: 16px 22px;
-
-    font-size: 10px;
-    color: #3D4A57;
-
-    border-radius: 5px 5px 0 5px;
-    box-shadow: 0px -2px 6px 0px rgba(92, 100, 113, 0.11);
-
-    z-index: 100;
-
-    .hint {
-      word-break: keep-all;
-      margin-right: 10px;
-      transform: translate(0, 2px);
-    }
-  }
-}
-.nstc-pagination-btn {
-  background-color: #fff;
-  border: 1px solid #bac4cf;
-  color: #666;
-
-  &:not(.is-disabled):hover {
-    background-color: #007aff !important;
-    color: #fff !important;
-  }
-
-  &:focus {
-    background-color: #007aff !important;
-    border: 1px solid #007aff !important;
-    color: #fff !important;
-  }
-}
-</style>

package/src/components/NstcG6Components/NstcScreenFull/NstcScreenFull.vue

@@ -1,70 +0,0 @@
-<!--
-  功能：    浏览器全屏
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-<template>
-  <div>
-    <nstc-svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
-  </div>
-</template>
-
-<script>
-import screenfull from 'screenfull'
-import NstcSvgIcon from '../NstcSvgIcon/NstcSvgIcon'
-export default {
-  name: 'NstcScreenFull',
-  components: {
-    NstcSvgIcon
-  },
-  data() {
-    return {
-      isFullscreen: false
-    }
-  },
-  mounted() {
-    this.init()
-  },
-  beforeDestroy() {
-    this.destroy()
-  },
-  methods: {
-    click() {
-      console.log(screenfull)
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: '浏览器不允许全屏',
-          type: 'warning'
-        })
-        return false
-      }
-      screenfull.toggle()
-    },
-    change() {
-      this.isFullscreen = screenfull.isFullscreen
-    },
-    init() {
-      if (screenfull.isEnabled) {
-        screenfull.on('change', this.change)
-      }
-    },
-    destroy() {
-      if (screenfull.isEnabled) {
-        screenfull.off('change', this.change)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.screenfull-svg {
-  display: inline-block;
-  cursor: pointer;
-  fill: #5a5e66;;
-  width: 20px;
-  height: 20px;
-  vertical-align: 10px;
-}
-</style>
-