introduce

A few days ago, I gave you a Vue3 custom desktop popup component. Today, I share with you the newly developed Vue3.0 custom PC analog scroll bar component. Vue3. X custom beautify scroll bar component V3Scroll

V3-scroll is a PC web page customized simulation system scroll bar component based on vuE3. X.

Support to customize the size, color, level of the scroll bar and whether to hide the scroll bar automatically when moving out of the scroll area.

Quick introduction

Quickly introduce the V3Scroll component in main.js.

Import {createApp} from 'vue' import App from './ app.vue 'import './index.css' // import v3Scroll import v3Scroll from  './components/v3scroll' createApp(App).use(V3Scroll).mount('#app')Copy the code

Using the component

wraps the contents to quickly generate a scroll bar.

<! <v3-scroll size="8" color="#ff09ff" zIndex="2002"> <p> </p> </v3-scroll> <! <v3-scroll @scroll="handleScroll"> <p> Display custom content! </p> </v3-scroll>Copy the code

The function is actually somewhat similar to the El-ScrollBar component.

Vue3. X supports real-time monitoring of DOM size changes and dynamic updating of scrollbar components.

And supports scrolling to a specified location.

Parameter configuration

Props: {// Whether to display native scroll bars native: Boolean, // Whether to automatically hide scroll bars autohide: Boolean, // Scroll bars size: {type: [Number, String], default: "}, // scrollbar color: String, // scrollbar zIndex: null},Copy the code

coded

V3scroll component template and core logic processing.

<template> <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" v-resize="handleResize"> <div :class="['vscroll__wrap', {native: native}]" ref="ref__wrap" @scroll="handleScroll"> <div class="vscroll__view" v-resize="handleResize"> <slot /> </div> </div> <div :class="['vscroll__bar vertical']" @mousedown="handleClickTrack($event, 0)" :style="{'width': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"> <div class="vscroll__thumb" ref="ref__barY" :style="{'background': color, 'height': barHeight+'px'}" @mousedown="handleDragThumb($event, 0)"></div> </div> <div :class="['vscroll__bar horizontal']" @mousedown="handleClickTrack($event, 1)" :style="{'height': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"> <div class="vscroll__thumb" ref="ref__barX" :style="{'background': color, 'width': barWidth+'px'}" @mousedown="handleDragThumb($event, "></div> </div> </div> </template> /** * @desc Vue3.0 V3Scroll * @time Andy by 2021-01 * @about Q: 282310962 wx: xy190310 */ <script> import { onMounted, ref, reactive, toRefs, nextTick } from 'vue' import domUtils from './utils/dom' export default { props: { // ... }, /** * vue3.x custom directive */ // Monitor DOM size changes. Caching: {'resize': {beforeMount: function(el, binding) { let width = '', height = ''; function get() { const elStyle = el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null); if (width ! == elStyle.width || height ! == elStyle.height) { binding.value({width, height}); } width = elStyle.width; height = elStyle.height; } el.__vueReize__ = setInterval(get, 16); }, unmounted: function(el) { clearInterval(el.__vueReize__); } } }, setup(props, context) { const ref__box = ref(null) const ref__wrap = ref(null) const ref__barX = ref(null) const ref__barY = Ref (null) const data = reactive({barWidth: 0, barHeight: 0, // barHeight: 0, // 1, // scroll bar vertical offset type isTaped: false, // whether the mouse cursor presses the scroll bar isHover: false, and // whether the mouse cursor hovers in the scroll area isShow:! props.autohide, }) onMounted(() => {nextTick(() => {updated()})}) // Mouse slide into const handleMouseEnter = () => {data.ishover = Const handleMouseLeave = () => {data.isshow = false data.isshow = false} Const handleDragThumb = (e, index) => { const elWrap = ref__wrap.value const elBarX = ref__barX.value const elBarY = ref__barY.value data.isTaped = True let c = {} // block the default event domutils.isie ()? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault()) document.onselectstart = () => false if(index == 0) { c.dragY = true c.clientY = e.clientY }else { c.dragX = true c.clientX = e.clientX } // ... } const handleClickTrack = (e, index) => {//... } // Const updated = () => {if(props. Native) return const elBox = ref__box.value const elWrap = ref__wrap Const elBarX = ref__barX. Value const elBarY = ref__barY. Value let barSize = domUtils. GetScrollBarSize () / / vertical scroll bar if(elWrap.scrollHeight > elWrap.offsetHeight) { data.barHeight = elBox.offsetHeight **2 / elWrap.scrollHeight data.ratioY = (elWrap.scrollHeight - elBox.offsetHeight) / (elBox.offsetHeight - data.barHeight) elBarY.style.transform If (barSize) {elwrap.style.marginRight = -barsize + 'px'; if(barSize) {elwrap.style.marginRight = -barsize + 'px' }}else {data.barheight = 0 elbary.style.transform = 'elwrap.style.marginRight ='}}else {data.barheight = 0 elbary.style.transform = 'elwrap.style.marginRight ='}} } // scrolling element /DOM size change const handleResize = () => {// perform update} //... return { ... toRefs(data), ref__box, ref__wrap, ref__barX, ref__barY, handleMouseEnter, handleMouseLeave, handleDragThumb, handleClickTrack, updated, // ... } } } </script>Copy the code

If you’re interested, you can try it.

Ok, developing custom scrollbar components based on VUE3 is shared here. I hope you enjoy it! 💪 🏻

Finally, attach a Vue3.0 popup component

Vue3.0 custom PC desktop client pop-up components | vue3 global component dialog box