vuebar 使用方法
vuebar 官网地址：http://github.serafin.io/vuebar/
1 引入vue
import Vue from 'vue'
CDN
<script src="https://unpkg.com/vue"></script>
2 引入vuebar
import Vuebar from 'vuebar'
Vue.use(Vuebar)
CDN
<script src="https://unpkg.com/vuebar"></script>
3 引入以下css
.vb > .vb-dragger {
z-index: 5;
12px;
right: 0;
}
.vb > .vb-dragger > .vb-dragger-styler {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate3d(0,0,0,0);
transform: rotate3d(0,0,0,0);
-webkit-transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba(48, 121, 244,.1);
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
display: block;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.3);
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
}
4 html
<div id="app">
<div class="el1" ref="vuebar" v-bar="{overrideFloatingScrollbar: false}">
<div class="el2">
content...
</div>
</div>
</div>
使用指令的方式添加options
v-bar="{overrideFloatingScrollbar: false}"
使用js 的方式添加options
<script>
var app = new Vue({
el:'#app',
data(){
return {}
}
})
//使用js 的方式配置vuebar参数
app.$vuebar.initScrollbar(app.$refs.vuebar ,{
overrideFloatingScrollbar:false
})
</script>
快速上手，完整示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.el1 {
height: 100px;
margin: 0 auto;
}
.vb > .vb-dragger {
z-index: 5;
12px;
right: 0;
}
.vb > .vb-dragger > .vb-dragger-styler {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate3d(0,0,0,0);
transform: rotate3d(0,0,0,0);
-webkit-transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition:
background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba(48, 121, 244,.1);
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
display: block;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.3);
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba(48, 121, 244,.5);
}
</style>
</head>
<body>
<div id="app">
<div class="el1" ref="vuebar">
<div class="el2">
Giant larvaceans are one important group we need to learn more about.” In the past, other scientists have tried studying giant larvaceans in the laboratory. But these efforts always failed because the animals’ houses were too fragile to be harvested and collected specimens were never able to build houses outside the ocean.To study the zooplankton in their natural habitat, Dr. Katija and her collaborators developed a new deep-sea imaging instrument, called DeepPIV, which they paired with a remotely operated vehicle. DeepPIV projects a sheet of laser light that cuts straight through a larvacean’s mucus house. A high-definition camera on the remotely operated vehicle can then capture the inner pumping mechanisms illuminated by the laser.Swimming hundreds of feet beneath the ocean’s surface in many parts of the world are prolific architects called giant larvaceans. These zooplankton are not particularly giant themselves (they resemble tadpoles and are about the size of a pinkie finger), but every day, they construct one or more spacious "houses” that can exceed three feet in length. The houses are transparent mucus structures that encase the creatures inside. Giant larvaceans beat their tails to pump seawater through these structures, which filter tiny bits of dead or drifting organic matter for the animals to eat. When their filters get clogged, the larvaceans abandon ship and construct a new house. Laden with debris from the water column, old houses rapidly sink to the seafloor. In a study published in Science Advances on Wednesday, scientists near California’s Monterey Bay have found that, through this process, giant larvaceans can filter all of the bay’s water from about 300 to 1,000 feet deep in less than two weeks, making them the fastest known zooplankton filter feeders. In doing so, the creatures help transfer carbon that has been removed from the atmosphere by photosynthesizing organisms to the deep sea, where it can be buried and stored long term. And given their abundance in other parts of the world, these organisms likely play a crucial role in the global carbon cycle. When it comes to the flow of carbon in the ocean, "we don’t know nearly as much as we should,” said Kakani Katija, a principal engineer at the Monterey Bay Aquarium Research Institute and the study’s lead author. "If we really want to understand how the system works, we have to look at all the players involved.
</div>
</div>
</div>
<!--引入vue-->
<script src="https://unpkg.com/vue"></script>
<!--引入vuebar-->
<script src="https://unpkg.com/vuebar"></script>
<script>
Vue.config.devtools = true;
Vue.config.performance = true;
var app = new Vue({
el: '#app',
data: {
example1Content: false,
example2Content: false,
example3Content: false,
example4Content: false,
example6Show: false,
},
})
app.$vuebar.initScrollbar(app.$refs.vuebar , {overrideFloatingScrollbar:false})
</script>
</body>