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

20
.svn/pristine/a9/a9271e85f6f54fe993b8c8968aecd882cb140cb8.svn-base Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
export default {
name: "FontsClearIcon",
};
</script>
<script setup lang="ts">
import LayIcon from "../component/icon/index";
const props = defineProps<{
color?: string;
size?: string;
}>();
</script>
<template>
<lay-icon
:color="props.color"
:size="props.size"
type="layui-icon-fonts-clear"
/>
</template>

3
.svn/pristine/a9/a93716f1f8d4bc5a7fbd9392e14466b6250a5022.svn-base Normal file
View File

@@ -0,0 +1,3 @@
x<01><>A
<EFBFBD>0P<>9<EFBFBD>\ b<><62><EFBFBD><EFBFBD>LL,b&L<13>J<EFBFBD>nR<6E><52>۷y.<2E><><EFBFBD>r>#<23>*<2A>MRa<52><61><EFBFBD>1DYH<><48><EFBFBD><EFBFBD><05>05}<7D><>hv"<22>E<EFBFBD>d<EFBFBD>i<>4<EFBFBD>y<EFBFBD><79>d<EFBFBD> ޻:Q<1F>6<EFBFBD><36>f̯<66><CCAF>
<EFBFBD>_<EFBFBD>}B<>=9

16
.svn/pristine/a9/a94c4ed0c850bee1f2bf0740920bcd1d31b5206b.svn-base Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
export default {
name: "ExportIcon",
};
</script>
<script setup lang="ts">
import LayIcon from "../component/icon/index";
const props = defineProps<{
color?: string;
size?: string;
}>();
</script>
<template>
<lay-icon :color="props.color" :size="props.size" type="layui-icon-export" />
</template>

576
.svn/pristine/a9/a979e05828c6ed41e93a594c603491e7fc9284bf.svn-base Normal file
View File

