用法

• 组件样式尺寸单位为 px ，原则上不允许使用其他尺寸单位，因为会影响缩放，特殊情况请慎重考虑与充分测试。

安装

npm install @biscreen/bicontainer3

全局使用：

main.ts

import { createApp } from 'vue';

// 引入
import BiContainer3 from '@biscreen/bicontainer3';
import '@biscreen/bicontainer3/dist/style.css';

import App from '@/App.vue';
const app = createApp(App);

// 注册
app.use(BiContainer3);
app.mount('#app');

局部使用

import '@biscreen/bicontainer3/dist/style.css';
import { BiContainer } from '@biscreen/bicontainer3';

组件 API

• BiContainer
• BiScrollView

BiContainer

BiContainer 是大屏容器，通过简单配置来渲染页面，开发者不必去关心屏幕适配的实现等问题。

属性

| 属性 | 说明 | 是否必填 | 类型 | 可选值 | 默认值 | | ---------------- | ------------------------------------------------------- | -------- | -------- | ------------------------ | --------------- | | minSize | 允许缩放的最小尺寸 | 是 | string[] | -- | ['683', '384'] | | designSize | UI 设计尺寸。设置后可以直接使用设计上的其他视图组件尺寸 | 是 | string[] | -- | ['1366', '768'] | | customStyle | 容器自定义样式(样式层叠) | 否 | string | -- | -- | | v-model:openFull | 是否全屏,可以用来控制是否全屏 | 否 | boolean | -- | false | | fillMode | 填充模式 | 否 | string | 'contain' , 'stretching' | 'contain' |

BiScrollView

| 属性 | 说明 | 是否必填 | 类型 | 可选值 | 默认值 | | ------------- | ---------------- | -------- | -------------- | ------ | -------- | | cellHeight | 单行行高 | n | number | -- | 60(px) | | height | 组件高度 | n | number | -- | 310(px) | | step | 一次滚动行数 | n | number | -- | 1 | | waitTime | 延迟多长时间开始 | n | number | -- | 1000(ms) | | duration | 动画时长 | n | number | -- | 1000(ms) | | stopAnimation | 是否停止 | n | boolean | -- | false | | list | 列表数据 | y | PropListItem[] | -- | [] |

类

PropListItem

export type PropListItem = {
    content: string;
};

插槽

| 名字 | 说明 | | ------ | ---------------- | | -- | 列表 | | nodata | 无数据时候的内容 |