selectClass.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view class="select-class">
  3. <view @click="itemClick(item,index)" :class="active==item.id ?'active' :''" v-for="(item,index) in list"
  4. :key="index" class="select-class-item">
  5. <text style="margin-right: 20rpx;">{{item.class_name}}</text> <uni-icons class="select-class-item-icon"
  6. type="checkmarkempty" v-if="active==item.id" color="#05CCA1" size="16"></uni-icons>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. list: {
  14. type: Array,
  15. default: () => []
  16. },
  17. active:{
  18. default: () => 0
  19. }
  20. },
  21. data() {
  22. return {
  23. }
  24. },
  25. methods: {
  26. itemClick(item, index) {
  27. this.$emit('itemClick',item)
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. .select-class-item {
  34. width: 100%;
  35. line-height: 82rpx;
  36. text-align: center;
  37. box-sizing: border-box;
  38. height: 82rpx;
  39. border-bottom: 1px solid #f2f2f2;
  40. font-size: 32rpx;
  41. position: relative;
  42. .select-class-item-icon {
  43. position: absolute;
  44. left: 62%;
  45. }
  46. }
  47. .active {
  48. color: #05CCA1;
  49. }
  50. </style>