vue-funnel v1.0.1

vue-funnel

• 这是一个数据漏斗ui组件

Table of Contents

• 介绍

• 示例

  • demo1
  • demo2

• 参数说明

• slots说明

介绍

• 本组件不依赖任何第三方 ui组件库 ,纯粹的支持所有的vue项目工程。
• 对插槽内容做了加工处理,灵活程度较高

⬆ Back to Top

demo1

示例图片

示例code

  <template>
    <div class="vue-funnel-test" style="margin:50px auto;">
      <vue-funnel style="margin:50px 100px;" :colors="colors" :isLeft="true">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div slot="info0">信息显示1</div>
        <div slot="info1">信息显示2</div>
        <div slot="info2">信息显示3</div>
      </vue-funnel>
    </div>
</template>
<script>
export default {
  name: 'vue-funnel-test',
  components: {
    'vue-funnel': () => import('@/components/vue-funnel/index')
  },
  data() {
    return {
      colors: ['#576DE7', '#8B74F2', '#A37EEF']
    }
  }
}
</script>

⬆ Back to Top

demo2

示例图片

示例code

  <template>
    <div class="vue-funnel-test" style="margin:50px auto;">
      <vue-funnel style="margin:50px 100px;" :colors="colors" :isLeft="false">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div slot="info0">信息显示1</div>
        <div slot="info1">信息显示2</div>
        <div slot="info2">信息显示3</div>
      </vue-funnel>
    </div>
</template>
<script>
export default {
  name: 'vue-funnel-test',
  components: {
    'vue-funnel': () => import('@/components/vue-funnel/index')
  },
  data() {
    return {
      colors: ['#576DE7', '#8B74F2', '#A37EEF']
    }
  }
}
</script>

⬆ Back to Top

参数说明

⬆ Back to Top

slots说明

⬆ Back to Top