u-index-anchor.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]">
  3. <view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]">
  4. <slot v-if="useSlot" />
  5. <block v-else>
  6. <text>{{ index }}</text>
  7. </block>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. /**
  13. * indexAnchor 索引列表锚点
  14. * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
  15. * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
  16. * @property {Boolean} use-slot 是否使用自定义内容的插槽(默认false)
  17. * @property {String Number} index 索引字符,如果定义了use-slot,此参数自动失效
  18. * @property {Object} custStyle 自定义样式,对象形式,如"{color: 'red'}"
  19. * @event {Function} default 锚点位置显示内容,默认为索引字符
  20. * @example <u-index-anchor :index="item" />
  21. */
  22. export default {
  23. name: "u-index-anchor",
  24. props: {
  25. useSlot: {
  26. type: Boolean,
  27. default: false
  28. },
  29. index: {
  30. type: String,
  31. default: ''
  32. },
  33. customStyle: {
  34. type: Object,
  35. default () {
  36. return {}
  37. }
  38. }
  39. },
  40. data() {
  41. return {
  42. active: false,
  43. wrapperStyle: {},
  44. anchorStyle: {}
  45. }
  46. },
  47. inject: ['UIndexList'],
  48. mounted() {
  49. this.UIndexList.children.push(this);
  50. this.UIndexList.updateData();
  51. },
  52. computed: {
  53. customAnchorStyle() {
  54. return Object.assign(this.anchorStyle, this.customStyle);
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .u-index-anchor {
  61. box-sizing: border-box;
  62. padding: 14rpx 24rpx;
  63. color: #606266;
  64. width: 100%;
  65. font-weight: 500;
  66. font-size: 28rpx;
  67. line-height: 1.2;
  68. background-color: rgb(245, 245, 245);
  69. }
  70. .u-index-anchor--active {
  71. right: 0;
  72. left: 0;
  73. color: #2979ff;
  74. background-color: #fff;
  75. }
  76. </style>