init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1 @@
|
||||
.layui-body{display:block;flex:1;overflow:auto;height:100%;box-sizing:border-box;min-height:300px}
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "SetSmIcon",
|
||||
};
|
||||
</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-set-sm" />
|
||||
</template>
|
||||
@@ -0,0 +1,415 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 按钮用于开始一个即时操作。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button` 标签, 创建一个按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary">原始按钮</lay-button>
|
||||
<lay-button>默认按钮</lay-button>
|
||||
<lay-button type="normal">百搭按钮</lay-button>
|
||||
<lay-button type="warm">暖色按钮</lay-button>
|
||||
<lay-button type="danger">警告按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简约按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `border` 属性设置边框颜色
|
||||
|
||||
<template>
|
||||
<lay-button>原始按钮</lay-button>
|
||||
<lay-button border="green">默认按钮</lay-button>
|
||||
<lay-button border="blue">百搭按钮</lay-button>
|
||||
<lay-button border="orange">暖色按钮</lay-button>
|
||||
<lay-button border="red">警告按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 次要按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `border-style` 属性设置边框样式
|
||||
|
||||
<template>
|
||||
<lay-button border-style="dashed">原始按钮</lay-button>
|
||||
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
|
||||
<lay-button border="blue" border-style="dashed">百搭按钮</lay-button>
|
||||
<lay-button border="orange" border-style="dashed">暖色按钮</lay-button>
|
||||
<lay-button border="red" border-style="dashed">警告按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮尺寸
|
||||
:::
|
||||
|
||||
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
||||
<lay-button type="default" size="lg">默认按钮</lay-button>
|
||||
<lay-button type="normal" size="lg">百搭按钮</lay-button>
|
||||
<lay-button type="warm" size="lg">暖色按钮</lay-button>
|
||||
<lay-button type="danger" size="lg">警告按钮</lay-button>
|
||||
<lay-button disabled size="lg">禁用按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 流式按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `fluid` 属性, 使其适合父最大宽度
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" fluid>最大化按钮</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-button type="default" fluid>最大化按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 圆角按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `radius` 属性，创建圆角按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" radius>原始按钮</lay-button>
|
||||
<lay-button type="default" radius>默认按钮</lay-button>
|
||||
<lay-button type="normal" radius>百搭按钮</lay-button>
|
||||
<lay-button type="warm" radius>暖色按钮</lay-button>
|
||||
<lay-button type="danger" radius>警告按钮</lay-button>
|
||||
<lay-button disabled radius>禁用按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮分组
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<lay-button-group>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
<lay-button type="default">默认按钮</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-button-group>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
<lay-button type="primary">默认按钮</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-button-group>
|
||||
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
|
||||
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
|
||||
<lay-button border="green" border-style="dashed">默认按钮</lay-button>
|
||||
</lay-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标按钮
|
||||
:::
|
||||
|
||||
::: demo 结合 `lay-icon` 组件, 创建图标按钮
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
|
||||
<lay-button prefix-icon="layui-icon-left" suffix-icon="layui-icon-right"></lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 按钮容器
|
||||
:::
|
||||
|
||||
::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="default">新增</lay-button>
|
||||
<lay-button type="default">删除</lay-button>
|
||||
<lay-button type="default">修改</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 加载按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `loading` 属性, 控制按钮的加载状态
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button type="default" :loading="loadState">加载</lay-button>
|
||||
<lay-button type="default" :loading="loadState" loadingIcon="layui-icon-loading">加载</lay-button>
|
||||
<lay-switch v-model="loadState"></lay-switch>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const loadState = ref(true)
|
||||
|
||||
return {
|
||||
loadState
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件处理
|
||||
:::
|
||||
|
||||
::: demo 使用 `@click` 设置单击回调
|
||||
|
||||
<template>
|
||||
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const clickHandle = () => {
|
||||
console.log('点击事件')
|
||||
}
|
||||
|
||||
return {
|
||||
clickHandle
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 下拉按钮
|
||||
:::
|
||||
|
||||
::: demo 配合 `lay-dropdown` 系列组件, 完成下拉按钮。
|
||||
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<lay-button type="default">更多操作</lay-button>
|
||||
<template #content>
|
||||
<lay-dropdown-menu>
|
||||
<lay-dropdown-menu-item>导入</lay-dropdown-menu-item>
|
||||
<lay-dropdown-menu-item>导出</lay-dropdown-menu-item>
|
||||
</lay-dropdown-menu>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Button 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
|
||||
| ----------- | -------- | ------- | --------- | ---------------------------------- | ---------------------------------- |
|
||||
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` | -- |
|
||||
| size | 尺寸 | string | -- | `lg` `sm` `xs` | -- |
|
||||
| fluid | 最大化 | boolean | `false` | `true` `false` | -- |
|
||||
| radius | 圆角 | boolean | `false` | `true` `false` | -- |
|
||||
| border | 边框 | string | `green` | `green` `blue` `orange` `red` | -- |
|
||||
| border-style | 边框样式 | string | `soild` | `soild` `dashed` `dotted` | -- |
|
||||
| disabled | 禁用 | boolean | `false` | `true` `false` | -- |
|
||||
| loading | 加载 | boolean | `false` | `true` `false` | -- |
|
||||
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` | -- |
|
||||
| prefix-icon | 前置图标 | string | -- | 内置 icon 集 | -- |
|
||||
| suffix-icon | 后置图标 | string | -- | 内置 icon 集 | -- |
|
||||
| loading-icon | 后置图标 | string | -- | 内置 icon 集 | `1.4.0` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| default | 默认内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button Group 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ---- | ---- | ---- | ------ | ------ |
|
||||
| - | - | - | - |
|
||||
|
||||
:::
|
||||
|
||||
::: title Button Group 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------- | -------- | ---- |
|
||||
| default | 默认内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor button
|
||||
:::
|
||||
|
||||
::: previousNext button
|
||||
:::
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Shade",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineEmits, StyleValue } from "vue";
|
||||
|
||||
export interface ShadeProps {
|
||||
opacity: string;
|
||||
index: number | Function;
|
||||
visible: boolean | string;
|
||||
}
|
||||
|
||||
const props = defineProps<ShadeProps>();
|
||||
|
||||
const emit = defineEmits(["shadeClick"]);
|
||||
|
||||
const styles = computed<any>(() => {
|
||||
return {
|
||||
opacity: props.opacity,
|
||||
zIndex: props.index,
|
||||
};
|
||||
});
|
||||
|
||||
const shadeClick = () => {
|
||||
emit("shadeClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="layui-layer-shade"
|
||||
:style="styles"
|
||||
@click="shadeClick"
|
||||
v-if="visible"
|
||||
></div>
|
||||
</template>
|
||||
Binary file not shown.
@@ -0,0 +1,49 @@
|
||||
import { UserConfigExport } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||
import { resolve } from "path";
|
||||
|
||||
export default (): UserConfigExport => {
|
||||
return {
|
||||
publicDir: false,
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: "@",
|
||||
replacement: resolve(process.cwd(), "./"),
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [vue(), vueJsx()],
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
outDir: "umd",
|
||||
emptyOutDir: true,
|
||||
lib: {
|
||||
entry: resolve(process.cwd(), "./src/index.ts"),
|
||||
name: "LayuiVue",
|
||||
formats: ["umd"],
|
||||
fileName: (name) => `index.js`,
|
||||
},
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
pure_funcs: ["console.log"],
|
||||
},
|
||||
output: {
|
||||
comments: true,
|
||||
},
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
globals: {
|
||||
vue: "Vue",
|
||||
},
|
||||
assetFileNames: "index.css",
|
||||
},
|
||||
external: ["vue"],
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
Binary file not shown.
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="layui-laydate-content">
|
||||
<table style="width: 100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template
|
||||
v-for="(o, i) of dateList.length % 7 == 0
|
||||
? dateList.length / 7
|
||||
: Math.floor(dateList.length / 7) + 1"
|
||||
:key="i"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
v-for="(item, index) of dateList.slice(i * 7, i * 7 + 7)"
|
||||
:key="index"
|
||||
:data-unix="item.value"
|
||||
:class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this':
|
||||
item.value === modelValue ||
|
||||
(datePicker.range &&
|
||||
item.type === 'current' &&
|
||||
(item.value == startDate || item.value == endDate)),
|
||||
'laydate-range-hover': ifHasRangeHoverClass(item),
|
||||
'layui-disabled': item.type !== 'current' && datePicker.range,
|
||||
'layui-laydate-current':
|
||||
modelValue === -1 &&
|
||||
item.value === dayjs().startOf('day').valueOf(),
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
@mouseenter="dayItemMouseEnter($event, item)"
|
||||
>
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "DateContent",
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "../../../../language";
|
||||
import { computed, inject } from "vue";
|
||||
import { provideType } from "../../interface";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export interface DateContentProps {
|
||||
dateList: any;
|
||||
modelValue?: number;
|
||||
startDate?: number;
|
||||
endDate?: number;
|
||||
hoverDate?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DateContentProps>(), {
|
||||
dateList: [],
|
||||
modelValue: -1,
|
||||
hoverDate: -1,
|
||||
startDate: -1,
|
||||
endDate: -1,
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const WEEK_NAME = computed(() => [
|
||||
t("datePicker.sunday"),
|
||||
t("datePicker.monday"),
|
||||
t("datePicker.tuesday"),
|
||||
t("datePicker.wednesday"),
|
||||
t("datePicker.thursday"),
|
||||
t("datePicker.friday"),
|
||||
t("datePicker.saturday"),
|
||||
]);
|
||||
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
|
||||
const emits = defineEmits([
|
||||
"update:modelValue",
|
||||
"update:startDate",
|
||||
"update:endDate",
|
||||
"update:hoverDate",
|
||||
"simple",
|
||||
]);
|
||||
|
||||
// 点击日期
|
||||
const handleDayClick = (item: any) => {
|
||||
if (datePicker.range) {
|
||||
if (item.type !== "current") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.startDate === -1 && props.endDate === -1) {
|
||||
emits("update:startDate", item.value);
|
||||
} else if (props.startDate !== -1 && props.endDate !== -1) {
|
||||
emits("update:hoverDate", item.value);
|
||||
emits("update:startDate", item.value);
|
||||
emits("update:endDate", -1);
|
||||
} else if (props.startDate !== -1 && props.endDate === -1) {
|
||||
emits("update:endDate", item.value);
|
||||
if (item.value < props.startDate) {
|
||||
//swap
|
||||
const first = props.startDate;
|
||||
const last = item.value;
|
||||
emits("update:startDate", last);
|
||||
emits("update:endDate", first);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
emits("update:modelValue", item.value);
|
||||
if (item.type !== "current") {
|
||||
datePicker.currentMonth.value =
|
||||
item.type === "prev"
|
||||
? datePicker.currentMonth.value - 1
|
||||
: datePicker.currentMonth.value + 1;
|
||||
}
|
||||
if (datePicker.simple) {
|
||||
emits("simple");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dayItemMouseEnter = (event: MouseEvent, item: any) => {
|
||||
if (!datePicker.range) {
|
||||
return;
|
||||
}
|
||||
if (props.startDate === -1) {
|
||||
return;
|
||||
}
|
||||
if (item.type !== "current") {
|
||||
return;
|
||||
}
|
||||
if (props.startDate !== -1 && props.endDate !== -1) {
|
||||
emits("update:hoverDate", -1);
|
||||
return;
|
||||
}
|
||||
emits(
|
||||
"update:hoverDate",
|
||||
parseInt((event.target as HTMLElement).dataset.unix as string)
|
||||
);
|
||||
};
|
||||
const ifHasRangeHoverClass = computed(() => {
|
||||
return function (item: any) {
|
||||
if (!datePicker.range) {
|
||||
return false;
|
||||
}
|
||||
if (props.startDate === -1) {
|
||||
return false;
|
||||
}
|
||||
if (item.type !== "current") {
|
||||
return false;
|
||||
}
|
||||
if (props.hoverDate === -1 && props.endDate === -1) {
|
||||
return false;
|
||||
}
|
||||
let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
|
||||
let max = props.startDate > hover ? props.startDate : hover;
|
||||
let min = props.startDate < hover ? props.startDate : hover;
|
||||
if (item.value >= min && item.value <= max) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user