<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>