AI销管
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

276 wiersze
7.7 KiB

  1. <template>
  2. <view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
  3. <view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
  4. <u-icon
  5. :name="activeIndex > index ? elActiveIcon : inactiveIcon"
  6. @click="click(index + 1, $event)"
  7. :color="activeIndex > index ? elActiveColor : inactiveColor"
  8. :custom-style="{
  9. fontSize: size + 'rpx',
  10. padding: `0 ${gutter / 2 + 'rpx'}`
  11. }"
  12. :custom-prefix="customPrefix"
  13. :show-decimal-icon="showDecimalIcon(index)"
  14. :percent="decimal"
  15. :inactive-color="inactiveColor"
  16. ></u-icon>
  17. </view>
  18. </view>
  19. </template>
  20. <script>/**
  21. * rate 评分
  22. * @description 该组件一般用于满意度调查,星型评分的场景
  23. * @tutorial https://www.uviewui.com/components/rate.html
  24. * @property {String Number} count 最多可选的星星数量(默认5)
  25. * @property {String Number} current 默认选中的星星数量(默认0)
  26. * @property {Boolean} disabled 是否禁止用户操作(默认false)
  27. * @property {String Number} size 星星的大小,单位rpx(默认32)
  28. * @property {String} inactive-color 未选中星星的颜色(默认#b2b2b2)
  29. * @property {String} active-color 选中的星星颜色(默认#FA3534)
  30. * @property {String} active-icon 选中时的图标名,只能为uView的内置图标(默认star-fill)
  31. * @property {String} inactive-icon 未选中时的图标名,只能为uView的内置图标(默认star)
  32. * @property {String} gutter 星星之间的距离(默认10)
  33. * @property {String Number} min-count 最少选中星星的个数(默认0)
  34. * @property {Boolean} allow-half 是否允许半星选择(默认false)
  35. * @event {Function} change 选中的星星发生变化时触发
  36. * @example <u-rate :count="count" :current="2"></u-rate>
  37. */
  38. export default {
  39. name: 'u-rate',
  40. props: {
  41. // 用于v-model双向绑定选中的星星数量
  42. // 1.4.5版新增
  43. value: {
  44. type: [Number, String],
  45. default: -1
  46. },
  47. // 要显示的星星数量
  48. count: {
  49. type: [Number, String],
  50. default: 5
  51. },
  52. // 当前需要默认选中的星星(选中的个数)
  53. // 1.4.5后通过value双向绑定,不再建议使用此参数
  54. current: {
  55. type: [Number, String],
  56. default: 0
  57. },
  58. // 是否不可选中
  59. disabled: {
  60. type: Boolean,
  61. default: false
  62. },
  63. // 星星的大小,单位rpx
  64. size: {
  65. type: [Number, String],
  66. default: 32
  67. },
  68. // 未选中时的颜色
  69. inactiveColor: {
  70. type: String,
  71. default: '#b2b2b2'
  72. },
  73. // 选中的颜色
  74. activeColor: {
  75. type: String,
  76. default: '#FA3534'
  77. },
  78. // 星星之间的间距,单位rpx
  79. gutter: {
  80. type: [Number, String],
  81. default: 10
  82. },
  83. // 最少能选择的星星个数
  84. minCount: {
  85. type: [Number, String],
  86. default: 0
  87. },
  88. // 是否允许半星(功能尚未实现)
  89. allowHalf: {
  90. type: Boolean,
  91. default: false
  92. },
  93. // 选中时的图标(星星)
  94. activeIcon: {
  95. type: String,
  96. default: 'star-fill'
  97. },
  98. // 未选中时的图标(星星)
  99. inactiveIcon: {
  100. type: String,
  101. default: 'star'
  102. },
  103. // 自定义扩展前缀,方便用户扩展自己的图标库
  104. customPrefix: {
  105. type: String,
  106. default: 'uicon'
  107. },
  108. colors: {
  109. type: Array,
  110. default() {
  111. return []
  112. }
  113. },
  114. icons: {
  115. type: Array,
  116. default() {
  117. return []
  118. }
  119. }
  120. },
  121. data() {
  122. return {
  123. // 生成一个唯一id,否则一个页面多个评分组件,会造成冲突
  124. elId: this.$u.guid(),
  125. elClass: this.$u.guid(),
  126. starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离,用于滑动选择时计算距离
  127. // 当前激活的星星的index,如果存在value,优先使用value,因为它可以双向绑定(1.4.5新增)
  128. activeIndex: this.value != -1 ? this.value : this.current,
  129. starWidth: 0, // 每个星星的宽度
  130. starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
  131. }
  132. },
  133. watch: {
  134. current(val) {
  135. this.activeIndex = val
  136. },
  137. value(val) {
  138. this.activeIndex = val
  139. }
  140. },
  141. computed: {
  142. decimal() {
  143. if (this.disabled) {
  144. return this.activeIndex * 100 % 100
  145. } else if (this.allowHalf) {
  146. return 50
  147. }
  148. },
  149. elActiveIcon() {
  150. const len = this.icons.length
  151. // 此处规则类似于下方的elActiveColor参数,都是根据一定的规则,显示不同的图标
  152. // 结果可能如此:icons参数传递了3个图标,当选中两个时,用第一个图标,4个时,用第二个图标
  153. // 第三个时,用第三个图标作为激活的图标
  154. if (len && len <= this.count) {
  155. const step = Math.round(this.activeIndex / Math.round(this.count / len))
  156. if (step < 1) return this.icons[0]
  157. if (step > len) return this.icons[len - 1]
  158. return this.icons[step - 1]
  159. }
  160. return this.activeIcon
  161. },
  162. elActiveColor() {
  163. const len = this.colors.length
  164. // 如果有设置colors参数(此参数用于将图标分段,比如一共5颗星,colors传3个颜色值,那么根据一定的规则,2颗星可能为第一个颜色
  165. // 4颗星为第二个颜色值,5颗星为第三个颜色值)
  166. if (len && len <= this.count) {
  167. const step = Math.round(this.activeIndex / Math.round(this.count / len))
  168. if (step < 1) return this.colors[0]
  169. if (step > len) return this.colors[len - 1]
  170. return this.colors[step - 1]
  171. }
  172. return this.activeColor
  173. }
  174. },
  175. methods: {
  176. // 获取评分组件盒子的布局信息
  177. getElRectById() {
  178. // uView封装的获取节点的方法,详见文档
  179. this.$uGetRect('#' + this.elId).then(res => {
  180. this.starBoxLeft = res.left
  181. })
  182. },
  183. // 获取单个星星的尺寸
  184. getElRectByClass() {
  185. // uView封装的获取节点的方法,详见文档
  186. this.$uGetRect('.' + this.elClass).then(res => {
  187. this.starWidth = res.width
  188. // 把每个星星右边到组件盒子左边的距离放入数组中
  189. for (let i = 0; i < this.count; i++) {
  190. this.starWidthArr[i] = (i + 1) * this.starWidth
  191. }
  192. })
  193. },
  194. // 手指滑动
  195. touchMove(e) {
  196. if (this.disabled) {
  197. return
  198. }
  199. if (!e.changedTouches[0]) {
  200. return
  201. }
  202. const movePageX = e.changedTouches[0].pageX
  203. // 滑动点相对于评分盒子左边的距离
  204. const distance = movePageX - this.starBoxLeft
  205. // 如果滑动到了评分盒子的左边界,就设置为0星
  206. if (distance <= 0) {
  207. this.activeIndex = 0
  208. }
  209. // 滑动的距离,相当于多少颗星星
  210. let index = Math.ceil(distance / this.starWidth)
  211. this.activeIndex = index > this.count ? this.count : index
  212. // 对最少颗星星的限制
  213. if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
  214. this.emitEvent()
  215. },
  216. // 通过点击,直接选中
  217. click(index, e) {
  218. if (this.disabled) {
  219. return
  220. }
  221. // 半星选择,尚未实现
  222. if (this.allowHalf) {
  223. }
  224. // 对第一个星星特殊处理,只有一个的时候,点击可以取消,否则无法作0星评价
  225. if (index == 1) {
  226. if (this.activeIndex == 1) {
  227. this.activeIndex = 0
  228. } else {
  229. this.activeIndex = 1
  230. }
  231. } else {
  232. this.activeIndex = index
  233. }
  234. // 对最少颗星星的限制
  235. if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
  236. this.emitEvent()
  237. },
  238. // 发出事件
  239. emitEvent() {
  240. // 发出change事件
  241. this.$emit('change', this.activeIndex)
  242. // 同时修改双向绑定的value的值
  243. if (this.value != -1) {
  244. this.$emit('input', this.activeIndex)
  245. }
  246. },
  247. showDecimalIcon(index) {
  248. return this.disabled && parseInt(this.activeIndex) === index
  249. }
  250. },
  251. mounted() {
  252. this.getElRectById()
  253. this.getElRectByClass()
  254. }
  255. }
  256. </script>
  257. <style scoped lang="scss">
  258. @import "../../libs/css/style.components.scss";
  259. .u-rate {
  260. display: -webkit-inline-flex;
  261. display: inline-flex;
  262. align-items: center;
  263. margin: 0;
  264. padding: 0;
  265. }
  266. .u-icon {
  267. box-sizing: border-box;
  268. }
  269. </style>