n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/NstcExpandCollapse/NstcExpandCollapse.vue

@@ -0,0 +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>

package/src/components/NstcG6Components/NstcExpandCollapse/index.scss

@@ -0,0 +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;
+  }
+}