npm - gyyg-components - Versions diffs - 0.1.6 - Mend

gyyg-components 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/README.md +24 -0
package/babel.config.js +12 -0
package/jsconfig.json +19 -0
package/lib/demo.html +8 -0
package/lib/gyyg-components.common.js +2045 -0
package/lib/gyyg-components.umd.js +2055 -0
package/lib/gyyg-components.umd.min.js +2055 -0
package/package.json +50 -0
package/public/favicon.ico +0 -0
package/public/index.html +17 -0
package/src/App.vue +30 -0
package/src/assets/images/down.png +0 -0
package/src/components/GyygLayout/GyygLayout.js +5 -0
package/src/components/GyygLayout/GyygLayout.vue +396 -0
package/src/components/GyygModal/GyygModal.js +5 -0
package/src/components/GyygModal/GyygModal.vue +327 -0
package/src/components/GyygTable/GyygTable.js +5 -0
package/src/components/GyygTable/GyygTable.vue +78 -0
package/src/directive/el-drag-dialog/drag.js +64 -0
package/src/directive/el-drag-dialog/index.js +13 -0
package/src/directive/feeInput.js +48 -0
package/src/directive/numberInput.js +32 -0
package/src/icons/SvgIcon.vue +61 -0
package/src/icons/index.js +9 -0
package/src/icons/svg/down.svg +1 -0
package/src/icons/svg/up.svg +1 -0
package/src/icons/svgo.yml +22 -0
package/src/index.js +45 -0
package/src/main.js +15 -0
package/src/utils/common.js +25 -0
package/vue.config.js +24 -0

package/package.json ADDED Viewed

