theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Theluyuan
2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
.svn/pristine/9b/9b3f276c4a2451a46b300b038b3181559401374a.svn-base Normal file
View File

@@ -0,0 +1,262 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 在一组可选项中进行多项选择时。
:::
::: title 基础使用
:::
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
<template>
<lay-checkbox name="like" skin="primary" v-model="checked1" value="1" label="复选框案例"></lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model="checkedSlot" value="1">
自定义slot
</lay-checkbox>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked1 = ref(false)
const checkedSlot = ref(false)
return {
checked1
}
}
}
</script>
:::
::: title 默认样式
:::
::: demo
<template>
<lay-checkbox name="like" value="1" v-model="checked2">普通</lay-checkbox>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked2 = ref(false)
return {
checked2
}
}
}
</script>
:::
::: title 复选框组
:::
::: demo 方便通过数组生成 checkbox 复选框。
<template>
<lay-checkbox-group v-model="checkeds" @change="groupChange">
<lay-checkbox name="like" skin="primary" value="1">写作</lay-checkbox>
<lay-checkbox name="like" skin="primary" value="2">画画</lay-checkbox>
<lay-checkbox name="like" skin="primary" value="3">运动</lay-checkbox>
</lay-checkbox-group>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checkeds = ref(['1','2']);
const groupChange = function(val) {
console.log("回调:" + JSON.stringify(val))
}
return {
checkeds,
groupChange
}
}
}
</script>
:::
::: title 完整案例
:::
::: demo
<template>
<lay-checkbox name="like" skin="primary" v-model="checked3" value="1">写作</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model="checked4" value="2">画画</lay-checkbox>
<lay-checkbox name="like" skin="primary" v-model="checked5" value="3">运动</lay-checkbox>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked3 = ref(true);
const checked4 = ref(true);
const checked5 = ref(true);
return {
checked3, checked4, checked5
}
}
}
</script>
:::
::: title 禁用状态
:::
::: demo
<template>
<lay-checkbox name="like" skin="primary" value="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
<br/><br/>
<lay-checkbox-group v-model="checkeds" :disabled="disabled">
<lay-checkbox name="like" skin="primary" value="1">写作</lay-checkbox>
<lay-checkbox name="like" skin="primary" value="2">画画</lay-checkbox>
<lay-checkbox name="like" skin="primary" value="3">运动</lay-checkbox>
</lay-checkbox-group>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const disabled = ref(true)
const checked6 = ref(false);
return {
disabled,checked6
}
}
}
</script>
:::
::: title 事件回调
:::
::: demo
<template>
<lay-checkbox name="like" skin="primary" value="1" @change="change" v-model="checked7">回调</lay-checkbox>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked7 = ref(true);
const change = function(isChecked) {
console.log("是否选中:" + isChecked)
}
return {
change,
checked7
}
}
}
</script>
:::
::: title 半选状态
:::
::: demo 在实现全选效果时，你可能会用到 isIndeterminate 属性。
<template>
<lay-checkbox name="like" skin="primary" value="1" :isIndeterminate="true" v-model="checked8">半选</lay-checkbox>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const checked8 = ref(true);
return {
checked8
}
}
}
</script>
:::
::: title Checkbox 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------------------- | ------------- | -------------------- |
| name | 原始属性 name | -- |
| skin | 主题 | -- |
| label | 显示内容 | -- |
| value | 选中值 | -- |
| v-model | 是否选中 | `true` `false` |
| isIndeterminate | 半选状态 | `true` `false` |
| disabled | 是否禁用 | `true` `false` |
| size | 尺寸 | `lg` `md` `sm` `xs` |
:::
::: title Checkbox 事件
:::
::: table
| 事件 | 描述 | 可选值 |
| ------ | -------- | -------------------- |
| change | 切换事件 | isChecked : 当前状态 |
:::
::: title CheckboxGroup 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------------------- | ------------ | ------------------ |
| disabled | 是否整体禁用 | `true` `false` |
:::
::: contributor checkbox
:::
::: previousNext checkbox
:::

35
.svn/pristine/9b/9b42c37f114e87c85fbff43f633d4a328d591bfe.svn-base Normal file
View File

@@ -0,0 +1,35 @@
export declare function nextId(): any;
export declare function calculateMinArea(minArea: any): any[];
export declare function calculateArea(type: any, area: any, offset: any): any[];
export declare function calculateBaseArea(area: any): any[];
export declare function calculateDrawerArea(offset: any, drawerArea?: string[] | string): string[];
export declare function calculateOffset(offset: any, area: any, type: any): any[];
export declare function calculateType(modalType: number | string): 1 | 0 | 2 | 3 | 4 | 5 | 6;
export declare function calculateContent(title: any, height: any, btn: any, type: any, isMessage?: boolean): string | undefined;
export declare function maxArea(): {
w: string;
h: string;
};
export declare function maxOffset(): {
t: string;
l: string;
};
export declare function minArea(): {
w: string;
h: string;
};
export declare function minOffset(left: any): {
t: string;
l: string;
};
export declare function getPosition(dom: any): {
x: any;
y: any;
};
export declare function getArea(dom: any): string[];
export declare function updateMinArrays(id: string, state: Boolean): number;
export declare function getDrawerAnimationClass(offset: any, isClose?: boolean): string;
export declare function calculatePhotosArea(url: string, options: object): Promise<Array<string>>;
export declare function calculateNotifOffset(offset: any, area: any, layerId: string): string[];
export declare function removeNotifiyFromQueen(layerId: string): void;
export declare function getNotifyAnimationClass(offset: any): string;

29
.svn/pristine/9b/9b5fdfb326b9864a586238d5cd5021d28cf2dc3b.svn-base Normal file
View File

@@ -0,0 +1,29 @@
## 介绍
<p>
<a href="https://www.oscs1024.com/project/oscs/layui/layui-vue?ref=badge_small" alt="OSCS Status"><img src="https://www.oscs1024.com/platform/badge/layui/layui-vue.svg?size=small"/></a>
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/l/@layui/layui-vue.svg?sanitize=true" alt="License"></a>
</p>
**[🔶 www.layui-vue.com »](http://www.layui-vue.com)**
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
**Run with code Sandbox.**
[![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy)
## 反馈
欢迎在 [提交问题](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想贡献，请查看 [快速指南](./CONTRIBUTING.md)！
如果您有什么想聊的，请随时加入我们的 [Gitter chat](https://gitter.im/layui-vue/community)！
## 贡献者
这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些 [出色的贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
<a href="https://github.com/layui/layui-vue/graphs/contributors">
<img src="https://contrib.rocks/image?repo=layui/layui-vue" />
</a>

3
.svn/pristine/9b/9b7490fe5212635e343ce43fd3431d515fcbdec3.svn-base Normal file
View File

@@ -0,0 +1,3 @@
<template>
<router-view />
</template>

BIN
.svn/pristine/9b/9ba0a197260b01c8ca2dde88c7e0894bdc4df690.svn-base Normal file
View File

Binary file not shown.

1
.svn/pristine/9b/9bfa01e9b231fef0a269427e04466c2d5ff0ab11.svn-base Normal file
View File

@@ -0,0 +1 @@
:root{--panel-border-color: var(--global-neutral-color-3);--panel-border-radius: var(--global-border-radius)}.layui-panel{border-width:1px;border-style:solid;margin-bottom:15px;border-radius:var(--panel-border-radius);border-color:var(--panel-border-color);background-color:#fff;padding:20px}.layui-panel.is-hover-shadow:hover,.layui-panel.shadow{box-shadow:1px 1px 4px #00000014}