UNPKG

captain-ui

Version:

有赞vue wap业务组件库

112 lines (97 loc) 2.23 kB
## PaidMember 知识付费会员 <script> import data from 'docs/zh-CN/paid-member/data'; export default { data() { return { data }; } } </script> ### 使用指南 #### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐) ```javascript import { PaidMember } from 'captain-ui'; ``` ### 代码演示 #### 显示标题和查看全部按钮 同时传show-title和show-title-all :::demo ```html <template> <div> <cap-paid-member show-title show-title-all :title="data.title" :subscriptionsCount="data.sold_out" :member-list="data.sub_entry"> </cap-paid-member> </div> </template> ``` ::: #### 不显示查看全部按钮 不传showTitleAll时,不展示查看全部按钮。 :::demo ```html <template> <div> <cap-paid-member show-title :title="data.title" :member-list="data.sub_entry"> </cap-paid-member> </div> </template> ``` ::: #### 不显示标题栏 不传showTitle时,不展示标题栏。 :::demo ```html <template> <div> <cap-paid-member :title="data.title" :member-list="data.sub_entry"> </cap-paid-member> </div> </template> ``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | show-title | 是否显示标题栏,默认不显示 | Boolean | false | | | show-title-all | 是否显示查看全部按钮, 默认不显示 | String | false | | | title | 标题 | String | - | | | member-list | 内容列表 | Array | - | 是 | ### 数据格式 #### member-list数据结构 ```json [ { // 内容alais "alias": "1y56r22b89uet", // 内容标题 "title": "不二测试", // 内容封面 "cover": "https://img.yzcdn.cn/upload_files/2017/05/24/FioU5ebKIiPuCPqTibirDCzna8PN.png", // 是否免费试读/试听 "is_free": 0, // 内容类型:图文/音频 "media_type": 2, // 价格 "price": 1, // 发布日期 "publish_at": "2017-05-24 16:09:31", // 订阅数 "subscriptions_count": 3, // 所属专栏标题 "column_title": "不二测试专栏" }, ... ] ```