xhs-examples/xhs-mini-demos/component-case/post-note-button/post-note-button.xhsml

<view class="container">
  <showbox title="type = floating 悬浮按钮，见屏幕下方">
    <post-note-button
      hidden="{{!showFloatingButton}}"
      title="{{noteTitle}}"
      content="{{noteContent}}"
      type="floating"
      binderror="bindError"
      media-info="{{mediaInfo}}"
      tags="{{tags}}"
    ></post-note-button>
  </showbox>
  <showbox title="type = default 面性按钮">
    <box class="box">
      <view class="flex items-center mb-20">
        <text class="mr-20">size = medium</text>
        <post-note-button
          class="mr-20"
          title="{{noteTitle}}"
          content="{{noteContent}}"
          binderror="bindError"
          type="default"
          media-info="{{mediaInfo}}"
          tags="{{tags}}"
        ></post-note-button>
      </view>
      <view class="flex items-center">
        <text class="mr-20">可自定义宽度</text>
        <post-note-button
          style="width: 250px;"
          title="{{noteTitle}}"
          content="{{noteContent}}"
          binderror="bindError"
          type="default"
          media-info="{{mediaInfo}}"
          tags="{{tags}}"
        ></post-note-button>
      </view>
    </box>
    <box class="box">
      <view class="flex items-center mb-20 w-full">
        <text class="mr-20">size = large</text>
        <view class="flex justify-center">
          <post-note-button
            class="mr-20"
            title="{{noteTitle}}"
            content="{{noteContent}}"
            type="default"
            size="large"
            binderror="bindError"
            media-info="{{mediaInfo}}"
            tags="{{tags}}"
          ></post-note-button>
        </view>
      </view>
      <view class="flex items-center">
        <text class="mr-20">可自定义宽度</text>
        <post-note-button
          style="width: 250px;"
          title="{{noteTitle}}"
          content="{{noteContent}}"
          type="default"
          size="large"
          binderror="bindError"
          media-info="{{mediaInfo}}"
          tags="{{tags}}"
        ></post-note-button>
      </view>
    </box>
  </showbox>
  <showbox title="type = plain 线性按钮">
    <box class="box flex items-center">
      <view class="flex items-center">
        <text class="mr-20">size = medium</text>
        <post-note-button
          title="{{noteTitle}}"
          content="{{noteContent}}"
          type="plain"
          binderror="bindError"
          media-info="{{mediaInfo}}"
          tags="{{tags}}"
        ></post-note-button>
      </view>
    </box>
    <box class="box">
      <view class="flex items-center">
        <text class="mr-20">size = large</text>
        <post-note-button
          title="{{noteTitle}}"
          content="{{noteContent}}"
          type="plain"
          size="large"
          binderror="bindError"
          media-info="{{mediaInfo}}"
          tags="{{tags}}"
        ></post-note-button>
      </view>
    </box>
  </showbox>
  <showbox title="参数设置区域，设置发小红书配置按钮参数">
    <box class="box">
      <view class="mb-8">
        笔记标题 title，最大长度 20
      </view>
      <view class="_ui-input">
        <input
          value="{{ noteTitle }}"
          placeholder="输入笔记标题"
          placeholder-style="color: #3333334D;"
          bindinput="bindInputNoteTitle"
          maxlength="-1"
          bindfocus="bindFocus"
          bindblur="bindBlur"
        />
      </view>
    </box>
    <box class="box">
      <view class="mb-8">
        笔记内容 content，最大长度 1000
      </view>
      <view class="_ui-input">
        <textarea
          auto-height
          value="{{ noteContent }}"
          placeholder="输入笔记内容"
          placeholder-style="color: #3333334D;"
          bindinput="bindInputNoteContent"
          maxlength="-1"
          bindfocus="bindFocus"
          bindblur="bindBlur"
        />
      </view>
    </box>
    <box class="box">
      <view class="mb-8">
        话题 tags，使用英文逗号分割
      </view>
      <view class="_ui-input">
        <input
          value="{{ tags }}"
          placeholder="话题，使用英文逗号分割"
          placeholder-style="color: #3333334D;"
          bindinput="bindInputTags"
          maxlength="-1"
          bindfocus="bindFocus"
          bindblur="bindBlur"
        />
      </view>
    </box>
    <box class="box">
      <view class="mb-8">
        快速调整 media-info
      </view>
      <view>
        <button
          class="mb-8"
          bindtap="changeMediaInfoToImageResource"
        >
          调整到发布 1 张图片
        </button>
        <button
          class="mb-8"
          bindtap="changeMediaInfoToVideoResource"
        >
          调整到发布视频资源
        </button>
        <button
          class="mb-8"
          bindtap="changeMediaInfoToDifferentImageResource"
        >
          调整到图片为 18 张不同的
        </button>
        <button
          class="mb-8"
          bindtap="changeMediaInfoToSameImageResource"
        >
          调整到图片为 18 张一样的
        </button>
        <button
          class="mb-8"
          bindtap="changeMediaInfoTooLong"
        >
          调整到图片资源个数不符合要求（19）
        </button>
      </view>
    </box>
    <box class="box">
      <view class="mb-8">
        媒体信息，media-info（图片 1-18 张 / 视频 1 个）
      </view>
      <view class="_ui-input">
        <textarea
          value="{{ mediaInfo }}"
          auto-height
          placeholder="话题，使用英文逗号分割"
          placeholder-style="color: #3333334D;"
          bindinput="bindInputMediaInfo"
          maxlength="-1"
          bindfocus="bindFocus"
          bindblur="bindBlur"
        />
      </view>
    </box>
  </showbox>
  <showbox title="曝光埋点测试用，下滑直到按钮可见">
    <box class="box">
      <scroll-view
        style="height: 300px;"
        scroll-y
        show-scrollbar
      >
        <view style="height: 500px; background-color: antiquewhite;"></view>
        <view
          style="margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center;"
        >
          <post-note-button></post-note-button>
        </view>
      </scroll-view>
    </box>
  </showbox>
  <view class="safe-area"></view>
</view>