bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsA/rate/rate.nvue
+146
View File
@@ -0,0 +1,146 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基本案例</text>
<view class="u-demo-block__content">
<view class="u-page__tag-item">
<u-rate size="20"></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义选中星星数量</text>
<view class="u-demo-block__content">
<view class="u-page__tag-item">
<u-rate
size="20"
v-model="value"
@change="change"
></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义星星大小</text>
<view class="u-demo-block__content">
<view class="u-page__tag-item">
<u-rate size="30" count="4"></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">是否禁用评分</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate size="20" disabled></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">是否只读评分</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate size="20" readonly></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义选中星星颜色</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate
size="20"
v-model="activeColorValue"
activeColor="#2979ff"
></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义未选中星星颜色</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate
size="20"
v-model="value1"
inactiveColor="#2979ff"
></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">禁止触摸选择</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate size="20" :touchable="false"></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">允许触摸选择</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate size="20" :touchable="true"></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">是否允许半星</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate
size="20"
v-model="HalfValue"
:allowHalf="true"
@change="change"
></u-rate>
</view>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义选中的图标</text>
<view class="u-demo-block__content">
<view class="u-page__rate-item">
<u-rate
size="20"
v-model="activeIconValue"
inactiveIcon="heart"
activeIcon="heart-fill"
></u-rate>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//自定义星星的个数
value: 3,
value1: 2,
// 自定义选择星星颜色个数
activeColorValue: 3,
// 是否允许半星的个数
HalfValue: 3.5,
// 自定义图标星星个数
activeIconValue: 3,
}
},
watch: {
value(newValue, oldValue) {
// console.log(newValue);
}
},
methods: {
change(e) {
// console.log('change', e);
}
},
}
</script>
<style lang="scss">
.u-page {}
</style>