@soei/flyweight 0.0.3 → 0.0.5

package/LICENSE

@@ -0,0 +1,7 @@
+The ISC License (ISC)
+
+Copyright 2016-present  soei(alwbg@163.com)
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -9,6 +9,27 @@
 
 ### 更新日志
 
+### `0.0.5`
+
+- #### 扩展 `width` 赋值
+  ```html
+  <!-- 添加`百分比`计算, 计算顺序, 左 => 右 -->
+  <s-flyweight width="100% / 2 - 10px"></s-flyweight>
+  <s-flyweight width="calc(100% - 100px)"></s-flyweight>
+  <s-flyweight width="100% - 100px"></s-flyweight>
+  <s-flyweight width="100px - 10px"></s-flyweight>
+  <s-flyweight width="100px"></s-flyweight>
+  ```
+- #### 优化了 slot `end` 的呈现逻辑
+
+  ```html
+  <!-- onend为滑动到底时, 回调函数 -->
+  <s-flyweight :flys="..." @onend="...">
+    <template #default="{ data, index }"> 呈现内容 {{data.*}} </template>
+    <template #end> ...显示在最下面的相关信息 </template>
+  </s-flyweight>
+  ```
+
 ### `0.0.3`
 
 - #### 新增 `:top`

package/dist/Flyweight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@soei/util"),h=require("vue");const p=(e,t)=>{const i=e.__vccOpts||e;for(const[r,l]of t)i[r]=l;return i};let m=e=>e==null||e==null,x=(...e)=>{console.info("::::FLYWEIGHT",...e)};const k={name:"Flyweight",props:{flys:{type:Array,default:()=>[]},width:{type:Number,default:0},height:{type:Number,default:100},offset:{type:Array,default:()=>[0,0]},lazy:{type:Number,default:100},view:{type:Object,default:()=>null},index:{type:Number,default:0},top:{type:Number,default:!1},left:{type:Number,default:!1}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Height:null,column:1,row:1,fwheight:10,count:0,task:[]}},watch:{flys(e){this.count=e.length,this.re();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0},index(e){this.setindex(e)},top(e){this.flyweight.scrollTop=e},left(e){this.flyweight.scrollLeft=e}},mounted(){this.flyweights=[],this.$set||(this.$set=(e,t,i)=>{e[t]=i}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){x(e)}},methods:{cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){c.runer([this.cheackflys,t=>{t=t||{};let i=t.index||c.each(this.flys,(r,l,n,s)=>{if(l[n]==s)return r},t.picker,t.id);m(i)||this.setindex(i)}],this,e)},setindex(e){c.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let i=t/this.column>>0,r=this.fwheight;(this.flyweight.scrollTop/r>>0)+this.row-i-1>0||(this.flyweight.scrollTop=i*r,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{c.runer(e)},t||this.lazy)},run(e){let t=c.picker(e.target,"scrollTop=>top");c.each(this.flyweights,(i,r,l,n,s,o,u,y)=>{if(l=i/s>>0,u=l+n*(+(l<o%n)+(o/n>>0)),y=u*s+i%s,y>=this.count){this.lazyrun(()=>this.$emit("onend",!0));return}r.index=u,r.top=r.index*this.fwheight,r.data=this.flys[y]},null,this.row,this.column,t.top/this.fwheight>>0)},scroll(e){this.run(e||{target:this.flyweight})},re(){let e=this.flyweight,t=c.picker(e,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[i,r]=this.offset,l=this.width;l==0&&(l=t.width);let n=l+i,s=this.height+r,o=t.width/n>>0,u=t.height/s>>0;this.row=u+2,this.column=o,this.fwheight=s;let y=t.width%n/(o-1)>>0;this.Height=Math.ceil(this.count/o)*s;let d=Math.min(this.count,o*this.row),a=d-1,f,g;for(;d-- >0;)f=a-d,g=this.flys[f],e=this.flyweights[f],this.$set(this.flyweights,f,{data:g,top:(f/o>>0)*s,left:f%o*(n+y),index:f/o>>0});this.flyweights.length=a+1,this.scroll()})}}};function _(e,t,i,r,l,n){return h.openBlock(),h.createElementBlock("div",{ref:"flyweight",class:h.normalizeClass(["flyweight",{"flyweight-active":l.actice}]),style:h.normalizeStyle({"--width":i.width?i.width+"px":"100%","--height":i.height+"px"}),onScroll:t[0]||(t[0]=(...s)=>n.scroll&&n.scroll(...s))},[h.createElementVNode("div",{class:"flyweight-all",style:h.normalizeStyle({"--flyweight-height":l.Height+"px"})},[(h.openBlock(!0),h.createElementBlock(h.Fragment,null,h.renderList(l.flyweights,(s,o)=>(h.openBlock(),h.createElementBlock("div",{key:o,style:h.normalizeStyle({top:s.top+"px",left:s.left+"px"})},[h.renderSlot(e.$slots,"default",{data:s.data,index:s.index},void 0,!0)],4))),128))],4),l.flyweights.length?h.renderSlot(e.$slots,"end",{key:0},void 0,!0):h.createCommentVNode("",!0)],38)}const w=p(k,[["render",_],["__scopeId","data-v-075d9b23"]]),v=[w],b={install(e){v.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=w;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@soei/util"),o=require("vue");const v=(e,t)=>{const l=e.__vccOpts||e;for(const[n,i]of t)l[n]=i;return l};let b=e=>e==null||e==null,z=/(\d+|[+\-\*/]|%)/g,m={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t,l)=>parseFloat(e)/100*l},k=(e,t)=>{let l;if(l=u.runer("match",e,z)){let n=l.length,i,h=0,s,r=[];for(;n--;)h=l.shift(),h in m?(i&&r.push(i),h==="%"&&(r.length=2),s=h):+h&&r.push(+h),r.length==2&&(r.push(t),i=m[s].apply(null,r),r.length=0);+i||(i=+r.pop()),e=i>>0}return e},T=(...e)=>{console.info("::::FLYWEIGHT",...e)};const H={name:"Flyweight",props:{flys:{type:Array,default:()=>[]},width:{type:Number,default:0},height:{type:Number,default:100},offset:{type:Array,default:()=>[0,0]},lazy:{type:Number,default:100},view:{type:Object,default:()=>null},index:{type:Number,default:0},top:{type:Number,default:!1},left:{type:Number,default:!1}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,Height:null,column:1,row:1,fwheight:10,count:0,task:[],realW:0,realH:0}},watch:{flys(e){this.count=e.length,this.re();let t=this.task.shift();t&&this.$nextTick(()=>{this.setview(t)})},view:{handler(e){this.setview(e)},immediate:!0},index(e){this.setindex(e)},top(e){this.flyweight.scrollTop=e},left(e){this.flyweight.scrollLeft=e}},mounted(){this.flyweights=[],this.$set||(this.$set=(e,t,l)=>{e[t]=l}),this.setindex(this.index);try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(e){T(e)}},methods:{trigger(e){this.lazyrun(()=>this.$emit(e,!0))},cheackflys(e){if(!this.flys.length)return e&&this.task.push(e),!0},setview(e){u.runer([this.cheackflys,t=>{t=t||{};let l=t.index||u.each(this.flys,(n,i,h,s)=>{if(i[h]==s)return n},t.picker,t.id);b(l)||this.setindex(l)}],this,e)},setindex(e){u.runer([this.cheackflys,({index:t})=>{this.$nextTick(()=>{let l=t/this.column>>0,n=this.fwheight;(this.flyweight.scrollTop/n>>0)+this.row-l-1>0||(this.flyweight.scrollTop=l*n,this.scroll())})}],this,{index:e})},lazyrun(e,t){clearTimeout(this.time),this.time=setTimeout(()=>{u.runer(e)},t||this.lazy)},run(e){let t=u.picker(e.target,"scrollTop=>top");u.each(this.flyweights,(l,n,i,h,s,r,c,f)=>{if(i=l/s>>0,c=i+h*(+(i<r%h)+(r/h>>0)),f=c*s+l%s,f>=this.count){this.trigger("onend");return}n.index=c,n.top=c*this.fwheight,n.data=this.flys[f]},null,this.row,this.column,t.top/this.fwheight>>0)},scroll(e){this.run(e||{target:this.flyweight})},re(){let e=this.count||this.flys.length,t=this.flyweights;if(!e)return t.length=e;let l=this.flyweight,n=u.picker(l,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[i,h]=this.offset,s=n.width,r=n.height,c=(k(this.width,s)||s)+i,f=k(this.height,r)+h;this.realW=c-i,this.realH=f-h;let a=s/c>>0||1,y=r/f>>0;this.row=y+2,this.column=a,this.fwheight=f;let _=s%c/(a-1)>>0;this.Height=Math.ceil(e/a)*f;let d=Math.min(e,a*this.row),p=d-1,g,w;for(;d-- >0;)g=p-d,w=this.flys[g],l=t[g],y=g/a>>0,this.$set(t,g,{data:w,top:y*f,left:g%a*(c+_),index:y});t.length=p+1,r/f>p&&this.trigger("onend"),this.scroll()})}}},N=["data"];function S(e,t,l,n,i,h){return o.openBlock(),o.createElementBlock("div",{ref:"flyweight",class:o.normalizeClass(["flyweight",{"flyweight-active":i.actice}]),style:o.normalizeStyle({"--width":i.realW+"px","--height":i.realH+"px"}),onScroll:t[0]||(t[0]=(...s)=>h.scroll&&h.scroll(...s))},[o.createElementVNode("div",{class:"flyweight-all",style:o.normalizeStyle({"--flyweight-height":i.Height+"px"})},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.flyweights,(s,r)=>(o.openBlock(),o.createElementBlock("div",{key:r,data:s.top,style:o.normalizeStyle({top:s.top+"px",left:s.left+"px"})},[o.renderSlot(e.$slots,"default",{data:s.data,index:s.index},void 0,!0)],12,N))),128))],4),i.flyweights.length?o.renderSlot(e.$slots,"end",{key:0},void 0,!0):o.createCommentVNode("",!0)],38)}const x=v(H,[["render",S],["__scopeId","data-v-44af801a"]]),F=[x],$={install(e){F.forEach(t=>{e.component("s-"+t.name.toLowerCase(),t)})}};exports.Flyweight=x;exports.default=$;

