前言
已经npm发布了,有需要的伙伴可以直接 npm install sen-water-fall --save 快捷使用,备注:请尊重原创,转载记得说明,欢迎一起改进
主要目录为:
组件
1.components/waterfall/index.vue
主要采用多行多列思维
<template>
<div class="waterfall">
<!-- 一个item为一个瀑布流布局 -->
<div class="waterfall-Item" v-if="list && list.length" :style="'gap:'+ Hgap + 'px'">
<div class="waterfall-vertical-col" v-for="col in cols" :key="col" :style="'gap:'+ Vgap + 'px'">
<div class="waterfall-vertical-row" v-for="row in rows" :key="row" :style="'background:' + bgColor">
<!-- 超出范围为false不显示,范围内函数handled为当前的object值 -->
<template v-if="handled(col,row)">
<slot :nowItem="handled(col,row)" v-if="slotCard"></slot>
<div v-else class="tips">
我在第{{row}}行,第{{col}}列,<br/>
在数组list中排第{{(row - 1) * cols + col}}个数据
</div>
</template>
</div>
</div>
</div>
<div v-else>
暂无数据
</div>
</div>
</template>
<script>
export default {
name:'water-fall',
props: {
list: {
type:Array,
default:()=>{
return []
}
},
cols:{ // 总列数
type:Number,
default:3
},
slotCard:{ // 是否开启插槽
type: Boolean,
default: false
},
Hgap:{ // 水平间距
type:Number,
default:10
},
Vgap:{ // 垂直间距
type:Number,
default:10
},
bgColor:{
type:String,
default: '#5189FB'
}
},
data() {
return {
};
},
computed:{
rows(){ // 总行数
let wlength = this.list.length
let num = 1
if(wlength){
num = Math.ceil(wlength/this.cols)
return num
}
return num
},
handled(){ // 数据项
return(col,row)=>{
let item = true
let all = (row - 1) * this.cols + col // 排在数组中第几个数据项
if(all > this.list.length){
console.log('区域块: '+ all + '超出数组长度: ' + this.list.length)
item = false // 默认
// if(row == this.rows){ // 最后一行分情况显示
// let over = this.cols - col
// if(over > 0){
// item = this.list[all - 1]
// }
// }
}else{
item = this.list[all - 1]
}
return item
}
}
},
watch: {
},
methods: {
},
created(){
}
};
</script>
<style scoped lang="scss">
.waterfall{
width: 100%;
.waterfall-Item{
display: flex;
flex-flow: row;
flex-wrap: nowrap;
flex-direction: row;
// gap:10px; // 水平间距
.waterfall-vertical-col{
flex: 1;
display: flex;
flex-flow: column;
flex-direction: column;
justify-content: flex-start; // 居上
// gap:10px; // 垂直间距
.waterfall-vertical-row{
width: 100%;
height: min-content;
flex: none;
// max-height: 200px;
// overflow: hidden;
word-break: break-all;
.tips{
padding-top: 20px;
}
.waterfall-content{
}
}
}
}
}
</style>
2.页面应用helloword
<waterfall :slotCard="true" :list="list">
<template slot-scope="scope">
<div>{{scope.nowItem}}</div>
</template>
</waterfall>
list:[
{id:1, text:' Flex是Flexible Box的缩写 flex布局表示弹性布局'},
{id:2, text:'column-gap 属性用来设置多栏布局 multi-column 中元素列之间的间隔大小 ; 2、grid 布局中 gap 属性是用来设置网格行与列之间的间隙,该属性是 row-gap 和 column-gap 的简写形式,并且起初是叫 ..'},
{id:3, text:' justify-content用于设置主轴上的子元素排列方式'},
{id:4, text:'flex-wrap设置子元素是否换行默认情况下,子元素项目都排在同一条线轴上,flex布局中默认是不换行的。如果父级元素宽度不够装下总的子元素,则会缩小子元素的宽度,才能够放进父级元素内'},
{id:5, text:'文字换行方法有: 1、按键盘回车键进行换行。 2、当一行书写完成时可自动换行,可一直点击空格键进行换行。 3、设置文字格式,指令为"井号加字母",编辑井号键加小写r为换行。'},
]