Skip to content

EXAMPLES.md

Latest commit

 

History

History
674 lines (597 loc) · 13.7 KB

EXAMPLES.md

File metadata and controls

674 lines (597 loc) · 13.7 KB
Raw

QuickBox 组件使用示例

本文档提供 QuickBox 组件的完整使用示例。

📋 目录

布局组件示例

PageTitleBar 使用示例

<template>
  <div class="page">
    <PageTitleBar
      title="我的页面"
      show-action="{{true}}"
      action-image="/assets/newImages/base/icon.png"
      position="fixed"
      top-offset="{{70}}"
      onaction-click="onActionClick"
    />
    
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import PageTitleBar from 'quickbox/components/PageTitleBar';

export default {
  components: {
    PageTitleBar
  },
  onActionClick() {
    console.log('操作按钮被点击');
  }
};
</script>

BackButton 使用示例

<template>
  <div class="header">
    <BackButton
      icon="/assets/newImages/base/back.png"
      text="返回"
      use-router="{{true}}"
      onback-click="onBackClick"
    />
    <text class="title">页面标题</text>
  </div>
</template>

<script>
import BackButton from 'quickbox/components/BackButton';

export default {
  components: {
    BackButton
  },
  onBackClick() {
    console.log('返回按钮被点击');
  }
};
</script>

Card 使用示例

<template>
  <Card
    title="卡片标题"
    content="这是卡片内容"
    footer="底部信息"
    clickable="{{true}}"
    oncard-click="onCardClick"
  >
    <div slot="content">
      <text>自定义内容区域</text>
    </div>
  </Card>
</template>

<script>
import Card from 'quickbox/components/Card';

export default {
  components: {
    Card
  },
  onCardClick() {
    console.log('卡片被点击');
  }
};
</script>

列表组件示例

List 使用示例

<template>
  <List
    title="我的列表"
    list="{{listData}}"
    loading="{{loading}}"
    has-more="{{hasMore}}"
    onload-more="onLoadMore"
    onitem-click="onItemClick"
  >
    <div slot="item" item="{{$item}}" index="{{$idx}}">
      <div class="custom-item">
        <image src="{{$item.image}}" class="item-image" />
        <div class="item-info">
          <text class="item-title">{{$item.title}}</text>
          <text class="item-desc">{{$item.desc}}</text>
        </div>
      </div>
    </div>
  </List>
</template>

<script>
import List from 'quickbox/components/List';

export default {
  components: {
    List
  },
  data: {
    listData: [
      { title: '标题1', desc: '描述1', image: '/path/to/image1.jpg' },
      { title: '标题2', desc: '描述2', image: '/path/to/image2.jpg' }
    ],
    loading: false,
    hasMore: true
  },
  onLoadMore() {
    this.loading = true;
    // 加载更多数据
    setTimeout(() => {
      this.listData = this.listData.concat([
        { title: '标题3', desc: '描述3', image: '/path/to/image3.jpg' }
      ]);
      this.loading = false;
      this.hasMore = false; // 没有更多数据了
    }, 1000);
  },
  onItemClick({ detail }) {
    console.log('点击了项目:', detail.item, '索引:', detail.index);
  }
};
</script>

GridList 使用示例

<template>
  <GridList
    title="推荐视频"
    list="{{videoList}}"
    columns="{{2}}"
    loading="{{loading}}"
    has-more="{{hasMore}}"
    show-mask="{{true}}"
    onload-more="onLoadMore"
    onitem-click="onVideoClick"
  />
</template>

<script>
import GridList from 'quickbox/components/GridList';

export default {
  components: {
    GridList
  },
  data: {
    videoList: [
      {
        contentName: '视频标题1',
        contentCoverUrl: '/path/to/cover1.jpg',
        playTimes: 12345,
        tagList: ['标签1', '标签2']
      },
      {
        contentName: '视频标题2',
        contentCoverUrl: '/path/to/cover2.jpg',
        playTimes: 67890,
        tagList: ['标签3']
      }
    ],
    loading: false,
    hasMore: true
  },
  onLoadMore() {
    // 加载更多视频
  },
  onVideoClick({ detail }) {
    console.log('点击了视频:', detail.item);
  }
};
</script>

视频播放器示例

VideoPlayer 完整示例

<template>
  <div class="video-page">
    <VideoPlayer
      video-id="video_1"
      video-url="{{videoUrl}}"
      cover-image="{{coverImage}}"
      video-info="{{videoInfo}}"
      content-info="{{contentInfo}}"
      follow-status="{{followStatus}}"
      autoplay="{{true}}"
      initial-time="{{playedSeconds}}"
      onplay="onPlay"
      onpause="onPause"
      onfinish="onFinish"
      onerror="onError"
      ontimeupdate="onTimeUpdate"
      onshow-section="onShowSection"
      onlike="onLike"
      onfollow="onFollow"
    />
    
    <SectionSelector
      is-show="{{showSectionSelector}}"
      content-name="{{contentName}}"
      current-section-id="{{currentSectionId}}"
      current-section-name="{{currentSectionName}}"
      section-list="{{sectionList}}"
      page-size="{{30}}"
      onclose="onCloseSection"
      onchange-section="onChangeSection"
    />
  </div>
</template>

<script>
import VideoPlayer from 'quickbox/components/VideoPlayer';
import SectionSelector from 'quickbox/components/SectionSelector';
import QuickBox from 'quickbox';

export default {
  components: {
    VideoPlayer,
    SectionSelector
  },
  data: {
    videoUrl: 'https://example.com/video.mp4',
    coverImage: '/path/to/cover.jpg',
    videoInfo: {
      contentChapterName: '第1集',
      playerUrlInfo: 'https://example.com/video.mp4'
    },
    contentInfo: {
      contentName: '视频标题',
      likeCount: 1000,
      likeStatus: false
    },
    followStatus: false,
    playedSeconds: 0,
    showSectionSelector: false,
    contentName: '视频标题',
    currentSectionId: 'section_1',
    currentSectionName: '第1集',
    sectionList: [
      { id: 'section_1', name: '第1集', sequenceNo: 1, lockStatus: 0 },
      { id: 'section_2', name: '第2集', sequenceNo: 2, lockStatus: 2 }
    ]
  },
  onPlay({ detail }) {
    console.log('开始播放，当前时间:', detail.currentTime);
  },
  onPause({ detail }) {
    console.log('暂停播放，当前时间:', detail.currentTime);
  },
  onFinish() {
    console.log('播放完成');
    // 自动播放下一集
  },
  onError({ detail }) {
    console.error('播放错误:', detail);
    QuickBox.showToast('视频播放失败');
  },
  onTimeUpdate({ detail }) {
    // 更新播放进度
    this.playedSeconds = detail.currentTime;
  },
  onShowSection() {
    this.showSectionSelector = true;
  },
  onCloseSection() {
    this.showSectionSelector = false;
  },
  onChangeSection({ detail }) {
    console.log('切换到章节:', detail);
    // 加载新章节
  },
  onLike() {
    this.contentInfo.likeStatus = !this.contentInfo.likeStatus;
    this.contentInfo.likeCount += this.contentInfo.likeStatus ? 1 : -1;
  },
  onFollow() {
    this.followStatus = !this.followStatus;
    QuickBox.showToast(this.followStatus ? '追剧成功' : '取消追剧');
  }
};
</script>

阅读器示例

Reader 完整示例

<template>
  <Reader
    content-id="{{contentId}}"
    current-chapter-id="{{chapterId}}"
    chapter-name="{{chapterName}}"
    content="{{content}}"
    prev-chapter-id="{{prevChapterId}}"
    next-chapter-id="{{nextChapterId}}"
    read-type="{{readType}}"
    config="{{readerConfig}}"
    onback="goBack"
    onselect-chapter="onSelectChapter"
    onprev-chapter="onPrevChapter"
    onnext-chapter="onNextChapter"
    onconfig-change="onConfigChange"
    onread-type-change="onReadTypeChange"
  />
</template>

<script>
import Reader from 'quickbox/components/Reader';
import QuickBox from 'quickbox';

export default {
  components: {
    Reader
  },
  data: {
    contentId: 'book_1',
    chapterId: 'chapter_1',
    chapterName: '第一章',
    content: [
      '这是第一段内容...',
      '这是第二段内容...',
      '这是第三段内容...'
    ],
    prevChapterId: '',
    nextChapterId: 'chapter_2',
    readType: 'vertical',
    readerConfig: {
      fontSize: 30,
      bgColor: '#ffffff',
      textColor: '#333333',
      menuBg: '#ffffff',
      menuText: '#333333',
      lineColor: '#e5e5e5',
      theme: 'default'
    }
  },
  goBack() {
    QuickBox.router.back();
  },
  onSelectChapter({ detail }) {
    console.log('选择章节:', detail.chapterId);
    // 加载新章节
  },
  onPrevChapter() {
    console.log('上一章');
    // 加载上一章
  },
  onNextChapter() {
    console.log('下一章');
    // 加载下一章
  },
  onConfigChange({ detail }) {
    console.log('配置变化:', detail.config);
    this.readerConfig = detail.config;
  },
  onReadTypeChange({ detail }) {
    console.log('阅读类型变化:', detail.readType);
    this.readType = detail.readType;
  }
};
</script>

通用组件示例

Dialog 使用示例

<template>
  <div>
    <text @click="showDialog = true">显示弹窗</text>
    
    <Dialog
      is-show="{{showDialog}}"
      title="提示"
      message="确定要删除吗？"
      buttons="{{[
        { text: '取消', color: '#999' },
        { text: '确定', color: '#007AFF', primary: true }
      ]}}"
      show-close="{{true}}"
      close-on-backdrop="{{true}}"
      onbutton-click="onDialogButtonClick"
      onclose="onDialogClose"
    />
  </div>
