init
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif" >
|
||||
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 自定义前缀&后缀
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="handlerClick" type="primary" size="sm">更新</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<!-- 属性 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px; font-family: sans-serif">
|
||||
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
<!-- 插槽 -->
|
||||
<lay-card style="width:200px;height:120px;display:inline-block;">
|
||||
<h1 style="padding:20px 15px">
|
||||
<lay-count-up :end-val="18" :duration="2000">
|
||||
<template #prefix>
|
||||
<span style="font-size:75%">雷雨 </span>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<span style="font-size:75%">
|
||||
<sub>℃</sub> ⛈
|
||||
</span>
|
||||
</template>
|
||||
</lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const countVal2 = ref(98626);
|
||||
const handlerClick = () => {
|
||||
countVal2.value += 1000;
|
||||
}
|
||||
return {
|
||||
handlerClick,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||
| startVal | 起始值 | number | `0` | — |
|
||||
| endVal | 显示的值 | number | `0` | — |
|
||||
| decimal | 小数点 | string | `.` | — |
|
||||
| decimalPlaces | 小数位数 | number | `0` | — |
|
||||
| useGrouping | 是否使用千位分隔符 | boolean | `true` | `true` `false` |
|
||||
| separator | 分隔符 | string | `,` | — |
|
||||
| autoplay | 是否自动播放 | boolean | `true` | `true` `false` |
|
||||
| useEasing | 是否使用动画 | boolean | `true` | `true` `false` |
|
||||
| easingFn | 动画类型 | Array \| Function \| string | `easeInOutCubic` | — |
|
||||
| duration | 动画持续时间,单位: ms | number | `2000` | — |
|
||||
| prefix | 前缀 | string | — | — |
|
||||
| suffix | 后缀 | string | — | — |
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ----- | -------- | ---- |
|
||||
| prefix | 前缀 | -- |
|
||||
| suffix | 后缀 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 动画类型
|
||||
:::
|
||||
|
||||
::: describe 可使用贝塞尔曲线定义动画
|
||||
:::
|
||||
|
||||
```
|
||||
easingFn: [0.75, 0, 0.25, 1]
|
||||
```
|
||||
|
||||
::: describe 也可以使用自定义函数
|
||||
:::
|
||||
|
||||
```
|
||||
const easeOutElastic = (n) => {
|
||||
return n === 0
|
||||
? 0
|
||||
: n === 1
|
||||
? 1
|
||||
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
|
||||
}
|
||||
|
||||
easingFn: easeOutElastic
|
||||
```
|
||||
|
||||
::: describe 通过以下字符串快速设置动画类型
|
||||
:::
|
||||
|
||||
```
|
||||
easeInSine easeOutSine easeInOutSine
|
||||
easeInQuad easeOutQuad easeInOutQuad
|
||||
easeInCubic easeOutCubic easeInOutCubic
|
||||
easeInQuart easeOutQuart easeInOutQuart
|
||||
easeInQuint easeOutQuint easeInOutQuint
|
||||
easeInExpo easeOutExpo easeInOutExpo
|
||||
easeInCirc easeOutCirc easeInOutCirc
|
||||
easeInBack easeOutBack easeInOutBack
|
||||
linear
|
||||
```
|
||||
::: contributor countUp
|
||||
:::
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
@@ -0,0 +1,270 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<lay-header>header</lay-header>
|
||||
<lay-body>content</lay-body>
|
||||
<lay-footer>footer</lay-footer>
|
||||
</lay-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 左右布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<lay-side>left</lay-side>
|
||||
<lay-body>content</lay-body>
|
||||
<lay-side>right</lay-side>
|
||||
</lay-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 后台布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<lay-header>header</lay-header>
|
||||
<lay-layout>
|
||||
<lay-side>side</lay-side>
|
||||
<lay-body>content</lay-body>
|
||||
</lay-layout>
|
||||
</lay-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 复杂布局
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-layout class="example">
|
||||
<lay-side>side</lay-side>
|
||||
<lay-layout>
|
||||
<lay-header>header</lay-header>
|
||||
<lay-body>body</lay-body>
|
||||
<lay-footer>footer</lay-footer>
|
||||
</lay-layout>
|
||||
</lay-layout>
|
||||
<hr>
|
||||
<lay-layout class="example">
|
||||
<lay-layout>
|
||||
<lay-header>header</lay-header>
|
||||
<lay-body>body</lay-body>
|
||||
<lay-footer>footer</lay-footer>
|
||||
</lay-layout>
|
||||
<lay-side>side</lay-side>
|
||||
</lay-layout>
|
||||
<hr>
|
||||
<lay-layout class="example">
|
||||
<lay-header>Header</lay-header>
|
||||
<lay-body>
|
||||
<lay-layout>
|
||||
<lay-side>Left</lay-side>
|
||||
<lay-body>Content</lay-body>
|
||||
</lay-layout>
|
||||
</lay-body>
|
||||
<lay-footer>Footer</lay-footer>
|
||||
</lay-layout>
|
||||
<hr>
|
||||
<lay-layout class="example">
|
||||
<lay-header>Header</lay-header>
|
||||
<lay-body>
|
||||
<lay-layout>
|
||||
<lay-body>Content</lay-body>
|
||||
<lay-side>Right</lay-side>
|
||||
</lay-layout>
|
||||
</lay-body>
|
||||
<lay-footer>Footer</lay-footer>
|
||||
</lay-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.example .layui-footer,
|
||||
.example .layui-header {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background: #87ca9a;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-side {
|
||||
display: flex;
|
||||
background: #77c38c;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.example .layui-body {
|
||||
display: flex;
|
||||
background: #5FB878;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
::: title 布局组件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 组件 | 描述 | |
|
||||
| ---------- | ---- | --- |
|
||||
| lay-layout | 容器 | -- |
|
||||
| lay-header | 顶部 | -- |
|
||||
| lay-logo | 图标 | -- |
|
||||
| lay-side | 侧边 | -- |
|
||||
| lay-body | 内容 | -- |
|
||||
| lay-footer | 底部 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor layout
|
||||
:::
|
||||
|
||||
::: previousNext layout
|
||||
:::
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user