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