n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,130 +1,130 @@
-<!--
-  功能：    折叠栏
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-<template>
-  <div :class="['expand-collapse', { 'is-collapse': _isCollapse, 'content-is-table': contentIsTable }]">
-    <div
-        v-if="title || $slots.title"
-        :class="isCanCollapse ? 'expand-collapse-header' : 'expand-collapse-header-collapse'"
-        @click="handleToggle"
-    >
-      <i v-if="isCanCollapse" class="el-icon-caret-top expand-collapse-icon" />
-      <slot v-if="$slots.title" name="title" />
-      <span v-else class="expand-collapse-header-title">{{ title }}</span>
-    </div>
-
-    <el-collapse-transition>
-      <div
-          v-show="!_isCollapse"
-          :class="{ 'expand-collapse-content': true, 'drag-in': dragIn }"
-          @dragenter="dragenter"
-          @dragover="dragover"
-          @dragleave="dragleave"
-          @drop="drop"
-          @dragover.prevent
-      >
-        <div class="expand-collapse-content-box">
-          <slot />
-        </div>
-      </div>
-    </el-collapse-transition>
-
-    <div
-        v-if="!title && !$slots.title && expandCollapseFlag"
-        class="expand-collapse-footer"
-        @click="handleToggle"
-    >
-      <i class="el-icon-caret-top expand-collapse-icon" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NstcExpandCollapse',
-
-  props: {
-    // 是否折叠
-    value: {
-      type: Boolean,
-      default: false
-    },
-
-    title: {
-      type: String,
-      default: ''
-    },
-
-    // 内容是否为table,是就有border
-    contentIsTable: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示下拉搜索
-    expandCollapseFlag: {
-      type: Boolean,
-      default: true
-    },
-    // 是否可以折叠
-    isCanCollapse: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      isCollapse: false,
-      dragIn: false
-    }
-  },
-
-  computed: {
-    hasUsedVModel() {
-      return 'value' in this.$options.propsData
-    },
-
-    _isCollapse: {
-      get() {
-        return this.hasUsedVModel ? this.value : this.isCollapse
-      },
-      set(val) {
-        if (this.hasUsedVModel) {
-          this.$emit('input', val)
-        } else {
-          this.isCollapse = val
-        }
-      }
-    }
-  },
-
-  methods: {
-    handleToggle() {
-      if (this.isCanCollapse) {
-        // 可以折叠执行
-        this._isCollapse = !this._isCollapse
-      }
-    },
-    dragenter() {
-      // this.dragIn = true
-      console.log('有元素进入了')
-    },
-    dragover() {},
-    dragleave() {
-      this.dragIn = false
-      console.log('有元素离开了')
-    },
-    // 有标签一进来了
-    drop() {
-      this.dragIn = false
-      console.log('有标签一进来了')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "index";
-</style>
+<!--
+  功能：    折叠栏
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div :class="['expand-collapse', { 'is-collapse': _isCollapse, 'content-is-table': contentIsTable }]">
+    <div
+        v-if="title || $slots.title"
+        :class="isCanCollapse ? 'expand-collapse-header' : 'expand-collapse-header-collapse'"
+        @click="handleToggle"
+    >
+      <i v-if="isCanCollapse" class="el-icon-caret-top expand-collapse-icon" />
+      <slot v-if="$slots.title" name="title" />
+      <span v-else class="expand-collapse-header-title">{{ title }}</span>
+    </div>
+
+    <el-collapse-transition>
+      <div
+          v-show="!_isCollapse"
+          :class="{ 'expand-collapse-content': true, 'drag-in': dragIn }"
+          @dragenter="dragenter"
+          @dragover="dragover"
+          @dragleave="dragleave"
+          @drop="drop"
+          @dragover.prevent
+      >
+        <div class="expand-collapse-content-box">
+          <slot />
+        </div>
+      </div>
+    </el-collapse-transition>
+
+    <div
+        v-if="!title && !$slots.title && expandCollapseFlag"
+        class="expand-collapse-footer"
+        @click="handleToggle"
+    >
+      <i class="el-icon-caret-top expand-collapse-icon" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NstcExpandCollapse',
+
+  props: {
+    // 是否折叠
+    value: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: ''
+    },
+
+    // 内容是否为table,是就有border
+    contentIsTable: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示下拉搜索
+    expandCollapseFlag: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可以折叠
+    isCanCollapse: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      isCollapse: false,
+      dragIn: false
+    }
+  },
+
+  computed: {
+    hasUsedVModel() {
+      return 'value' in this.$options.propsData
+    },
+
+    _isCollapse: {
+      get() {
+        return this.hasUsedVModel ? this.value : this.isCollapse
+      },
+      set(val) {
+        if (this.hasUsedVModel) {
+          this.$emit('input', val)
+        } else {
+          this.isCollapse = val
+        }
+      }
+    }
+  },
+
+  methods: {
+    handleToggle() {
+      if (this.isCanCollapse) {
+        // 可以折叠执行
+        this._isCollapse = !this._isCollapse
+      }
+    },
+    dragenter() {
+      // this.dragIn = true
+      console.log('有元素进入了')
+    },
+    dragover() {},
+    dragleave() {
+      this.dragIn = false
+      console.log('有元素离开了')
+    },
+    // 有标签一进来了
+    drop() {
+      this.dragIn = false
+      console.log('有标签一进来了')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "index";
+</style>

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

@@ -1,77 +1,77 @@
-.is-collapse{
-  margin-bottom: 0!important;
-}
-
-.expand-collapse {
-  position: relative;
-
-  &-header {
-    display: flex;
-    //justify-content: space-between;
-    align-items: center;
-    padding: 9px 10px 8px 26px;
-    margin-bottom: 16px;
-    &-title{
-      font-weight: bold;
-      color: #3D4A57;
-    }
-    .expand-collapse-icon {
-      transform: rotate(180deg);
-      margin-right: 6px;
-    }
-  }
-
-  &-header-collapse {
-    background-color: #fff;
-    border: 1px solid #fff;
-    display: flex;
-    //justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    .expand-collapse-icon {
-      transform: rotate(180deg);
-      margin-right: 10px;
-    }
-  }
-
-  &-content {
-    background-color: #fff;
-    border: 1px solid #fff;
-  }
-
-  &-icon {
-    transition: transform 0.3s;
-    color: #bac4cf;
-  }
-
-  &.is-collapse {
-    .expand-collapse-icon {
-      transform: rotate(90deg);
-    }
-  }
-  &.content-is-table &-footer {
-    border: 1px solid #DFDFDF;
-    border-top: none;
-  }
-
-  &-footer {
-    height: 42px;
-    line-height: 42px;
-    text-align: center;
-  }
-
-  &-header,
-  &-footer {
-    cursor: pointer;
-    background: #F5F5F5;
-    &:hover {
-      .expand-collapse-icon {
-        color: #007aff;
-      }
-    }
-  }
-  // 有拖动元素进来
-  .drag-in {
-    border: 1px dashed #007aff;
-  }
-}
+.is-collapse{
+  margin-bottom: 0!important;
+}
+
+.expand-collapse {
+  position: relative;
+
+  &-header {
+    display: flex;
+    //justify-content: space-between;
+    align-items: center;
+    padding: 9px 10px 8px 26px;
+    margin-bottom: 16px;
+    &-title{
+      font-weight: bold;
+      color: #3D4A57;
+    }
+    .expand-collapse-icon {
+      transform: rotate(180deg);
+      margin-right: 6px;
+    }
+  }
+
+  &-header-collapse {
+    background-color: #fff;
+    border: 1px solid #fff;
+    display: flex;
+    //justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    .expand-collapse-icon {
+      transform: rotate(180deg);
+      margin-right: 10px;
+    }
+  }
+
+  &-content {
+    background-color: #fff;
+    border: 1px solid #fff;
+  }
+
+  &-icon {
+    transition: transform 0.3s;
+    color: #bac4cf;
+  }
+
+  &.is-collapse {
+    .expand-collapse-icon {
+      transform: rotate(90deg);
+    }
+  }
+  &.content-is-table &-footer {
+    border: 1px solid #DFDFDF;
+    border-top: none;
+  }
+
+  &-footer {
+    height: 42px;
+    line-height: 42px;
+    text-align: center;
+  }
+
+  &-header,
+  &-footer {
+    cursor: pointer;
+    background: #F5F5F5;
+    &:hover {
+      .expand-collapse-icon {
+        color: #007aff;
+      }
+    }
+  }
+  // 有拖动元素进来
+  .drag-in {
+    border: 1px dashed #007aff;
+  }
+}