bga-npm-hello-world-vue v0.1.2

bga-npm-hello-world-vue

基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BGABacktop 的内容。整个项目只需要在根组件中添加一次即可

目录

• 效果图
• 基本使用
• 属性说明
• 高级用法
• 关于我
• 打赏支持

效果图 Demo

基本使用

1.安装依赖

npm install --save bga-npm-hello-world-vue

2.在入口 js 文件中导入。我这里是 main.js

import BgaBacktop from 'bga-npm-hello-world-vue'
Vue.use(BgaBacktop)

3.在根组件中使用，整个项目只需要在根组件中添加一次即可。我这里是 App.vue

<template>
  <div>
    <left-layout/>
    <router-view/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-backtop :threshold="150" :right="160" :bottom="60" :width="40" :height="40" :svgMajorColor="'#7b79e5'"
                 :svgMinorColor="'#ba6fda'" :svgType="'rocket'"/>
  </div>
</template>

4.为需要被滚动的标签添加「bga-backtop」样式

<template>
  <div class="demo1-container">
    <!-- 该标签里有很长很长的内容，为其添加滚动到顶部的功能，添加「bga-backtop」样式 -->
    <div class="have-very-long-content bga-backtop">
      <h2 v-for="n in 30">have very long content 很长很长的内容{{ n }} </h2>
    </div>
  </div>
</template>

属性说明

图片模式相关属性说明

SVG 模式相关属性说明

公共属性说明

高级用法

1.通过设置 imgCss 属性设置样式来支持鼠标 hover 状态时切换图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-backtop :threshold="150" :right="560" :bottom="60" :width="40" :height="40" :imgCss="'bga-backtop-img'"/>
  </div>
</template>
<style lang="scss">
  // BGABacktop 普通状态和鼠标悬停状态时的图片样式
  .bga-backtop-img {
    content: url("/assets/bga-backtop-normal.png");
    &:hover {
      content: url("/assets/bga-backtop-hover.png");
    }
  }
</style>

2.通过 slot 插桩的方式定制 BGABacktop 的内容，如果为其添加了子组件则不会显示默认样式。下面演示插入自定义 SVG 和 img。当然开发者也可以插入其他子组件

插入自定义 SVG。可以到 阿里巴巴矢量图标库 中下载 SVG

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-backtop :threshold="150" :right="80" :bottom="60" :width="40" :height="40">
      <svg width="40" height="40" viewBox="0 0 1024 1024">
        <!-- 火箭外形 -->
        <path fill="#7b79e5"
              d="M960 768l-128-73.12c0-64.432 0-128.752 0-182.88 0-192-128-384-320-512C320 128 192 320 192 512c0 54.128 0 118.432 0 182.88L64 768c-38.816 20.32-64 47.632-64 83.008L0 960c0 35.376 28.624 64 64 64l896 0c35.376 0 64-28.624 64-64l0-108.992C1024 815.632 994 790 960 768zM896 896 128 896l0-17.12 192-109.68L320 512c0-119.936 71.872-249.376 192-351.872C632.128 262.624 704 392.064 704 512l0 257.184 189.184 108.064c0.992 0.624 1.936 1.248 2.816 1.872L896 896z"
              p-id="5019"/>
        <!-- 中间圆点 -->
        <path fill="#ba6fda" d="M512 448m-64 0a4 4 0 1 0 128 0 4 4 0 1 0-128 0Z" p-id="5020"/>
      </svg>
    </bga-backtop>
  </div>
</template>

插入自定义图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-backtop :threshold="150" :right="480" :bottom="60" :width="40" :height="40">
      <img class="bga-backtop-img" style="width: 100%; height: 100%;"/>
    </bga-backtop>
  </div>
</template>
<style lang="scss">
  // BGABacktop 普通状态和鼠标悬停状态时的图片样式
  .bga-backtop-img {
    content: url("/assets/bga-backtop-normal.png");
    &:hover {
      content: url("/assets/bga-backtop-hover.png");
    }
  }
</style>

3.可以在任意的 Vue 组件中通过 JavaScript 代码主动触发可滚动组件滚动到顶部。应用场景：滚动一定距离后重新加载了网络数据，加载完数据后将可滚动组件滚动到顶部

// 在 BGABacktop 内部已经为 Vue.prototype 添加了全局方法 $bgaBacktop，因此在 Vue 实例中可以直接通过 this.$bgaBacktop() 来调用该方法
this.$bgaBacktop()

关于我

新浪微博	个人主页	邮箱	BGA系列开源库QQ群
bingoogolapple	bingoogolapple.cn	bingoogolapple@gmail.com

打赏支持

如果您觉得 BGA 系列开源库帮你节省了大量的开发时间，请扫描下方的二维码随意打赏，要是能打赏个 10.24 :monkey_face:就太:thumbsup:了。您的支持将鼓励我继续创作:octocat:

如果您目前正打算购买通往墙外的梯子，可以使用我的邀请码「YFQ9Q3B」购买 Lantern，双方都赠送三个月的专业版使用时间:beers:

License

MIT