@@ -0,0 +1,576 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 树形组件一般用于展示具有层级关系的数据
:::
::: title 基础使用
:::
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
<template>
<lay-tree
:data="data"
@node-click="handleClick"
>
</lay-tree>
</template>
<script setup>
import { ref } from 'vue';
const data = ref([{
title: '一级1',
id: 1,
checked: true,
spread: true,
children: [{
title: '二级1-1 可允许跳转',
id: 3,
href: 'https://www.layui.com/',
children: [{
title: '三级1-1-3',
id: 23,
children: [{
title: '四级1-1-3-1',
id: 24,
children: [{
title: '五级1-1-3-1-1',
id: 30,
field: ''
},
{
title: '五级1-1-3-1-2',
id: 31,
}]
}]
},
{
title: '三级1-1-1',
id: 7,
children: [{
title: '四级1-1-1-1 可允许跳转',
id: 15,
href: 'https://www.layui.com/doc/'
}]
},
{
title: '三级1-1-2',
id: 8,
children: [{
title: '四级1-1-2-1',
id: 32,
}]
}]
},
{
title: '二级1-2',
id: 4,
spread: true,
children: [{
title: '三级1-2-1',
id: 9,
disabled: true
},
{
title: '三级1-2-2',
id: 10,
}]
},
{
title: '二级1-3',
id: 20,
children: [{
title: '三级1-3-1',
id: 21,
},
{
title: '三级1-3-2',
id: 22,
}]
}]
},
{
title: '一级2',
id: 2,
spread: true,
children: [{
title: '二级2-1',
id: 5,
spread: true,
children: [{
title: '三级2-1-1',
id: 11,
},
{
title: '三级2-1-2',
id: 12,
}]
},
{
title: '二级2-2',
id: 6,
children: [{
title: '三级2-2-1',
id: 13,
},
{
title: '三级2-2-2',
id: 14,
disabled: true
}]
}]
},
{
title: '一级3',
id: 16,
children: [{
title: '二级3-1',
id: 17,
fixed: true,
children: [{
title: '三级3-1-1',
id: 18,
},
{
title: '三级3-1-2',
id: 19,
}]
},
{
title: '二级3-2',
id: 27,
children: [{
title: '三级3-2-1',
id: 28,
},
{
title: '三级3-2-2',
id: 29,
}]
}]
}]);
function handleClick(node) {
console.log("Click Node:" + JSON.stringify(node));
}
</script>
:::
::: title 选择节点
:::
::: demo 使用 `showCheckbox` 属性开启复选框, `checkedKeys` 属性设置选中项。
<template>
<lay-tree
:data="data2"
:showCheckbox="showCheckbox2"
v-model:checkedKeys="checkedKeys2"
>
</lay-tree>
<lay-space>
<lay-button @click="updateView2">更新数据</lay-button>
<lay-button @click="updateCheckedKeys2">更新选择</lay-button>
{{ checkedKeys2 }}
</lay-space>
</template>
<script setup>
import { ref } from 'vue';
const checkedKeys2 = ref([]);
const showCheckbox2 = ref(true);
const updateCheckedKeys2=()=>{
checkedKeys2.value=[4]
}
const updateView2=()=>{
data3.value[0].title='更新视图'
}
const data2 = ref([{
title: '一级1',
id: 1,
checked: true,
spread: true,
children: [{
title: '二级1-1 可允许跳转',
id: 3,
href: 'https://www.layui.com/',
children: [{
title: '三级1-1-3',
id: 23,
children: [{
title: '四级1-1-3-1',
id: 24,
children: [{
title: '五级1-1-3-1-1',
id: 30,
field: ''
},
{
title: '五级1-1-3-1-2',
id: 31,
}]
}]
},
{
title: '三级1-1-1',
id: 7,
children: [{
title: '四级1-1-1-1 可允许跳转',
id: 15,
href: 'https://www.layui.com/doc/'
}]
},
{
title: '三级1-1-2',
id: 8,
children: [{
title: '四级1-1-2-1',
id: 32,
}]
}]
},
{
title: '二级1-2',
id: 4,
spread: true,
children: [{
title: '三级1-2-1',
id: 9,
disabled: true
},
{
title: '三级1-2-2',
id: 10,
}]
},
{
title: '二级1-3',
id: 20,
children: [{
title: '三级1-3-1',
id: 21,
},
{
title: '三级1-3-2',
id: 22,
}]
}]
},
{
title: '一级2',
id: 2,
spread: true,
children: [{
title: '二级2-1',
id: 5,
spread: true,
children: [{
title: '三级2-1-1',
id: 11,
},
{
title: '三级2-1-2',
id: 12,
}]
},
{
title: '二级2-2',
id: 6,
children: [{
title: '三级2-2-1',
id: 13,
},
{
title: '三级2-2-2',
id: 14,
disabled: true
}]
}]
},
{
title: '一级3',
id: 16,
children: [{
title: '二级3-1',
id: 17,
fixed: true,
children: [{
title: '三级3-1-1',
id: 18,
},
{
title: '三级3-1-2',
id: 19,
}]
},
{
title: '二级3-2',
id: 27,
children: [{
title: '三级3-2-1',
id: 28,
},
{
title: '三级3-2-2',
id: 29,
}]
}]
}]);
</script>
:::
::: title 禁用级联
:::
::: demo 通过 `checkStrictly` 属性禁用父子关联选择, 让每个复选框都是独立的。
<template>
<lay-tree
v-model:checkedKeys="checkedKeys3"
:checkStrictly="true"
:showCheckbox="true"
:data="data3"
>
</lay-tree>
</template>
<script setup>
import { ref } from 'vue';
const data3 = ref([{
title: '一级1',
id: 1,
checked: true,
spread: true,
children: [{
title: '二级1-1 可允许跳转',
id: 3,
href: 'https://www.layui.com/',
children: [{
title: '三级1-1-3',
id: 23,
children: [{
title: '四级1-1-3-1',
id: 24,
children: [{
title: '五级1-1-3-1-1',
id: 30,
field: ''
},
{
title: '五级1-1-3-1-2',
id: 31,
}]
}]
},
{
title: '三级1-1-1',
id: 7,
children: [{
title: '四级1-1-1-1 可允许跳转',
id: 15,
href: 'https://www.layui.com/doc/'
}]
},
{
title: '三级1-1-2',
id: 8,
children: [{
title: '四级1-1-2-1',
id: 32,
}]
}]
},
{
title: '二级1-2',
id: 4,
spread: true,
children: [{
title: '三级1-2-1',
id: 9,
disabled: true
},
{
title: '三级1-2-2',
id: 10,
}]
},
{
title: '二级1-3',
id: 20,
children: [{
title: '三级1-3-1',
id: 21,
},
{
title: '三级1-3-2',
id: 22,
}]
}]
},
{
title: '一级2',
id: 2,
spread: true,
children: [{
title: '二级2-1',
id: 5,
spread: true,
children: [{
title: '三级2-1-1',
id: 11,
},
{
title: '三级2-1-2',
id: 12,
}]
},
{
title: '二级2-2',
id: 6,
children: [{
title: '三级2-2-1',
id: 13,
},
{
title: '三级2-2-2',
id: 14,
disabled: true
}]
}]
},
{
title: '一级3',
id: 16,
children: [{
title: '二级3-1',
id: 17,
fixed: true,
children: [{
title: '三级3-1-1',
id: 18,
},
{
title: '三级3-1-2',
id: 19,
}]
},
{
title: '二级3-2',
id: 27,
children: [{
title: '三级3-2-1',
id: 28,
},
{
title: '三级3-2-2',
id: 29,
}]
}]
}]);
const checkedKeys3 = ref([2,3])
</script>
:::
::: title 关闭连线
:::
::: demo 使用 `showLine` 属性关闭节点连线
<template>
<lay-tree
:data="data"
:showLine="showLine"
>
</lay-tree>
</template>
<script setup>
import { ref } from 'vue';
const showLine=ref(false)
</script>
:::
::: title 定义标题
:::
::: demo 使用 `title` 插槽自定义节点标题
<template>
<lay-tree :data="data">
<template #title="{ data }">
{{ data.id }}
</template>
</lay-tree>
</template>
<script setup>
import { ref } from 'vue';
</script>
:::
::: title Tree 属性
:::
::: table
| Name | Description | Accepted Values |
| -------------------------------- | ---------------------------------------- | --------------- |
| data | 树型组件数据,类型 TreeData \| TreeData[] | null |
| showCheckbox | 是否显示复选框 | false |
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
| showLine | 是否开启连接线 | true |
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
| collapse-transition | 是否开启展示收起动画 | false |
:::
::: title Tree 数据
:::
::: table
| Name | Description | Accepted Values |
|---------------------|-------------| --------------- |
| id | 唯一值 | - |
| title | 节点名称 | - |
| children | 子节点 | [] |
| disabled | 该节点是否禁用 | false |
| spread | 该节点是否展开 | false |
:::
::: title Tree 事件
:::
::: table
| Name | Description | Accepted Params |
| ---------- | --------------- | --------------- |
| node-click | 节点 click 事件 | -- |
:::
::: contributor transition
:::
::: previousNext transition
:::

