vue2滚动条之vue2-perfect-scrollbar的使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

最近发现npm一个比较好用的演示地址：vue2-perfect-scrollbar demo

安装

yarn add vue2-perfect-scrollbar

// or
yarn add vue2-perfect-scrollbar

局部使用

在script中使用

<script>
// 导入滚动条
import { PerfectScrollbar } from 'vue2-perfect-scrollbar'

// 在script中声明组件
export default {
  components: {
    // 3rd Party
    PerfectScrollbar,
  },
	setup() {
    const notifications = [
      {
        user: {
          avatar: require('@/assets/images/avatars/4.png'),
          name: 'Flora Downey',
        },
        title: 'Congratulation John! 🎉 ',
        subtitle: 'Won the monthly best seller badge',
        time: 'Today',
      },
      {
        user: {
          avatar: '',
          name: 'Tom Holland',
        },
        title: 'New user registered.',
        subtitle: '5 hours ago',
        time: 'Yesterday',
      },
      {
        user: {
          avatar: require('@/assets/images/avatars/5.png'),
          name: 'Bertram Gilfoyle',
        },
        title: 'New message received',
        subtitle: 'You have 10 unread messages',
        time: '11 Aug',
      },
      {
        service: {
          icon: require('@/assets/images/svg/paypal.svg'),
        },
        title: 'Paypal',
        subtitle: 'Received Payment',
        time: '25 May',
      },
      {
        user: {
          avatar: require('@/assets/images/avatars/3.png'),
          name: 'John Smith',
        },
        title: 'Revised Order 📦',
        subtitle: 'New order revised from john',
        time: '19 Mar',
      },
      {
        service: {
          icon: require('@/assets/images/svg/chart.svg'),
        },
        title: 'Finance report has been generated',
        subtitle: '25 hrs ago',
        time: '27 Dec',
      },
    ]

    const perfectScrollbarOptions = {
      maxScrollbarLength: 60,
      wheelPropagation: false,
    }

    return {
      notifications,
      getInitialName,
      perfectScrollbarOptions,

      icons: {
        mdiBellOutline,
      },
    }
  },
}
</script>

在template中使用

<template>
  <v-menu
    offset-y
    left
    nudge-bottom="22"
    :elevation="$vuetify.theme.dark ? 9 : 8"
    content-class="list-style notification-menu-content"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-icon
        v-bind="attrs"
        v-on="on"
      >
        {{ icons.mdiBellOutline }}
      </v-icon>
    </template>
    <v-card class="app-bar-notification-content-container">
      <perfect-scrollbar
        class="ps-user-notifications"
        :options="perfectScrollbarOptions"
      >
        <v-list class="py-0">
          <!-- Header -->
          <v-list-item
            class="d-flex"
            link
          >
            <div class="d-flex align-center justify-space-between flex-grow-1">
              <span class="font-weight-semibold">Notifications</span>
              <v-chip
                class="v-chip-light-bg primary--text font-weight-semibold"
                small
              >
                8 New
              </v-chip>
            </div>
          </v-list-item>
          <v-divider></v-divider>

          <!-- Notifications -->
          <template v-for="(notification, index) in notifications">
            <v-list-item
              :key="notification.title"
              link
            >
              <!-- Avatar -->
              <v-list-item-avatar
                :class="[{'v-avatar-light-bg primary--text justify-center': notification.user && !notification.user.avatar}]"
                size="38"
              >
                <v-img
                  v-if="notification.user && notification.user.avatar"
                  :src="notification.user.avatar"
                ></v-img>
                <span
                  v-else-if="notification.user && !notification.user.avatar"
                  class="text-lg"
                >{{ getInitialName(notification.user.name) }}</span>
                <v-img
                  v-else
                  :src="notification.service.icon"
                ></v-img>
              </v-list-item-avatar>

              <!-- Content -->
              <v-list-item-content class="d-block">
                <v-list-item-title class="text-sm font-weight-semibold">
                  {{ notification.title }}
                </v-list-item-title>
                <v-list-item-subtitle class="text-sm">
                  {{ notification.subtitle }}
                </v-list-item-subtitle>
              </v-list-item-content>

              <!-- Item Action/Time -->
              <v-list-item-action>
                <span class="text--secondary text-xs">{{ notification.time }}</span>
              </v-list-item-action>
            </v-list-item>
            <v-divider :key="index"></v-divider>
          </template>
          <v-list-item
            key="read-all-btn"
            class="read-all-btn-list-item"
          >
            <v-btn
              block
              color="primary"
            >
              Read All Notifications
            </v-btn>
          </v-list-item>
        </v-list>
      </perfect-scrollbar>
    </v-card>
  </v-menu>
</template>

全局使用

在线演示地址

在main.js中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import PerfectScrollbar from "vue2-perfect-scrollbar";
import "vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css";

Vue.use(PerfectScrollbar);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

在App.vue中使用

<template>
  <div id="app">
    <perfect-scrollbar>
    <HelloWorld/>
    <img width="25%" src="./assets/logo.png">
    </perfect-scrollbar>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ps {
  height: 200px;
}
</style>

效果