| 1 |
- import{_ as t,a3 as i,b as o,h as e,d as n,o as s,p as a,w as l,a4 as r,B as c,f as h,v as f,e as u,F as d,y as p,k as _,t as b,i as g,D as m,C as y,aa as C,G as v,R as k}from"./index-2PZN6pGH.js";import{_ as w}from"./uni-card.CpdfOoXJ.js";import{_ as B}from"./uni-section.BISPxi99.js";const x=t({name:"UniFab",emits:["fabClick","trigger"],props:{pattern:{type:Object,default:()=>({})},horizontal:{type:String,default:"left"},vertical:{type:String,default:"bottom"},direction:{type:String,default:"horizontal"},content:{type:Array,default:()=>[]},show:{type:Boolean,default:!1},popMenu:{type:Boolean,default:!0}},data:()=>({fabShow:!1,isShow:!1,isAndroidNvue:!1,styles:{color:"#3c3e49",selectedColor:"#007AFF",backgroundColor:"#fff",buttonColor:"#007AFF",iconColor:"#fff"}}),computed:{contentWidth(t){return 55*(this.content.length+1)+15+"px"},contentWidthMin:()=>"55px",boxWidth(){return this.getPosition(3,"horizontal")},boxHeight(){return this.getPosition(3,"vertical")},leftBottom(){return this.getPosition(0,"left","bottom")},rightBottom(){return this.getPosition(0,"right","bottom")},leftTop(){return this.getPosition(0,"left","top")},rightTop(){return this.getPosition(0,"right","top")},flexDirectionStart(){return this.getPosition(1,"vertical","top")},flexDirectionEnd(){return this.getPosition(1,"vertical","bottom")},horizontalLeft(){return this.getPosition(2,"horizontal","left")},horizontalRight(){return this.getPosition(2,"horizontal","right")},nvueBottom:()=>(i().windowBottom,30)},watch:{pattern:{handler(t,i){this.styles=Object.assign({},this.styles,t)},deep:!0}},created(){this.isShow=this.show,0===this.top&&(this.fabShow=!0),this.styles=Object.assign({},this.styles,this.pattern)},methods:{_onClick(){this.$emit("fabClick"),this.popMenu&&(this.isShow=!this.isShow)},open(){this.isShow=!0},close(){this.isShow=!1},_onItemClick(t,i){this.$emit("trigger",{index:t,item:i})},getPosition(t,i,o){return 0===t?this.horizontal===i&&this.vertical===o:1===t?this.direction===i&&this.vertical===o:2===t?this.direction===i&&this.horizontal===o:this.isShow&&this.direction===i?this.contentWidth:this.contentWidthMin}}},[["render",function(t,i,C,v,k,w){const B=g,x=m,z=y,S=o(n("uni-icons"),e);return s(),a(B,{class:"uni-cursor-point"},{default:l((()=>[C.popMenu&&(w.leftBottom||w.rightBottom||w.leftTop||w.rightTop)&&C.content.length>0?(s(),a(B,{key:0,class:r([{"uni-fab--leftBottom":w.leftBottom,"uni-fab--rightBottom":w.rightBottom,"uni-fab--leftTop":w.leftTop,"uni-fab--rightTop":w.rightTop},"uni-fab"]),style:c(w.nvueBottom)},{default:l((()=>[h(B,{class:r([{"uni-fab__content--left":"left"===C.horizontal,"uni-fab__content--right":"right"===C.horizontal,"uni-fab__content--flexDirection":"vertical"===C.direction,"uni-fab__content--flexDirectionStart":w.flexDirectionStart,"uni-fab__content--flexDirectionEnd":w.flexDirectionEnd,"uni-fab__content--other-platform":!k.isAndroidNvue},"uni-fab__content"]),style:c({width:w.boxWidth,height:w.boxHeight,backgroundColor:k.styles.backgroundColor}),elevation:"5"},{default:l((()=>[w.flexDirectionStart||w.horizontalLeft?(s(),a(B,{key:0,class:"uni-fab__item uni-fab__item--first"})):f("",!0),(s(!0),u(d,null,p(C.content,((t,i)=>(s(),a(B,{key:i,class:r([{"uni-fab__item--active":k.isShow},"uni-fab__item"]),onClick:o=>w._onItemClick(i,t)},{default:l((()=>[h(x,{src:t.active?t.selectedIconPath:t.iconPath,class:"uni-fab__item-image",mode:"aspectFit"},null,8,["src"]),h(z,{class:"uni-fab__item-text",style:c({color:t.active?k.styles.selectedColor:k.styles.color})},{default:l((()=>[_(b(t.text),1)])),_:2},1032,["style"])])),_:2},1032,["class","onClick"])))),128)),w.flexDirectionEnd||w.horizontalRight?(s(),a(B,{key:1,class:"uni-fab__item uni-fab__item--first"})):f("",!0)])),_:1},8,["class","style"])])),_:1},8,["class","style"])):f("",!0),h(B,{class:r([{"uni-fab__circle--leftBottom":w.leftBottom,"uni-fab__circle--rightBottom":w.rightBottom,"uni-fab__circle--leftTop":w.leftTop,"uni-fab__circle--rightTop":w.rightTop,"uni-fab__content--other-platform":!k.isAndroidNvue},"uni-fab__circle uni-fab__plus"]),style:c({"background-color":k.styles.buttonColor,bottom:w.nvueBottom}),onClick:w._onClick},{default:l((()=>[h(S,{class:r(["fab-circle-icon",{"uni-fab__plus--active":k.isShow&&C.content.length>0}]),type:"plusempty",color:k.styles.iconColor,size:"32"},null,8,["color","class"])])),_:1},8,["class","style","onClick"])])),_:1})}],["__scopeId","data-v-4ac40f92"]]);const z=t({components:{},data:()=>({title:"uni-fab",directionStr:"垂直",horizontal:"left",vertical:"bottom",direction:"horizontal",pattern:{color:"#7A7E83",backgroundColor:"#fff",selectedColor:"#007AFF",buttonColor:"#007AFF",iconColor:"#fff"},is_color_type:!1,content:[{iconPath:"/static/image.png",selectedIconPath:"/static/image-active.png",text:"相册",active:!1},{iconPath:"/static/home.png",selectedIconPath:"/static/home-active.png",text:"首页",active:!1},{iconPath:"/static/star.png",selectedIconPath:"/static/star-active.png",text:"收藏",active:!1}]}),onBackPress(){return!!this.$refs.fab.isShow&&(this.$refs.fab.close(),!0)},methods:{trigger(t){console.log(t),this.content[t.index].active=!t.item.active,C({title:"提示",content:`您${this.content[t.index].active?"选中了":"取消了"}${t.item.text}`,success:function(t){t.confirm?console.log("用户点击确定"):t.cancel&&console.log("用户点击取消")}})},fabClick(){v({title:"点击了悬浮按钮",icon:"none"})},switchBtn(t,i){0===t?(this.direction="horizontal"===this.direction?"vertical":"horizontal",this.directionStr="horizontal"===this.direction?"垂直":"水平"):(this.horizontal=t,this.vertical=i),this.$forceUpdate()},switchColor(){this.is_color_type=!this.is_color_type,this.is_color_type?(this.pattern.iconColor="#aaa",this.pattern.buttonColor="#fff"):(this.pattern.iconColor="#fff",this.pattern.buttonColor="#007AFF")}}},[["render",function(t,i,e,r,c,f){const u=y,d=o(n("uni-card"),w),p=k,m=g,C=o(n("uni-section"),B),v=o(n("uni-fab"),x);return s(),a(m,{class:"container"},{default:l((()=>[h(d,{"is-shadow":!1,"is-full":""},{default:l((()=>[h(u,{class:"uni-h6"},{default:l((()=>[_("uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。")])),_:1})])),_:1}),h(C,{title:"基本功能",subTitle:"点击按钮,切换 fab 不同状态",type:"line"},{default:l((()=>[h(m,{class:"warp"},{default:l((()=>[h(p,{class:"button",type:"primary",onClick:i[0]||(i[0]=t=>f.switchBtn(0))},{default:l((()=>[_("切换菜单方向("+b(c.directionStr)+")",1)])),_:1}),h(p,{class:"button",type:"primary",onClick:i[1]||(i[1]=t=>f.switchBtn("left","bottom"))},{default:l((()=>[_("左下角显示")])),_:1}),h(p,{class:"button",type:"primary",onClick:i[2]||(i[2]=t=>f.switchBtn("right","bottom"))},{default:l((()=>[_("右下角显示")])),_:1}),h(p,{class:"button",type:"primary",onClick:i[3]||(i[3]=t=>f.switchBtn("left","top"))},{default:l((()=>[_("左上角显示")])),_:1}),h(p,{class:"button",type:"primary",onClick:i[4]||(i[4]=t=>f.switchBtn("left","top"))},{default:l((()=>[_("左上角显示")])),_:1}),h(p,{class:"button",type:"primary",onClick:i[5]||(i[5]=t=>f.switchBtn("right","top"))},{default:l((()=>[_("右上角显示")])),_:1}),h(p,{class:"button",type:"primary",onClick:f.switchColor},{default:l((()=>[_("修改颜色")])),_:1},8,["onClick"])])),_:1})])),_:1}),h(v,{ref:"fab",pattern:c.pattern,content:c.content,horizontal:c.horizontal,vertical:c.vertical,direction:c.direction,onTrigger:f.trigger,onFabClick:f.fabClick},null,8,["pattern","content","horizontal","vertical","direction","onTrigger","onFabClick"])])),_:1})}],["__scopeId","data-v-3e2321fb"]]);export{z as default};
|
