[新增] checkbox 组件 待完成 menu 组件
This commit is contained in:
就眠仪式
20
docs/docs/zh-CN/components/animation.md
Normal file
20
docs/docs/zh-CN/components/animation.md
Normal file
@@ -0,0 +1,20 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
:::
|
||||
@@ -23,6 +23,7 @@ export default {
|
||||
width:100%;
|
||||
height: 300px;
|
||||
background: #79C48C;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -111,4 +111,60 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox v-model="checked" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox v-model="checked" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox v-model="checked" label="3">运动</lay-checkbox>
|
||||
</lay-form>
|
||||
{{checked}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked = ref(['1','2']);
|
||||
|
||||
return {
|
||||
checked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
<lay-checkbox skin="primary" v-model="checked" label="1">写作</lay-checkbox>
|
||||
<lay-checkbox skin="primary" v-model="checked" label="2">画画</lay-checkbox>
|
||||
<lay-checkbox skin="primary" v-model="checked" label="3">运动</lay-checkbox>
|
||||
</lay-form>
|
||||
{{checked}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const checked = ref(['1','2']);
|
||||
|
||||
return {
|
||||
checked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
@@ -4,7 +4,12 @@
|
||||
<lay-menu>
|
||||
<lay-menu-item title="首页"></lay-menu-item>
|
||||
<lay-menu-item title="用户"></lay-menu-item>
|
||||
<lay-menu-item title="角色"></lay-menu-item>
|
||||
<lay-menu-item title="角色"></lay-menu-item>
|
||||
<lay-menu-item title="目录" class="layui-nav-itemed">
|
||||
<lay-menu-child-item title="菜单一"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单二"></lay-menu-child-item>
|
||||
<lay-menu-child-item title="菜单三"></lay-menu-child-item>
|
||||
</lay-menu-item>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,18 @@
|
||||
##### 安装
|
||||
|
||||
npm 下载
|
||||
```
|
||||
npm install @layui/layui-vue --save
|
||||
```
|
||||
|
||||
在 main.ts 中
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/layui.css'
|
||||
|
||||
createApp(App)
|
||||
.use(Layui)
|
||||
.mount('#app')
|
||||
```
|
||||
@@ -5,36 +5,111 @@
|
||||
<lay-logo>
|
||||
<img src="../assets/logo.png" />
|
||||
</lay-logo>
|
||||
<ul class="layui-nav layui-layout-right" style="margin-top:0px;margin-bottom:0px;">
|
||||
<ul
|
||||
class="layui-nav layui-layout-right"
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/Jmysy/layui-vue-sample"> 案例 </a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/Jmysy/layui-vue"> 仓库 </a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/Jmysy/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="> 反馈 </a>
|
||||
<a
|
||||
href="https://gitee.com/Jmysy/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
|
||||
>
|
||||
反馈
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
<lay-side>
|
||||
<ul class="layui-menu layui-menu-lg">
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide">介绍</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide/install">安装</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/layout">布局</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/container">容器</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/button">按钮</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/icon">图标</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/panel">面板</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/card">卡片</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/grid">栅格</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/form">表单</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/badge">徽章</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/block">区块</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/line">分割</router-link></div></li>
|
||||
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/menu">菜单</router-link></div></li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title"><router-link to="/zh-CN/components/progress">进度</router-link></div>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/guide">介绍</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title"><router-link to="/zh-CN/components/timeline">时间</router-link></div>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/guide/install">安装</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/layout">布局</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/container">容器</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/button">按钮</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/icon">图标</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/panel">面板</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/card">卡片</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/animation">动画</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/grid">栅格</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/form">表单</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/badge">徽章</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/block">区块</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/line">分割</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/menu">菜单</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/progress">进度</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<router-link to="/zh-CN/components/timeline">时间</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-side>
|
||||
|
||||
@@ -46,6 +46,10 @@ const zhCN = [
|
||||
path: '/zh-CN/components/panel',
|
||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
||||
meta: { title: '面板' },
|
||||
},{
|
||||
path: '/zh-CN/components/animation',
|
||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
||||
meta: { title: '动画' },
|
||||
}, {
|
||||
path: '/zh-CN/components/card',
|
||||
component: () => import('../../docs/zh-CN/components/cards.md'),
|
||||
|
||||
Reference in New Issue
Block a user