Bs-ui-popup NPM

bs-ui-popup

这个项目是从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}}、{{tool0}}、{{tool.xxx}}... tool的数据类型没有限制，title与常规模式相同。