vue 仿 PC 端 163music 图片滚动组件

xyc2008 3年前
   <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    #安装依赖  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>