Skeleton 骨架屏 #

在需要等待加载内容的位置设置一个骨架屏,某些场景下比 Loading 的视觉效果更好。

基础用法 #

基础的骨架效果。

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeXtmaWxsOnZhcigtLWtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5LCMyNjYxQkYpO3N0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwjMjY2MUJGKX08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSA0LjVWMkM5LjUgMS43MjM4NiA5LjI3NjE0IDEuNSA5IDEuNUgyQzEuNzIzODYgMS41IDEuNSAxLjcyMzg2IDEuNSAyVjExQzEuNSAxMS4yNzYxIDEuNzIzODYgMTEuNSAyIDExLjVINi41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSBrZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyIj48cGF0aCBkPSJNMTEgNC41SDdDNi43MjM4NiA0LjUgNi41IDQuNzIzODYgNi41IDVWMTRDNi41IDE0LjI3NjEgNi43MjM4NiAxNC41IDcgMTQuNUgxNEMxNC4yNzYxIDE0LjUgMTQuNSAxNC4yNzYxIDE0LjUgMTRWOEwxMSA0LjVaIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PHBhdGggZD0iTTEwLjUgNC41VjhDMTAuNSA4LjI3NjE0IDEwLjcyMzkgOC41IDExIDguNUgxNC41IiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+PC9nPjwvc3ZnPg==)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgMi41TDYuNSAxMy41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz48cGF0aCBkPSJNMTEuNSA0TDE0LjI3NSA3LjcwMDAxQzE0LjQwODMgNy44Nzc3OSAxNC40MDgzIDguMTIyMjQgMTQuMjc1IDguMzAwMDFMMTEuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PHBhdGggZD0iTTQuNSA0TDEuNzI1IDcuNzAwMDFDMS41OTE2NyA3Ljg3Nzc5IDEuNTkxNjcgOC4xMjIyNCAxLjcyNSA4LjMwMDAxTDQuNSAxMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIC8+PC9nPjwvc3ZnPg==)

更多参数 #

可以配置骨架屏段落数量,以便更接近真实渲染效果

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)

动画效果 #

我们提供了一个开关标志,表明是否显示加载动画, 调用 animated 如果真是这样,所有的 el-skeleton 的子节点将显示动画。

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)

自定义样式 #

KDesign 提供的排版模式有时候并不满足要求,当您想要用自己定义的模板时,可以通过一个具名 Slot 来自己设定模板。

我们提供了不同的模板单元可供使用,具体可选值请看 API 详细描述。 建议在描述模板的时候,尽量靠近真实的 DOM 结构,这样可以避免 DOM 高度差距引起的抖动。

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdib3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+PHN0eWxlPi5rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFye3N0cm9rZS13aWR0aDp2YXIoLS1rZC1zdHJva2Utd2lkdGgtaWNvbi1yZWd1bGFyLCAxcHgpOyB9LmtkLWNvbG9yLWljb24tcHJpbWFyeXtmaWxsOiMzMzMzMzM7IGZpbGw6dmFyKC0ta2QtY29sb3ItaWNvbi1wcmltYXJ5LCAjMzMzMzMzKTsgc3Ryb2tlOiMzMzMzMzM7IHN0cm9rZTp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyB9LmtkLWNvbG9yLWljb24tYmx1ZS1wcmltYXJ5e2ZpbGw6IzI2NjFCRjsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLWJsdWUtcHJpbWFyeSwgIzI2NjFCRik7IHN0cm9rZTojMjY2MUJGOyBzdHJva2U6dmFyKC0ta2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnksICMyNjYxQkYpOyB9PC9zdHlsZT48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1wcmltYXJ5IGtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIiPjxwYXRoIGQ9Ik05LjUgNC41VjJDOS41IDEuNzIzODYgOS4yNzYxNCAxLjUgOSAxLjVIMkMxLjcyMzg2IDEuNSAxLjUgMS43MjM4NiAxLjUgMlYxMUMxLjUgMTEuMjc2MSAxLjcyMzg2IDExLjUgMiAxMS41SDYuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48ZyBjbGFzcz0ia2QtY29sb3ItaWNvbi1ibHVlLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTExIDQuNUg3QzYuNzIzODYgNC41IDYuNSA0LjcyMzg2IDYuNSA1VjE0QzYuNSAxNC4yNzYxIDYuNzIzODYgMTQuNSA3IDE0LjVIMTRDMTQuMjc2MSAxNC41IDE0LjUgMTQuMjc2MSAxNC41IDE0VjhMMTEgNC41WiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMC41IDQuNVY4QzEwLjUgOC4yNzYxNCAxMC43MjM5IDguNSAxMSA4LjVIMTQuNSIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjwvZz48L3N2Zz4=)

[](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld2JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c3R5bGU+LmtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXJ7c3Ryb2tlLXdpZHRoOnZhcigtLWtkLXN0cm9rZS13aWR0aC1pY29uLXJlZ3VsYXIsIDFweCk7IH0ua2QtY29sb3ItaWNvbi1wcmltYXJ5e2ZpbGw6IzMzMzMzMzsgZmlsbDp2YXIoLS1rZC1jb2xvci1pY29uLXByaW1hcnksICMzMzMzMzMpOyBzdHJva2U6IzMzMzMzMzsgc3Ryb2tlOnZhcigtLWtkLWNvbG9yLWljb24tcHJpbWFyeSwgIzMzMzMzMyk7IH08L3N0eWxlPjxnIGNsYXNzPSJrZC1jb2xvci1pY29uLXByaW1hcnkga2Qtc3Ryb2tlLXdpZHRoLWljb24tcmVndWxhciI+PHBhdGggZD0iTTkuNSAyLjVMNi41IDEzLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPjxwYXRoIGQ9Ik0xMS41IDRMMTQuMjc1IDcuNzAwMDFDMTQuNDA4MyA3Ljg3Nzc5IDE0LjQwODMgOC4xMjIyNCAxNC4yNzUgOC4zMDAwMUwxMS41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48cGF0aCBkPSJNNC41IDRMMS43MjUgNy43MDAwMUMxLjU5MTY3IDcuODc3NzkgMS41OTE2NyA4LjEyMjI0IDEuNzI1IDguMzAwMDFMNC41IDEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgLz48L2c+PC9zdmc+)

Loading 状态 #