ljs-waterfall-flow

简介

ljs-waterfall-flow。瀑布流。

快速开始

npm i ljs-waterfall-flow -S

快速应用

全局注入

import LJSWaterfallFlow from 'ljs-waterfall-flow'
app.use(LJSWaterfallFlow);

局部注入

import { LJSWaterfallFlow } from 'ljs-waterfall-flow';
export default {
  name: 'App',
  components: {
    LJSWaterfallFlow
  }
}

主参数

参数	类型	必填项	默认值	参考值	说明
data	Array	√			基础数据。
column	Number	×	2		列，流的列数。
columnGapWidth	String	×	25px		列，缝隙宽。
animation	Boolean	×	false		数据变化时的动画。

示例

常规

<LJSWaterfallFlow
  :data="contentData.data"
  :column="3">
  <template #default="scope">
    <template v-for="(item, i) in scope.row" :key="i">
      <template v-if="item.type === 1">
        <div class="item type1">
          <p>{{ item.content }}</p>
        </div>
      </template>
      <template v-else-if="item.type === 2">
        <div class="item type2" @click="openTc(item)">
          <img :src="item.imgUrl"/>
          <div>{{ item.content }}</div>
        </div>
      </template>
    </template>
  </template>
</LJSWaterfallFlow>

export default {
  name: 'App',
  data() {
    return {
      contentData: {
        data: [],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.contentData.data = [
        {
          type: 1, // 1纯文本，图+标题
          content: '1951年7月9日，贵州省第一届各族各界人民代表会议在贵阳召开。会议选举产生贵州省第一届各族各界人民代表会议协商委员会，由贵州省各族各界人民代表会议代行贵州省人民代表大会职权，协商委员会为常设机构。此次会议的召开和协商委员会的建立，标志着贵州省人民民主政治制度的诞生，为召开全省人民代表大会奠定了基础。'
        },
        {
          type: 2, // 1纯文本，图+标题
          imgUrl: '/public/mock/zhanting_pic1.jpg',
          content: '贵州省第一届各族各界人民代表会议提案审查汇编',
        },
      ];
      setInterval(() => {
        this.contentData.data.push({
          type: 1, // 1纯文本，图+标题
          content: '1951年7月9日，贵州省第一届各族各界人民代表会议在贵阳召开。会议选举产生贵州省第一届各族各界人民代表会议协商委员会，由贵州省各族各界人民代表会议代行贵州省人民代表大会职权，协商委员会为常设机构。此次会议的召开和协商委员会的建立，标志着贵州省人民民主政治制度的诞生，为召开全省人民代表大会奠定了基础。'
        });
      }, 3000);
    },
  },
}