社区云帖子小程序

CSDN 社区云帖子小程序设计，旨在通过与MarkDown结合的设计，让用户在编辑帖子的过程中获得更丰富的可编程体验

按钮

样式

• bbs-button 必要class, 默认为边框按钮

其他两种按钮样式

• bbs-button--primary 主要按钮，带背景色
• bbs-button--text 文字按钮

附加class

• bbs-button--round 圆角按钮
• bbs-button--mini 小按钮

示例代码：

<button class="bbs-button">默认按钮</button>
<button class="bbs-button bbs-button--primary">主要按钮</button>
<button class="bbs-button bbs-button--text">文字按钮</button>

<button class="bbs-button bbs-button--primary bbs-button--round">圆角按钮</button>
<button class="bbs-button bbs-button--primary bbs-button--mini">小按钮</button>
<button class="bbs-button bbs-button--primary bbs-button--mini bbs-button--round">圆角小按钮</button>

举例:

"<button class=\"bbs-button bbs-button--primary\" data-topic-click='{\"event_name\": \"subscribe_topic\", \"type\": \"confirm\", \"question\": \"确定要订阅本帖？\", \"message\": \"订阅成功\", \"errMessage\": \"订阅失败\"}'>订阅</button>"

其中 event_name 和 data 为CSDN社区预定义的可组装事件和事件数据。message为事件成功后的提示文本。

其中data-topic-click可选配置信息例子

{
  'event_name': 'eventName',
  'data': {a: 1}  // 可选, 可以字符串可以Object
}

{
  "event_name": "eventName",
  "data": {a: 1},      // 可选
  "message": "XXX",    // 可选,不写不提示
  "errMessage": "",    // 可选
  "messageOpts": {}    // 可选
}

{
  'event_name': "eventName",
  'type': 'alert',
  'data': { a:1 },           // 可选
  'message': '您已成功XXXX',  // 可选,不写不提示
  "errMessage": "",          // 可选
  'messageOpts': {},         // 可选
}

 {
  "event_name": "A",
  "type": "confirm",
  "data": {a:1},             // 可选
  "question":"确定要XXXX ？", // 可选，默认: 是否确认操作？
  "message": "成功",         // 可选,不写不提示
  "errMessage": "",         // 可选
  "messageOpts": {},        // 可选
}

按钮预定义事件

订阅帖子：

 {
  "event_name": "subscribe_topic",
  "type": "confirm",
  "question":"确定要订阅本帖？", // 可选，默认: 是否确认操作？
  "message": "订阅成功",        // 可选,不写不提示
  "errMessage": "订阅失败",     // 可选
}

注意配置data-topic-click的JSON字符串时，双引号要加上反斜杠。

超链接

<hyper-link href=\"https://www.csdn.net/\"  target=\"_blank\" content=\"这是一段tooltip\">测试Aaa</hyper-link>

使用超链接组件可通过content 属性指定一个tooltip的提示效果