filtrate-group.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <view class="group-box">
  3. <view class="title" v-if="item.title">{{ item.title }}</view>
  4. <view class="options">
  5. <view class="option" :class="(option[item.selected] == item.value) ? 'active' : ''" v-for="option in item.rang"
  6. :key="option[item.selected]" hover-class="navigator-hover" @click="change(option)">
  7. {{ option[item.showKey || item.selected] }}
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. props: {
  15. item: {
  16. type: Object
  17. },
  18. rowIndex: {
  19. type: [String, Number]
  20. },
  21. onChange: {
  22. type: Function
  23. }
  24. },
  25. data() {
  26. return {
  27. show: true
  28. }
  29. },
  30. methods: {
  31. change(option) {
  32. this.$emit("onChange", option, this.rowIndex)
  33. }
  34. },
  35. }
  36. </script>
  37. <style lang="scss">
  38. .group-box {
  39. padding: 10px;
  40. box-sizing: border-box;
  41. .title {
  42. line-height: 22px;
  43. font-family: PingFang SC, PingFang SC;
  44. font-weight: bold;
  45. font-size: 16px;
  46. color: #333333;
  47. }
  48. .options {
  49. display: flex;
  50. flex-wrap: wrap;
  51. .option {
  52. min-width: 80px;
  53. padding: 6px;
  54. font-family: PingFang SC, PingFang SC;
  55. text-align: center;
  56. font-size: 14px;
  57. color: #333333;
  58. margin: 10px 10px 0 0;
  59. background: #F2F2F2;
  60. border-radius: 5px;
  61. }
  62. .active {
  63. color: #FFFFFF;
  64. background: #C30D23;
  65. }
  66. }
  67. }
  68. </style>