前端组件开发文档

微吼组件开发及使用规范


签到

<h4>安装</h4> <p>七巧板基于 VUE (2.5), Webpack (3.0) 请确保已具备较新的 node 环境。</p> <h4>聊天过滤基础使用</h4> <p>发起端可以发起签到,并统计最后签到结果。观看端可以进行签到操作。</p> <pre><code class="language-html">&lt;TEMPLATE&gt; &lt;SIGNIN-COMPONENT :room_id="roomInfo.room_id" :vss_token="roomInfo.vss_token" :third_party_user_id="roomInfo.third_party_user_id" :countTime="countTime" @toDataList="toDataList" ref="signinComponent"&gt; &lt;/SIGNIN-COMPONENT&gt; &lt;SCRIPT&gt; export default { data () { return { roomInfo: { roomeId: "lss_xxxxx", // 当前活动房间id vss_token: 1, // vss_token third_party_user_id: 1234, // 当前房间用户id }, countTime: 10 // 签到倒计时时间 } }, methods: { startSign() { this.$refs.signinComponent.openSignIn() }, toDataList() { // 点击查看明细方法,可以跳转页面、路由、弹窗等,自行定义 this.$refs.signinComponent.showList() // 在签到弹窗中显示签到明细,也可根据需求进行跳转等操作 console.log('查看签到统计列表') } } } &lt;/SCRIPT&gt; &lt;/TEMPLATE&gt;</code></pre> <p>观看端展示签到窗口</p> <pre><code class="language-javascript">this.$vhallEvent.$on('sign_in_push', e =&gt; { this.$refs.signin.openSignIn(e.sign_id) })</code></pre> <p>观看端关闭签到窗口</p> <pre><code class="language-javascript">this.$refs.signin.closeSignIn()</code></pre> <h4>签到 v1.1 版本升级,优化 class 名称</h4> <table> <thead> <tr> <th style="text-align: left;">原Class</th> <th style="text-align: left;">修改后Class</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">vh-signin_box</td> <td style="text-align: left;">vh-signin__box</td> </tr> <tr> <td style="text-align: left;">vh-signin_header</td> <td style="text-align: left;">vh-signin__header</td> </tr> <tr> <td style="text-align: left;">vh-signin_header-close</td> <td style="text-align: left;">vh-signin__header-close</td> </tr> <tr> <td style="text-align: left;">vh-signin_body</td> <td style="text-align: left;">vh-signin__body</td> </tr> <tr> <td style="text-align: left;">vh-signin_body-title</td> <td style="text-align: left;">vh-signin__body-title</td> </tr> <tr> <td style="text-align: left;">vh-signin_body-btn</td> <td style="text-align: left;">vh-signin__body-btn</td> </tr> <tr> <td style="text-align: left;">vh-signin_body-counting</td> <td style="text-align: left;">vh-signin__body-counting</td> </tr> <tr> <td style="text-align: left;">host-timeout</td> <td style="text-align: left;">vh-signin__host-timeout</td> </tr> <tr> <td style="text-align: left;">vh-signin_status</td> <td style="text-align: left;">vh-signin__status</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-total</td> <td style="text-align: left;">vh-signin__status-total</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-detail</td> <td style="text-align: left;">vh-signin__status-detail</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list</td> <td style="text-align: left;">vh-signin__status-list</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-box</td> <td style="text-align: left;">vh-signin__status-list-box</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-container</td> <td style="text-align: left;">vh-signin__status-list-container</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-ul</td> <td style="text-align: left;">vh-signin__status-list-ul</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-li</td> <td style="text-align: left;">vh-signin__status-list-li</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-avatar</td> <td style="text-align: left;">vh-signin__status-list-avatar</td> </tr> <tr> <td style="text-align: left;">vh-signin_status-list-nickname</td> <td style="text-align: left;">vh-signin__status-list-nickname</td> </tr> <tr> <td style="text-align: left;">vh-signin_body-second</td> <td style="text-align: left;">vh-signin__body-second</td> </tr> </tbody> </table>

页面列表

ITEM_HTML