npmapps 1.0.25 → 1.0.26

package/app/src/directives/filldownTable.js

@@ -0,0 +1,291 @@
+function ensurePosition(el) {
+  const pos = window.getComputedStyle(el).position;
+  if (!pos || pos === "static") el.style.position = "relative";
+}
+
+function createHandle() {
+  const h = document.createElement("span");
+  h.className = "v-filldown-handle";
+  h.style.position = "absolute";
+  h.style.right = "0";
+  h.style.bottom = "0";
+  h.style.width = "10px";
+  h.style.height = "10px";
+  h.style.background = "#409EFF";
+  h.style.clipPath = "polygon(100% 0, 100% 100%, 0 100%)";
+  h.style.cursor = "crosshair";
+  h.style.display = "none";
+  h.style.zIndex = "10";
+  h.style.pointerEvents = "auto";
+  return h;
+}
+
+function setSelected(el, selected) {
+  if (selected) el.classList.add("v-filldown-selected");
+  else el.classList.remove("v-filldown-selected");
+}
+
+function indexOfNode(nodeList, node) {
+  for (let i = 0; i < nodeList.length; i++) if (nodeList[i] === node) return i;
+  return -1;
+}
+
+function getCellInfo(td, tbody) {
+  const tr = td.closest("tr");
+  if (!tr) return null;
+  const rowIndex = indexOfNode(tbody.children, tr);
+  const colIndex = indexOfNode(tr.children, td);
+  return { tr, rowIndex, colIndex };
+}
+
+function buildColumnMap(el, columns) {
+  const map = {};
+  const headerCells = el.querySelectorAll(".el-table__header-wrapper thead tr th .cell");
+  for (let i = 0; i < headerCells.length; i++) {
+    const text = (headerCells[i].textContent || "").trim();
+    const conf = columns.find((c) => c.label === text);
+    if (conf && conf.prop) map[i] = conf.prop;
+  }
+  return map;
+}
+
+function injectStyle() {
+  const styleId = "v-filldown-style";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.innerHTML = `
+    .el-table td.v-filldown-selected{background-color:#ecf5ff !important;}
+    .el-table td .cell.v-filldown-range{
+      box-shadow: inset 0 0 0 2px #409EFF;
+      outline: 2px solid #409EFF;
+      outline-offset: -2px;
+      background-color: rgba(64,158,255,0.18);
+    }
+    .v-filldown-dragging{user-select:none;}
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+function attach(el, binding) {
+  if (el._filldownTableCleanup) {
+    el._filldownTableCleanup();
+  }
+  el._filldownOverlay = null;
+  el._filldownDraggingGlobal = false;
+  if (el._filldownObserver) {
+    try { el._filldownObserver.disconnect(); } catch (e) {}
+    el._filldownObserver = null;
+  }
+  injectStyle();
+  const cfg = binding.value || {};
+  const group = cfg.group || "filldown-table";
+  const columns = Array.isArray(cfg.columns) ? cfg.columns : [];
+  const map = buildColumnMap(el, columns);
+  let tbody = el.querySelector(".el-table__body-wrapper tbody");
+  if (!tbody) {
+    const obs = new MutationObserver(() => {
+      const tb = el.querySelector(".el-table__body-wrapper tbody");
+      if (tb) {
+        obs.disconnect();
+        el._filldownObserver = null;
+        attach(el, binding);
+      }
+    });
+    obs.observe(el, { childList: true, subtree: true });
+    el._filldownObserver = obs;
+    return;
+  }
+
+  function clearSelection() {
+    const selectedTds = tbody.querySelectorAll(".v-filldown-selected");
+    selectedTds.forEach((n) => setSelected(n, false));
+    const rangeCells = tbody.querySelectorAll(".cell.v-filldown-range");
+    rangeCells.forEach((n) => n.classList.remove("v-filldown-range"));
+  }
+
+  function ensureHandle(td) {
+    ensurePosition(td);
+    let handle = td._filldownHandle;
+    if (!handle) {
+      handle = createHandle();
+      td._filldownHandle = handle;
+      td.appendChild(handle);
+      td.addEventListener("mouseenter", () => {
+        const info = getCellInfo(td, tbody);
+        if (info && map[info.colIndex] && !td._filldownDragging) handle.style.display = "block";
+      });
+      td.addEventListener("mouseleave", () => {
+        if (!td._filldownDragging) handle.style.display = "none";
+      });
+      handle.addEventListener("mousedown", (e) => startDrag(e, td));
+    }
+    return handle;
+  }
+
+  function findCellByPoint(clientX, clientY) {
+    let t = document.elementFromPoint(clientX, clientY);
+    while (t && t !== document.body) {
+      if (t.tagName === "TD") return t;
+      t = t.parentElement;
+    }
+    return null;
+  }
+
+  function startDrag(e, startTd) {
+    if (el._filldownDraggingGlobal) return;
+    el._filldownDraggingGlobal = true;
+    const state = el._filldownTableState || {};
+    const getRows = state.getRows || (() => []);
+    const rows = getRows();
+    const info = getCellInfo(startTd, tbody);
+    if (!info) return;
+    const prop = map[info.colIndex];
+    if (!prop || !Array.isArray(rows)) return;
+    const startIndex = info.rowIndex;
+    const startValue = rows[startIndex] ? rows[startIndex][prop] : undefined;
+    let lastIndex = startIndex;
+    startTd._filldownDragging = true;
+    const handle = startTd._filldownHandle;
+    if (handle) handle.style.display = "block";
+    el.classList.add("v-filldown-dragging");
+    const bodyWrapper = el.querySelector(".el-table__body-wrapper");
+    const overlayContainer = tbody;
+    ensurePosition(overlayContainer);
+    let overlay = el._filldownOverlay;
+    if (!overlay) {
+      overlay = document.createElement("div");
+      overlay.className = "v-filldown-overlay";
+      overlay.style.position = "absolute";
+      overlay.style.pointerEvents = "none";
+      overlay.style.zIndex = "9";
+      overlay.style.border = "2px solid #409EFF";
+      overlay.style.background = "rgba(64,158,255,0.12)";
+      overlay.style.display = "none";
+      el._filldownOverlay = overlay;
+      overlayContainer.appendChild(overlay);
+    }
+    const startCell = startTd.querySelector(".cell") || startTd;
+
+    function updateOverlayRect(currTd) {
+      if (!overlay) return;
+      const currCell = currTd ? (currTd.querySelector(".cell") || currTd) : startCell;
+      const containerRect = overlayContainer.getBoundingClientRect();
+      const startRect = (startTd.querySelector(".cell") || startTd).getBoundingClientRect();
+      const currRect = currCell.getBoundingClientRect();
+      overlay.style.display = "block";
+      overlay.style.left = `${startRect.left - containerRect.left}px`;
+      overlay.style.top = `${startRect.top - containerRect.top}px`;
+      overlay.style.width = `${startRect.width}px`;
+      overlay.style.height = `${currRect.bottom - startRect.top}px`;
+    }
+
+    function onMove(ev) {
+      const t = findCellByPoint(ev.clientX, ev.clientY);
+      if (t) {
+        const i = getCellInfo(t, tbody);
+        if (i && i.colIndex === info.colIndex && i.rowIndex !== lastIndex) {
+          clearSelection();
+          if (i.rowIndex > startIndex) {
+            for (let r = startIndex + 1; r <= i.rowIndex; r++) {
+              const tr = tbody.children[r];
+              if (tr && tr.children[info.colIndex]) {
+                const td = tr.children[info.colIndex];
+                setSelected(td, true);
+                const cellDiv = td.querySelector(".cell");
+                if (cellDiv) cellDiv.classList.add("v-filldown-range");
+              }
+            }
+          }
+          updateOverlayRect(t);
+          lastIndex = i.rowIndex;
+        }
+      }
+    }
+
+    function onScroll() {
+      const currTr = tbody.children[lastIndex];
+      const currTd = currTr && currTr.children[info.colIndex] ? currTr.children[info.colIndex] : null;
+      updateOverlayRect(currTd);
+    }
+
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      window.removeEventListener("mouseup", onUp);
+      bodyWrapper && bodyWrapper.removeEventListener("scroll", onScroll, true);
+      startTd._filldownDragging = false;
+      if (handle) handle.style.display = "none";
+      el.classList.remove("v-filldown-dragging");
+      if (overlay) overlay.style.display = "none";
+      el._filldownDraggingGlobal = false;
+      if (typeof lastIndex === "number" && lastIndex > startIndex) {
+        for (let r = startIndex + 1; r <= lastIndex; r++) {
+          if (rows[r] && prop in rows[r]) {
+            const next = Object.assign({}, rows[r], { [prop]: startValue });
+            if (typeof rows.splice === "function") rows.splice(r, 1, next);
+            else rows[r][prop] = startValue;
+          }
+        }
+      }
+      clearSelection();
+    }
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    window.addEventListener("mouseup", onUp);
+    bodyWrapper && bodyWrapper.addEventListener("scroll", onScroll, true);
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function onMouseOver(e) {
+    const td = e.target.tagName === "TD" ? e.target : e.target.closest("td");
+    if (!td) return;
+    const info = getCellInfo(td, tbody);
+    if (!info) return;
+    if (!map[info.colIndex]) return;
+    const h = ensureHandle(td);
+    if (h && !td._filldownDragging) h.style.display = "block";
+  }
+
+  el._filldownTableCleanup = () => {
+    el.removeEventListener("mouseover", onMouseOver, true);
+    const hs = el.querySelectorAll(".v-filldown-handle");
+    hs.forEach((h) => h.remove());
+    if (el._filldownOverlay) {
+      try { el._filldownOverlay.remove(); } catch (e) {}
+      el._filldownOverlay = null;
+    }
+    if (el._filldownObserver) {
+      try { el._filldownObserver.disconnect(); } catch (e) {}
+      el._filldownObserver = null;
+    }
+  };
+
+  el.addEventListener("mouseover", onMouseOver, true);
+  const getRows = () => {
+    const v = el.__vue__;
+    const arr = v && v.$props ? v.$props.data : null;
+    return Array.isArray(arr) ? arr : (cfg.rows || []);
+  };
+  el._filldownTableState = { group, map, getRows };
+}
+
+export default {
+  inserted(el, binding) {
+    attach(el, binding);
+  },
+  update(el, binding) {
+    attach(el, binding);
+  },
+  componentUpdated(el, binding) {
+    attach(el, binding);
+  },
+  unbind(el) {
+    if (el._filldownTableCleanup) el._filldownTableCleanup();
+    el._filldownTableCleanup = null;
+    el._filldownTableState = null;
+  },
+};

package/app/src/main.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import Router from 'vue-router'
+import VueCodemirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import store from './store'
+import filldown from './directives/filldown'
+import filldownTable from './directives/filldownTable'
+Vue.use(VueCodemirror)
+Vue.config.productionTip = false
+
+Vue.use(Router)
+Vue.use(ElementUI)
+Vue.directive('filldown', filldown)
+Vue.directive('filldown-table', filldownTable)
+
+new Vue({
+  store,
+  router,
+  render: h => h(App),
+}).$mount('#app')
+// 自适应布局代码
+function setRem() {
+  const baseSize = 16; // 基准字体大小
+  const scale = document.documentElement.clientWidth / 1920; // 1920为设计稿宽度
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
+  console.log('setRem', baseSize * Math.min(scale, 2) + 'px');
+}
+window.onload = function() {
+  console.log('onload');
+  setRem();
+}
+
+// 改变窗口大小时重新设置rem
+window.onresize = function() {
+  setRem();
+}

package/app/src/router/index.js

@@ -0,0 +1,63 @@
+import VueRouter from 'vue-router'
+// 引入组件
+// import ExampleComponent from './components/ExampleComponent.vue'
+
+const routes = [
+ {
+    path: '/',
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+    meta: {
+      title: 'Vue2子应用'
+    }
+ },
+
+ // router-jump
+ {
+  path: '/router-jump',
+  name: 'RouterJump',
+  component: () => import('../views/RouterJump.vue'),
+  meta: {
+    title: '路由跳转'
+  }
+ },
+ // css
+ {
+  path: '/css',
+  name: 'Css',
+  component: () => import('../views/css.vue'),
+  meta: {
+    title: 'css'
+  }
+ },
+ {
+  path: '/extend',
+  name: 'Extend',
+  component: () => import('../views/Extend/index.vue'),
+  meta: {
+    title: '扩展'
+  }
+ },
+ {
+  path: 'echarts',
+  name: 'Echarts',
+  component: () => import('../views/echarts/index.vue'), 
+  meta: {
+    title: 'echarts' 
+  }
+ },
+ {
+   path: 'element',
+   name: 'Element',
+   component: () => import('../views/element/index.vue'),
+   meta: {
+     title: 'element'
+   }
+ },
+]
+
+const router = new VueRouter({
+  routes // (缩写) 相当于 routes: routes
+})
+
+export default router

package/app/src/store/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    radioValue: ''
+  },
+  getters: {
+    radioValue ({ radioValue }) {
+      return radioValue
+    }
+  },
+  mutations: {
+
+    setRadioValue (state, newVAlue) {
+      state.radioValue = newVAlue
+    }
+  },
+  actions: {},
+  modules: {}
+})

package/app/src/utils/winBox.js

@@ -0,0 +1,23 @@
+import WinBox from 'winbox/src/js/winbox.js';
+import 'winbox/dist/css/winbox.min.css';
+
+export const openWinBox = ({
+    mount,
+    width,
+    height,
+    title,
+    url
+}) => {
+
+    const win = new WinBox("标题", {
+        width: '500px',
+        height: '400px',
+        x: "center",
+        y: "center",
+        mount,
+        title,
+        url
+      });
+
+      return win;
+}

package/app/src/views/Extend/A.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>A</div>
+</template>
+
+<script>
+  export default {
+    name: 'A',
+    created() {
+      console.log('A created')
+    }
+  }
+</script>

package/app/src/views/Extend/B.vue

@@ -0,0 +1,10 @@
+<script>
+  import A from "./A.vue";
+  export default {
+    extends: A,
+    name: 'B',
+    created() {
+      console.log('B created')
+    }
+  }
+</script>

package/app/src/views/Extend/MagicalComponentsForELFormItem.vue

@@ -0,0 +1,87 @@
+<script>
+import { FormItem } from "element-ui";
+import Vue from "vue";
+import PageHeader from "@/components/PageHeader/index.vue";
+Vue.component("ell-form-item", {
+  extends: FormItem,
+  async mounted() {
+    await this.$nextTick();
+    if (!this.$el.children && !this.$el.children.length) return;
+    const label = Array.from(this.$el.children).find((item) =>
+      item.classList.contains("el-form-item__label")
+    );
+    if (!label) return;
+
+    // 如果有noEllipsis属性
+    if (this.$attrs.noEllipsis !== undefined) {
+      return;
+    }
+
+    // 获取元素的行高
+    const lineHeight = parseFloat(getComputedStyle(label).lineHeight);
+    // 获取元素的高度
+    const scrollHeight = label.scrollHeight;
+    // 计算元素的行数
+    const lineCount = Math.round(scrollHeight / lineHeight);
+    // 如果行数大于2
+    if (lineCount > 2) {
+      const newLineHeight = scrollHeight / lineCount / 2;
+      // 设置元素的行高
+      label.style.lineHeight = newLineHeight + "px";
+      label.style.overflow = "hidden";
+      label.style.textOverflow = "ellipsis";
+      label.style.display = "-webkit-box";
+      label.style.webkitBoxOrient = "vertical";
+      label.style.webkitLineClamp = "2";
+      label.title = label.innerText;
+    }
+    // 如果行数大于1
+    if (lineCount > 1) {
+      const newLineHeight = scrollHeight / lineCount / 2;
+      // 设置元素的行高
+      label.style.lineHeight = newLineHeight + "px";
+    }
+  },
+});
+export default {
+  name: "MagicalComponentsForELFormItem",
+  components: {
+    PageHeader,
+  },
+};
+</script>
+<template>
+  <div>
+    <PageHeader
+      title="魔改 el-form-item"
+      description="解决 el-form-item label 文字过多时的换行和省略问题"
+      usage="&lt;ell-form-item label=&quot;长文字&quot; /&gt; 添加 noEllipsis 属性可禁用省略"
+    />
+    <el-form label-width="100px">
+      <el-form-item label="活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </el-form-item>
+      <el-form-item label="活动名称活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </el-form-item>
+      <el-form-item label="活动名称活动名称活动名称活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </el-form-item>
+    </el-form>
+
+    <el-form label-width="100px">
+      <ell-form-item label="活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </ell-form-item>
+      <ell-form-item label="活动名称活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </ell-form-item>
+      <ell-form-item label="活动名称活动名称活动名称活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </ell-form-item>
+      <ell-form-item noEllipsis label="活动名称活动名称活动名称活动名称">
+        <el-input placeholder="请输入活动名称" />
+      </ell-form-item>
+    </el-form>
+  </div>
+</template>

package/app/src/views/Extend/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="extend">
+    <el-button @click="winbox">winbox</el-button>
+    <span>{{ $route.query.a }}</span>
+    <el-tabs type="border-card">
+      <el-tab-pane label="鼠标滚轮控制横向滚动">
+        <tableMouseHorizontalWheel />
+      </el-tab-pane>
+      <el-tab-pane label="魔改el-form-item lable换行问题">
+        <MagicalComponentsForELFormItem />
+      </el-tab-pane>
+      <el-tab-pane label="vue2继承组件的生命周期会覆盖原有的生命周期吗">
+        <!-- <A></A> -->
+        <B></B>
+        <C></C>
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import A from "./A.vue";
+import B from "./B.vue";
+import MagicalComponentsForELFormItem from "./MagicalComponentsForELFormItem.vue";
+import tableMouseHorizontalWheel from "./tableMouseHorizontalWheel.vue";
+
+import { openWinBox } from "@/utils/winBox";
+Vue.component("C", {
+  extends: A,
+  created() {
+    console.log("C created");
+  },
+});
+export default {
+  name: "App",
+  components: {
+    A,
+    B,
+    MagicalComponentsForELFormItem,
+    tableMouseHorizontalWheel,
+  },
+  created() {
+    console.log("App created", this.$route.query);
+  },
+  mounted() {
+    console.log(this);
+  },
+  methods: {
+    winbox() {
+      openWinBox({
+        title: "winbox",
+        mount: this.$el,
+      });
+    },
+  },
+};
+</script>