0.2.7 • Published 2 years ago
llo v0.2.7
安装
$ npm install llo vant --save
$ yarn add llo vant
安装此组件需要vant样式配合
// main.js
import 'vant/lib/index.css';
按需引入(推荐)
// main.js
import lPublic from 'llo'
import 'llo/lib/llo.css'
import 'vant/lib/index.css';
Vue.use(lPublic,{
compontnts:['lButton','lInput' // ...]
})
全局引入
// main.js
import lPublic from 'llo'
import 'llo/lib/llo.css'
import 'vant/lib/index.css';
Vue.use(lPublic)
组件都是以l-开始
l-button
l-input
等等...
消息提示use:
- 同步用法
- @param {String} tips 提示
- @param {String} message 内容
- @param {String} type success (default) | warning | error
- @param {Boolean} showCancelButton 是否展示取消按钮 default:false
- @param {Boolean} showConfirmButton 是否展示确认按钮 default:false
- @param {Boolean} closeOnClickOverlay 是否在点击遮罩层后关闭弹窗 default: false
- @param {Number} duration 关闭时间 showCancelButton为false && showConfirmButton为false时 default:2000
// type success
this.$msg.Confirm.success({
message: "提交成功",
onClose(action) {
console.log(action, " action");
},
});
// type warning
this.$msg.Confirm.warning({
message: "确定同意该申请?",
tips: "提示",
showCancelButton: true,
showConfirmButton: true,
onClose(action) {
console.log(action, " action");
}
});
// async
try {
const action = await this.$msg.vConfirmSync({
type: "warning",
message: "提交成功",
showCancelButton: true,
closeOnClickOverlay: false
});
console.log(action, " action");
} catch (error) {
console.log(error, " error");
}
节流
throttle
内有回调函数 2秒只能触发第一次props
完事返回end
<template>
<button @click="submit">提交</button>
</template>
<script>
import _ from 'llo/utils'
export default {
methods: {
submit: _.throttle(props => {
console.log(props)
},2000)
}
}
</script>
防抖
debounce
内有回调函数 1秒只能触发最后一次 完事后props
返回end
<template>
<button @click="submit">提交</button>
</template>
<script>
import _ from 'llo/utils'
export default {
methods: {
submit: _.debounce(props => {
console.log(props)
},1000)
}
}
</script>
防抖(优化)
debounce
内有回调函数 1秒只能触发最后一次 (如用户一直触发此函数无论是否到2s props都会返回auto
) 完事后props
返回end
<template>
<div>
<button @click="submit" v-for="item in 300" :key="item">提交</button>
</div>
</template>
<script>
import _ from 'llo/utils'
export default {
mounted () {
// 监听滚动条滚动
window.addEventListener("scroll", _.betterDebounce(props => {
// props === 'auto' 为1秒强制触发 props === 'end' 结束了(用户没有在操作)
console.log(props);
}, 1000));
},
destroyed () {
// 删除滚动条监听
window.removeEventListener("scroll", _.betterDebounce);
}
}
</script>