Vue开源：VueCircleMenu - 美炸天的圆环菜单组件
bgcs1049
7年前
<p style="text-align:center"><a href="/misc/goto?guid=4959734828369312072"><img src="https://simg.open-open.com/show/6f2158bd81b11027a12a41c841655a5d.gif"></a></p> <h2>API</h2> <p>Props</p> <table> <thead> <tr> <th>参数</th> <th>类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>String</td> <td>必填项,指明菜单的类型,有6种：top,botoom,left,right,middle,middle-around</td> </tr> <tr> <td>circle</td> <td>boolean</td> <td>菜单按钮是否为圆角，默认为方形按钮</td> </tr> <tr> <td>mask</td> <td>String</td> <td>遮罩层，有两种："white"和"black"</td> </tr> <tr> <td>animate</td> <td>String</td> <td>子菜单动画,可以引入外部css动画库，比如Animate.css</td> </tr> <tr> <td>btn</td> <td>boolean</td> <td>开关按钮,填这属性，则有默认开关按钮，不填则没有默认,需要在slot中自行定义开关按钮</td> </tr> <tr> <td>colors</td> <td>Array</td> <td>按钮和菜单的背景颜色</td> </tr> </tbody> </table> <h2>Slot</h2> <table> <thead> <tr> <th>name</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>item_btn</td> <td>自定义开关按钮</td> </tr> <tr> <td>item_1</td> <td>第一个菜单的内容</td> </tr> <tr> <td>item_2</td> <td>第二个菜单的内容</td> </tr> <tr> <td>item_3</td> <td>第三个菜单的内容</td> </tr> <tr> <td>item_4</td> <td>第四个菜单的内容</td> </tr> </tbody> </table> <h2>详细说明</h2> <h2>Props</h2> <h3>type</h3> <p><code>type</code>参数是必填项，指明菜单的类型，一共有一下六种：top,botoom,left,right,middle,middle-around</p> <p><a href="/misc/goto?guid=4959734828468395682"><img src="https://simg.open-open.com/show/015e8850ba94affebce7dd6ba03cc383.gif"></a> <a href="/misc/goto?guid=4959734828550841753"><img src="https://simg.open-open.com/show/a495f315f4b97bdfbb590b5bf96759b2.gif"></a> <a href="/misc/goto?guid=4959734828633394799"><img src="https://simg.open-open.com/show/6ddd7c9a7eab06533bf97abe44ddd839.gif"></a> <a href="/misc/goto?guid=4959734828718375414"><img src="https://simg.open-open.com/show/47d68ff55b09ddddbaeea90da77263ec.gif"></a> <a href="/misc/goto?guid=4959734828800875205"><img src="https://simg.open-open.com/show/7a96706bf1f3b234ea1046892a07a133.gif"></a> <a href="/misc/goto?guid=4959734828891385233"><img src="https://simg.open-open.com/show/87ef9df57d86751afa139e6b00a227b6.gif"></a></p> <h2>circle</h2> <p><code>circle</code>是让菜单按钮为圆角，默认是方形按钮：</p> <p><a href="/misc/goto?guid=4959734828978118568"><img src="https://simg.open-open.com/show/3bb8d6f322676e492e6379e83b530306.gif"></a> <a href="/misc/goto?guid=4959734829058933752"><img src="https://simg.open-open.com/show/c9e3076f7c1c73629f3608da95658b70.gif"></a></p> <h2>mask</h2> <p><code>mask</code>是开关按钮在切换的时候产生的遮罩，分为两种："white"和"black".(注意：不填或填错类型都视为不需要遮罩)</p> <p><a href="/misc/goto?guid=4959734829147853043"><img src="https://simg.open-open.com/show/6117dd3e8ec5840745d95be2854f2bab.gif"></a> <a href="/misc/goto?guid=4959734828891385233"><img src="https://simg.open-open.com/show/87ef9df57d86751afa139e6b00a227b6.gif"></a></p> <h2>animate</h2> <p><code>animate</code>是给菜单添加动画，只要添加动画css类即可，可以引入第三方css动画库，比如animate.css</p> <p><a href="/misc/goto?guid=4959734829231972084"><img src="https://simg.open-open.com/show/4b1159c3477732a80da081583615f90e.gif"></a> <a href="/misc/goto?guid=4959734829324818920"><img src="https://simg.open-open.com/show/c35e4d7420e9df966fa231a36de950de.gif"></a> <a href="/misc/goto?guid=4959734829416294032"><img src="https://simg.open-open.com/show/c066e18c8b791ad2ff8c6c758bc7aad2.gif"></a> <a href="/misc/goto?guid=4959734829058933752"><img src="https://simg.open-open.com/show/c9e3076f7c1c73629f3608da95658b70.gif"></a></p> <h2>colors</h2> <p><code>colors</code>是指定按钮和菜单的背景颜色，不使用该属性，则会使用默认的颜色配置，该组件默认颜色配置为：</p> <p><a href="/misc/goto?guid=4959734829503978819"><img src="https://simg.open-open.com/show/512e6cf45ba18a5f35a053fc7a67d57c.png"></a></p> <p>如果要配置颜色，<code>colors</code>传入数组，另外，很重要的一点,数组的值必须是颜色代码，而不是css类.例如:</p> <pre> <code class="language-javascript"> <cirecle-menu type="bottom" colors="[ '#563761', '#A7425C', '#FFE26F', 'F3825F', '#F19584', ]"> <button type="button" slot="item_btn"></button> <a slot="item_1" class="fa fa-推ter fa-lg" herf="#" ></a> <a slot="item_2" class="fa fa-weixin fa-lg" herf="#" ></a> <a slot="item_3" class="fa fa-weibo fa-lg" herf="#" ></a> <a slot="item_4" class="fa fa-github fa-lg" herf="#" ></a> </cirecle-menu></code></pre> <p>注意颜色代码必须一一对应，第一个颜色代码指代按钮，第二个颜色为第一个菜单，依次类推，共五个颜色代码，填多，填少或者填入的不是颜色代码都是无效的</p> <h2>Slot</h2> <h3>item_btn</h3> <p>该命名<code>slot</code>是指自定义开关按钮，当你需要自定义开关按钮，请不要填写<code>btn</code>属性，使用该<code>slot</code>,这样就可以禁用默认的开关按钮，使用自定义的按钮。（自定义开关按钮有个好处，就是可以给开关按钮绑定事件，做进一步的操作）</p> <h3>item_1,item_2,item_3,item_4</h3> <p>该类<code>slot</code>分别指代四个菜单按钮</p> <h3>思想：</h3> <p>这五个<code>slot</code>，其实就说明该组件其实就一个包裹内容的控件， 里面的内容都在<code>slot</code>设置</p> <ul> <li>通过<code>solt</code>，可以填写任何内容，并且自定义样式</li> </ul> <pre> <code class="language-javascript"> <cirecle-menu type="top"> <button type="button" slot="item_btn"></button> <router-link :to="..." slot="item_1"> <span slot="item_2"></a> <div slot="item_3"></a> <img slot="item_4" src="img" /> </cirecle-menu></code></pre> <ul> <li>通过<code>slot</code>,给菜单绑定事件</li> </ul> <pre> <code class="language-javascript"> <cirecle-menu type="middle-around"> <button type="button" slot="item_btn" @click="dosomething" ></button> <a slot="item_1" herf="#" @click=""></a> <v-touch tag="a" v-on:tap="onTap" slot="item_2"></v-touch> <v-touch tag="a" v-on:tap="onTap" slot="item_3"></v-touch> <a slot="item_4" herf="#" v-on:handler="handler"></a> </cirecle-menu></code></pre> <h2>简单的例子</h2> <pre> <code class="language-javascript"><!--"middle"类型, 动画引入animate.css库，白色遮罩，圆形自定义开关按钮，默认菜单颜色配置--> <cirecle-menu type="middle" animate="animated jello" mask='white' circle> <button type="button" slot="item_btn"></button> <a slot="item_1" class="fa fa-推ter fa-lg"></a> <a slot="item_2" class="fa fa-weixin fa-lg"></a> <a slot="item_3" class="fa fa-weibo fa-lg"></a> <a slot="item_4" class="fa fa-github fa-lg"></a> </cirecle-menu></code></pre> <pre> <code class="language-javascript"><!--"top"类型,默认动画,灰色遮罩，方形默认开关按钮，自定义菜单颜色配置--> <cirecle-menu type="top" mask='black' btn colors="[ '#563761', '#A7425C', '#FFE26F', 'F3825F', '#F19584', ]"> <a slot="item_1" class="fa fa-推ter fa-lg"></a> <a slot="item_2" class="fa fa-weixin fa-lg"></a> <a slot="item_3" class="fa fa-weibo fa-lg"></a> <a slot="item_4" class="fa fa-github fa-lg"></a> </cirecle-menu></code></pre> <h2>安装和使用</h2> <pre> <code class="language-javascript">npm install vue-circle-menu</code></pre> <ul> <li>若作为全局组件使用</li> </ul> <pre> <code class="language-javascript">//在项目入口文件 import Vue from 'vue' import CircleMenu from 'vue-circle-menu' Vue.component('CircleMenu', CircleMenu)</code></pre> <ul> <li>若作为局部组件</li> </ul> <pre> <code class="language-javascript">//在某个组件中 import CircleMenu from 'vue-circle-menu' export default { components: { CircleMenu } }</code></pre> <h2>bug和建议</h2> <p>如果在使用中遇到问题或者建议，欢迎提<code>issues</code></p> <p> </p>