@artmate/chat
Version:
借鉴字节开源react库AntX，通过vue实现的版本
2 lines (1 loc) • 2.88 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("element-plus"),f=require("@element-plus/icons-vue"),h=require("../attachment/silentUploader.vue.js"),C=require("../hooks/useNamespace.js"),b=require("./fileListCard.vue.js");;/* empty css */const m=1,k=e.defineComponent({__name:"index",props:{items:{},onRemove:{},overflow:{default:"wrap"},upload:{},disabled:{type:Boolean,default:!1},listClassName:{default:""},listStyle:{default:void 0},itemClassName:{default:""},itemStyle:{default:void 0}},setup(p){const t=p,o=C.useNamespace("attachment-list"),a=e.ref(),s=e.ref(!1),c=e.ref(!1),i=()=>{const l=a.value;l&&(t.overflow==="scrollX"?(s.value=Math.abs(l.scrollLeft)>=m,c.value=l.scrollWidth-l.clientWidth-Math.abs(l.scrollLeft)>=m):t.overflow==="scrollY"&&(s.value=l.scrollTop!==0,c.value=l.scrollHeight-l.clientHeight!==l.scrollTop))};e.watch(()=>t.overflow,()=>{i()});const d=l=>{const r=a.value;r&&r.scrollTo({left:r.scrollLeft+l*r.clientWidth,behavior:"smooth"})},v=()=>{d(-1)},_=()=>{d(1)};return e.onMounted(()=>{i()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:a,class:e.normalizeClass([e.unref(o).b(),t.overflow&&e.unref(o).b(`overflow-${t.overflow}`),s.value&&e.unref(o).b("overflow-ping-start"),c.value&&e.unref(o).b("overflow-ping-end"),t.listClassName]),style:e.normalizeStyle(t.listStyle),onScroll:i},[e.createVNode(e.TransitionGroup,{name:e.unref(o).b("card-motion")},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,u=>(e.openBlock(),e.createElementBlock("div",{key:u.uid},[(e.openBlock(),e.createBlock(b.default,{key:u.uid,item:u,"on-remove":l.onRemove,style:e.normalizeStyle(t.itemStyle)},null,8,["item","on-remove","style"]))]))),128))]),_:1},8,["name"]),t.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h.default,{key:0,upload:t.upload},{default:e.withCtx(()=>[e.createVNode(e.unref(n.ElButton),{class:e.normalizeClass([e.unref(o).b("upload-btn")]),type:"info"},{icon:e.withCtx(()=>[e.createVNode(e.unref(n.ElIcon),{class:e.normalizeClass([e.unref(o).b("upload-btn-icon")])},{default:e.withCtx(()=>[e.createVNode(e.unref(f.UploadFilled))]),_:1},8,["class"])]),_:1},8,["class"])]),_:1},8,["upload"])),t.overflow==="scrollX"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createVNode(e.unref(n.ElButton),{class:e.normalizeClass([e.unref(o).b("prev-btn")]),circle:"",size:"small",onClick:v},{icon:e.withCtx(()=>[e.createVNode(e.unref(f.ArrowLeftBold))]),_:1},8,["class"]),e.createVNode(e.unref(n.ElButton),{class:e.normalizeClass([e.unref(o).b("next-btn")]),circle:"",icon:"",size:"small",onClick:_},{icon:e.withCtx(()=>[e.createVNode(e.unref(f.ArrowRightBold))]),_:1},8,["class"])],64)):e.createCommentVNode("",!0)],38))}});exports.default=k;