@tongfun/tf-widget 0.1.21 → 0.1.22

package/package/t-data-list/src/t-table/table-records-selected.vue

@@ -1,159 +1,159 @@
-<template>
-  <div class="main">
-    <div :class="{'tips':true,'selected':visible.context}">
-      <transition name="fade">
-        <div v-show="selectData.length>0" class="select" @click.stop="handleClick">
-          <div class="title">已选</div>
-          <div class="num">{{ selectData.length > 99 ? "99+" : selectData.length }} </div>
-        </div>
-      </transition>
-
-      <transition name="fade">
-        <div v-show="visible.context && selectData.length > 0" class="context">
-          <el-scrollbar>
-            <div v-for="(item, index) in selectData" :key="index" class="context-item">
-              <div class="title">
-                {{ item[showField] }}
-              </div>
-              <i class="el-icon-delete hidden" @click="handleDel(item)" />
-            </div>
-          </el-scrollbar>
-          <div>
-            <el-button type="primary" size="mini" @click="handleClear">清空</el-button>
-          </div>
-        </div>
-
-      </transition>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    selectData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    showField: {
-      type: String,
-      default: 'name'
-    }
-  },
-  data () {
-    return {
-      visible: {
-        context: false// 内容盒子展示
-      }
-    }
-  },
-  methods: {
-    handleClick () {
-      this.visible.context = !this.visible.context
-    },
-    handleDel (value) {
-      this.$emit('del', value)
-    },
-    handleClear () {
-      this.$emit('clear')
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-@contextHeight:40vh;
-  .main{
-    position: relative;
-    .tips{
-      top: 40px;
-      left: -40px;
-      position: absolute;
-      display: flex;
-      transition: all .6s ease-in-out;
-      .select{
-        cursor: pointer;
-        padding: 5px;
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        border: 1px solid rgb(228, 226, 226);
-        border-right: 0;
-        height: 80px;
-        align-items: center;
-        .title{
-          margin: 10px 0;
-          writing-mode: vertical-lr;
-        }
-        .num{
-          width: 30px;
-          height: 30px;
-          color: #fff;
-          background-color: rgb(121, 156, 255);
-          border-radius: 15px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-      .context{
-        width: 20vw;
-        border: 2px solid rgb(228, 226, 226);
-        height: calc(40px+@contextHeight);
-        background-color: #fff;
-        >:nth-child(2){
-          height: 40px;
-          display: flex;
-          padding-right: 10px;
-          justify-content: flex-end;
-          align-items: center;
-          .el-button {
-            background-color: #085699;
-            border:none;
-          }
-        }
-        >:nth-child(1){
-          height: @contextHeight;
-        }
-        .context-item{
-          .title{
-            width:100%;
-            margin-left:20px;
-            box-sizing: border-box;
-            padding: 5px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          cursor: pointer;
-          height: 25px;
-          margin: 0 0 2px 0;
-          background-color: rgb(255, 255, 255);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-           .hidden{
-              display: none;
-              margin-right: 10px;
-            }
-          &:hover .hidden{
-            display: inline-block;
-          }
-        }
-      }
-    }
-    .selected{
-      left: calc(-40px - 20vw);
-    }
-  }
-
-  /deep/.el-scrollbar__wrap{
-    overflow-x: auto;
-  }
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-</style>
+<template>
+  <div class="main">
+    <div :class="{'tips':true,'selected':visible.context}">
+      <transition name="fade">
+        <div v-show="selectData.length>0" class="select" @click.stop="handleClick">
+          <div class="title">已选</div>
+          <div class="num">{{ selectData.length > 99 ? "99+" : selectData.length }} </div>
+        </div>
+      </transition>
+
+      <transition name="fade">
+        <div v-show="visible.context && selectData.length > 0" class="context">
+          <el-scrollbar>
+            <div v-for="(item, index) in selectData" :key="index" class="context-item">
+              <div class="title">
+                {{ item[showField] }}
+              </div>
+              <i class="el-icon-delete hidden" @click="handleDel(item)" />
+            </div>
+          </el-scrollbar>
+          <div>
+            <el-button type="primary" size="mini" @click="handleClear">清空</el-button>
+          </div>
+        </div>
+
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    selectData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    showField: {
+      type: String,
+      default: 'name'
+    }
+  },
+  data () {
+    return {
+      visible: {
+        context: false// 内容盒子展示
+      }
+    }
+  },
+  methods: {
+    handleClick () {
+      this.visible.context = !this.visible.context
+    },
+    handleDel (value) {
+      this.$emit('del', value)
+    },
+    handleClear () {
+      this.$emit('clear')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@contextHeight:40vh;
+  .main{
+    position: relative;
+    .tips{
+      top: 40px;
+      left: -40px;
+      position: absolute;
+      display: flex;
+      transition: all .6s ease-in-out;
+      .select{
+        cursor: pointer;
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        border: 1px solid rgb(228, 226, 226);
+        border-right: 0;
+        height: 80px;
+        align-items: center;
+        .title{
+          margin: 10px 0;
+          writing-mode: vertical-lr;
+        }
+        .num{
+          width: 30px;
+          height: 30px;
+          color: #fff;
+          background-color: rgb(121, 156, 255);
+          border-radius: 15px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .context{
+        width: 20vw;
+        border: 2px solid rgb(228, 226, 226);
+        height: calc(40px+@contextHeight);
+        background-color: #fff;
+        >:nth-child(2){
+          height: 40px;
+          display: flex;
+          padding-right: 10px;
+          justify-content: flex-end;
+          align-items: center;
+          .el-button {
+            background-color: #085699;
+            border:none;
+          }
+        }
+        >:nth-child(1){
+          height: @contextHeight;
+        }
+        .context-item{
+          .title{
+            width:100%;
+            margin-left:20px;
+            box-sizing: border-box;
+            padding: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          cursor: pointer;
+          height: 25px;
+          margin: 0 0 2px 0;
+          background-color: rgb(255, 255, 255);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+           .hidden{
+              display: none;
+              margin-right: 10px;
+            }
+          &:hover .hidden{
+            display: inline-block;
+          }
+        }
+      }
+    }
+    .selected{
+      left: calc(-40px - 20vw);
+    }
+  }
+
+  /deep/.el-scrollbar__wrap{
+    overflow-x: auto;
+  }
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>