Get a continuously updated github notes, can go and see the sincerity of the (originally written for himself to see ......) link address: Front-End-Basics
This article addresses: The Custom Vue's rolling, I used el-scrollbar
Base notes github address: https://github.com/qiqihaobenben/Front-End-Basics , you can watch, you can also star.
Text start ......
Why el-scrollbar?
Recently wrote an internal platform system, I believe we all know, there are many from which to scroll the defined area, for example, would now have to scroll a list, the first thought is to use overflow: scroll;ah! Er er, are not can not be used! If I had not seen the sun, I could endure the darkness.
We've seen a lot scroll bar is always more elegant implementation is undeniable that the United States is pleasing. So all these years I walk rivers and lakes full of guilt, so that we see the ugly.
Why el-scrollbar, as we all know, a rolling simulation is not difficult, but the market there are many such libraries. I consider, first Framework Program with a Vue, then component library use the Element, Element official website also has a lot of scrolling, and like a drop-down box Select assembly is rolling, so do not think any choice, simple the scrollbar will use Element own right, but also do not have any other packages or documents like the introduction.
Look Element official website Scrollbar is impossible to find this component, do not use the document, but can be used directly.
Why write this article?
- First, there was a time I did not write anything, first hot hand;
- Second, some students do not really know how to use, it probably is not the main document -
Let's look at what it looks like.
Read the results, and then look at how to find this component, the official did not provide documentation, but it is a component immediately available. Why do you say, this one will talk to you. First a little look at some of the basic concepts Element project.
Element's contribution guidelines say development environment to build and instruction packing code. Package code in npm run dist, we go package.jsonyou can see the specific operating instructions.
We simply look at build/webpack.conf.jsthe file, you will find packed files entrance is ./src/index.js, we'll take a look to this document. In addition to the contents which contain vue install the plug, or the like to mount the operation target on the prototype, the widget is a way to register the Element assembly is completed, of course, exposes methods and properties after installation of the installation package to use manner. In fact, we have seen the Scrollbarfigure. Take a look and then follow packages/scrollbar/index.js'the file, simply put this component introduced after install add a method to provide a method to use Vue to use, and then directly export out.
Go to src/main.jsthe file, look at the components received props:
The native attribute : If truethe scroll bar is not displayed el's bar, which is el analog out, if falsethe scroll bar to display analog
About tag this property, you can look at the el Select application components.
Draw a map view and wrap expressed about the difference between the two regions:
Try it
Display link: EL-ScrollBar trial
Taking into account that some students sometimes will not open the link above, the code stickers.
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<h2>list:</h2>
<el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
<div v-for="value in num" :key="vlaue">
{{value}}
</div>
</el-scrollbar>
</div>
CSS
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
#app {
height: 300px;
overflow: hidden;
}
/*展示列表的区域，超过200px出现滚动条*/
.list {
max-height: 200px;
}
JavaScript
new Vue({
el: "#app",
data: {
num: 30
}
})Element UI official never know when you update a document, but really might be too simple.