pages-extUI-rate-rate.B3emprKm.js 6.4 KB

1
  1. import{_ as e,a9 as t,b as a,h as i,d as s,o as l,p as n,w as o,f as u,e as r,F as d,y as h,a4 as c,B as m,an as f,i as g,k as p,C as y}from"./index-2PZN6pGH.js";import{_ as v}from"./uni-card.CpdfOoXJ.js";import{_ as b}from"./uni-section.BISPxi99.js";const _=e({name:"UniRate",props:{isFill:{type:[Boolean,String],default:!0},color:{type:String,default:"#ececec"},activeColor:{type:String,default:"#ffca3e"},disabledColor:{type:String,default:"#c0c0c0"},size:{type:[Number,String],default:24},value:{type:[Number,String],default:0},modelValue:{type:[Number,String],default:0},max:{type:[Number,String],default:5},margin:{type:[Number,String],default:0},disabled:{type:[Boolean,String],default:!1},readonly:{type:[Boolean,String],default:!1},allowHalf:{type:[Boolean,String],default:!1},touchable:{type:[Boolean,String],default:!0}},data:()=>({valueSync:"",userMouseFristMove:!0,userRated:!1,userLastRate:1}),watch:{value(e){this.valueSync=Number(e)},modelValue(e){this.valueSync=Number(e)}},computed:{stars(){const e=this.valueSync?this.valueSync:0,t=[],a=Math.floor(e),i=Math.ceil(e);for(let s=0;s<this.max;s++)a>s?t.push({activeWitch:"100%"}):i-1===s?t.push({activeWitch:100*(e-a)+"%"}):t.push({activeWitch:"0"});return t},marginNumber(){return Number(this.margin)}},created(){this.valueSync=Number(this.value||this.modelValue),this._rateBoxLeft=0,this._oldValue=null},mounted(){setTimeout((()=>{this._getSize()}),100),this.PC=this.IsPC()},methods:{touchstart(e){if(this.IsPC())return;if(this.readonly||this.disabled)return;const{clientX:t,screenX:a}=e.changedTouches[0];this._getRateCount(t||a)},touchmove(e){if(this.IsPC())return;if(this.readonly||this.disabled||!this.touchable)return;const{clientX:t,screenX:a}=e.changedTouches[0];this._getRateCount(t||a)},mousedown(e){if(!this.IsPC())return;if(this.readonly||this.disabled)return;const{clientX:t}=e;this.userLastRate=this.valueSync,this._getRateCount(t),this.userRated=!0},mousemove(e){if(!this.IsPC())return;if(this.userRated)return;if(this.userMouseFristMove&&(console.log("---mousemove----",this.valueSync),this.userLastRate=this.valueSync,this.userMouseFristMove=!1),this.readonly||this.disabled||!this.touchable)return;const{clientX:t}=e;this._getRateCount(t)},mouseleave(e){this.IsPC()&&(this.readonly||this.disabled||!this.touchable||(this.userRated?this.userRated=!1:this.valueSync=this.userLastRate))},IsPC(){var e=navigator.userAgent,t=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],a=!0;for(let i=0;i<t.length-1;i++)if(e.indexOf(t[i])>0){a=!1;break}return a},_getRateCount(e){this._getSize();const t=Number(this.size);if(isNaN(t))return new Error("size 属性只能设置为数字");const a=e-this._rateBoxLeft;let i=parseInt(a/(t+this.marginNumber));i=i<0?0:i,i=i>this.max?this.max:i;const s=parseInt(a-(t+this.marginNumber)*i);let l=0;(this._oldValue!==i||this.PC)&&(this._oldValue=i,l=this.allowHalf?s>t/2?i+1:i+.5:i+1,l=Math.max(.5,Math.min(l,this.max)),this.valueSync=l,this._onChange())},_onChange(){this.$emit("input",this.valueSync),this.$emit("update:modelValue",this.valueSync),this.$emit("change",{value:this.valueSync})},_getSize(){t().in(this).select(".uni-rate").boundingClientRect().exec((e=>{e&&(this._rateBoxLeft=e[0].left)}))}}},[["render",function(e,t,p,y,v,b){const _=a(s("uni-icons"),i),S=g;return l(),n(S,null,{default:o((()=>[u(S,{ref:"uni-rate",class:"uni-rate"},{default:o((()=>[(l(!0),r(d,null,h(b.stars,((e,t)=>(l(),n(S,{class:c(["uni-rate__icon",{"uni-cursor-not-allowed":p.disabled}]),style:m({"margin-right":b.marginNumber+"px"}),key:t,onTouchstart:f(b.touchstart,["stop"]),onTouchmove:f(b.touchmove,["stop"]),onMousedown:f(b.mousedown,["stop"]),onMousemove:f(b.mousemove,["stop"]),onMouseleave:b.mouseleave},{default:o((()=>[u(_,{color:p.color,size:p.size,type:p.isFill?"star-filled":"star"},null,8,["color","size","type"]),u(S,{style:m({width:e.activeWitch}),class:"uni-rate__icon-on"},{default:o((()=>[u(_,{color:p.disabled?p.disabledColor:p.activeColor,size:p.size,type:"star-filled"},null,8,["color","size"])])),_:2},1032,["style"])])),_:2},1032,["class","style","onTouchstart","onTouchmove","onMousedown","onMousemove","onMouseleave"])))),128))])),_:1},512)])),_:1})}],["__scopeId","data-v-06ce50f7"]]);const S=e({components:{},data:()=>({rateValue:0}),onLoad(){setTimeout((()=>{this.rateValue=3}),1e3)},methods:{onChange(e){console.log("rate发生改变:"+JSON.stringify(e))}}},[["render",function(e,t,i,r,d,h){const c=y,m=a(s("uni-card"),v),f=a(s("uni-rate"),_),S=a(s("uni-section"),b),C=g;return l(),n(C,{class:"container"},{default:o((()=>[u(m,{"is-full":"","is-shadow":!1},{default:o((()=>[u(c,{class:"uni-h6"},{default:o((()=>[p("评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。")])),_:1})])),_:1}),u(S,{title:"基本用法",type:"line",padding:""},{default:o((()=>[u(f,{modelValue:d.rateValue,"onUpdate:modelValue":t[0]||(t[0]=e=>d.rateValue=e),onChange:h.onChange},null,8,["modelValue","onChange"])])),_:1}),u(S,{title:"不支持滑动手势选择评分",subTitle:"设置 touchable 属性控制是否开启手势选择",type:"line",padding:""},{default:o((()=>[u(f,{touchable:!1,value:5,onChange:h.onChange},null,8,["onChange"])])),_:1}),u(S,{title:"设置尺寸大小",subTitle:"设置 size 属性控制组件大小",type:"line",padding:""},{default:o((()=>[u(f,{size:"18",value:5})])),_:1}),u(S,{title:"设置评分数",subTitle:"设置 max 属性控制组件最大星星数量",type:"line",padding:""},{default:o((()=>[u(f,{max:10,value:5})])),_:1}),u(S,{title:"设置星星间隔",subTitle:"设置 margin 属性控制星星间隔",type:"line",padding:""},{default:o((()=>[u(f,{value:4,margin:"20"})])),_:1}),u(S,{title:"设置颜色",subTitle:"使用 color 属性设置星星颜色",type:"line",padding:""},{default:o((()=>[u(f,{value:3,color:"#bbb","active-color":"red"})])),_:1}),u(S,{title:"半星",subTitle:"使用 allow-half 属性设置是否显示半星",type:"line",padding:""},{default:o((()=>[u(f,{"allow-half":"",value:3.5})])),_:1}),u(S,{title:"只读状态",subTitle:"使用 readonly 属性设置组件只读",type:"line",padding:""},{default:o((()=>[u(f,{readonly:!0,value:2})])),_:1}),u(S,{title:"禁用状态",subTitle:"使用 disabled 属性设置组件禁用",type:"line",padding:""},{default:o((()=>[u(f,{disabled:!0,disabledColor:"#ccc",value:3})])),_:1}),u(S,{title:"未选中的星星为镂空状态",subTitle:"使用 is-fill 属性设置星星镂空",type:"line",padding:""},{default:o((()=>[u(f,{value:3,"is-fill":!1})])),_:1})])),_:1})}]]);export{S as default};