@tongfun/tf-widget 0.1.18 → 0.1.22

package/src/assets/styles/common-table.less

@@ -1,202 +1,202 @@
-
-//通用按钮
-.common-header-button{
-  min-width: 2.5vw;
-  height: 2.222vh;
-  opacity: 1;
-  background: #0c4c8e;
-  border-color: #0c4c8e;
-  border-radius: 2px;
-  padding: 0;
-  margin-right: 0.4166vw;
-  ::v-deep span{
-    opacity: 1;
-    font-size: 0.625vw;
-    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
-    font-weight: 400;
-    color: #ffffff;
-  }
-}
-// 统一按钮悬浮样式
-.common-header-button:hover{
-  background: #0c4c8e;
-  border-color: #0c4c8e;
-}
-// 统一按钮focus样式
-.common-header-button:focus{
-  background: #0c4c8e;
-  border-color: #0c4c8e;
-}
-// 去除button自带margin-left
-::v-deep .el-button+.el-button{
-  margin-left: 0;
-}
-
-//模态框取消按钮为浅色
-.close{
-  background-color: #e5e5e5;
-  border-color: #e5e5e5;
-  ::v-deep span{
-    color: #666;
-  }
-}
-.close:hover{
-  background-color: #e5e5e5;
-  color: #666;
-  border-color: #e5e5e5;
-}
-.close:focus{
-  background-color: #e5e5e5;
-  color: #666;
-  border-color: #e5e5e5;
-
-}
-
-
-//通用下拉按钮
-.common-header-drop-button{
-  height: 2.222vh;
-  margin-right: 0.4166vw;
-  ::v-deep .el-button-group{
-    height: 100%;
-    display: flex;
-  }
-  ::v-deep .el-button{
-    width: 2.5vw;
-    height:  2.222vh;
-    opacity: 1;
-    background: #0c4c8e;
-    padding: 0;
-    border-radius: 2px 0 0 2px;
-    border: 1px solid #0c4c8e;
-    margin-right: 0;
-  }
-  ::v-deep span{
-    font-size: 0.625vw;
-    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
-  }
-  ::v-deep .el-dropdown__caret-button{
-    width: 0.625vw;
-    height: 2.222vh;
-    background-color: #87a7c8;
-    border-radius: 0 2px 2px 0;
-    padding: 0;
-    border: 0 solid #87a7c8;
-    .el-dropdown__icon, el-icon-arrow-down{
-      margin: 0;
-    }
-  }
-  ::v-deep .el-dropdown__caret-button::before{
-    background-color: #87a7c8;
-  }
-  ::v-deep .el-dropdown__icon{
-    width: 0.625vw;
-    font-size: 0.625vw;
-  }
-}
-
-// 通用下拉按钮（文字较多时)
-.common-header-drop-button-more{
-  ::v-deep .el-button{
-    width: 3.5vw;
-  }
-  ::v-deep .el-dropdown__caret-button{
-    width: 0.625vw;
-  }
-}
-
-.common-table{
-  //表头配置
-  ::v-deep .elx-header--row{
-    .elx-header--column:nth-child(1){
-      .elx-cell{
-        width: 63px !important;
-        height: 3.2407vh !important;
-      }
-    }
-  }
-  ::v-deep .elx-table--header{
-    color: #085497;
-    font-size: 0.7291vw;
-    background: #edf0f5;
-    border-radius: 4px 4px 0 0;
-    .elx-cell{
-      width: 100% !important;
-      padding: 0;
-      .elx-cell--title{
-        width: 100% !important;
-      }
-    }
-  }
-  ::v-deep .elx-header--column{
-    font-weight: normal;
-    height: 3.2407vh !important;
-    background-image: none !important;
-  }
-  ::v-deep .elx-body--column{
-    height: 3.2407vh !important;
-    border-top: 1px solid #E0EAFC;
-    border-right: 1px solid #E0EAFC;
-    font-size: 0.625vw;
-    font-weight: normal;
-    color: #666666;
-    background-image: none !important;
-  }
-  // 首列左侧增加border
-  ::v-deep .elx-body--row{
-    .elx-body--column:nth-child(1){
-      border-left: 1px solid #E0EAFC;
-    }
-  }
-  // 末行底部增加border
-  ::v-deep .elx-body--row:nth-last-child(1){
-    .elx-body--column{
-      border-bottom: 1px solid #E0EAFC;
-    }
-  }
-
-  // ::v-deep .elx-table--body{
-  //   //border-collapse: collapse;
-  // }
-  ::v-deep .row--current{
-    background: #EFF7FF;
-  }
-  ::v-deep .elx-table--body-wrapper{
-    background: #FFFFFF;
-    height: 70vh;
-  }
-  @media screen and (max-width: 1366px){
-    ::v-deep .elx-table--body-wrapper{
-      height: 65vh;
-    }
-  }
-  ::v-deep .fixed-right--wrapper{
-    border: none;
-  }
-  ::v-deep .elx-table--footer-wrapper{
-    border: none;
-  }
-  ::v-deep .elx-footer--column{
-    background-image: none !important;
-  }
-  // 合计行
-  ::v-deep .elx-footer--row{
-    td {
-      height: 3.2407vh !important;
-      //border-top: 1px solid #E0EAFC;
-    }
-  }
-  // 表格控制按钮增大
-  ::v-deep .el-icon-setting:before{
-    font-size: 1.0416vw;
-  }
-  /deep/ .el-table__fixed-right {
-    height: 100% !important; //设置高优先，以覆盖内联样式
-  }
-  /deep/ .el-table__fixed {
-    height: 110px !important; //设置高优先，以覆盖内联样式
-  }
-  ::v-deep .elx-table--fixed-right-wrapper.scrolling--middle{
-    box-shadow: none;  // 去除列表控制的fix显示shadow
-  }
-}
+
+//通用按钮
+.common-header-button{
+  min-width: 2.5vw;
+  height: 2.222vh;
+  opacity: 1;
+  background: #0c4c8e;
+  border-color: #0c4c8e;
+  border-radius: 2px;
+  padding: 0;
+  margin-right: 0.4166vw;
+  ::v-deep span{
+    opacity: 1;
+    font-size: 0.625vw;
+    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+// 统一按钮悬浮样式
+.common-header-button:hover{
+  background: #0c4c8e;
+  border-color: #0c4c8e;
+}
+// 统一按钮focus样式
+.common-header-button:focus{
+  background: #0c4c8e;
+  border-color: #0c4c8e;
+}
+// 去除button自带margin-left
+::v-deep .el-button+.el-button{
+  margin-left: 0;
+}
+
+//模态框取消按钮为浅色
+.close{
+  background-color: #e5e5e5;
+  border-color: #e5e5e5;
+  ::v-deep span{
+    color: #666;
+  }
+}
+.close:hover{
+  background-color: #e5e5e5;
+  color: #666;
+  border-color: #e5e5e5;
+}
+.close:focus{
+  background-color: #e5e5e5;
+  color: #666;
+  border-color: #e5e5e5;
+
+}
+
+
+//通用下拉按钮
+.common-header-drop-button{
+  height: 2.222vh;
+  margin-right: 0.4166vw;
+  ::v-deep .el-button-group{
+    height: 100%;
+    display: flex;
+  }
+  ::v-deep .el-button{
+    width: 2.5vw;
+    height:  2.222vh;
+    opacity: 1;
+    background: #0c4c8e;
+    padding: 0;
+    border-radius: 2px 0 0 2px;
+    border: 1px solid #0c4c8e;
+    margin-right: 0;
+  }
+  ::v-deep span{
+    font-size: 0.625vw;
+    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
+  }
+  ::v-deep .el-dropdown__caret-button{
+    width: 0.625vw;
+    height: 2.222vh;
+    background-color: #87a7c8;
+    border-radius: 0 2px 2px 0;
+    padding: 0;
+    border: 0 solid #87a7c8;
+    .el-dropdown__icon, el-icon-arrow-down{
+      margin: 0;
+    }
+  }
+  ::v-deep .el-dropdown__caret-button::before{
+    background-color: #87a7c8;
+  }
+  ::v-deep .el-dropdown__icon{
+    width: 0.625vw;
+    font-size: 0.625vw;
+  }
+}
+
+// 通用下拉按钮（文字较多时)
+.common-header-drop-button-more{
+  ::v-deep .el-button{
+    width: 3.5vw;
+  }
+  ::v-deep .el-dropdown__caret-button{
+    width: 0.625vw;
+  }
+}
+
+.common-table{
+  //表头配置
+  ::v-deep .elx-header--row{
+    .elx-header--column:nth-child(1){
+      .elx-cell{
+        width: 63px !important;
+        height: 3.2407vh !important;
+      }
+    }
+  }
+  ::v-deep .elx-table--header{
+    color: #085497;
+    font-size: 0.7291vw;
+    background: #edf0f5;
+    border-radius: 4px 4px 0 0;
+    .elx-cell{
+      width: 100% !important;
+      padding: 0;
+      .elx-cell--title{
+        width: 100% !important;
+      }
+    }
+  }
+  ::v-deep .elx-header--column{
+    font-weight: normal;
+    height: 3.2407vh !important;
+    background-image: none !important;
+  }
+  ::v-deep .elx-body--column{
+    height: 3.2407vh !important;
+    border-top: 1px solid #E0EAFC;
+    border-right: 1px solid #E0EAFC;
+    font-size: 0.625vw;
+    font-weight: normal;
+    color: #666666;
+    background-image: none !important;
+  }
+  // 首列左侧增加border
+  ::v-deep .elx-body--row{
+    .elx-body--column:nth-child(1){
+      border-left: 1px solid #E0EAFC;
+    }
+  }
+  // 末行底部增加border
+  ::v-deep .elx-body--row:nth-last-child(1){
+    .elx-body--column{
+      border-bottom: 1px solid #E0EAFC;
+    }
+  }
+
+  // ::v-deep .elx-table--body{
+  //   //border-collapse: collapse;
+  // }
+  ::v-deep .row--current{
+    background: #EFF7FF;
+  }
+  ::v-deep .elx-table--body-wrapper{
+    background: #FFFFFF;
+    height: 70vh;
+  }
+  @media screen and (max-width: 1366px){
+    ::v-deep .elx-table--body-wrapper{
+      height: 65vh;
+    }
+  }
+  ::v-deep .fixed-right--wrapper{
+    border: none;
+  }
+  ::v-deep .elx-table--footer-wrapper{
+    border: none;
+  }
+  ::v-deep .elx-footer--column{
+    background-image: none !important;
+  }
+  // 合计行
+  ::v-deep .elx-footer--row{
+    td {
+      height: 3.2407vh !important;
+      //border-top: 1px solid #E0EAFC;
+    }
+  }
+  // 表格控制按钮增大
+  ::v-deep .el-icon-setting:before{
+    font-size: 1.0416vw;
+  }
+  /deep/ .el-table__fixed-right {
+    height: 100% !important; //设置高优先，以覆盖内联样式
+  }
+  /deep/ .el-table__fixed {
+    height: 110px !important; //设置高优先，以覆盖内联样式
+  }
+  ::v-deep .elx-table--fixed-right-wrapper.scrolling--middle{
+    box-shadow: none;  // 去除列表控制的fix显示shadow
+  }
+}

package/src/directives/debounce.js

@@ -0,0 +1,24 @@
+export default {
+  bind: function (el, { value }) {
+    const time = value || 2000
+    el._flag = true
+    el._timer = null
+    el.handler = (e) => {
+      if (!el._flag) {
+        // 无需执行时的操作
+        e.stopImmediatePropagation()
+        return
+      }
+      el._flag = false
+      el._timer = setTimeout(() => {
+        el._flag = true
+        clearTimeout(el._timer)
+        el._timer = null
+      }, time)
+    }
+    el.addEventListener('click', el.handler, true)
+  },
+  unbind: function (el, binding) {
+    el.removeEventListener('click', el.handler, true)
+  }
+}

package/src/index.js

@@ -1,31 +1,31 @@
-
-import TfWidget from '../package/tf-widget'
-import SvgIcon from '../package/svg-icon'
-import TfLayout from '../package/tf-layout'
-import TDataList from '../package/t-data-list'
-import Tinput from '../package/t-input'
-import TfIconPicker from '../package/tf-icon-picker'
-const components = [
-  TfWidget,
-  SvgIcon,
-  TfLayout,
-  TDataList,
-  Tinput,
-  TfIconPicker
-]
-
-const install = function (Vue) {
-  components.forEach(component => {
-    Vue.component(component.name, component)
-  })
-}
-
-export default {
-  install,
-  TfWidget,
-  SvgIcon,
-  TfLayout,
-  TDataList,
-  Tinput,
-  TfIconPicker
-}
+
+import TfWidget from '../package/tf-widget'
+import SvgIcon from '../package/svg-icon'
+import TfLayout from '../package/tf-layout'
+import TDataList from '../package/t-data-list'
+import Tinput from '../package/t-input'
+import TfIconPicker from '../package/tf-icon-picker'
+const components = [
+  TfWidget,
+  SvgIcon,
+  TfLayout,
+  TDataList,
+  Tinput,
+  TfIconPicker
+]
+
+const install = function (Vue) {
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+export default {
+  install,
+  TfWidget,
+  SvgIcon,
+  TfLayout,
+  TDataList,
+  Tinput,
+  TfIconPicker
+}