简介

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);
    },
  },
}