Merge branch 'develop' into sightDevelop
This commit is contained in:
sight
109
example/docs/zh-CN/components/skeleton.md
Normal file
109
example/docs/zh-CN/components/skeleton.md
Normal file
@@ -0,0 +1,109 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :rows="4" :loading="loading" animated>
|
||||
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图片
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
|
||||
</div>
|
||||
<lay-skeleton :loading="loading" animated>
|
||||
<template #skeleton>
|
||||
<lay-skeleton-item type="image"/>
|
||||
<lay-skeleton-item type="p" style="width: 240px"/>
|
||||
</template>
|
||||
<div class="img-content">
|
||||
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
|
||||
<p style="margin-top: 18px">layui-vue 发展史....</p>
|
||||
</div>
|
||||
</lay-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const loading = ref(true);
|
||||
return {
|
||||
loading,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img-content {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----- | ---- | ------ |
|
||||
| loading | 是否显示 | `true` `false` |
|
||||
| rows | 显示行数 | -- |
|
||||
| animated | 是否动画 | `true` `false` |
|
||||
| type | 展示类型 | `p` `image` |
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 可选值 |
|
||||
| ------ | -------- | ------ |
|
||||
| default| 默认插槽 | -- |
|
||||
| skeleton | 自定义插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@@ -72,5 +72,27 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 纵向区间
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
const value4 = ref([20,50])
|
||||
return {
|
||||
value4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
@@ -12,16 +12,18 @@
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<ul>
|
||||
<a name="0-3-0"> </a>
|
||||
<a name="0-3-1"> </a>
|
||||
<li>
|
||||
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
|
||||
<h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3>
|
||||
<ul>
|
||||
<li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
|
||||
<li>[新增] count-up 数字滚动组件。</li>
|
||||
<li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
|
||||
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
|
||||
<li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>
|
||||
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
|
||||
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
|
||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
|
||||
<li>[集成] eslint, prettier 规范插件 。</li>
|
||||
<li>[升级] icons-vue 1.0.2。</li>
|
||||
</ul>
|
||||
|
||||
@@ -9,14 +9,11 @@
|
||||
<lay-col md="2">
|
||||
就眠仪式
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -31,14 +28,11 @@
|
||||
<lay-col md="2">
|
||||
落小梅
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：tree table
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Hunan
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：Pear Admin
|
||||
地点：中国 湖南
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
@@ -54,17 +48,94 @@
|
||||
<lay-col md="2">
|
||||
halo
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
<lay-col md="10">
|
||||
焦点：slider
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：China Beijing
|
||||
</lay-col>
|
||||
<lay-col md="5">
|
||||
生态：暂无
|
||||
地点：中国 北京
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
须弥
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：layui-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 广州
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
Sight
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：count-up backtop
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
finalsummer
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：layer-vue
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
<lay-card>
|
||||
<lay-row>
|
||||
<lay-col md="1">
|
||||
<lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
|
||||
</lay-col>
|
||||
<lay-col md="2">
|
||||
莫名点
|
||||
</lay-col>
|
||||
<lay-col md="10">
|
||||
焦点：skeleton
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
</lay-col>
|
||||
<lay-col md="6">
|
||||
其他：Gitee Github
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-card>
|
||||
|
||||
Reference in New Issue
Block a user