pages-extUI-notice-bar-notice-bar.4g4GmD3a.js 6.9 KB

1
  1. import{_ as e,a9 as t,b as o,h as i,d as n,o as l,p as a,w as s,v as r,f as c,a4 as u,B as d,k as h,t as p,C as m,i as f,G as b}from"./index-2PZN6pGH.js";import{_ as w}from"./uni-card.CpdfOoXJ.js";import{_ as y}from"./uni-section.BISPxi99.js";const _=e({name:"UniNoticeBar",emits:["click","getmore","close"],props:{text:{type:String,default:""},moreText:{type:String,default:""},backgroundColor:{type:String,default:"#FFF9EA"},speed:{type:Number,default:100},color:{type:String,default:"#FF9A43"},fontSize:{type:Number,default:14},moreColor:{type:String,default:"#FF9A43"},single:{type:[Boolean,String],default:!1},scrollable:{type:[Boolean,String],default:!1},showIcon:{type:[Boolean,String],default:!1},showGetMore:{type:[Boolean,String],default:!1},showClose:{type:[Boolean,String],default:!1}},data:()=>({textWidth:0,boxWidth:0,wrapWidth:"",webviewHide:!1,elId:`Uni_${Math.ceil(1e6*Math.random()).toString(36)}`,elIdBox:`Uni_${Math.ceil(1e6*Math.random()).toString(36)}`,show:!0,animationDuration:"none",animationPlayState:"paused",animationDelay:"0s"}),computed:{isShowGetMore(){return!0===this.showGetMore||"true"===this.showGetMore},isShowClose(){return!(!0!==this.showClose&&"true"!==this.showClose||!1!==this.showGetMore&&"false"!==this.showGetMore)}},mounted(){this.$nextTick((()=>{this.initSize()}))},methods:{initSize(){if(this.scrollable){let e=[],o=new Promise(((e,o)=>{t().in(this).select(`#${this.elId}`).boundingClientRect().exec((t=>{this.textWidth=t[0].width,e()}))})),i=new Promise(((e,o)=>{t().in(this).select(`#${this.elIdBox}`).boundingClientRect().exec((t=>{this.boxWidth=t[0].width,e()}))}));e.push(o),e.push(i),Promise.all(e).then((()=>{this.animationDuration=this.textWidth/this.speed+"s",this.animationDelay=`-${this.boxWidth/this.speed}s`,setTimeout((()=>{this.animationPlayState="running"}),1e3)}))}},loopAnimation(){},clickMore(){this.$emit("getmore")},close(){this.show=!1,this.$emit("close")},onClick(){this.$emit("click")}}},[["render",function(e,t,b,w,y,_){const g=o(n("uni-icons"),i),x=m,S=f;return y.show?(l(),a(S,{key:0,class:"uni-noticebar",style:d({backgroundColor:b.backgroundColor}),onClick:_.onClick},{default:s((()=>[!0===b.showIcon||"true"===b.showIcon?(l(),a(g,{key:0,class:"uni-noticebar-icon",type:"sound",color:b.color,size:1.5*b.fontSize},null,8,["color","size"])):r("",!0),c(S,{ref:"textBox",class:u(["uni-noticebar__content-wrapper",{"uni-noticebar__content-wrapper--scrollable":b.scrollable,"uni-noticebar__content-wrapper--single":!b.scrollable&&(b.single||b.moreText)}]),style:d({height:b.scrollable?1.5*b.fontSize+"px":"auto"})},{default:s((()=>[c(S,{id:y.elIdBox,class:u(["uni-noticebar__content",{"uni-noticebar__content--scrollable":b.scrollable,"uni-noticebar__content--single":!b.scrollable&&(b.single||b.moreText)}])},{default:s((()=>[c(x,{id:y.elId,ref:"animationEle",class:u(["uni-noticebar__content-text",{"uni-noticebar__content-text--scrollable":b.scrollable,"uni-noticebar__content-text--single":!b.scrollable&&(b.single||b.showGetMore)}]),style:d({color:b.color,fontSize:b.fontSize+"px",lineHeight:1.5*b.fontSize+"px",width:y.wrapWidth+"px",animationDuration:y.animationDuration,"-webkit-animationDuration":y.animationDuration,animationPlayState:y.webviewHide?"paused":y.animationPlayState,"-webkit-animationPlayState":y.webviewHide?"paused":y.animationPlayState,animationDelay:y.animationDelay,"-webkit-animationDelay":y.animationDelay})},{default:s((()=>[h(p(b.text),1)])),_:1},8,["id","class","style"])])),_:1},8,["id","class"])])),_:1},8,["class","style"]),_.isShowGetMore?(l(),a(S,{key:1,class:"uni-noticebar__more uni-cursor-point",onClick:_.clickMore},{default:s((()=>[b.moreText.length>0?(l(),a(x,{key:0,style:d({color:b.moreColor,fontSize:b.fontSize+"px"})},{default:s((()=>[h(p(b.moreText),1)])),_:1},8,["style"])):(l(),a(g,{key:1,type:"right",color:b.moreColor,size:1.1*b.fontSize},null,8,["color","size"]))])),_:1},8,["onClick"])):r("",!0),_.isShowClose?(l(),a(S,{key:2,class:"uni-noticebar-close uni-cursor-point"},{default:s((()=>[c(g,{type:"closeempty",color:b.color,size:1.1*b.fontSize,onClick:_.close},null,8,["color","size","onClick"])])),_:1})):r("",!0)])),_:1},8,["style","onClick"])):r("",!0)}],["__scopeId","data-v-69ae3424"]]);const g=e({components:{},data:()=>({}),created(){},methods:{getMore(){b({title:"点击查看更多",icon:"none"})}}},[["render",function(e,t,i,r,u,d){const p=m,b=o(n("uni-card"),w),g=o(n("uni-notice-bar"),_),x=o(n("uni-section"),y),S=f;return l(),a(S,{class:"container"},{default:s((()=>[c(b,{"is-full":"","is-shadow":!1},{default:s((()=>[c(p,{class:"uni-h6"},{default:s((()=>[h("通告栏组件多用于系统通知,广告通知等场景,可自定义图标,颜色,展现方式等。")])),_:1})])),_:1}),c(x,{title:"多行显示",type:"line"},{default:s((()=>[c(g,{text:"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"})])),_:1}),c(x,{title:"单行显示",subTitle:"使用 single 属性单行显示通知",type:"line"},{default:s((()=>[c(g,{single:"",text:"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"})])),_:1}),c(x,{title:"显示图标",subTitle:"使用 show-icon 属性显示左侧小喇叭图标",type:"line"},{default:s((()=>[c(g,{"show-icon":"",text:"uni-app发布,开发一次、7端覆盖!"})])),_:1}),c(x,{title:"文字滚动",subTitle:"使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示",type:"line"},{default:s((()=>[c(g,{"show-icon":"",scrollable:"",text:"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"})])),_:1}),c(x,{title:"查看更多",subTitle:"使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标",type:"line"},{default:s((()=>[c(g,{"show-get-more":"","show-icon":"",text:"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!",onGetmore:d.getMore},null,8,["onGetmore"]),c(g,{"show-get-more":"","show-icon":"","more-text":"查看更多",text:"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!",onGetmore:d.getMore},null,8,["onGetmore"])])),_:1}),c(x,{title:"修改颜色",type:"line"},{default:s((()=>[c(g,{single:"",color:"#2979FF","background-color":"#EAF2FF",text:"uni-app 1.6版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"})])),_:1}),c(x,{title:"关闭按钮",subTitle:"使用 show-close 属性,可关闭通知",type:"line"},{default:s((()=>[c(g,{"show-close":"",single:"",text:"HBuilderX 1.0正式发布!uni-app实现里程碑突破实现里程碑突破!"})])),_:1})])),_:1})}],["__scopeId","data-v-a95af2c7"]]);export{g as default};