n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcSticky/NstcSticky.vue

@@ -1,97 +1,97 @@
-<!--
-  功能：    固定位置页面控件
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-
-<template>
-  <div :style="{height:height+'px',zIndex:zIndex}">
-    <div
-        :class="className"
-        :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
-    >
-      <slot>
-        <div>sticky</div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcSticky',
-  props: {
-    stickyTop: {
-      type: Number,
-      default: 0
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      active: false,
-      position: '',
-      width: undefined,
-      height: undefined,
-      isSticky: false
-    }
-  },
-  mounted() {
-    this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll,true)
-    window.addEventListener('resize', this.handleResize, true)
-  },
-  activated() {
-    this.handleScroll()
-  },
-  destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    sticky() {
-      if (this.active) {
-        return
-      }
-      this.position = 'fixed'
-      this.active = true
-      this.width = this.width + 'px'
-      this.isSticky = true
-    },
-    handleReset() {
-      if (!this.active) {
-        return
-      }
-      this.reset()
-    },
-    reset() {
-      this.position = ''
-      this.width = 'auto'
-      this.active = false
-      this.isSticky = false
-    },
-    handleScroll() {
-      const width = this.$el.getBoundingClientRect().width
-      this.width = width || 'auto'
-      const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop < this.stickyTop) {
-        this.sticky()
-        return
-      }
-      this.handleReset()
-    },
-    handleResize() {
-      if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + 'px'
-      }
-    }
-  }
-}
-</script>
+<!--
+  功能：    固定位置页面控件
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+
+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div
+        :class="className"
+        :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NstcSticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll,true)
+    window.addEventListener('resize', this.handleResize, true)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    handleReset() {
+      if (!this.active) {
+        return
+      }
+      this.reset()
+    },
+    reset() {
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      const width = this.$el.getBoundingClientRect().width
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.handleReset()
+    },
+    handleResize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>

package/nstc-g6/components/NstcSvgIcon/NstcSvgIcon.vue

@@ -1,72 +1,72 @@
-<!--
-  功能：    加载svg图片组件
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-<template>
-  <div
-    v-if="isExternal"
-    :style="styleExternalIcon"
-    class="svg-external-icon svg-icon"
-    v-on="$listeners"
-  ></div>
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-import { isExternal } from '../../utils/validate'
-
-export default {
-  name: 'NstcSvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass)
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover !important;
-  display: inline-block;
-}
-</style>
-
+<!--
+  功能：    加载svg图片组件
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  ></div>
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+import { isExternal } from '../../utils/validate'
+
+export default {
+  name: 'NstcSvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>
+

package/nstc-g6/components/NstcTab/NstcTab.vue

@@ -1,80 +1,80 @@
-<!--
-  功能：    tab切换组件
-  作者：    nstc
-  创建时间： 2021-02-04
--->
-<template>
-  <div class="nstc-tab-custom">
-    <el-tabs
-        v-model="_value"
-        v-bind="$attrs"
-        class="nstc-tab"
-        v-on="$listeners"
-    >
-      <el-tab-pane
-          v-for="tab in options"
-          :key="tab.value"
-          v-bind="tab"
-          :name="tab.value"
-      />
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcTab',
-
-  inheritAttrs: false,
-
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-
-  computed: {
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.nstc-tab {
-  font-size: 16px;
-  .el-tabs_{
-    &_item {
-      font-size: 16px !important;
-      height: 24px !important;
-      line-height: 24px!important;
-      padding: 0 14px!important;
-    }
-    &_item.is-active {
-      color: #007aff !important;
-      font-weight: 500;
-    }
-    &_item:hover {
-      color: #007aff  !important;
-      cursor: pointer
-    }
-    &_nav-wrap::after {
-      background-color: rgba(0,0,0,0);
-    }
-  }
-}
-
-</style>
-
+<!--
+  功能：    tab切换组件
+  作者：    nstc
+  创建时间： 2021-02-04
+-->
+<template>
+  <div class="nstc-tab-custom">
+    <el-tabs
+        v-model="_value"
+        v-bind="$attrs"
+        class="nstc-tab"
+        v-on="$listeners"
+    >
+      <el-tab-pane
+          v-for="tab in options"
+          :key="tab.value"
+          v-bind="tab"
+          :name="tab.value"
+      />
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NstcTab',
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nstc-tab {
+  font-size: 16px;
+  .el-tabs_{
+    &_item {
+      font-size: 16px !important;
+      height: 24px !important;
+      line-height: 24px!important;
+      padding: 0 14px!important;
+    }
+    &_item.is-active {
+      color: #007aff !important;
+      font-weight: 500;
+    }
+    &_item:hover {
+      color: #007aff  !important;
+      cursor: pointer
+    }
+    &_nav-wrap::after {
+      background-color: rgba(0,0,0,0);
+    }
+  }
+}
+
+</style>
+

package/nstc-g6/components/NstcTabWithBadge/NstcTabWithBadge.vue

@@ -1,45 +1,45 @@
-<template>
-  <div class="tab-with-badge">
-    <el-badge
-        v-for="tab in options"
-        :key="tab.value"
-        :value="tab.badgeValue"
-        v-bind="tab"
-        :hidden="!tab.badgeValue"
-        :class="{ active: value === tab.value }"
-    >
-      <span @click="handleClick(tab)">
-        {{ tab.label }}
-      </span>
-    </el-badge>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcTabWithBadge',
-
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-
-  methods: {
-    handleClick(tab) {
-      this.$emit('input', tab.value)
-      this.$emit('change', tab)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "index";
-</style>
+<template>
+  <div class="tab-with-badge">
+    <el-badge
+        v-for="tab in options"
+        :key="tab.value"
+        :value="tab.badgeValue"
+        v-bind="tab"
+        :hidden="!tab.badgeValue"
+        :class="{ active: value === tab.value }"
+    >
+      <span @click="handleClick(tab)">
+        {{ tab.label }}
+      </span>
+    </el-badge>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NstcTabWithBadge',
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  methods: {
+    handleClick(tab) {
+      this.$emit('input', tab.value)
+      this.$emit('change', tab)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "index";
+</style>

package/nstc-g6/components/NstcTabWithBadge/index.scss

@@ -1,31 +1,31 @@
-.tab-with-badge {
-  display: flex;
-  align-items: center;
-  .el-badge {
-    padding: 4px 0;
-    margin: 0 20px;
-    cursor: pointer;
-    &:not(:last-child)::after {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      width: 1px;
-      background-color:  #8a8a8a;
-      position: absolute;
-      right: -20px;
-      top: 0;
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-    &:hover {
-      color: #007aff;
-    }
-    &.active {
-      color: #007aff;
-    }
-  }
-}
+.tab-with-badge {
+  display: flex;
+  align-items: center;
+  .el-badge {
+    padding: 4px 0;
+    margin: 0 20px;
+    cursor: pointer;
+    &:not(:last-child)::after {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      width: 1px;
+      background-color:  #8a8a8a;
+      position: absolute;
+      right: -20px;
+      top: 0;
+    }
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &:hover {
+      color: #007aff;
+    }
+    &.active {
+      color: #007aff;
+    }
+  }
+}