init
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LoginQqIcon",
|
||||
};
|
||||
</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-login-qq"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayTag",
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import "./index.less";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { TinyColor } from "@ctrl/tinycolor";
|
||||
import { TagShape, TagType, TagVariant } from "./interface";
|
||||
|
||||
export interface TagProps {
|
||||
type?: TagType;
|
||||
color?: string;
|
||||
closable?: boolean;
|
||||
size?: string;
|
||||
bordered?: boolean;
|
||||
disabled?: boolean;
|
||||
shape?: TagShape;
|
||||
maxWidth?: string;
|
||||
variant?: TagVariant;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TagProps>(), {
|
||||
size: "md",
|
||||
shape: "square",
|
||||
variant: "dark",
|
||||
bordered: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "check", "update:checked"]);
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const handleClose = (e: MouseEvent) => {
|
||||
if (props.disabled) return;
|
||||
emit("close", e);
|
||||
};
|
||||
|
||||
const classTag = computed(() => [
|
||||
"layui-tag",
|
||||
`layui-tag-size-${props.size}`,
|
||||
`layui-tag-shap-${props.shape}`,
|
||||
{
|
||||
[`layui-tag-variant-${props.variant}`]: props.variant,
|
||||
[`layui-tag-variant-${props.variant}-bordered`]: props.bordered,
|
||||
[`layui-tag-${props.type}-bordered`]: props.bordered,
|
||||
[`layui-tag-${props.type}`]: props.type,
|
||||
"layui-tag-bordered": props.bordered,
|
||||
"layui-tag-disabled": props.disabled,
|
||||
"layui-tag-ellipsis": props.maxWidth,
|
||||
},
|
||||
]);
|
||||
|
||||
const styleTag = computed(() => [
|
||||
{
|
||||
"max-width": props.maxWidth ?? "unset",
|
||||
...useTagCustomStyle(props).value,
|
||||
},
|
||||
]);
|
||||
|
||||
function useTagCustomStyle(props: TagProps) {
|
||||
return computed(() => {
|
||||
let styles: Record<string, string> = {};
|
||||
|
||||
const tagColor = props.color;
|
||||
|
||||
if (tagColor) {
|
||||
const color = new TinyColor(tagColor);
|
||||
if (props.variant === "dark") {
|
||||
const isDark = color.getBrightness() < 190;
|
||||
const textColor = isDark ? "#FFF" : "#000000";
|
||||
styles = {
|
||||
"--layui-tag-bg-color": tagColor,
|
||||
"--layui-tag-border-color": props.bordered ? tagColor : "transparent",
|
||||
"--layui-tag-hover-color": tagColor,
|
||||
"--layui-tag-text-color": textColor,
|
||||
};
|
||||
} else if (props.variant === "light") {
|
||||
styles = {
|
||||
"--layui-tag-bg-color": color.tint(90).toString(),
|
||||
"--layui-tag-border-color": props.bordered
|
||||
? color.tint(50).toString()
|
||||
: "transparent",
|
||||
"--layui-tag-hover-color": color.tint(90).toString(),
|
||||
"--layui-tag-text-color": tagColor,
|
||||
};
|
||||
} else if (props.variant === "plain") {
|
||||
styles = {
|
||||
"--layui-tag-bg-color": "transparent",
|
||||
"--layui-tag-border-color": props.bordered ? tagColor : "transparent",
|
||||
"--layui-tag-hover-color": "transparent",
|
||||
"--layui-tag-text-color": tagColor,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return styles;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<span v-if="visible" :class="classTag" :style="styleTag">
|
||||
<span v-if="$slots.icon" class="layui-tag-icon">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
<span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
|
||||
<slot />
|
||||
</span>
|
||||
<slot v-else />
|
||||
<span
|
||||
v-if="closable"
|
||||
class="layui-tag-close-icon"
|
||||
@click.stop="handleClose"
|
||||
>
|
||||
<slot name="close-icon">
|
||||
<lay-icon type="layui-icon-close"></lay-icon>
|
||||
</slot>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,5 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { _ as _sfc_main } from "../carousel/index2.js";
|
||||
import "vue";
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,29 @@
|
||||
import { getCurrentInstance } from "vue";
|
||||
import { createI18n, useI18n as __useI18n__ } from "vue-i18n";
|
||||
import zh_CN from "./locales/zh_CN";
|
||||
import en_US from "./locales/en_US";
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: "zh_CN",
|
||||
messages: {
|
||||
zh_CN: zh_CN,
|
||||
en_US: en_US,
|
||||
},
|
||||
});
|
||||
|
||||
export function useI18n() {
|
||||
let i18nInstance;
|
||||
const app = getCurrentInstance()?.appContext.app;
|
||||
|
||||
try {
|
||||
i18nInstance = __useI18n__();
|
||||
} catch (e) {
|
||||
app?.use(i18n);
|
||||
i18nInstance = __useI18n__();
|
||||
}
|
||||
|
||||
return i18nInstance;
|
||||
}
|
||||
|
||||
export default i18n;
|
||||
@@ -0,0 +1,2 @@
|
||||
x+)JMU07f040031Q<31><51>KI<4B><49>K..f<10>Y<EFBFBD><59><EFBFBD><EFBFBD><EFBFBD>Ih<49><68><EFBFBD>:'<27>.$\;ҋ<>(<28><>![<5B><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>j<EFBFBD><1E>
|
||||
<EFBFBD>Z<EFBFBD><EFBFBD><EFBFBD>֑{<7B><01>9"t
|
||||
Reference in New Issue
Block a user