bs-ui-popup

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

功能介绍

底部上滑框

使用示例： example/pages/index

安装

• 复制example/utils/bsPage.js文件到项目的任意位置【建议放在项目的utils目录下】
• 在app.js文件中引入const bsPage = require('./utils/bsPage.js')，在onLaunch生命周期里重置Page方法。

App({
    onLaunch() {
        Page = bsPage
    }
})

• 在项目根目录下执行命令行

npm init

npm install bs-ui-popup

• 在微信开发者工具中构建npm，项目的根目录会生成miniprogram_npm目录，popup组件就放在里面。
• app.json页面中引入popup组件

{
    "usingComponents": {
        "bs-popup": "miniprogram_npm/bs-ui-popup/index"
    }
}

使用方法

• 如果你的页面是Page请引入（defaultBhv.js文件跟popup组件同目录）

const popupBhv = require('/miniprogram_npm/bs-ui-popup/defaultBhv.js').pageBhv

• 如果你的页面是Component请引入。

const popupBhv = require('/miniprogram_npm/bs-ui-popup/defaultBhv.js').compBhv

• 然后，behaviors: [popupBhv], 放入你的页面。

Page({
    behaviors: [popupBhv]
})
// 或
Component({
    behaviors: [popupBhv]
})

• 配置完后可以开始使用组件了，像这样：

// 页面js文件
const popupBhv = require('/miniprogram_npm/bs-ui-popup/defaultBhv.js').pageBhv;
Page({
    behaviors: [popupBhv],
    data: {
        popupOption1: {
            title: 'tyuioas',
            list: [
                {
                    id: 1,
                    label: '',
                    text: '内容'
                },
                {
                    id: 2,
                    label: '标题1',
                    text: '内容1'
                },
                {
                    id: 3,
                    label: '标题2',
                    text: ['内容2', '22222']
                }
            ],
            tool: null
        },
        popupOption2: {
            title: '我也是醉了',
            list: [
                {
                    id: 1,
                    label: '',
                    text: '1111111'
                },
                {
                    id: 2,
                    label: '标题1',
                    labelTip: '标题说明说明说明',
                    text: '222222222'
                },
                {
                    id: 3,
                    label: '标题2',
                    text: ['3333333333', '444444444444444444']
                }
            ],
            tool: null
        }
    }
})

<!--页面结构，popupOption保存在defaultBhv.js中-->
<view class="page" >
    <button class="popup" catchtap="showPopup" data-msg="{{popupOption1}}" data-popup data-slot="test" >click show popup</button>
    <button class="popup" catchtap="showPopup" data-msg="{{popupOption2}}" data-tname="test">show popup</button>
    <button class="popup" catchtap="showPopup" data-msg="字符串内容" data-popup data-tname="test2">show popup</button>
</view>
<bs-popup option="{{popupOption}}"></bs-popup>

• 在父组件上option="{{popupOption}}"为必须项,如果option的值为空,不会弹出窗口

• button上需要绑定catchtap="showPopup"和data-msg="{{popup所需数据或一个字符串}}",data-msg是窗口展示需要的数据[包括title],data-msg如果是一个纯字符,title默认为”说明“，并且没有lable。

• button上在v0.1.9版本上追加了变量data-popup,只有当该变量为true【Boolean】时，点击事件有效果

自定义样式

| Class Name | Comments | |----------------- |--------- | | cm-bg | 自定义内容区域背景色样式 |
| cm-title | 自定义头部区域容器样式 | | cm-title-text | 自定义头部区域文案样式 | | cm-content | 自定义内容区域容器样式 | | cm-text-item | 自定义常规内容item容器样式 | | cm-text-label | 自定义常规内容item标题样式 | | cm-text-labelTip | 自定义常规内容item副标题样式 | | cm-text-text | 自定义常规内容item的文案内容样式 |

系统级别的样式

可直接通过路径 @import "miniprogram_npm/bs-ui-popup/default.wxss"; 导入至app.wxss中使用

如果默认样式不符合UED需求，也可自行进行针对其中的样式进行重写

| Class Name | Comments | |----------------- |--------- | | sys_bs-popup_bg | 与cm-bg作用区域一致 | | sys_bs-popup_title | 与cm-title作用区域一致 | | sys_bs-popup_title-text | 与cm-title-text作用区域一致 | | sys_bs-popup_content | 与cm-content作用区域一致 | | sys_bs-popup_text-item | 与cm-text-item作用区域一致 | | sys_bs-popup_text-label | 与cm-text-label作用区域一致 | | sys_bs-popup_text-labelTip | 与cm-text-labelTip作用区域一致 | | sys_bs-popup_text-text | 与cm-text-text作用区域一致 |

接口说明

Properties

| Property | Type | Default Value | Comments | |------------|---------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------| | option | Object | popupOption | 绑定在父组件上，根据popupOption是否为null判断popup是否展示，不为null时，是个经过封装的event对象，保存在defaultBhv.js中。【固定写法】 | | catchtap | Function | showPopup | 绑定在每个按钮上，用于触发展示popup提示框，保存在defaultBhv.js中【固定写法】 | | data-msg | String/Object | "" | 绑定在每个按钮上，用于传递当前按钮需要展示的内容【必选项】 | | data-popup | Boolean | false | 绑定在每个按钮上，如果为true，按钮点击后展示的内容为popup框 | | data-tname | String | '' | 绑定在每个按钮上，开启template功能，需要在项目的根目录存在template文件夹且有index.wxml模板文件，通过模板的name值与data-tname绑定，模板内只支持cover-view和cover-image标签,注意：如果开启了template功能，data-msg传的对象中list数据将失效，可以使用tool传递数据，如果模板文件需要使用样式的话，可以在template文件夹下创建index.wxss文件，并且在app.wxss文件中@import'template/index.wxss' |

• data-msg传值tool说明: 常规模式下【不开启template】data-msg所传递的对象中最少应该包含list数据，title是可选项，如果title不存在，组件会使用默认的title=“说明”，非常规模式下，list数据将失效，需要使用tool属性，整个tool将会暴露在template中，你可以在template模板中这样获取tool携带的数据{{tool}}、{{tool[0]}}、{{tool.xxx}}... tool的数据类型没有限制，title与常规模式相同。

其他

特别提示:

• 父组件上的option="{{popupOption}}"为固定写法,不可修改,popupOption在defaultBhv.js里面声明

• button上的catchtap="showPopup"为固定写法,不可修改,showPopup在defaultBhv.js里面声明