组件介绍
ux-star 星级组件 用于展示星级、提交星级评价等场景；
组件图示
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
|---|
| fontSize | String | 50rpx | 图标字体大小 |
| totalstars | Number | 5 | 星标总数 |
| starnum | Number | 1 | 当前选中值 |
| color | String | #E1E1E1 | 默认颜色 |
| activecolor | String | #F5C359 | 选中颜色 |
| cantap | Boolean | true | 是否允许点击星标更新数据 |
| padding | String | 5rpx | 星标直接间距 |
组件事件
@change : 星级选中值变化时触发，并以参数形式携带选中值。
演示代码
<template>
<view class="ux-body ux-page-color ux-flex1">
<text class="ux-h6 ux-color-grey ux-mt-large">默认属性</text>
<view class="ux-flex ux-row ux-nowrap ux-justify-content-center ux-mt-small ux-bg-white ux-padding-small">
<ux-star @change="change1"></ux-star>
</view>
<text class="ux-h6 ux-color-grey ux-mt-large">属性及布局演示</text>
<view class="ux-flex ux-row ux-nowrap ux-justify-content-center ux-align-items-center ux-mt-small ux-bg-white ux-padding-small">
<text class="ux-text ux-color-grey3">打分 : </text>
<view style="margin-left:22rpx;">
<ux-star
activecolor="#FF0036"
:totalstars="6"
:starnum="3"
font-size="38rpx"
:cantap="false"></ux-star>
</view>
</view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
change1 : function(val:number){
console.log(val);
uni.showToast({icon:"none", title:val + " 星"});
}
}
}
</script>
<style scoped>
</style>
