vue 仿 PC 端 163music 图片滚动组件
xyc2008
8年前
<h2>vue-image-scroll</h2> <p>一个模仿网易云音乐的vue图片滚动插件</p> <p><a href="/misc/goto?guid=4959740278842021857" rel="nofollow,noindex">Live Demos</a></p> <p><a href="/misc/goto?guid=4959740278842021857" rel="nofollow,noindex">Documention</a></p> <p>based on vue 2.0</p> <h2>Install</h2> <pre> <code class="language-html">npm install vue-image-scroll</code></pre> <h3>Local</h3> <pre> <code class="language-html">git clone https://github.com/ShanaMaid/vue-image-scroll.git #安装依赖 npm install #启动 npm run dev</code></pre> <h2>Usage</h2> <pre> <code class="language-html"><template> <div> <slider v-bind="setting"> </div> </template> <script> import slider from 'vue-image-scroll'; export default { components: { slider }, data: function() { return { setting: { imgSrc: ['1.jpg', '2.jpg', '3.jpg'] } } } } </script></code></pre> <h2>Update</h2> <ul> <li>finish basics</li> <li>image add tagName and tagStyle</li> </ul> <h2>Opitions</h2> <h3>Props</h3> <table> <thead> <tr> <th>Props</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>styleObject</td> <td>Object</td> <td>{width:'750',height:'240'}</td> <td>scroll box style,please use lower camel case, eg: background-color => backgroundColor</td> </tr> <tr> <td>image</td> <td>Array</td> <td>null</td> <td>imgae source path ,tagName,tagStyle; length >= 3</td> </tr> <tr> <td>interval</td> <td>Integer</td> <td>2000</td> <td>unit: ms, rolling interval</td> </tr> <tr> <td>imgStyle</td> <td>Object</td> <td>null</td> <td>image style, the same as styleObject</td> </tr> <tr> <td>autoRoll</td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td>direction</td> <td>String</td> <td>left</td> <td>scroll direction, left or right</td> </tr> </tbody> </table> <h2>To do</h2> <ul> <li>Basics</li> <li>add tag for image</li> </ul> <p>more!!</p> <h2>License</h2> <p><a href="/misc/goto?guid=4959740278946489860" rel="nofollow,noindex">MIT</a></p> <p> </p> <p> </p> <p> </p>