@@ -0,0 +1,50 @@
+{
+  "name": "gyyg-components",
+  "version": "0.1.6",
+  "private": false,
+  "main": "lib/gyyg-components.umd.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js --watch",
+    "build": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "babel-plugin-component": "^1.1.1",
+    "core-js": "^3.6.5",
+    "element-resize-detector": "^1.2.4",
+    "element-ui": "2.15.6",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^4.2.1",
+    "less-loader": "^7.3.0",
+    "svg-sprite-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <!-- <gyyg-layout :showMoreBtns='true'></gyyg-layout>
+    <el-input v-number-input v-model='text'></el-input>
+    <svg-icon icon-class='up'></svg-icon> -->
+    <svg-icon icon-class='up'></svg-icon>
+  </div>
+</template>
+<script>
+export default {
+  name: 'App',
+  data(){
+    return{
+        text:''
+    }
+  }
+}
+</script>
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/assets/images/down.png ADDED Viewed

Binary file

package/src/components/GyygLayout/GyygLayout.js ADDED Viewed

@@ -0,0 +1,5 @@
+import GyygLayout from "./GyygLayout.vue";
+GyygLayout.install = Vue => Vue.component(GyygLayout.name, GyygLayout); //注册组件
+export default GyygLayout;

package/src/components/GyygLayout/GyygLayout.vue ADDED Viewed

@@ -0,0 +1,396 @@
+/** * 搜索框+Table+分页 组件 * @author lijiahao **
+@searchTable 点击查询按钮，调用父组件查询方法 * @resetTable
+点击重置按钮，调用父组件重置方法 */
+<template>
+  <div class="search-table" :class="[inDialog ? 'inDialog' : 'outDialog',noTitle ? 'no-title' : '']">
+    <div class="search-contain" v-if="showSearch">
+      <div class='btn-contains'>
+        <span style='display:inline-block;margin-bottom:15px'>
+          <slot name="search-btns" />
+        </span>
+        <span v-show='showMore' style='margin-bottom:15px' class='moreBtnView'>
+          <slot name='more-btns' />
+        </span>
+        <div style='display:inline-block;margin-bottom:15px;'>
+          <el-button class="search-btn" :disabled="disabled"  type="primary" @click="searchTable">
+            查询
+          </el-button>
+          <el-button
+            type="info"
+            icon="el-icon-refresh"
+            @click="resetTable"
+            style='border-color:#E4E4E4;background:#E4E4E4;color:#000;margin-left:5px;'
+          ></el-button>
+          <span v-if='showMoreBtns' @click='showMoreMethods' style='font-size:14px;margin-left:20px;color:#409EFF;cursor:pointer'>
+            <span v-if='!showMore'>
+              <svg-icon icon-class="down" /> 更多查询条件
+            </span>
+            <span v-else>
+              <svg-icon icon-class="up" /> 收起查询条件
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="table-contain">
+        <div class="operate-contain">
+          <slot name="operate-btn" />
+        </div>
+        <slot name="table" />
+        <div v-if="showPage" class="page-item">
+          <el-pagination
+            style='float:right'
+            :current-page="pageInfo.pageNumber"
+            :page-size="pageInfo.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pageInfo.total"
+            :page-sizes="pageSizes"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+          <div v-if='multipleSelection' style='display:inline-block;font-size:14px;color:#ee0a24;float:right;margin-right:10px;height:32px;line-height:32px;'>
+              当前选中<span style='font-size:15px;font-weight:bold;'> {{multipleSelection.length}} </span>条记录，支持跨页选择
+          </div>
+        </div>
+      </div>
+      <div class="shrink-view" v-if="showShrink">
+        <div class="pull-div" @mousedown="pullDown">
+          <img src="@/assets/images/down.png" alt="" class="pull-icon" />
+        </div>
+        <div class="bottom-contain">
+          <slot name="bottom" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty } from "@/utils/common.js";
+let elementResizeDetectorMaker = require("element-resize-detector")
+export default {
+  name: "GyygLayout",
+  props: {
+    //列表主要参数：pageNumber/pageSize/total等
+    pageInfo: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    disabled: {
+      //搜索按钮是否禁用
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      //显示搜索部分
+      type: Boolean,
+      default: true,
+    },
+    showShrink: {
+      //显示上下结构
+      type: Boolean,
+      default: false,
+    },
+    inDialog: {
+      //是否在弹框内
+      type: Boolean,
+      default: false,
+    },
+    noTitle:{
+      //是否具有面包屑高度，以调整组件高度
+      type: Boolean,
+      default: false,
+    },
+    showMoreBtns:{
+      //显示更多按钮
+      type: Boolean,
+      default: false,
+    },
+    pageSizes:{
+      //分页大小
+      type: Array,
+      default:()=>{
+        return [10, 20, 30, 40, 50, 100, 500]
+      },
+    },
+    multipleSelection:{
+      //列表勾选项
+      type: Array,
+      default:()=>{
+        []
+      },
+    },
+    layOutHeight:{
+      //高度
+      type: String,
+      default: 'calc(100vh - 155px)',
+    },
+  },
+  data() {
+    return {
+      showPage: false,
+      isMouseDown: false,
+      isMouseMove: false,
+      clientY: 0,
+      oldHeight: 0,
+      count: 0,
+      showMore:false,
+      orginHeight:0
+    };
+  },
+  watch: {
+    pageInfo: {
+      handler() {
+        this.showPage = !isEmpty(this.pageInfo);
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    if(!this.inDialog){
+      document.getElementsByClassName('search-table')[0].style.height=this.layOutHeight
+    }
+    let erd=elementResizeDetectorMaker()
+    erd.listenTo(document.getElementsByClassName('btn-contains')[0], function(element) {
+      document.getElementsByClassName('search-contain')[0].style.height=element.scrollHeight+15+'px'
+    });
+    if (this.showShrink) {
+      window.addEventListener("mousemove", this.pullMove);
+      window.addEventListener("mouseup", this.pullUp);
+      document.getElementsByClassName("pull-icon")[0].style.transform =
+        "rotate(180deg)";
+      document.getElementsByClassName("shrink-view")[0].style.height = "16px";
+    }
+  },
+  destroyed() {
+    window.removeEventListener("mousemove", this.pullMove);
+    window.removeEventListener("mouseup", this.pullUp);
+  },
+  methods: {
+    showMoreMethods(){
+      this.showMore=!this.showMore
+    },
+    searchTable() {
+      this.$emit("searchTable");
+    },
+    resetTable() {
+      this.$emit("resetTable");
+    },
+    handleCurrentChange(val) {
+      this.$emit("handleCurrentChange", val);
+    },
+    handleSizeChange(val) {
+      this.$emit("handleSizeChange", val);
+    },
+    pullDown(e) {
+      document.getElementsByClassName("shrink-view")[0].style.transition = "";
+      this.count = 0;
+      this.isMouseDown = true;
+      this.isMouseMove = false;
+      this.clientY = e.clientY;
+      this.oldHeight =
+        document.getElementsByClassName("shrink-view")[0].clientHeight;
+    },
+    pullClick() {
+      if (
+        document.getElementsByClassName("shrink-view")[0].style.height === "" ||
+        document.getElementsByClassName("shrink-view")[0].style.height ===
+          "16px"
+      ) {
+        document.getElementsByClassName("shrink-view")[0].style.transition =
+          "1s all";
+        document.getElementsByClassName("shrink-view")[0].style.height =
+          "300px";
+        document.getElementsByClassName("pull-icon")[0].style.transform =
+          "rotate(0deg)";
+      } else {
+        document.getElementsByClassName("shrink-view")[0].style.transition =
+          "1s all";
+        document.getElementsByClassName("shrink-view")[0].style.height = "16px";
+        document.getElementsByClassName("pull-icon")[0].style.transform =
+          "rotate(180deg)";
+      }
+    },
+    pullMove(e) {
+      this.isMouseMove = true;
+      if (this.isMouseDown) {
+        if (
+          document.getElementsByClassName("shrink-view")[0].style.height ===
+          "16px"
+        ) {
+          document.getElementsByClassName("pull-icon")[0].style.transform =
+            "rotate(180deg)";
+        } else {
+          document.getElementsByClassName("pull-icon")[0].style.transform =
+            "rotate(0deg)";
+        }
+        if (this.oldHeight - (e.clientY - this.clientY) > 16) {
+          document.getElementsByClassName("shrink-view")[0].style.height =
+            this.oldHeight - (e.clientY - this.clientY) + "px";
+        } else {
+          document.getElementsByClassName("shrink-view")[0].style.height =
+            "16px";
+        }
+      }
+    },
+    pullUp() {
+      if (!this.isMouseMove) {
+        if (!this.count) {
+          this.pullClick();
+        } else {
+          this.count = 0;
+        }
+      }
+      this.isMouseDown = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.search-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .search-contain {
+    background: #fff;
+    padding: 0 15px;
+    border-radius: 5px;
+    transition: height .8s ease;
+    overflow: hidden;
+    div {
+      display: inline-block;
+      margin-right: 15px;
+    }
+    /deep/ .el-input-group--append,/deep/ .el-input-group--prepend{
+        display:inline-table;
+    }
+    .el-input {
+      width: 180px;
+      margin-right: 15px;
+      /deep/ .el-input__inner {
+        height: 40px;
+      }
+    }
+    .el-select {
+      margin-right: 15px;
+      width: 180px;
+      /deep/ .el-select__caret {
+        line-height: 40px;
+      }
+    }
+    /deep/ .el-input__inner {
+      margin-right: 15px;
+      height: 40px;
+      line-height: 40px;
+    }
+    /deep/ .el-range-editor.el-input__inner {
+      padding: 5px !important;
+    }
+    .reset-btn i {
+      line-height: 0;
+    }
+  }
+  .container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+  .shrink-view {
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    .bottom-contain {
+      height: 100%;
+      width: 100%;
+      overflow: auto;
+    }
+    .pull-div {
+      cursor: pointer;
+      width: 100%;
+      height: 16px;
+      box-shadow: 0px -3px 5px #ccc;
+      border-top-right-radius: 10px;
+      border-top-left-radius: 10px;
+      text-align: center;
+      .pull-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+  .table-contain {
+    border-radius: 5px;
+    padding: 15px;
+    background: #fff;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .el-table {
+      display: flex;
+      flex-direction: column;
+      padding-top: 0;
+    }
+    /deep/ .el-table__body-wrapper {
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+  .operate-contain {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    .el-button {
+      margin: 0;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  .page-item {
+    text-align: right;
+    padding:10px 0;
+  }
+}
+/deep/ .el-table__fixed-body-wrapper{
+  height:calc(100% - 44px);
+}
+.outDialog {
+  .search-contain {
+    padding: 15px;
+    padding-bottom:0;
+    margin-bottom: 10px;
+  }
+  // /deep/ .el-table {
+  //   padding: 20px 0;
+  // }
+  /deep/ .moreBtnView{
+    .el-input{
+      margin-bottom:10px;
+    }
+  }
+}
+</style>
+<style>
+.inDialog .el-table{
+  flex:auto;
+}
+.inDialog{
+  height:auto !important;
+}
+.inDialog .table-contain{
+  padding-bottom:0 !important;
+}
+.inDialog .table-contain .el-table .el-table__body-wrapper {
+  flex: auto;
+}
+/* .no-title{
+  height: calc(100vh - 120px) !important;
+} */
+</style>

package/src/components/GyygModal/GyygModal.js ADDED Viewed

@@ -0,0 +1,5 @@
+import GyygModal from "./GyygModal.vue";
+GyygModal.install = Vue => Vue.component(GyygModal.name, GyygModal); //注册组件
+export default GyygModal;