洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
1.6 KiB

8 months ago
  1. ### 代码块
  2. 直接引入就可以使用,代码如下:
  3. ```xml
  4. <template>
  5. <view class="content">
  6. <zeng-calen :actDay="actDay" :chooseDay="chooseDay" @onDayClick='onDayClick'></zeng-calen>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. actDay: [], //用户选择的日期
  14. chooseDay: ["2023-04-13", "2023-04-15", "2023-04-16", "2023-04-05"], //已被投标的数据
  15. }
  16. },
  17. onLoad() {
  18. },
  19. methods: {
  20. // 展开日历
  21. onDayClick(data) {
  22. let choose = data.date //用户点中的数据
  23. if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
  24. // 移除元素下标
  25. const index = this.actDay.indexOf(choose);
  26. //删除用户点击的日期
  27. this.actDay.splice(index, 1)
  28. } else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
  29. uni.showToast({
  30. title: "这个日期已经被投标了",
  31. icon: "none"
  32. })
  33. } else {
  34. //添加用户点击的日期
  35. this.actDay.push(choose)
  36. }
  37. },
  38. }
  39. }
  40. </script>
  41. <style>
  42. </style>
  43. ```
  44. ###
  45. Calendar Props:
  46. | 属性名 | 类型 | 默认值 | 说明 |
  47. | :----- | :--: | :-------: | :-------: |
  48. | weekstart | Number | 0 | 星期几为第一天(0为星期日) |
  49. | markDays | Array | null | 已标记的日期 |
  50. | headerBar | Boolean | true | 是否展示月份切换按钮 |
  51. | disabledAfter | Boolean | false | 过去日期是否不可点击 |
  52. | actDay | Array | null | 接收用户选择的参数 |
  53. | chooseDay | Array | null | 接受已经被选择的参数 |
  54. ###
  55. Calendar Events:
  56. | 事件 | 说明 |
  57. | :----- | :--: |
  58. | onDayClick | 选中的日期 |