package/dist/Flyweight.js

@@ -1,15 +1,30 @@
-import { runer as y, each as m, picker as x } from "@soei/util";
-import { openBlock as d, createElementBlock as g, normalizeClass as k, normalizeStyle as w, createElementVNode as v, Fragment as b, renderList as z, renderSlot as _, createCommentVNode as T } from "vue";
-const N = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [l, s] of e)
-    i[l] = s;
-  return i;
+import { runer as g, each as _, picker as k } from "@soei/util";
+import { openBlock as p, createElementBlock as w, normalizeClass as H, normalizeStyle as m, createElementVNode as N, Fragment as $, renderList as F, renderSlot as v, createCommentVNode as L } from "vue";
+const O = (t, e) => {
+  const s = t.__vccOpts || t;
+  for (const [n, i] of e)
+    s[n] = i;
+  return s;
 };
-let $ = (t) => t == null || t == null, F = (...t) => {
+let E = (t) => t == null || t == null, W = /(\d+|[+\-\*/]|%)/g, b = {
+  "+": (t, e) => t + e,
+  "-": (t, e) => t - e,
+  "*": (t, e) => t * e,
+  "/": (t, e) => t / e,
+  "%": (t, e, s) => parseFloat(t) / 100 * s
+}, z = (t, e) => {
+  let s;
+  if (s = g("match", t, W)) {
+    let n = s.length, i, h = 0, l, r = [];
+    for (; n--; )
+      h = s.shift(), h in b ? (i && r.push(i), h === "%" && (r.length = 2), l = h) : +h && r.push(+h), r.length == 2 && (r.push(e), i = b[l].apply(null, r), r.length = 0);
+    +i || (i = +r.pop()), t = i >> 0;
+  }
+  return t;
+}, C = (...t) => {
   console.info("::::FLYWEIGHT", ...t);
 };
-const H = {
+const I = {
   name: "Flyweight",
   props: {
     flys: {
@@ -63,7 +78,9 @@ const H = {
       row: 1,
       fwheight: 10,
       count: 0,
-      task: []
+      task: [],
+      realW: 0,
+      realH: 0
     };
   },
   watch: {
@@ -91,56 +108,59 @@ const H = {
     }
   },
   mounted() {
-    this.flyweights = [], this.$set || (this.$set = (t, e, i) => {
-      t[e] = i;
+    this.flyweights = [], this.$set || (this.$set = (t, e, s) => {
+      t[e] = s;
     }), this.setindex(this.index);
     try {
       new ResizeObserver(() => {
         this.re(), this.$emit("resize");
       }).observe(this.flyweight);
     } catch (t) {
-      F(t);
+      C(t);
     }
   },
   methods: {
+    trigger(t) {
+      this.lazyrun(() => this.$emit(t, !0));
+    },
     cheackflys(t) {
       if (!this.flys.length)
         return t && this.task.push(t), !0;
     },
     setview(t) {
-      y([this.cheackflys, (e) => {
+      g([this.cheackflys, (e) => {
         e = e || {};
-        let i = e.index || m(this.flys, (l, s, r, h) => {
-          if (s[r] == h)
-            return l;
+        let s = e.index || _(this.flys, (n, i, h, l) => {
+          if (i[h] == l)
+            return n;
         }, e.picker, e.id);
-        $(i) || this.setindex(i);
+        E(s) || this.setindex(s);
       }], this, t);
     },
     setindex(t) {
-      y([this.cheackflys, ({ index: e }) => {
+      g([this.cheackflys, ({ index: e }) => {
         this.$nextTick(() => {
-          let i = e / this.column >> 0, l = this.fwheight;
-          (this.flyweight.scrollTop / l >> 0) + this.row - i - 1 > 0 || (this.flyweight.scrollTop = i * l, this.scroll());
+          let s = e / this.column >> 0, n = this.fwheight;
+          (this.flyweight.scrollTop / n >> 0) + this.row - s - 1 > 0 || (this.flyweight.scrollTop = s * n, this.scroll());
         });
       }], this, { index: t });
     },
     lazyrun(t, e) {
       clearTimeout(this.time), this.time = setTimeout(() => {
-        y(t);
+        g(t);
       }, e || this.lazy);
     },
     run(t) {
-      let e = x(t.target, "scrollTop=>top");
-      m(
+      let e = k(t.target, "scrollTop=>top");
+      _(
         this.flyweights,
-        (i, l, s, r, h, n, f, c) => {
-          if (s = i / h >> 0, f = s + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
-          (+(s < n % r) + (n / r >> 0)), c = f * h + i % h, c >= this.count) {
-            this.lazyrun(() => this.$emit("onend", !0));
+        (s, n, i, h, l, r, f, o) => {
+          if (i = s / l >> 0, f = i + h * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(i < r % h) + (r / h >> 0)), o = f * l + s % l, o >= this.count) {
+            this.trigger("onend");
             return;
           }
-          l.index = f, l.top = l.index * this.fwheight, l.data = this.flys[c];
+          n.index = f, n.top = f * this.fwheight, n.data = this.flys[o];
         },
         null,
         this.row,
@@ -153,69 +173,73 @@ const H = {
       this.run(t || { target: this.flyweight });
     },
     re() {
-      let t = this.flyweight, e = x(t, "clientHeight=>height,clientWidth=>width");
+      let t = this.count || this.flys.length, e = this.flyweights;
+      if (!t)
+        return e.length = t;
+      let s = this.flyweight, n = k(s, "clientHeight=>height,clientWidth=>width");
       this.$nextTick(() => {
-        let [i, l] = this.offset, s = this.width;
-        s == 0 && (s = e.width);
-        let r = s + i, h = this.height + l, n = e.width / r >> 0, f = e.height / h >> 0;
-        this.row = f + 2, this.column = n, this.fwheight = h;
-        let c = e.width % r / (n - 1) >> 0;
-        this.Height = Math.ceil(this.count / n) * h;
-        let u = Math.min(this.count, n * this.row), a = u - 1, o, p;
-        for (; u-- > 0; )
-          o = a - u, p = this.flys[o], t = this.flyweights[o], this.$set(this.flyweights, o, {
-            data: p,
-            top: (o / n >> 0) * h,
-            left: o % n * (r + c),
-            index: o / n >> 0
+        let [i, h] = this.offset, l = n.width, r = n.height, f = (z(this.width, l) || l) + i, o = z(this.height, r) + h;
+        this.realW = f - i, this.realH = o - h;
+        let a = l / f >> 0 || 1, u = r / o >> 0;
+        this.row = u + 2, this.column = a, this.fwheight = o;
+        let T = l % f / (a - 1) >> 0;
+        this.Height = Math.ceil(t / a) * o;
+        let y = Math.min(t, a * this.row), d = y - 1, c, x;
+        for (; y-- > 0; )
+          c = d - y, x = this.flys[c], s = e[c], u = c / a >> 0, this.$set(e, c, {
+            data: x,
+            top: u * o,
+            left: c % a * (f + T),
+            index: u
           });
-        this.flyweights.length = a + 1, this.scroll();
+        e.length = d + 1, r / o > d && this.trigger("onend"), this.scroll();
       });
     }
   }
-};
-function L(t, e, i, l, s, r) {
-  return d(), g("div", {
+}, S = ["data"];
+function A(t, e, s, n, i, h) {
+  return p(), w("div", {
     ref: "flyweight",
-    class: k(["flyweight", {
-      "flyweight-active": s.actice
+    class: H(["flyweight", {
+      "flyweight-active": i.actice
     }]),
-    style: w({
-      "--width": i.width ? i.width + "px" : "100%",
-      "--height": i.height + "px"
+    style: m({
+      "--width": i.realW + "px",
+      "--height": i.realH + "px"
     }),
-    onScroll: e[0] || (e[0] = (...h) => r.scroll && r.scroll(...h))
+    onScroll: e[0] || (e[0] = (...l) => h.scroll && h.scroll(...l))
   }, [
-    v("div", {
+    N("div", {
       class: "flyweight-all",
-      style: w({
-        "--flyweight-height": s.Height + "px"
+      style: m({
+        "--flyweight-height": i.Height + "px"
       })
     }, [
-      (d(!0), g(b, null, z(s.flyweights, (h, n) => (d(), g("div", {
-        key: n,
-        style: w({
-          top: h.top + "px",
-          left: h.left + "px"
+      (p(!0), w($, null, F(i.flyweights, (l, r) => (p(), w("div", {
+        key: r,
+        data: l.top,
+        style: m({
+          top: l.top + "px",
+          left: l.left + "px"
         })
       }, [
-        _(t.$slots, "default", {
-          data: h.data,
-          index: h.index
+        v(t.$slots, "default", {
+          data: l.data,
+          index: l.index
         }, void 0, !0)
-      ], 4))), 128))
+      ], 12, S))), 128))
     ], 4),
-    s.flyweights.length ? _(t.$slots, "end", { key: 0 }, void 0, !0) : T("", !0)
+    i.flyweights.length ? v(t.$slots, "end", { key: 0 }, void 0, !0) : L("", !0)
   ], 38);
 }
-const O = /* @__PURE__ */ N(H, [["render", L], ["__scopeId", "data-v-075d9b23"]]), E = [O], S = {
+const B = /* @__PURE__ */ O(I, [["render", A], ["__scopeId", "data-v-44af801a"]]), M = [B], G = {
   install(t) {
-    E.forEach((e) => {
+    M.forEach((e) => {
       t.component("s-" + e.name.toLowerCase(), e);
     });
   }
 };
 export {
-  O as Flyweight,
-  S as default
+  B as Flyweight,
+  G as default
 };

package/dist/style.css

@@ -1 +1 @@
-.flyweight[data-v-075d9b23]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-075d9b23]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-075d9b23]>*{width:var(--width);height:var(--height);position:absolute}
+.flyweight[data-v-44af801a]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-44af801a]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-44af801a]>*{width:calc(var(--width));height:var(--height);position:absolute}

package/package.json

@@ -2,12 +2,14 @@
   "name": "@soei/flyweight",
   "private": false,
   "description": "Vue组件, 列表de享元模式~减少DOM节点 flyweight",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "dist/Flyweight.cjs",
   "module": "dist/Flyweight.js",
   "files": [
-    "dist",
+    "dist/Flyweight.cjs",
+    "dist/Flyweight.js",
+    "dist/style.css",
     "src/Flyweight.vue"
   ],
   "scripts": {

package/src/Flyweight.vue

@@ -2,13 +2,13 @@
     <div ref="flyweight" class="flyweight" :class="{
         'flyweight-active': actice
     }" :style="{
-        '--width': width ? width + 'px' : '100%',
-        '--height': height + 'px'
+        '--width': realW + 'px',
+        '--height': realH + 'px'
     }" @scroll="scroll">
         <div class="flyweight-all" :style="{
         '--flyweight-height': Height + 'px'
     }">
-            <div v-for="(item, index) in flyweights" :key="index" :style="{
+            <div v-for="(item, index) in flyweights" :key="index" :data="item.top" :style="{
         top: item.top + 'px',
         left: item.left + 'px',
     }">
@@ -26,10 +26,43 @@ let isNil = (data) => {
     return data == null || data == undefined;
 }
 
+let Rs = /(\d+|[+\-\*/]|%)/g;
+
+let math = {
+    '+': (a, b) => a + b,
+    '-': (a, b) => a - b,
+    '*': (a, b) => a * b,
+    '/': (a, b) => a / b,
+    '%': (a, b, c) => parseFloat(a) / 100 * c,
+}
+/* 从左到右顺序计算, 100% - 100px px单位会被忽略 */
+let computer = (W, width) => {
+    let data;
+    if (data = runer('match', W, Rs)) {
+        let mark = data.length, re, T = 0, op, args = [];
+        while (mark--) {
+            T = data.shift();
+            if (T in math) {
+                re && args.push(re);
+                if (T === '%') args.length = 2;
+                op = T;
+            } else {
+                +T && args.push(+T)
+            }
+            if (args.length == 2) {
+                args.push(width);
+                re = math[op].apply(null, args);
+                args.length = 0;
+            }
+        }
+        if (!(+re)) re = +args.pop()
+        W = re >> 0;
+    }
+    return W;
+}
 let Log = (...args) => {
     console.info('::::FLYWEIGHT', ...args);
 }
-
 export default {
     name: 'Flyweight',
     props: {
@@ -85,7 +118,9 @@ export default {
             fwheight: 10,
 
             count: 0,
-            task: []
+            task: [],
+            realW: 0,
+            realH: 0
         }
     },
     watch: {
@@ -133,6 +168,9 @@ export default {
         }
     },
     methods: {
+        trigger(key) {
+            this.lazyrun(() => this.$emit(key, true));
+        },
         cheackflys(data) {
             let length = this.flys.length;
             if (!length) {
@@ -183,11 +221,11 @@ export default {
                 i = index * column + k % column;
 
                 if (i >= this.count) {
-                    this.lazyrun(() => this.$emit('onend', true));
+                    this.trigger('onend');
                     return /* true */;
                 }
                 v.index = index;
-                v.top = v.index * this.fwheight;
+                v.top = index * this.fwheight;
                 v.data = this.flys[i];
             },
                 null,
@@ -200,45 +238,47 @@ export default {
         scroll(e) {
             this.run(e || { target: this.flyweight });
         },
-
         re() {
+            let size = this.count || this.flys.length;
+            let fws = this.flyweights;
+            if (!size) return fws.length = size;
             let flyweight = this.flyweight;
             let wh = picker(flyweight, 'clientHeight=>height,clientWidth=>width');
             this.$nextTick(() => {
-                let [x, y] = this.offset,
-                    W = this.width;
-                if (W == 0) {
-                    W = wh.width;
-                }
-                let width = W + x;
-                let height = this.height + y;
-                let column = wh.width / width >> 0,
-                    row = wh.height / height >> 0;
+                let [x, y] = this.offset, W = wh.width, H = wh.height;
+                let width = (computer(this.width, W) || W) + x;
+                let height = computer(this.height, H) + y/* 偏移量填充宽度 */;
+                this.realW = width - x;
+                this.realH = height - y/* 实际高度减掉偏移量 */;
+                let column = (W / width >> 0) || 1,
+                    row = H / height >> 0;
                 this.row = row + 2/* 上下各一行补位 */;
                 this.column = column;
                 this.fwheight = height;
+                let offset = W % width;
                 /* 偏移量 */
-                let margin = (wh.width % width) / (column - 1) >> 0;
+                let margin = offset / (column - 1) >> 0;
                 /* 总高度 */
-                this.Height = Math.ceil(this.count / column) * height;
+                this.Height = Math.ceil(size / column) * height;
                 /* 计算数量 */
-                let count = Math.min(this.count, column * this.row),
+                let count = Math.min(size, column * this.row),
                     length = count - 1,
                     index,
                     fly;
                 while (count-- > 0) {
                     index = length - count;
                     fly = this.flys[index];
-                    flyweight = this.flyweights[index];
-                    this.$set(this.flyweights, index, {
+                    flyweight = fws[index];
+                    row = index / column >> 0;
+                    this.$set(fws, index, {
                         data: fly,
-                        top: (index / column >> 0) * height,
+                        top: row * height,
                         left: (index % column) * (width + margin),
-                        index: index / column >> 0
+                        index: row
                     })
                 }
-                this.flyweights.length = length + 1;
-
+                fws.length = length + 1;
+                if (H / height > length) this.trigger('onend');
                 this.scroll()
             });
         }
@@ -257,7 +297,7 @@ export default {
         height: var(--flyweight-height);
 
         &>* {
-            width: var(--width);
+            width: calc(var(--width));
             height: var(--height);
             position: absolute;
         }

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>