0.3.3 • Published 4 months ago
@soei/flyweight v0.3.3
享元模式

<div style="height:100px;width:300px;">
<!-- 确认父容器 宽 高 存在, 依赖父容器 `宽`, `高` 计算 -->
<s-flyweight ...></s-flyweight>
</div>
<template>
<Card class="flyweight-test" flex column simply>
<template #title>
<div>Flyweight Test</div>
</template>
<template #inner>
<Card class="applist" background="#f7f7f7" border="0.1px" height="100%">
<Flyweight
:flys="flys"
hover-scroll
scroll-x
auto
:view="view"
:width="100"
padding
height="100% - 10px"
:offset="[10, 10]"
>
<template #default="{ data, x, y, width, height, space, i }">
<div
class="flyweight-item demo"
:class="{ [`flyweight-item-${i & 3}`]: true}"
>
{{ data.name }}
</div>
</template>
<template #end>
<div>end</div>
</template>
</Flyweight>
</Card>
</template>
</Card>
</template>
<script setup>
//...
/* 引入依赖 */
import { Flyweight, Card } from "@soei/flyweight";
let flys = ref([]);
flys.value = Array.from({ length: 200 }, (_, i) => ({ name: i }));
let view = reactive({
picker: "name",
id: 10,
});
//...
</script>
新增 Stream
组件池
<template>
<Stream
class="form"
:T="[
/* slot|name|type=>name 插槽名称 */
{ type: 'name', label: '输入框' },
{ type: 'state', label: '选择任务', data: [{label, value}, ...] },
{ type: 'state', label: '选择事件', data: [{label, value}, ...] },
]"
>
<template #state="{ type, label, index, data }">
<div class="form_item">
<el-select size="mini" v-model="search[type]" :placeholder="label">
<el-option
v-for="item in data"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
<template #default="{ type, label, index }">
<div class="form_item">
<el-input
size="mini"
v-model="search[type]"
:placeholder="label"
></el-input>
</div>
</template>
</Stream>
</template>
<script setup>
// 导入
import { Stream } from "@soei/flyweight";
</script>
问题修复
修复了上版本极限显示,当
高度不足显示一行
的问题
安装
# 安装
npm i @soei/flyweight
Vue2
引用
// Vue2引用, 安装和Vue3相同
import Flyweight from @soei/flyweight/vue2
// 样式和vue相同
import "@soei/flyweight/style.css";
使用 <s-flyweight ...>
<!-- scroll-x 横向滚动, 无[scroll-x]属性这是上下滚动 -->
<s-flyweight scroll-x></s-flyweight>
<!-- hover-scroll 鼠标移入显示滚动条样式 -->
<s-flyweight hover-scroll class="your-class"></s-flyweight>
<s-card hover-scroll class="your-class"></s-card>
<style lang="scss">
.your-class {
/* 设置滚动条颜色 */
--scrollbar-color: red;
/* 设置滚动条宽度 */
--scrollbar-width: 10px;
}
</style>
<!-- 设置高度 -->
<s-flyweight height="100% - 10px"></s-flyweight>
<!-- 设置宽度 -->
<s-flyweight width="100% - 10px"></s-flyweight>
<s-flyweight :width="`100% - 10px`"></s-flyweight>
使用 <s-card ...>
<!-- auto-scroll 默认显示滚动条样式 -->
<s-card auto-scroll class="your-class"></s-card>
<!-- hover-scroll 鼠标移入显示滚动条样式 -->
<s-card hover-scroll class="your-class"></s-card>
<style lang="scss">
.your-class {
/* 设置滚动条颜色 */
--scrollbar-color: red;
/* 设置滚动条宽度 */
--scrollbar-width: 10px;
}
</style>
<!-- 设置高度 -->
<s-card height="100% - 10px"></s-card>
<!-- 设置边距 -->
<s-card offset="10px"></s-card>
<s-card :offset="[10]"></s-card>
<!-- 带删除的卡片 -->
<s-card :close="true" #content @close="close"></s-card>
<!-- 设置删除按钮颜色 -->
<s-card
:close="{
color: 'red'
}"
#content
@close="close"
></s-card>
<s-card :close="true" @close="close">
<template #content>呈现内容</template>
</s-card>
<script setup>
let close = () => {
console.log("close");
};
</script>
<!-- 设置标题 -->
<s-card
title="标题"
class="flyweight"
// ** 布局 **
flex row center column
// ** 边距 **
offset="20, 0, 10, 0"
// ** 是否显示关闭按钮 **
:close="true"
@close="close"
// ** 插槽 **
[#content, #inner, #default]
>
</s-card>
`Vue3` 引入方式
```html
<script>
import { Flyweight } from "@soei/flyweight";
</script>
<!-- 非 <style scoped> scoped-->
<style>
@import "@soei/flyweight/dist/style.css";
</style>
// main.js
import "@soei/flyweight/dist/style.css";
import flyweight from "@soei/flyweight";
Vue.use(flyweight);
// use.vue
<s-flyweight ...></s-flyweight>
<s-card ...></s-card>
引用
import { Flyweight, Card } from "@soei/flyweight";
更新日志
0.2.0
新增 Card 组件
<s-card
title="标题"
class="flyweight"
// ** 布局 **
flex row center column
// ** 边距 **
offset="20, 0, 10, 0"
// ** 是否显示关闭按钮 **
:close="true"
@close="close"
// ** 插槽 **
[#content, #inner, #default]
>
</s-card>
0.1.1
拼写错误修复
0.1.0
新增
v-model:space
中字段{ // --- 新增 --- // 总行数 showrow, // 总列数 showcolumn, // --- 原有 --- row, // 数据填充行数 column, // 数据填前列数 }
修复了 多列数据时
@onend
回调函数问题
0.0.9
问题修复
v-model:space
和 onend 冲突问题处理
0.0.8
新增
v-model:space
, 计算空间显示行
与列
被通知对象
notice
: {row
,column
}<!-- eg. 当有5个元素, 当: :width="100% / 3", column = 3列, row = 2, 当: :width="100% / 5", column = 5列, row = 1, 当: :width="100% / 7", column = 7列, row = 1 ... --> <!-- VUE3 --> <template> <s-flyweight v-model:space="notice"></s-flyweight> </template> <script setup> let notice = ref({ row: 0, column: 0 }); watch( () => notice.value, (val) => { console.log(val); } ); </script> <!-- VUE2 --> <template> <s-flyweight :space.sync="notice"></s-flyweight> </template> <script> export default { data() { return { notice: { row: 0, column: 0 }, }; }, }; </script>
0.0.7
新增
:auto
, 默认值:false
当 auto
为 true
时, :width
赋值会被视为 最小值
, 剩余空间自动填充
<s-flyweight :auto="true" :width="100"></s-flyweight>
0.0.6
优化
flys
初始化赋值,不改变时,获取 length 问题
0.0.5
扩展
width
赋值<!-- 添加`百分比`计算, 计算顺序, 左 => 右 --> <s-flyweight width="100% / 2 - 10px"></s-flyweight> <s-flyweight width="calc(100% - 100px)"></s-flyweight> <s-flyweight width="100% - 100px"></s-flyweight> <s-flyweight width="100px - 10px"></s-flyweight> <s-flyweight width="100px"></s-flyweight>
优化了 slot
end
的呈现逻辑<!-- onend为滑动到底时, 回调函数 --> <s-flyweight :flys="..." @onend="..."> <template #default="{ data, index }"> 呈现内容 {{data.*}} </template> <template #end> ...显示在最下面的相关信息 </template> </s-flyweight>
0.0.3
新增
:top
<s-flyweight :top="滚动高度"></s-flyweight>
0.0.2
优化了
Vue3
的兼容
问题Vue3
引入方式<script> import { Flyweight } from "@soei/flyweight"; </script> <!-- 非 <style scoped> scoped--> <style> @import "@soei/flyweight/dist/style.css"; </style>
或
源码引入import Flyweight from "@soei/flyweight/src/Flyweight.vue";
或
// main.js import "@soei/flyweight/dist/style.css"; import flyweight from "@soei/flyweight"; Vue.use(flyweight); // use.vue <s-flyweight ...></s-flyweight>
安装
npm i @soei/flyweight
引用
// 引入方式 vue2
import Flyweight from "@soei/flyweight/src/Flyweight.vue";
// 引入方式 Vue3
import { Flyweight } from "@soei/flyweight";
使用
<Flyweight
:index="0"
:view="{id: Number, picker: 'id'}"
:flys="list|Array"
:width="80"
:height="130"
:offset="[0, 30]"
@onend="Function"
>
<template #default="{data, index}"> ...todo </template>
</Flyweight>
<Flyweight [attrs]></Flyweight>
index
和 view
只生效一个
index
定位索引
// 格式
Number;
:index="10";
view
指定显示哪个索引
// 格式
{
// 定位属性
id: Number,
// 定位属性字段名称
picker: String
}
:view="{id: 10, picker: 'id'}";
flys
显示的数据列表
// 格式
Array;
:flys="[]";
width
单个容器 宽度
// 格式
Number;
// 默认: 0, 占整行
:width="100";
height
单个容器 高度
// 格式
Number;
// 默认: 100
:height="10";
offset
偏移量 左右
, 上下
// 格式
Array = [左右, 上下];
:offset="[0, 30]";
@onend
拉到底部
时的回调
// 格式
Function;
@onend="function(){}";
0.0.11
9 months ago
0.2.13
5 months ago
0.2.12
5 months ago
0.2.11
5 months ago
0.2.10
5 months ago
0.1.0
9 months ago
0.3.0
5 months ago
0.2.1
9 months ago
0.1.2
9 months ago
0.2.0
9 months ago
0.1.1
9 months ago
0.2.7
8 months ago
0.2.6
8 months ago
0.2.9
5 months ago
0.2.8
8 months ago
0.3.2
4 months ago
0.3.1
5 months ago
0.2.2
8 months ago
0.2.5
8 months ago
0.3.3
4 months ago
0.0.10
12 months ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago