Element如何实现loading的方法示例
前言
互联网时代，网络“提速”日益频繁，人们打开Web或软件的速度越来越快。然而在某些情况下，难免会出现需要用户等待的时候。那么，在这种情况下，美观，有趣，又实用的加载动画，不仅能够有效地减缓用户负面情绪，让用户挺留更长的时间。
使用 loading 的几种方式
使用 loading 的方式:
组件式
<van-loading />指令式
<div v-loading="loading" ></div>编程式
loading({
text: '加载中'
})loading 指令实现
指令
注册 loading 指令
app.directive('focus', {
mounted(el, binding) {},
// ... other hooks
})使用指令
<div v-loading="isShow" > </div>指令的作用:
自定义指令就是一个定义了一些 Hooks 的对象，这些 Hooks 接受绑定 DOM(这里指的是div)、binding参数等参数。在这些 Hooks 可以进行一些 DOM 层的操作，来复用一些公共逻辑。
directive 具体使用参考
通过指令来创建 loading
思路：
- loading 提示时创建一个
loading组件,将它的 DOM 插入到文档中。 - 关闭 loading 时，将
loading对应的 DOM 从文档中移除。
来看下流程
代码实现
查看 Element 源码 packages/loading/class="lazy" data-src/directive
directive
const vLoading = {
mounted(el, binding) {
if(!!binding.value){
createInstance(el, binding) // 创建 loading 组件并插入到文档中
}
},
updated(el, binding) {
const instance = el.instance // 以创建的组件实例
if (binding.oldValue !== binding.value) {
if(binding.value) { // value 从 false -> true 时触发
createInstance(el, binding)
} else {
instance.close() // 移除 loading 组件挂载的 DOM
}
}
},
unmounted(el) {
el?.instance?.close() // 移除 loading 组件挂载的 DOM
},
}创建 loading 实例
createInstance 创建 loading 实例
const createInstance = (el, binding) => {
// 通过绑定 DOM 的自定义属性来设置 loading 的相关参数
const textExr = el.getAttribute('element-loading-text')
const spinnerExr = el.getAttribute('element-loading-spinner')
const backgroundExr = el.getAttribute('element-loading-background')
const customClassExr = el.getAttribute('element-loading-custom-class')
const vm = binding.instance
el.instance = Loading({
text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
fullscreen: !!binding.modifiers.fullscreen,
target: !!binding.modifiers.fullscreen ? null : el,
body: !!binding.modifiers.body,
visible: true,
lock: !!binding.modifiers.lock,
})
}Loading
const Loading = function (options: ILoadingOptions = {}): ILoadingInstance {
// 覆盖默认配置
options = {
...defaults,
...options,
}
// 支持选择器
if (typeof options.target === 'string') {
options.target = document.querySelector(options.target) as HTMLElement
}
// 或者直接传递一个 DOM
options.target = options.target || document.body
// loading 插入的父元素
const parent = options.body ? document.body : options.target
options.parent = parent
// loading 组件
const instance = createLoadingComponent({
options,
globalLoadingOption,
})
// loading 插入到父元素中
parent.appendChild(instance.$el)
// 返回 loading 实例
return instance
}createLoadingComponent
export function createLoadingComponent({
options,
globalLoadingOption,
}: ILoadingCreateComponentParams): ILoadingInstance {
let vm: VNode = null
const data = reactive({
...options,
visible: false, // 控制 loading 是否展示
})
function setText(text: string) {
data.text = text
}
function close(){
data.visible = false
}
const componentSetupConfig = {
...toRefs(data),
setText,
close,
handleAfterLeave,
}
// loading 组件
const elLoadingComponent = {
name: 'ElLoading',
setup() {
return componentSetupConfig
},
render() {
return h(Transition, {
name: 'el-loading-fade',
}, {
// withDirectives 使用指令
default: withCtx(() => [withDirectives(createVNode('div', {
// ... loading 动画
// v-show 指令，使用 visible 作为控制变量
}),[[vShow, this.visible]])]),
})
}
}
vm = createVNode(elLoadingComponent)
// 将 vnode patch 挂载到指定容器上， vnode 转换为真正的 DOM
render(vm, document.createElement('div'))
return {
...componentSetupConfig,
vm,
get $el() {
return vm.el as HTMLElement
},
}
}loading 动画
elLoadingComponent 的 loading 组件是通过 svg + css animation 实现的。
<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" width='50' height='50'>
<circle class="circle" cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke="#000"/>
</svg>涉及 stroke-dasharray 设置点划线实虚线的间距，以及 stroke-dashoffset设置起始位置,具体代码查看下面的demo代码。
loading codepen
其他 loading 使用方式
编程式使用
编程式调用和指令，他们的核心逻辑是相同的，
- 指令需要通过绑定 DOM 上自定义属性或者指令参数拿到 loading 的参数，并在对应的 Hooks 中调用创建 loading 动画
- 编程式调用时候，这些参数就可以直接传递给创建 loading 组件的函数。
组件式使用
定义的 elLoadingComponent 通过 props 来控制 loading 的展示。
总结
主要分析了如何通过 vue directive 实现 loading 的复用。包括了如何使用 loading 的三种方式,其中核心的逻辑是相同的渲染loading 组件，我们可以通过组件、编程式、指令将 loading 组件的DOM 插入到我们指定的挂载元素上。
到此这篇关于Element如何实现loading的方法示例的文章就介绍到这了,更多相关Element loading内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
