AI营销辅助 普强使用
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

85 行
2.0 KiB

  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. inject: ['UIndexList'],
  51. mounted() {
  52. this.UIndexList.children.push(this);
  53. this.UIndexList.updateData();
  54. },
  55. computed: {
  56. customAnchorStyle() {
  57. return Object.assign(this.anchorStyle, this.customStyle);
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. @import "../../libs/css/style.components.scss";
  64. .u-index-anchor {
  65. box-sizing: border-box;
  66. padding: 14rpx 24rpx;
  67. color: #606266;
  68. width: 100%;
  69. font-weight: 500;
  70. font-size: 28rpx;
  71. line-height: 1.2;
  72. background-color: rgb(245, 245, 245);
  73. }
  74. .u-index-anchor--active {
  75. right: 0;
  76. left: 0;
  77. color: #2979ff;
  78. background-color: #fff;
  79. }
  80. </style>