[新增] checkbox 组件 待完成 menu 组件
This commit is contained in:
就眠仪式
parent
14908eea6a
commit
e65a4e7588
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>
|
||||
|
||||
|
||||
@ -112,3 +112,59 @@ 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>
|
||||
|
||||
:::
|
||||
@ -5,6 +5,11 @@
|
||||
<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'),
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
.grid-demo {
|
||||
padding: 10px;
|
||||
line-height: 50px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background-color: #79C48C;
|
||||
color: #fff;
|
||||
|
||||
@ -32,6 +32,8 @@ import LayContainer from "./module/container/index"
|
||||
import LayMenu from './module/menu/index'
|
||||
import LayMenuItem from './module/menuItem/index'
|
||||
import LayMenuChildItem from './module/menuChildItem/index'
|
||||
import LayCheckbox from './module/checkbox/index'
|
||||
import LayForm from './module/form/index'
|
||||
|
||||
const components: Record<string, IDefineComponent> = {
|
||||
LayRadio,
|
||||
@ -62,7 +64,9 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayContainer,
|
||||
LayMenu,
|
||||
LayMenuItem,
|
||||
LayMenuChildItem
|
||||
LayMenuChildItem,
|
||||
LayCheckbox,
|
||||
LayForm
|
||||
}
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -105,6 +109,8 @@ export {
|
||||
LayMenu,
|
||||
LayMenuItem,
|
||||
LayMenuChildItem,
|
||||
LayCheckbox,
|
||||
LayForm,
|
||||
install,
|
||||
}
|
||||
|
||||
|
||||
9
src/module/checkbox/index.ts
Normal file
9
src/module/checkbox/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { App } from 'vue'
|
||||
import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCheckbox', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
63
src/module/checkbox/index.vue
Normal file
63
src/module/checkbox/index.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<span @click="handleClick">
|
||||
<input type="checkbox" :name="name" title="写作" :value="label" />
|
||||
<div
|
||||
class="layui-unselect"
|
||||
:class="[
|
||||
{
|
||||
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||
},
|
||||
'layui-form-checkbox',
|
||||
hasValue ? 'layui-form-checked' : '',
|
||||
]"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
|
||||
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCheckbox" lang="ts">
|
||||
import { defineProps, ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
modelValue: Array<unknown>
|
||||
label: string
|
||||
disabled: boolean
|
||||
name: string
|
||||
skin: string
|
||||
}>()
|
||||
|
||||
const hasValue = ref(false)
|
||||
|
||||
if (props.modelValue.includes(props.label)) {
|
||||
hasValue.value = true
|
||||
} else {
|
||||
hasValue.value = false
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const handleClick = function () {
|
||||
if (!props.disabled) {
|
||||
if (!props.modelValue.includes(props.label)) {
|
||||
props.modelValue.push(props.label)
|
||||
} else {
|
||||
let index = props.modelValue.indexOf(props.label)
|
||||
props.modelValue.splice(index, 1)
|
||||
}
|
||||
props.modelValue.includes(props.label)
|
||||
? (hasValue.value = true)
|
||||
: (hasValue.value = false)
|
||||
if (props.modelValue.includes(props.label)) {
|
||||
hasValue.value = true
|
||||
} else {
|
||||
hasValue.value = false
|
||||
}
|
||||
emit('update:modelValue', props.modelValue)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
9
src/module/form/index.ts
Normal file
9
src/module/form/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { App } from 'vue'
|
||||
import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayForm', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
9
src/module/form/index.vue
Normal file
9
src/module/form/index.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<form class="layui-form">
|
||||
<slot></slot>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup name="LayForm" lang="ts">
|
||||
|
||||
</script>
|
||||
@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<dd><a href="">选项</a></dd>
|
||||
<dd>
|
||||
<a href="">{{ title }}</a>
|
||||
</dd>
|
||||
</template>
|
||||
|
||||
<script setup name="LayMenuChildItem" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<li class="layui-nav-item">
|
||||
<a href="">{{title}}</a>
|
||||
<a href="">{{title}}
|
||||
<i class="layui-icon layui-icon-down layui-nav-more" v-if="slots.default"></i>
|
||||
</a>
|
||||
<dl class="layui-nav-child" v-if="slots.default">
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup name="LayMenuItem" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
import { defineProps, useSlots } from 'vue'
|
||||
const slots = useSlots();
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user