（一）

Vue 中全局引入 1.1.0 以上版本 暴露出来的全局变量名是 QiaoNan

import UI from 'qiaonan'
import 'qiaonan/css/style.css'

let app = createApp(App);
app.use()

或者
Vue.use(UI)

（二）

//暴露出来的模块

import { Message, Upload, Loading,Comfirm,HtmlHiddenScroll,HtmlVisibleScroll,$http,heart,throttle,debounce} from 'qiaonan'
import 'qiaonan/css/style.css'

三个方法 Message,Upload,Loading 的使用

一、 Message

```
Message.success("加载成功");
Message.warning("加载成功");
Message.error("加载成功");
Message.info("加载成功");
```
或者
```
Message.success({
    message:"成功",
    duration:3000,
    showClose:true,
    closed(){},
})
```
或者
```
Message({
    message:"成功信息",//消息内容
    type:"success",//消息类型
    showClose:true,//显示关闭按钮
    duration:3000, //为 0不自动关闭
    closed() {},关闭事件
})
```

二、Loading

```
let ld = Loading.service({
    text:"",//loading文本,
    textColor:"",//文本颜色
    background:"",//背景颜色遮罩层
    fullscreen:true,//同时有多个覆盖原来的loading只占用一个元素，建议用此属性
})
//关闭
ld.close();
```

三、Upload

```
Upload({
    url:"/test",//上传文件地址
    accept:"",//同原生input accept属性
    multiple:true,//多选上传
    data:{},//数据参数
    headers:{},//请求头
    onSuccess() {},//成功事件
    onError() {},//失败事件
})
```

四、全局注册

Vue2
```
Vue.prototype.$msg = Message;
Vue.prototype.$loading = Loading;
Vue.prototype.$upload = Upload;
Vue.prototype.$HtmlHiddenScroll = HtmlHiddenScroll;//隐藏滚动条
Vue.prototype.$HtmlVisibleScroll = HtmlVisibleScroll;//显示滚动条
```
Vue3
```
Vue.config.globalProperties.$msg = Message;
Vue.config.globalProperties.$loading = Loading;
Vue.config.globalProperties.$upload = Upload;
Vue.config.globalProperties.$HtmlHiddenScroll = HtmlHiddenScroll;
Vue.config.globalProperties.$HtmlVisibleScroll = HtmlVisibleScroll;
```

五、git-push 命令 提交代码到 gitee 或者 github

```
git-push "注释" //提交代码
git-push -v  //查看版本号
```
安装link链接的包
```
npm link
```
卸载link链接的包
```
npm rm --global qiaonan
```

六、tool 方法

//节流防抖 参数是函数
import {throttle, debounce,heart,$http} from 'qiaonan'
```
//得到对象
let H = heart();
//开始 fn回调函数，time间隔时间 fn是回调函数
H.run(fn,time);
//取消
H._cancel();
```
//示例代码
```
import { heart } from 'qiaonan';
let Heart = heart();
function cb() {
    //采用的是 await promise
    return new Promise((resolve, reject) => {
        fetch('https://qiaonan.info:8123/login').then(() => {
            console.log(222)
            resolve()
        }).catch(() => {
            reject();
        })
    })
}
//cd 是普通函数或者 cd返回值是promise对象
Heart.run(cb, 500)
setTimeout(() => {
    Heart._cancel();
}, 10000);
```


```
$http.get(url, data, headers,loading) // loading请求是否加载loading 默认值false打开loading
$http.post(url, data, headers,loading) // loading请求是否加载loading 默认值false打开loading
$http.put(url, data, headers,loading) // loading请求是否加载loading 默认值false打开loading
$http.delete(url, data, headers,loading) // loading请求是否加载loading 默认值false打开loading
```

七、npm ls -g 查看全局安装的包

```
    npm ls -g
    npm ls -g --depth 0
```

八、Comfirm

```
Confirm('提示', "确定退出吗", {
    type: "warning",//success error info
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    //关闭事件,有此事件一定要实现
    beforeClose(buttonText,instance,next) {
        /**
        if(buttonText=='cancel') {
            next();
            return
        }
        if(buttonText=='confirm') {
            instance.confirmButtonText = '正在加载中...';
            instance.confirmDisable = true;
            setTimeout(() => {
                instance.confirmButtonText = '确定';
                instance.confirmDisable = false;
                next();
            }, 2000);
        }
        */
    },

}).then(() => {
    QiaoNan.Message({
        type: "success",
        message: '提交成功'
    })
}).catch(() => {
    QiaoNan.Message({
        type: "warning",
        message: '取消'
    })
})
```

九、预览图片

```
    //  可通过 p.close() 关闭预览图片
    let p = QiaoNan.PreviewImage('https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', {
        list:[
            "https://www.itqiche.com/uploads/20230104/2be0d1a9c3efdbc347181a5e1d999df5.png",
            "https://www.itqiche.com/uploads/20230104/a42e7e30697667c61008148624e843d1.jpg",
            "https://www.itqiche.com/uploads/20230104/b687d07fb8df5e0e5854457d799fdbc9.png",
            "https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        ]
    })
```