BIN
.svn/pristine/a9/a98062cd1291af034af01f743d3a0aec4f7c49a1.svn-base Normal file
View File

Binary file not shown.

20
.svn/pristine/a9/a9a5be5b9232c9c6fc46f84dee5104a2dea6250b.svn-base Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts">
export default {
name: "RefreshThreeIcon",
};
</script>
<script setup lang="ts">
import LayIcon from "../component/icon/index";
const props = defineProps<{
color?: string;
size?: string;
}>();
</script>
<template>
<lay-icon
:color="props.color"
:size="props.size"
type="layui-icon-refresh-three"
/>
</template>

BIN
.svn/pristine/a9/a9c73627b1222bdadff3200b59989166ac49e3e9.svn-base Normal file
View File

Binary file not shown.

BIN
.svn/pristine/a9/a9cd5b56977ac413cc17ead01da62a2b9210f622.svn-base Normal file
View File

Binary file not shown.

162
.svn/pristine/a9/a9cfd78dad508deae61ccf1ad7affdb4b6c647d9.svn-base Normal file
View File

@@ -0,0 +1,162 @@
<script lang="ts">
export default {
name: "LayInputNumber",
};
</script>
<script setup lang="ts">
import "./index.less";
import layInput from "../input/index.vue";
import { LayIcon } from "@layui/icons-vue";
import layButton from "../button/index.vue";
import { ref, watch, withDefaults, computed, Ref } from "vue";
import { InputNumberSize } from "./interface";
import { add, sub } from "./math";
export interface InputNumberProps {
modelValue?: number;
name?: string;
disabled?: boolean;
disabledInput?: boolean;
size?: InputNumberSize;
step?: number;
position?: "right";
min?: number;
max?: number;
}
const props = withDefaults(defineProps<InputNumberProps>(), {
disabled: false,
disabledInput: false,
modelValue: 0,
step: 1,
min: -Infinity,
max: Infinity,
size: "md",
});
const emit = defineEmits(["update:modelValue", "change"]);
let num: Ref<number> = ref(props.modelValue);
watch(num, (val) => {
if (props.max !== Infinity && val > props.max) {
num.value = props.max;
return;
}
if (props.min !== -Infinity && val < props.min) {
num.value = props.min;
return;
}
if (isNumber(num.value)) {
tempValue.value = Number(num.value);
emit("update:modelValue", tempValue.value);
emit("change", tempValue.value);
}
});
watch(
() => props.modelValue,
(val) => {
if (val !== num.value) {
num.value = props.modelValue;
}
}
);
let timer: any = 0;
const tempValue: Ref<number> = ref(0);
const minControl = computed(() => {
if (props.disabled) {
return true;
}
if (props.min !== -Infinity) {
return Number(props.min) >= num.value;
}
});
const maxControl = computed(() => {
if (props.disabled) {
return true;
}
if (props.max !== Infinity) {
return Number(props.max) <= num.value;
}
});
const addition = function () {
num.value = add(num.value, props.step);
};
const subtraction = function () {
num.value = sub(num.value, props.step);
};
const longDown = function (fn: Function) {
cancelLongDown();
if (props.disabled) {
return;
}
timer = setInterval(() => fn.call(timer), 150);
fn.call(timer);
};
const cancelLongDown = function () {
clearInterval(timer);
};
const inputChange = function () {
if (isNumber(num.value)) {
tempValue.value = Number(num.value);
return;
}
num.value = tempValue.value;
};
const isNumber = function (num: any) {
return !isNaN(num);
};
</script>
<template>
<div class="layui-input-number" :position="position" :size="size">
<lay-button
size="lg"
@mouseup="cancelLongDown"
@mousedown="longDown(subtraction)"
@blur="cancelLongDown"
:disabled="minControl"
class="layui-control-btn layui-subtraction-btn"
>
<lay-icon
:type="
position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
"
/>
</lay-button>
<div class="layui-input-number-input">
<lay-input
:max="max"
:min="min"
:name="name"
v-model="num"
:readonly="disabledInput || disabled"
:disabled="disabledInput || disabled"
@input="inputChange"
type="number"
/>
</div>
<lay-button
size="lg"
@mouseup="cancelLongDown"
@mousedown="longDown(addition)"
@blur="cancelLongDown"
:disabled="maxControl"
class="layui-control-btn layui-addition-btn"
>
<lay-icon
:type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
/>
</lay-button>
</div>
</template>