0.0.22 • Published 2 years ago
@biscreen/bicontainer3 v0.0.22
用法
- 组件样式尺寸单位为 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
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 | 无数据时候的内容 |