mcx-ui

Vue.js 组件库

使用

下载

npm install mcx-ui --save

引入全部组件

import Vue from 'vue'
import { Mcx } from 'mcx-ui';
Vue.use(Mcx);

按需引入部分组件

import { Button } from 'mcx-ui';
Vue.component(Button.name, Button);

使用

• loading 全局组件

import { Loading } from 'mcx-ui';
Vue.component(Loading.name, Loading);

<mc-loading :isShow="isShowLoading"></mc-loading>

• toast 全局组件

import { Toast } from 'mcx-ui';
Vue.component(Toast.name, Toast);

<mc-toast :isShow="isShowToast" :isText="isText"></mc-toast>

• swiper 组件

import { Swiper } from 'mcx-ui';
Vue.component(Swiper.name, Swiper);
/**
   * @desc swiper banner
   * @module components/Swiper
   * @param dataSource [Array]  - 数据源 类型 数组。 如果需要跳转 数据结构为:[{url:'',link:''}]
   * @param pagination {Boolean} - 是否显示分页器 默认 true
   * @param loop {Boolean} - 是否循环 默认 false 
   * @param autoplay {Boolean} - 是否自动切换 默认 false
*/
<mc-swiper></mc-swiper>

• popup 组件

import { Popup } from 'mcx-ui';
Vue.component(Popup.name, Popup);
/**
   * @desc popup
   * @module components/Popup
   * @param isShow [Boolean]  - 是否显示
   * @param @close [function]  - 关闭回调
*/

<mc-popup :isShow="isShow" @close=" is => isShow = is">
    <!-- content 需要一个高度 -->
    <div class="content">...</div>
</mc-popup>

• dialog 组件

import { Dialog } from 'mcx-ui';
Vue.component(Dialog.name, Dialog);
/**
   * @desc Dialog
   * @module components/Dialog
   * @param isShow [Boolean]  - 是否显示
*/

<mc-dialog :isShow="isShow">
    <div>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>

        <div @click="close"></div>
    </div>
</mc-dialog>

• totop 组件

import { ToTop } from 'mcx-ui';
Vue.component(ToTop.name, ToTop);
/**
   * @desc ToTop 为回到顶部按钮，默认不显示，根据业务控制何时显示隐藏，元素透明，需要插卡填充有颜色样式等。
   * @module components/ToTop
   * @param isShow [Boolean]  - 是否显示 默认false
   * @param el [String]  - 滚动元素class
*/


<mc-totop el="" :isShow="isShow">
    <div>内容</div>
</mc-totop>