1.1.6 • Published 1 year ago
qiaonan v1.1.6
(一)
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",
]
})
```