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.

89 lines
2.1 KiB

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