Skip to content

B
basic-vue-admin
提交 2ee01fa6 作者: vben
操作

perf(import): perf components import

上级 b6e5c3f6
正在显示 包含 341 行增加 和 430 行删除
src/components/Application/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import AppLogo from './src/AppLogo.vue'; import AppLogo from './src/AppLogo.vue';
import AppProvider from './src/AppProvider.vue';
import { withInstall } from '../util';
export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue')); export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'));
export const AppProvider = createAsyncComponent(() => import('./src/AppProvider.vue'));
export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), { export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), {
loading: true, loading: true,
}); });
// export const AppLogo = createAsyncComponent(() => import('./src/AppLogo.vue'));
withInstall(AppLocalePicker, AppLogo, AppProvider, AppSearch);
export { useAppProviderContext } from './src/useAppContext'; export { useAppProviderContext } from './src/useAppContext';
export { AppLogo }; export { AppLogo, AppProvider };
withInstall(AppLogo, AppProvider);
src/components/Authority/index.ts
import { withInstall } from '../util'; import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Authority = createAsyncComponent(() => import('./src/index.vue')); import Authority from './src/index.vue';
withInstall(Authority); withInstall(Authority);
export { Authority };
src/components/Basic/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const BasicArrow = createAsyncComponent(() => import('./src/BasicArrow.vue')); export const BasicArrow = createAsyncComponent(() => import('./src/BasicArrow.vue'));
export const BasicHelp = createAsyncComponent(() => import('./src/BasicHelp.vue')); export const BasicHelp = createAsyncComponent(() => import('./src/BasicHelp.vue'));
export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue')); export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue'));
withInstall(BasicArrow, BasicHelp, BasicTitle);
src/components/Button/index.ts
...@@ -2,5 +2,4 @@ import Button from './src/BasicButton.vue'; ...@@ -2,5 +2,4 @@ import Button from './src/BasicButton.vue';
import { withInstall } from '../util'; import { withInstall } from '../util';
withInstall(Button); withInstall(Button);
export { Button }; export { Button };
src/components/ClickOutSide/index.ts
import { withInstall } from '../util'; import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const ClickOutSide = createAsyncComponent(() => import('./src/index.vue')); import ClickOutSide from './src/index.vue';
withInstall(ClickOutSide); withInstall(ClickOutSide);
export { ClickOutSide };
src/components/Container/index.ts
import { withInstall } from '../util'; import { withInstall } from '../util';
import CollapseContainer from './src/collapse/CollapseContainer.vue'; import CollapseContainer from './src/collapse/CollapseContainer.vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import ScrollContainer from './src/ScrollContainer.vue';
export const ScrollContainer = createAsyncComponent(() => import('./src/ScrollContainer.vue')); import LazyContainer from './src/LazyContainer.vue';
// export const CollapseContainer = createAsyncComponent(
// () => import('./src/collapse/CollapseContainer.vue')
// );
export const LazyContainer = createAsyncComponent(() => import('./src/LazyContainer.vue'));
withInstall(ScrollContainer, CollapseContainer, LazyContainer); withInstall(ScrollContainer, CollapseContainer, LazyContainer);
export { CollapseContainer, ScrollContainer, LazyContainer };
export { CollapseContainer };
export * from './src/types'; export * from './src/types';
src/components/CountTo/index.ts
// Transform vue-count-to to support vue3 version // Transform vue-count-to to support vue3 version
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const CountTo = createAsyncComponent(() => import('./src/index.vue')); export const CountTo = createAsyncComponent(() => import('./src/index.vue'));
withInstall(CountTo);
src/components/Description/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Description = createAsyncComponent(() => import('./src/index')); export const Description = createAsyncComponent(() => import('./src/index'));
withInstall(Description);
export * from './src/types'; export * from './src/types';
export { useDescription } from './src/useDescription'; export { useDescription } from './src/useDescription';
src/components/Drawer/index.ts
import { withInstall } from '../util'; import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import BasicDrawer from './src/BasicDrawer';
export const BasicDrawer = createAsyncComponent(() => import('./src/BasicDrawer'));
withInstall(BasicDrawer); export { BasicDrawer };
export * from './src/types'; export * from './src/types';
export { useDrawer, useDrawerInner } from './src/useDrawer'; export { useDrawer, useDrawerInner } from './src/useDrawer';
withInstall(BasicDrawer);
src/components/Dropdown/index.ts
import { withInstall } from '../util'; import { withInstall } from '../util';
import Dropdown from './src/Dropdown'; import Dropdown from './src/Dropdown.vue';
withInstall(Dropdown); withInstall(Dropdown);
export * from './src/types'; export * from './src/types';
......
src/components/Dropdown/src/Dropdown.tsx deleted 100644 → 0
import type { Trigger } from './types';
import { defineComponent, computed, unref } from 'vue';
import { Dropdown, Menu } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import { basicDropdownProps } from './props';
import { getSlot } from '/@/utils/helper/tsxHelper';
export default defineComponent({
name: 'Dropdown',
props: basicDropdownProps,
emits: ['menuEvent'],
setup(props, { slots, emit, attrs }) {
const getMenuList = computed(() => props.dropMenuList);
function handleClickMenu({ key }: any) {
const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`);
emit('menuEvent', menu);
}
function renderMenus() {
return (
<Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}>
{() => (
<>
{unref(getMenuList).map((item) => {
const { disabled, icon, text, divider, event } = item;
return [
<Menu.Item key={`${event}`} disabled={disabled}>
{() => (
<>
{icon && <Icon icon={icon} />}
<span class="ml-1">{text}</span>
</>
)}
</Menu.Item>,
// @ts-ignore
divider && <Menu.Divider key={`d-${event}`} />,
];
})}
</>
)}
</Menu>
);
}
return () => (
<Dropdown trigger={props.trigger as Trigger[]} {...attrs}>
{{
default: () => <span>{getSlot(slots)}</span>,
overlay: () => renderMenus(),
}}
</Dropdown>
);
},
});
src/components/Dropdown/src/Dropdown.vue 0 → 100644
<template>
<a-dropdown :trigger="trigger" v-bind="$attrs">
<span>
<slot />
</span>
<template #overlay>
<a-menu :selectedKeys="selectedKeys">
<template v-for="item in getMenuList" :key="`${item.event}`">
<a-menu-item @click="handleClickMenu({ key: item.event })" :disabled="item.disabled">
<Icon :icon="item.icon" v-if="item.icon" />
<span class="ml-1">{{ item.text }}</span>
</a-menu-item>
<a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
</template>
</a-menu>
</template>
</a-dropdown>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { DropMenu } from './types';
import { defineComponent, computed, unref } from 'vue';
import { Dropdown, Menu } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
export default defineComponent({
name: 'BasicDropdown',
components: {
[Dropdown.name]: Dropdown,
[Menu.name]: Menu,
[Menu.Item.name]: Menu.Item,
[Menu.Divider.name]: Menu.Divider,
Icon,
},
props: {
/**
* the trigger mode which executes the drop-down action
* @default ['hover']
* @type string[]
*/
trigger: {
type: [Array] as PropType<string[]>,
default: () => {
return ['contextmenu'];
},
},
dropMenuList: {
type: Array as PropType<DropMenu[]>,
default: () => [],
},
selectedKeys: {
type: Array as PropType<string[]>,
default: () => [],
},
},
emits: ['menuEvent'],
setup(props, { emit }) {
const getMenuList = computed(() => props.dropMenuList);
function handleClickMenu({ key }: { key: string }) {
const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`);
emit('menuEvent', menu);
}
return { handleClickMenu, getMenuList };
},
});
</script>
src/components/Dropdown/src/props.ts deleted 100644 → 0
import type { PropType } from 'vue';
import type { DropMenu } from './types';
export const dropdownProps = {
/**
* the trigger mode which executes the drop-down action
* @default ['hover']
* @type string[]
*/
trigger: {
type: [Array] as PropType<string[]>,
default: () => {
return ['contextmenu'];
},
},
};
export const basicDropdownProps = Object.assign({}, dropdownProps, {
dropMenuList: {
type: Array as PropType<DropMenu[]>,
default: () => [],
},
selectedKeys: {
type: Array as PropType<string[]>,
default: () => [],
},
});
src/components/Dropdown/src/types.ts
...@@ -7,4 +7,4 @@ export interface DropMenu { ...@@ -7,4 +7,4 @@ export interface DropMenu {
divider?: boolean; divider?: boolean;
} }
export type Trigger = 'click' | 'hover' | 'contextMenu'; // export type Trigger = 'click' | 'hover' | 'contextMenu';
src/components/Excel/index.ts
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { withInstall } from '../util';
export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue')); export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue'));
export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue')); export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue'));
withInstall(ImpExcel, ExpExcelModel);
export * from './src/types'; export * from './src/types';
export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel'; export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
src/components/Icon/index.less deleted 100644 → 0
@import (reference) '../../design/index.less';
.app-iconify {
display: inline-block;
vertical-align: middle;
}
span.iconify {
display: block;
min-width: 1em;
min-height: 1em;
background: @iconify-bg-color;
border-radius: 100%;
}
src/components/Icon/index.ts 0 → 100644
import { withInstall } from '../util';
import Icon from './src/index.vue';
withInstall(Icon);
export { Icon };
export default Icon;
src/components/Icon/index.tsx → src/components/Icon/src/index.vue
import './index.less'; <template>
<span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle" />
import type { PropType } from 'vue'; </template>
import { <script lang="ts">
defineComponent, import type { PropType } from 'vue';
ref, import {
watch, defineComponent,
onMounted, ref,
nextTick, watch,
unref, onMounted,
computed, nextTick,
CSSProperties, unref,
} from 'vue'; computed,
import Iconify from '@purge-icons/generated'; CSSProperties,
import { isString } from '/@/utils/is'; } from 'vue';
import { propTypes } from '/@/utils/propTypes'; import Iconify from '@purge-icons/generated';
export default defineComponent({ import { isString } from '/@/utils/is';
name: 'GIcon', import { propTypes } from '/@/utils/propTypes';
props: { export default defineComponent({
// icon name name: 'GIcon',
icon: propTypes.string, props: {
// icon color // icon name
color: propTypes.string, icon: propTypes.string,
// icon size // icon color
size: { color: propTypes.string,
type: [String, Number] as PropType<string | number>, // icon size
default: 16, size: {
type: [String, Number] as PropType<string | number>,
default: 16,
},
prefix: propTypes.string.def(''),
}, },
prefix: propTypes.string.def(''), setup(props) {
}, const elRef = ref<ElRef>(null);
setup(props, { attrs }) {
const elRef = ref<ElRef>(null);
const getIconRef = computed(() => { const getIconRef = computed(() => {
const { icon, prefix } = props; const { icon, prefix } = props;
return `${prefix ? prefix + ':' : ''}${icon}`; return `${prefix ? prefix + ':' : ''}${icon}`;
}); });
const update = async () => { const update = async () => {
const el = unref(elRef); const el = unref(elRef);
if (el) { if (el) {
await nextTick(); await nextTick();
const icon = unref(getIconRef); const icon = unref(getIconRef);
const svg = Iconify.renderSVG(icon, {}); const svg = Iconify.renderSVG(icon, {});
if (svg) { if (svg) {
el.textContent = ''; el.textContent = '';
el.appendChild(svg); el.appendChild(svg);
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = 'iconify'; span.className = 'iconify';
span.dataset.icon = icon; span.dataset.icon = icon;
el.textContent = ''; el.textContent = '';
el.appendChild(span); el.appendChild(span);
}
} }
} };
};
const wrapStyleRef = computed( const getWrapStyle = computed(
(): CSSProperties => { (): CSSProperties => {
const { size, color } = props; const { size, color } = props;
let fs = size; let fs = size;
if (isString(size)) { if (isString(size)) {
fs = parseInt(size, 10); fs = parseInt(size, 10);
}
return {
fontSize: `${fs}px`,
color,
display: 'inline-flex',
};
} }
return { );
fontSize: `${fs}px`,
color, watch(() => props.icon, update, { flush: 'post' });
display: 'inline-flex',
};
}
);
watch(() => props.icon, update, { flush: 'post' }); onMounted(update);
return { elRef, getWrapStyle };
},
});
</script>
<style lang="less">
@import (reference) '../../../design/index.less';
onMounted(update); .app-iconify {
display: inline-block;
vertical-align: middle;
}
return () => ( span.iconify {
<span ref={elRef} class={[attrs.class, 'app-iconify anticon']} style={unref(wrapStyleRef)} /> display: block;
); min-width: 1em;
}, min-height: 1em;
}); background: @iconify-bg-color;
border-radius: 100%;
}
</style>
src/components/Loading/index.ts
import './src/indicator';
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Loading = createAsyncComponent(() => import('./src/index.vue')); export const Loading = createAsyncComponent(() => import('./src/index.vue'));
withInstall(Loading);
export { useLoading } from './src/useLoading'; export { useLoading } from './src/useLoading';
export { createLoading } from './src/createLoading'; export { createLoading } from './src/createLoading';
src/components/Loading/src/indicator.tsx deleted 100644 → 0
// If you need to modify the default icon, you can open the comment and modify it here
// import { Spin } from 'ant-design-vue';
// import { LoadingOutlined } from '@ant-design/icons-vue';
// Spin.setDefaultIndicator({
// indicator: () => {
// return <LoadingOutlined spin />;
// },
// });
src/components/Loading/src/useLoading.ts
...@@ -8,6 +8,10 @@ export interface UseLoadingOptions { ...@@ -8,6 +8,10 @@ export interface UseLoadingOptions {
props?: Partial<LoadingProps>; props?: Partial<LoadingProps>;
} }
interface Fn {
(): void;
}
export function useLoading(props: Partial<LoadingProps>): [Fn, Fn]; export function useLoading(props: Partial<LoadingProps>): [Fn, Fn];
export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn]; export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn];
......
src/components/Markdown/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const MarkDown = createAsyncComponent(() => import('./src/index.vue')); export const MarkDown = createAsyncComponent(() => import('./src/index.vue'));
withInstall(MarkDown);
export * from './src/types'; export * from './src/types';
src/components/Markdown/src/index.vue
<template> <template>
<div class="markdown" ref="wrapRef" /> <div ref="wrapRef" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, computed } from 'vue';
defineComponent,
ref,
onMounted,
unref,
onUnmounted,
nextTick,
// watch,
computed,
} from 'vue';
import Vditor from 'vditor'; import Vditor from 'vditor';
import 'vditor/dist/index.css'; import 'vditor/dist/index.css';
...@@ -75,21 +66,6 @@ ...@@ -75,21 +66,6 @@
initedRef.value = true; initedRef.value = true;
} }
// watch(
// () => props.value,
// () => {
// nextTick(() => {
// const vditor = unref(vditorRef);
// if (unref(initedRef) && props.value && vditor) {
// vditor.setValue(props.value);
// }
// });
// },
// {
// immediate: true,
// }
// );
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
init(); init();
......
src/components/Menu/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'), { export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'));
loading: false,
});
export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'), {
loading: false,
});
withInstall(BasicMenu); export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'));
src/components/Modal/index.ts
import './src/index.less'; import './src/index.less';
import { withInstall } from '../util'; import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import BasicModal from './src/BasicModal';
export const BasicModal = createAsyncComponent(() => import('./src/BasicModal'));
withInstall(BasicModal); withInstall(BasicModal);
export { BasicModal };
export { useModalContext } from './src/useModalContext'; export { useModalContext } from './src/useModalContext';
export { useModal, useModalInner } from './src/useModal'; export { useModal, useModalInner } from './src/useModal';
export * from './src/types'; export * from './src/types';
src/components/Page/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue')); export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue'));
withInstall(PageFooter);
src/components/Qrcode/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const QrCode = createAsyncComponent(() => import('./src/index.vue')); export const QrCode = createAsyncComponent(() => import('./src/index.vue'));
withInstall(QrCode);
export * from './src/types'; export * from './src/types';
src/components/Scrollbar/index.ts
...@@ -3,10 +3,9 @@ ...@@ -3,10 +3,9 @@
*/ */
import { withInstall } from '../util'; import { withInstall } from '../util';
import Scrollbar from './src/index.vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Scrollbar = createAsyncComponent(() => import('./src/index.vue'));
withInstall(Scrollbar); withInstall(Scrollbar);
export { Scrollbar };
export type { ScrollbarType } from './src/types'; export type { ScrollbarType } from './src/types';
src/components/StrengthMeter/index.ts 0 → 100644
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const StrengthMeter = createAsyncComponent(() => import('./src/index.vue'));
src/components/StrengthMeter/index.tsx deleted 100644 → 0
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const StrengthMeter = createAsyncComponent(() => import('./src/index'));
withInstall(StrengthMeter);
src/components/StrengthMeter/src/index.tsx deleted 100644 → 0
import './index.less';
import { PropType } from 'vue';
import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
import { Input } from 'ant-design-vue';
import zxcvbn from 'zxcvbn';
import { extendSlots } from '/@/utils/helper/tsxHelper';
import { propTypes } from '/@/utils/propTypes';
const prefixCls = 'strength-meter';
export default defineComponent({
name: 'StrengthMeter',
props: {
value: propTypes.string,
userInputs: {
type: Array as PropType<string[]>,
default: () => [],
},
showInput: propTypes.bool.def(true),
disabled: propTypes.bool,
},
emits: ['score-change', 'change'],
setup(props, { emit, attrs, slots }) {
const innerValueRef = ref('');
const getPasswordStrength = computed(() => {
const { userInputs, disabled } = props;
if (disabled) return null;
const innerValue = unref(innerValueRef);
const score = innerValue
? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
: null;
emit('score-change', score);
return score;
});
function handleChange(e: ChangeEvent) {
innerValueRef.value = e.target.value;
}
watchEffect(() => {
innerValueRef.value = props.value || '';
});
watch(
() => unref(innerValueRef),
(val) => {
emit('change', val);
}
);
return () => {
const { showInput, disabled } = props;
return (
<div class={prefixCls}>
{showInput && (
<Input.Password
{...attrs}
allowClear={true}
value={unref(innerValueRef)}
onChange={handleChange}
disabled={disabled}
>
{extendSlots(slots)}
</Input.Password>
)}
<div class={`${prefixCls}-bar`}>
<div class={`${prefixCls}-bar__fill`} data-score={unref(getPasswordStrength)}></div>
</div>
</div>
);
};
},
});
src/components/StrengthMeter/src/index.less → src/components/StrengthMeter/src/index.vue
@import (reference) '../../../design/index.less'; <template>
<div :class="prefixCls">
<InputPassword
v-if="showInput"
v-bind="$attrs"
allowClear
:value="innerValueRef"
@change="handleChange"
:disabled="disabled"
>
<template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data" />
</template>
</InputPassword>
<div :class="`${prefixCls}-bar`">
<div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div>
</div>
</div>
</template>
.strength-meter { <script lang="ts">
position: relative; import { PropType } from 'vue';
&-bar { import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
position: relative;
height: 4px;
margin: 10px auto 6px;
background: @disabled-color;
border-radius: 3px;
&::before,
&::after {
position: absolute;
z-index: 10;
display: block;
width: 20%;
height: inherit;
background: transparent;
border-color: @white;
border-style: solid;
border-width: 0 5px 0 5px;
content: '';
}
&::before { import { Input } from 'ant-design-vue';
left: 20%;
}
&::after { import zxcvbn from 'zxcvbn';
right: 20%; import { propTypes } from '/@/utils/propTypes';
} import { useDesign } from '/@/hooks/web/useDesign';
&__fill { export default defineComponent({
position: absolute; name: 'StrengthMeter',
width: 0; components: { InputPassword: Input.Password },
height: inherit; props: {
background: transparent; value: propTypes.string,
border-radius: inherit;
transition: width 0.5s ease-in-out, background 0.25s;
&[data-score='0'] { userInputs: {
width: 20%; type: Array as PropType<string[]>,
background: darken(@error-color, 10%); default: () => [],
},
showInput: propTypes.bool.def(true),
disabled: propTypes.bool,
},
emits: ['score-change', 'change'],
setup(props, { emit }) {
const innerValueRef = ref('');
const { prefixCls } = useDesign('strength-meter');
const getPasswordStrength = computed(() => {
const { userInputs, disabled } = props;
if (disabled) return null;
const innerValue = unref(innerValueRef);
const score = innerValue
? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
: null;
emit('score-change', score);
return score;
});
function handleChange(e: ChangeEvent) {
innerValueRef.value = e.target.value;
} }
&[data-score='1'] { watchEffect(() => {
width: 40%; innerValueRef.value = props.value || '';
background: @error-color; });
watch(
() => unref(innerValueRef),
(val) => {
emit('change', val);
}
);
return {
getPasswordStrength,
handleChange,
prefixCls,
innerValueRef,
};
},
});
</script>
<style lang="less" scoped>
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-strength-meter';
.@{prefix-cls} {
position: relative;
&-bar {
position: relative;
height: 4px;
margin: 10px auto 6px;
background: @disabled-color;
border-radius: 3px;
&::before,
&::after {
position: absolute;
z-index: 10;
display: block;
width: 20%;
height: inherit;
background: transparent;
border-color: @white;
border-style: solid;
border-width: 0 5px 0 5px;
content: '';
} }
&[data-score='2'] { &::before {
width: 60%; left: 20%;
background: @warning-color;
} }
&[data-score='3'] { &::after {
width: 80%; right: 20%;
background: fade(@success-color, 50%);
} }
&[data-score='4'] { &--fill {
width: 100%; position: absolute;
background: @success-color; width: 0;
height: inherit;
background: transparent;
border-radius: inherit;
transition: width 0.5s ease-in-out, background 0.25s;
&[data-score='0'] {
width: 20%;
background: darken(@error-color, 10%);
}
&[data-score='1'] {
width: 40%;
background: @error-color;
}
&[data-score='2'] {
width: 60%;
background: @warning-color;
}
&[data-score='3'] {
width: 80%;
background: fade(@success-color, 50%);
}
&[data-score='4'] {
width: 100%;
background: @success-color;
}
} }
} }
} }
} </style>
src/components/Tinymce/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue')); export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue'));
withInstall(Tinymce);
src/components/Tree/index.ts
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { withInstall } from '../util';
export const BasicTree = createAsyncComponent(() => import('./src/BasicTree')); export const BasicTree = createAsyncComponent(() => import('./src/BasicTree'));
withInstall(BasicTree);
export type { ContextMenuItem } from '/@/hooks/web/useContextMenu'; export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
export * from './src/types'; export * from './src/types';
src/components/Upload/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue')); export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue'));
withInstall(BasicUpload);
src/components/Verify/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify')); export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify'));
export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate')); export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate'));
withInstall(BasicDragVerify, RotateDragVerify);
export * from './src/types'; export * from './src/types';
src/components/VirtualScroll/index.ts
import { withInstall } from '../util';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const VScroll = createAsyncComponent(() => import('./src/index')); export const VScroll = createAsyncComponent(() => import('./src/index'));
withInstall(VScroll);
src/layouts/default/header/index.vue
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
} from './components'; } from './components';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export default defineComponent({ export default defineComponent({
name: 'LayoutHeader', name: 'LayoutHeader',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论