</template>

<script>
import Dialog from 'quickbox/components/Dialog';

export default {
  components: {
    Dialog
  },
  data: {
    showDialog: false
  },
  onDialogButtonClick({ detail }) {
    if (detail.index === 1) {
      // 确定按钮
      console.log('确定');
    } else {
      // 取消按钮
      console.log('取消');
    }
    this.showDialog = false;
  },
  onDialogClose() {
    this.showDialog = false;
  }
};
</script>

Loading 使用示例

<template>
  <div>
    <!-- 局部加载 -->
    <Loading message="加载中..." />
    
    <!-- 全屏加载 -->
    <Loading className="fullscreen" message="加载中..." />
    
    <!-- 黑色背景加载 -->
    <Loading className="black" message="加载中..." />
  </div>
</template>

<script>
import Loading from 'quickbox/components/Loading';

export default {
  components: {
    Loading
  }
};
</script>

Empty 使用示例

<template>
  <Empty
    message="暂无内容"
    show-image="{{true}}"
    show-button="{{true}}"
    button-text="去查看"
    onbutton-click="onEmptyButtonClick"
  />
</template>

<script>
import Empty from 'quickbox/components/Empty';

export default {
  components: {
    Empty
  },
  onEmptyButtonClick() {
    console.log('点击了空状态按钮');
  }
};
</script>

功能组件示例

AddDesktop 使用示例

<template>
  <AddDesktop
    is-show="{{showAddDesktop}}"
    image="{{desktopImage}}"
    button-text="添加本剧到桌面，方便下次观看"
    bottom="{{120}}"
    page-type="20"
    add-type="{{6}}"
    onadd-click="onAddClick"
    onadd-success="onAddSuccess"
    onadd-error="onAddError"
  />
</template>

<script>
import AddDesktop from 'quickbox/components/AddDesktop';
import QuickBox from 'quickbox';

export default {
  components: {
    AddDesktop
  },
  data: {
    showAddDesktop: true,
    desktopImage: '/path/to/desktop-image.jpg'
  },
  onAddClick() {
    console.log('点击了添加桌面');
  },
  onAddSuccess() {
    QuickBox.showToast('添加桌面成功');
    this.showAddDesktop = false;
  },
  onAddError({ detail }) {
    console.error('添加桌面失败:', detail.error);
  }
};
</script>

ShareButton 使用示例

<template>
  <ShareButton
    title="分享标题"
    summary="分享摘要"
    image-path="/assets/newImages/base/coin.png"
    target-url="https://example.com"
    platforms="{{['WEIXIN', 'WEIBO']}}"
    icon="/assets/newImages/video/share.png"
    text="分享"
    onshare-success="onShareSuccess"
    onshare-error="onShareError"
  />
</template>

<script>
import ShareButton from 'quickbox/components/ShareButton';
import QuickBox from 'quickbox';

export default {
  components: {
    ShareButton
  },
  onShareSuccess() {
    QuickBox.showToast('分享成功');
  },
  onShareError({ detail }) {
    console.error('分享失败:', detail.error);
  }
};
</script>

🎨 样式自定义示例

所有组件都支持通过 class 和 style 属性自定义样式：

<VideoPlayer
  video-url="{{videoUrl}}"
  class="custom-video-player"
  style="width: 750px; height: 500px;"
/>
.custom-video-player {
  border-radius: 10px;
  overflow: hidden;
}

🔧 组合使用示例

视频播放页完整示例

<template>
  <div class="video-page">
    <PageTitleBar
      title="{{contentInfo.contentName}}"
      show-action="{{true}}"
      onaction-click="onShare"
    />
    
    <VideoPlayer
      video-url="{{videoUrl}}"
      cover-image="{{coverImage}}"
      video-info="{{videoInfo}}"
      content-info="{{contentInfo}}"
      onshow-section="showSectionSelector = true"
    />
    
    <SectionSelector
      is-show="{{showSectionSelector}}"
      section-list="{{sectionList}}"
      onclose="showSectionSelector = false"
    />
    
    <AddDesktop
      is-show="{{showAddDesktop}}"
      onadd-success="showAddDesktop = false"
    />
  </div>
</template>

列表页完整示例

<template>
  <div class="list-page">
    <PageTitleBar title="推荐内容" />
    
    <GridList
      list="{{videoList}}"
      loading="{{loading}}"
      has-more="{{hasMore}}"
      onload-more="loadMore"
      onitem-click="goToVideo"
    />
    
    <Loading if="{{loading && videoList.length === 0}}" className="fullscreen" />
    <Empty if="{{!loading && videoList.length === 0}}" />
  </div>
</template>

这些示例展示了如何在实际项目中使用 QuickBox 组件库。更多详细信息请参考 组件库文档。