mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-01-23 01:30:23 +08:00
chore: format code by eslint #222
This commit is contained in:
vben
parent
b77b7c9d62
commit
9edc281322
22
.eslintrc.js
22
.eslintrc.js
@ -57,5 +57,27 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
'space-before-function-paren': 'off',
|
||||
|
||||
'vue/attributes-order': 'off',
|
||||
'vue/one-component-per-file': 'off',
|
||||
'vue/html-closing-bracket-newline': 'off',
|
||||
'vue/max-attributes-per-line': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/attribute-hyphenation': 'off',
|
||||
// 'vue/html-self-closing': 'off',
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/html-self-closing': [
|
||||
'error',
|
||||
{
|
||||
html: {
|
||||
void: 'always',
|
||||
normal: 'never',
|
||||
component: 'always',
|
||||
},
|
||||
svg: 'always',
|
||||
math: 'always',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
48
.yarnclean
Normal file
48
.yarnclean
Normal file
@ -0,0 +1,48 @@
|
||||
# test directories
|
||||
__tests__
|
||||
test
|
||||
tests
|
||||
powered-test
|
||||
|
||||
# asset directories
|
||||
docs
|
||||
doc
|
||||
website
|
||||
images
|
||||
assets
|
||||
|
||||
# examples
|
||||
example
|
||||
examples
|
||||
|
||||
# code coverage directories
|
||||
coverage
|
||||
.nyc_output
|
||||
|
||||
# build scripts
|
||||
Makefile
|
||||
Gulpfile.js
|
||||
Gruntfile.js
|
||||
|
||||
# configs
|
||||
appveyor.yml
|
||||
circle.yml
|
||||
codeship-services.yml
|
||||
codeship-steps.yml
|
||||
wercker.yml
|
||||
.tern-project
|
||||
.gitattributes
|
||||
.editorconfig
|
||||
.*ignore
|
||||
.eslintrc
|
||||
.jshintrc
|
||||
.flowconfig
|
||||
.documentup.json
|
||||
.yarn-metadata.json
|
||||
.travis.yml
|
||||
|
||||
# misc
|
||||
*.md
|
||||
|
||||
!istanbul-reports/lib/html/assets
|
||||
!istanbul-api/node_modules/istanbul-reports/lib/html/assets
|
||||
@ -14,7 +14,7 @@
|
||||
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
|
||||
"clean:lib": "npx rimraf node_modules",
|
||||
"typecheck": "vuedx-typecheck .",
|
||||
"lint:eslint": "eslint --fix --ext \"src/**/*.{vue,less,css,scss}\"",
|
||||
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
|
||||
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
||||
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||
"reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
|
||||
@ -63,7 +63,7 @@
|
||||
"@types/zxcvbn": "^4.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.14.1",
|
||||
"@typescript-eslint/parser": "^4.14.1",
|
||||
"@vitejs/plugin-legacy": "^1.2.1",
|
||||
"@vitejs/plugin-legacy": "^1.2.2",
|
||||
"@vitejs/plugin-vue": "^1.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.0.2",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
@ -93,7 +93,7 @@
|
||||
"stylelint-order": "^4.1.0",
|
||||
"ts-node": "^9.1.1",
|
||||
"typescript": "^4.1.3",
|
||||
"vite": "2.0.0-beta.50",
|
||||
"vite": "2.0.0-beta.52",
|
||||
"vite-plugin-html": "^2.0.0-beta.6",
|
||||
"vite-plugin-mock": "^2.0.0-rc.2",
|
||||
"vite-plugin-purge-icons": "^0.6.0",
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
|
||||
|
||||
import { Dropdown, DropMenu } from '/@/components/Dropdown';
|
||||
import { GlobalOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import { useLocale } from '/@/locales/useLocale';
|
||||
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
|
||||
@ -33,7 +32,7 @@
|
||||
import Icon from '/@/components/Icon';
|
||||
export default defineComponent({
|
||||
name: 'AppLocalPicker',
|
||||
components: { GlobalOutlined, Dropdown, Icon },
|
||||
components: { Dropdown, Icon },
|
||||
props: {
|
||||
// Whether to display text
|
||||
showText: propTypes.bool.def(true),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div :class="prefixCls" v-if="getShowSearch" @click.stop="handleSearch">
|
||||
<Tooltip>
|
||||
<template #title> {{ t('common.searchText') }} </template>
|
||||
<template #title>
|
||||
{{ t('common.searchText') }}
|
||||
</template>
|
||||
<SearchOutlined />
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@ -40,7 +40,9 @@
|
||||
<div :class="`${prefixCls}-list__item-icon`">
|
||||
<g-icon :icon="item.icon || 'mdi:form-select'" :size="20" />
|
||||
</div>
|
||||
<div :class="`${prefixCls}-list__item-text`">{{ item.name }}</div>
|
||||
<div :class="`${prefixCls}-list__item-text`">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div :class="`${prefixCls}-list__item-enter`">
|
||||
<g-icon icon="ant-design:enter-outlined" :size="20" />
|
||||
</div>
|
||||
@ -68,14 +70,14 @@
|
||||
export default defineComponent({
|
||||
name: 'AppSearchModal',
|
||||
components: { SearchOutlined, AppSearchFooter, [Input.name]: Input },
|
||||
emits: ['close'],
|
||||
directives: {
|
||||
clickOutside,
|
||||
},
|
||||
|
||||
props: {
|
||||
visible: Boolean,
|
||||
},
|
||||
directives: {
|
||||
clickOutside,
|
||||
},
|
||||
emits: ['close'],
|
||||
setup(_, { emit }) {
|
||||
const scrollWrap = ref<ElRef>(null);
|
||||
const { prefixCls } = useDesign('app-search-modal');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span :class="[prefixCls, { 'show-span': span && $slots.default }]">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
<BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
|
||||
<template #default="data">
|
||||
<Icon :icon="preIcon" v-if="preIcon" :size="14" />
|
||||
<slot v-bind="data" />
|
||||
<slot v-bind="data"></slot>
|
||||
<Icon :icon="postIcon" v-if="postIcon" :size="14" />
|
||||
</template>
|
||||
</Button>
|
||||
@ -16,8 +16,8 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AButton',
|
||||
inheritAttrs: false,
|
||||
components: { Button, Icon },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
type: propTypes.oneOf(['primary', 'default', 'danger', 'dashed', 'link']).def('default'),
|
||||
color: propTypes.oneOf(['error', 'warning', 'success', '']),
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PopButton',
|
||||
inheritAttrs: false,
|
||||
components: { Popconfirm, BasicButton },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
size: propTypes.oneOf(['large', 'default', 'small']).def(),
|
||||
enable: propTypes.bool.def(true),
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div ref="wrap"><slot /></div>
|
||||
<div ref="wrap">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
mode="out-in"
|
||||
>
|
||||
<div key="component" v-if="isInit">
|
||||
<slot :loading="loading" />
|
||||
<slot :loading="loading"></slot>
|
||||
</div>
|
||||
<div key="skeleton" v-else name="lazy-skeleton">
|
||||
<slot name="skeleton" v-if="$slots.skeleton" />
|
||||
<slot name="skeleton" v-if="$slots.skeleton"></slot>
|
||||
<Skeleton v-else />
|
||||
</div>
|
||||
</transition-group>
|
||||
@ -35,8 +35,8 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LazyContainer',
|
||||
inheritAttrs: false,
|
||||
components: { Skeleton },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
// Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
|
||||
timeout: propTypes.number,
|
||||
@ -102,7 +102,7 @@
|
||||
const { timeout, direction, threshold } = props;
|
||||
if (timeout) return;
|
||||
// According to the scrolling direction to construct the viewport margin, used to load in advance
|
||||
let rootMargin: string = '0px';
|
||||
let rootMargin = '0px';
|
||||
switch (direction) {
|
||||
case 'vertical':
|
||||
rootMargin = `${threshold} 0px`;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</Scrollbar>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div :class="['p-2', prefixCls]">
|
||||
<CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
|
||||
<template #title>
|
||||
<slot name="title" />
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
</CollapseHeader>
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
<Skeleton v-if="loading" />
|
||||
<div :class="`${prefixCls}__body`" v-else v-show="show">
|
||||
<LazyContainer :timeout="lazyTime" v-if="lazy">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
<template #skeleton>
|
||||
<slot name="lazySkeleton" />
|
||||
<slot name="lazySkeleton"></slot>
|
||||
</template>
|
||||
</LazyContainer>
|
||||
<slot v-else />
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</CollapseTransition>
|
||||
</div>
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
{{ $attrs.title }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot name="title" />
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
</BasicTitle>
|
||||
|
||||
<div :class="`${prefixCls}__action`">
|
||||
<slot name="action" />
|
||||
<slot name="action"></slot>
|
||||
<BasicArrow v-if="$attrs.canExpan" top :expand="$attrs.show" @click="$emit('expand')" />
|
||||
</div>
|
||||
</div>
|
||||
@ -19,10 +19,11 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { BasicArrow, BasicTitle } from '/@/components/Basic';
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
components: { BasicArrow, BasicTitle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
prefixCls: String,
|
||||
},
|
||||
emits: ['expand'],
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
@close="onClose"
|
||||
>
|
||||
<template #titleToolbar>
|
||||
<slot name="titleToolbar" />
|
||||
<slot name="titleToolbar"></slot>
|
||||
</template>
|
||||
</DrawerHeader>
|
||||
</template>
|
||||
@ -18,11 +18,11 @@
|
||||
v-loading="getLoading"
|
||||
:loading-tip="loadingText || t('common.loadingText')"
|
||||
>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</ScrollContainer>
|
||||
<DrawerFooter v-bind="getProps" @close="onClose" @ok="handleOk" :height="getFooterHeight">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</DrawerFooter>
|
||||
</Drawer>
|
||||
@ -57,8 +57,8 @@
|
||||
import { useAttrs } from '/@/hooks/core/useAttrs';
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
|
||||
inheritAttrs: false,
|
||||
props: basicProps,
|
||||
emits: ['visible-change', 'ok', 'close', 'register'],
|
||||
setup(props, { emit }) {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer">
|
||||
<template v-if="!$slots.footer">
|
||||
<slot name="insertFooter" />
|
||||
<slot name="insertFooter"></slot>
|
||||
<a-button v-bind="cancelButtonProps" @click="handleClose" class="mr-2" v-if="showCancelBtn">
|
||||
{{ cancelText }}
|
||||
</a-button>
|
||||
<slot name="centerFooter" />
|
||||
<slot name="centerFooter"></slot>
|
||||
<a-button
|
||||
:type="okType"
|
||||
@click="handleOk"
|
||||
@ -16,11 +16,11 @@
|
||||
>
|
||||
{{ okText }}
|
||||
</a-button>
|
||||
<slot name="appendFooter" />
|
||||
<slot name="appendFooter"></slot>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<slot name="footer" />
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasicTitle v-if="!isDetail" :class="prefixCls">
|
||||
<slot name="title" />
|
||||
<slot name="title"></slot>
|
||||
{{ !$slots.title ? title : '' }}
|
||||
</BasicTitle>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</span>
|
||||
|
||||
<span :class="`${prefixCls}__toolbar`">
|
||||
<slot name="titleToolbar" />
|
||||
<slot name="titleToolbar"></slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -33,6 +33,7 @@
|
||||
showDetailBack: propTypes.bool,
|
||||
title: propTypes.string,
|
||||
},
|
||||
emits: ['close'],
|
||||
setup(_, { emit }) {
|
||||
const { prefixCls } = useDesign('basic-drawer-header');
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-dropdown :trigger="trigger" v-bind="$attrs">
|
||||
<span>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu :selectedKeys="selectedKeys">
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
accept=".xlsx, .xls"
|
||||
@change="handleInputClick"
|
||||
/>
|
||||
<div @click="handleUpload"><slot /></div>
|
||||
<div @click="handleUpload">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
|
||||
<Row :style="getRowWrapStyle">
|
||||
<slot name="formHeader" />
|
||||
<slot name="formHeader"></slot>
|
||||
<template v-for="schema in getSchema" :key="schema.field">
|
||||
<FormItem
|
||||
:tableAction="tableAction"
|
||||
@ -13,7 +13,7 @@
|
||||
:setFormModel="setFormModel"
|
||||
>
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</FormItem>
|
||||
</template>
|
||||
@ -23,10 +23,10 @@
|
||||
#[item]="data"
|
||||
v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
|
||||
>
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</FormAction>
|
||||
<slot name="formFooter" />
|
||||
<slot name="formFooter"></slot>
|
||||
</Row>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Select v-bind="attrs" :options="getOptions" v-model:value="state">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
<template #suffixIcon v-if="loading">
|
||||
<LoadingOutlined spin />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
|
||||
<FormItem>
|
||||
<slot name="resetBefore" />
|
||||
<slot name="resetBefore"></slot>
|
||||
<Button
|
||||
type="default"
|
||||
class="mr-2"
|
||||
@ -11,7 +11,7 @@
|
||||
>
|
||||
{{ getResetBtnOptions.text }}
|
||||
</Button>
|
||||
<slot name="submitBefore" />
|
||||
<slot name="submitBefore"></slot>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
@ -23,7 +23,7 @@
|
||||
{{ getSubmitBtnOptions.text }}
|
||||
</Button>
|
||||
|
||||
<slot name="advanceBefore" />
|
||||
<slot name="advanceBefore"></slot>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
@ -33,7 +33,7 @@
|
||||
{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
|
||||
<BasicArrow class="ml-1" :expand="!isAdvanced" top />
|
||||
</Button>
|
||||
<slot name="advanceAfter" />
|
||||
<slot name="advanceAfter"></slot>
|
||||
</FormItem>
|
||||
</a-col>
|
||||
</template>
|
||||
@ -81,6 +81,7 @@
|
||||
isAdvanced: propTypes.bool,
|
||||
hideAdvanceBtn: propTypes.bool,
|
||||
},
|
||||
emits: ['toggle-advanced'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n();
|
||||
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
<template>
|
||||
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
|
||||
<template v-for="item in getOptions" :key="`${item.value}`">
|
||||
<RadioButton :value="item.value"> {{ item.label }} </RadioButton>
|
||||
<RadioButton :value="item.value">
|
||||
{{ item.label }}
|
||||
</RadioButton>
|
||||
</template>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
|
||||
@ -36,7 +36,7 @@ export interface FormActionType {
|
||||
appendSchemaByField: (
|
||||
schema: FormSchema,
|
||||
prefixField: string | undefined,
|
||||
first: boolean | undefined
|
||||
first?: boolean | undefined
|
||||
) => Promise<void>;
|
||||
validateFields: (nameList?: NamePath[]) => Promise<any>;
|
||||
validate: (nameList?: NamePath[]) => Promise<any>;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle" />
|
||||
<span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle"></span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
<template>
|
||||
<div ref="wrapRef" />
|
||||
<div ref="wrapRef"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, computed } from 'vue';
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
onMounted,
|
||||
unref,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
computed,
|
||||
watchEffect,
|
||||
} from 'vue';
|
||||
import Vditor from 'vditor';
|
||||
import 'vditor/dist/index.css';
|
||||
|
||||
@ -25,25 +34,26 @@
|
||||
|
||||
const modalFn = useModalContext();
|
||||
|
||||
const lang = ref<Lang>();
|
||||
|
||||
const { getLang } = useLocale();
|
||||
|
||||
watchEffect(() => {});
|
||||
|
||||
const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
|
||||
let lang: Lang;
|
||||
switch (unref(getLang)) {
|
||||
case 'en':
|
||||
lang.value = 'en_US';
|
||||
lang = 'en_US';
|
||||
break;
|
||||
case 'ja':
|
||||
lang.value = 'ja_JP';
|
||||
lang = 'ja_JP';
|
||||
break;
|
||||
case 'ko':
|
||||
lang.value = 'ko_KR';
|
||||
lang = 'ko_KR';
|
||||
break;
|
||||
default:
|
||||
lang.value = 'zh_CN';
|
||||
lang = 'zh_CN';
|
||||
}
|
||||
return lang.value;
|
||||
return lang;
|
||||
});
|
||||
function init() {
|
||||
const wrapEl = unref(wrapRef);
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
components: {
|
||||
BasicMenuItem,
|
||||
SubMenu: Menu.SubMenu,
|
||||
MenuItem: Menu.Item,
|
||||
MenuItemContent,
|
||||
},
|
||||
props: itemProps,
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<template #footer v-if="!$slots.footer">
|
||||
<ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</ModalFooter>
|
||||
</template>
|
||||
@ -35,11 +35,11 @@
|
||||
@ext-height="handleExtHeight"
|
||||
@height-change="handleHeightChange"
|
||||
>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</ModalWrapper>
|
||||
|
||||
<template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -71,8 +71,8 @@
|
||||
import { omit } from 'lodash-es';
|
||||
export default defineComponent({
|
||||
name: 'BasicModal',
|
||||
inheritAttrs: false,
|
||||
components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
|
||||
inheritAttrs: false,
|
||||
props: basicProps,
|
||||
emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
|
||||
setup(props, { emit, attrs }) {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot name="insertFooter" />
|
||||
<slot name="insertFooter"></slot>
|
||||
<a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn">
|
||||
{{ cancelText }}
|
||||
</a-button>
|
||||
<slot name="centerFooter" />
|
||||
<slot name="centerFooter"></slot>
|
||||
<a-button
|
||||
:type="okType"
|
||||
@click="handleOk"
|
||||
@ -14,7 +14,7 @@
|
||||
>
|
||||
{{ okText }}
|
||||
</a-button>
|
||||
<slot name="appendFooter" />
|
||||
<slot name="appendFooter"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ScrollContainer ref="wrapperRef">
|
||||
<div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
</template>
|
||||
@ -20,7 +20,6 @@
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
} from 'vue';
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
@ -31,8 +30,8 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ModalWrapper',
|
||||
components: { ScrollContainer },
|
||||
inheritAttrs: false,
|
||||
components: { Spin, ScrollContainer },
|
||||
props: {
|
||||
loading: propTypes.bool,
|
||||
useWrapper: propTypes.bool.def(true),
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div :class="prefixCls" :style="{ width: getCalcContentWidth }">
|
||||
<div :class="`${prefixCls}__left`">
|
||||
<slot name="left" />
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
<div :class="`${prefixCls}__right`">
|
||||
<slot name="right" />
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,21 +5,21 @@
|
||||
<template v-if="content">
|
||||
{{ content }}
|
||||
</template>
|
||||
<slot name="headerContent" v-else />
|
||||
<slot name="headerContent" v-else></slot>
|
||||
</template>
|
||||
<template #[item]="data" v-for="item in getHeaderSlots">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</PageHeader>
|
||||
<div :class="[`${prefixCls}-content`, $attrs.contentClass]" :style="getContentStyle">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</div>
|
||||
<PageFooter v-if="getShowFooter" ref="footerRef">
|
||||
<template #left>
|
||||
<slot name="leftFooter" />
|
||||
<slot name="leftFooter"></slot>
|
||||
</template>
|
||||
<template #right>
|
||||
<slot name="rightFooter" />
|
||||
<slot name="rightFooter"></slot>
|
||||
</template>
|
||||
</PageFooter>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<PreviewGroup>
|
||||
<slot v-if="!imageList || $slots.default" />
|
||||
<slot v-if="!imageList || $slots.default"></slot>
|
||||
<template v-else>
|
||||
<template v-for="item in getImageList" :key="item.src">
|
||||
<Image v-bind="item">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<component :is="tag" ref="wrapRef"></component>
|
||||
<component :is="tag" ref="wrapRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -11,7 +11,6 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QrCode',
|
||||
emits: { done: (url: string) => !!url, error: (error: any) => !!error },
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array] as PropType<string | any[]>,
|
||||
@ -39,6 +38,7 @@
|
||||
validator: (v: string) => ['canvas', 'img'].includes(v),
|
||||
},
|
||||
},
|
||||
emits: { done: (url: string) => !!url, error: (error: any) => !!error },
|
||||
setup(props, { emit }) {
|
||||
const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
|
||||
const urlRef = ref<string>('');
|
||||
|
||||
@ -36,11 +36,11 @@
|
||||
import { useOpenKeys } from './useOpenKeys';
|
||||
export default defineComponent({
|
||||
name: 'SimpleMenu',
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
Menu,
|
||||
SimpleSubMenu,
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
items: {
|
||||
type: Array as PropType<MenuType[]>,
|
||||
@ -55,6 +55,7 @@
|
||||
type: Function as PropType<(key: string) => Promise<boolean>>,
|
||||
},
|
||||
},
|
||||
emits: ['menuClick'],
|
||||
setup(props, { attrs, emit }) {
|
||||
const currentActiveMenu = ref('');
|
||||
const isClickGo = ref(false);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<div :class="`${prefixCls}-tooltip`">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
@ -287,7 +287,9 @@
|
||||
);
|
||||
|
||||
rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
|
||||
state.active = data.includes(instance?.uid!);
|
||||
if (instance?.uid) {
|
||||
state.active = data.includes(instance?.uid);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
:disabled="disabled"
|
||||
>
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</InputPassword>
|
||||
<div :class="`${prefixCls}-bar`">
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
@advanced-change="redoHeight"
|
||||
>
|
||||
<template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</BasicForm>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)">
|
||||
<slot :name="item" v-bind="data" />
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
<template #[`header-${column.dataIndex}`] v-for="column in columns" :key="column.dataIndex">
|
||||
<HeaderCell :column="column" />
|
||||
@ -69,12 +69,12 @@
|
||||
|
||||
import './style/index.less';
|
||||
export default defineComponent({
|
||||
props: basicProps,
|
||||
components: {
|
||||
Table,
|
||||
BasicForm,
|
||||
HeaderCell: createAsyncComponent(() => import('./components/HeaderCell.vue')),
|
||||
},
|
||||
props: basicProps,
|
||||
emits: [
|
||||
'fetch-success',
|
||||
'fetch-error',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span>
|
||||
<slot />
|
||||
<slot></slot>
|
||||
{{ title }}
|
||||
<FormOutlined />
|
||||
</span>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
/>
|
||||
</template>
|
||||
<Dropdown :trigger="['hover']" :dropMenuList="getDropList" v-if="dropDownActions">
|
||||
<slot name="more" />
|
||||
<slot name="more"></slot>
|
||||
<a-button type="link" size="small" v-if="!$slots.more">
|
||||
<MoreOutlined class="icon-more" />
|
||||
</a-button>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<slot name="tableTitle" v-if="$slots.tableTitle" />
|
||||
<slot name="tableTitle" v-if="$slots.tableTitle"></slot>
|
||||
<TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
|
||||
|
||||
<div :class="`${prefixCls}__toolbar`">
|
||||
<slot name="toolbar" />
|
||||
<slot name="toolbar"></slot>
|
||||
<Divider type="vertical" v-if="$slots.toolbar" />
|
||||
<TableSetting :setting="tableSetting" v-if="showTableSetting" />
|
||||
</div>
|
||||
|
||||
@ -18,8 +18,7 @@
|
||||
@change="handleChange"
|
||||
@options-change="handleOptionsChange"
|
||||
@pressEnter="handleSubmit"
|
||||
>
|
||||
</CellComponent>
|
||||
/>
|
||||
<div :class="`${prefixCls}__action`" v-if="!getRowEditable">
|
||||
<CheckOutlined :class="[`${prefixCls}__icon`, 'mx-2']" @click="handleSubmit" />
|
||||
<CloseOutlined :class="`${prefixCls}__icon `" @click="handleCancel" />
|
||||
@ -48,6 +47,9 @@
|
||||
export default defineComponent({
|
||||
name: 'EditableCell',
|
||||
components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent },
|
||||
directives: {
|
||||
clickOutside,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
|
||||
@ -62,10 +64,6 @@
|
||||
},
|
||||
index: propTypes.number,
|
||||
},
|
||||
directives: {
|
||||
clickOutside,
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const table = useTableContext();
|
||||
const isEdit = ref(false);
|
||||
@ -232,7 +230,7 @@
|
||||
const dataKey = (dataIndex || key) as string;
|
||||
|
||||
const record = await table.updateTableData(index, dataKey, value);
|
||||
needEmit && table.emit?.('edit-end', { record, index, key, value});
|
||||
needEmit && table.emit?.('edit-end', { record, index, key, value });
|
||||
isEdit.value = false;
|
||||
}
|
||||
|
||||
|
||||
@ -44,10 +44,14 @@
|
||||
<template v-for="item in plainOptions" :key="item.value">
|
||||
<div :class="`${prefixCls}__check-item`">
|
||||
<DragOutlined class="table-coulmn-drag-icon" />
|
||||
<Checkbox :value="item.value"> {{ item.label }} </Checkbox>
|
||||
<Checkbox :value="item.value">
|
||||
{{ item.label }}
|
||||
</Checkbox>
|
||||
|
||||
<Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
|
||||
<template #title> {{ t('component.table.settingFixedLeft') }}</template>
|
||||
<template #title>
|
||||
{{ t('component.table.settingFixedLeft') }}
|
||||
</template>
|
||||
<Icon
|
||||
icon="line-md:arrow-align-left"
|
||||
:class="[
|
||||
@ -62,7 +66,9 @@
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
|
||||
<template #title> {{ t('component.table.settingFixedRight') }}</template>
|
||||
<template #title>
|
||||
{{ t('component.table.settingFixedRight') }}
|
||||
</template>
|
||||
<Icon
|
||||
icon="line-md:arrow-align-left"
|
||||
:class="[
|
||||
|
||||
@ -39,9 +39,9 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Tinymce',
|
||||
components: { ImgUpload },
|
||||
inheritAttrs: false,
|
||||
props: basicProps,
|
||||
components: { ImgUpload },
|
||||
emits: ['change', 'update:modelValue'],
|
||||
setup(props, { emit, attrs }) {
|
||||
const editorRef = ref<any>(null);
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
:showUploadList="false"
|
||||
accept=".jpg,.jpeg,.gif,.png,.webp"
|
||||
>
|
||||
<a-button type="primary">{{ t('component.upload.imgUpload') }}</a-button>
|
||||
<a-button type="primary">
|
||||
{{ t('component.upload.imgUpload') }}
|
||||
</a-button>
|
||||
</Upload>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,14 +18,13 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TinymceImageUpload',
|
||||
components: { Upload, InboxOutlined },
|
||||
components: { Upload },
|
||||
emits: ['uploading', 'done', 'error'],
|
||||
setup(_, { emit }) {
|
||||
let uploading = false;
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
<Tooltip placement="bottom" v-if="showPreview">
|
||||
<template #title>
|
||||
{{ t('component.upload.uploaded') }}
|
||||
<template v-if="fileListRef.length">{{ fileListRef.length }}</template>
|
||||
<template v-if="fileListRef.length">
|
||||
{{ fileListRef.length }}
|
||||
</template>
|
||||
</template>
|
||||
<a-button @click="openPreviewModal">
|
||||
<Icon icon="bi:eye" />
|
||||
@ -45,6 +47,8 @@
|
||||
name: 'BasicUpload',
|
||||
components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
|
||||
props: uploadContainerProps,
|
||||
emits: ['change'],
|
||||
|
||||
setup(props, { emit, attrs }) {
|
||||
const { t } = useI18n();
|
||||
// 上传modal
|
||||
|
||||
@ -33,7 +33,9 @@
|
||||
:before-upload="beforeUpload"
|
||||
class="upload-modal-toolbar__btn"
|
||||
>
|
||||
<a-button type="primary"> {{ t('component.upload.choose') }} </a-button>
|
||||
<a-button type="primary">
|
||||
{{ t('component.upload.choose') }}
|
||||
</a-button>
|
||||
</Upload>
|
||||
</div>
|
||||
<FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
|
||||
@ -62,6 +64,7 @@
|
||||
export default defineComponent({
|
||||
components: { BasicModal, Upload, Alert, FileList },
|
||||
props: basicProps,
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n();
|
||||
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
export default defineComponent({
|
||||
components: { BasicModal, FileList },
|
||||
props: previewProps,
|
||||
emits: ['list-change'],
|
||||
setup(props, { emit }) {
|
||||
const [register, { closeModal }] = useModalInner();
|
||||
const { t } = useI18n();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom" />
|
||||
<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
|
||||
<div :style="getWrapStyle" :class="getClass">
|
||||
<LayoutHeader v-if="getShowInsetHeaderRef" />
|
||||
<MultipleTabs v-if="getShowTabs" />
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
import { REDIRECT_NAME } from '/@/router/constant';
|
||||
import Icon from '/@/components/Icon';
|
||||
|
||||
import { HomeOutlined } from '@ant-design/icons-vue';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
@ -37,7 +36,7 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutBreadcrumb',
|
||||
components: { HomeOutlined, Icon, [Breadcrumb.name]: Breadcrumb },
|
||||
components: { Icon, [Breadcrumb.name]: Breadcrumb },
|
||||
props: {
|
||||
theme: propTypes.oneOf(['dark', 'light']),
|
||||
},
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
<div :class="`${prefixCls}__entry`">
|
||||
<div :class="`${prefixCls}__header`">
|
||||
<img :src="headerImg" :class="`${prefixCls}__header-img`" />
|
||||
<p :class="`${prefixCls}__header-name`">{{ getRealName }}</p>
|
||||
<p :class="`${prefixCls}__header-name`">
|
||||
{{ getRealName }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<BasicForm @register="registerForm" />
|
||||
|
||||
@ -21,8 +21,12 @@
|
||||
|
||||
<template #description>
|
||||
<div>
|
||||
<div class="description">{{ item.description }}</div>
|
||||
<div class="datetime">{{ item.datetime }}</div>
|
||||
<div class="description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="datetime">
|
||||
{{ item.datetime }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
|
||||
@ -33,8 +33,6 @@
|
||||
|
||||
// res
|
||||
|
||||
import Icon from '/@/components/Icon/index';
|
||||
|
||||
import { userStore } from '/@/store/modules/user';
|
||||
|
||||
import { DOC_URL } from '/@/settings/siteSetting';
|
||||
@ -58,7 +56,6 @@
|
||||
Menu,
|
||||
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
|
||||
MenuDivider: Menu.Divider,
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
theme: propTypes.oneOf(['dark', 'light']),
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="mix-sidebar" />
|
||||
<div class="mix-sidebar"></div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
@ -31,7 +31,7 @@
|
||||
props: {
|
||||
menuTypeList: {
|
||||
type: Array as PropType<typeof menuTypeList>,
|
||||
defualt: [],
|
||||
defualt: () => [],
|
||||
},
|
||||
handler: {
|
||||
type: Function as PropType<Fn>,
|
||||
@ -39,6 +39,7 @@
|
||||
},
|
||||
def: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="getClass" :style="getDragBarStyle" />
|
||||
<div :class="getClass" :style="getDragBarStyle"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, unref } from 'vue';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
v-if="getMenuFixed && !getIsMobile"
|
||||
:style="getHiddenDomStyle"
|
||||
:class="{ hidden: !showClassSideBarRef }"
|
||||
/>
|
||||
></div>
|
||||
<Sider
|
||||
ref="sideRef"
|
||||
breakpoint="lg"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="`${prefixCls}-dom`" :style="getDomStyle" />
|
||||
<div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
|
||||
|
||||
<div
|
||||
v-click-outside="handleClickOutside"
|
||||
@ -37,7 +37,9 @@
|
||||
:size="getCollapsed ? 16 : 20"
|
||||
:icon="item.meta && item.meta.icon"
|
||||
/>
|
||||
<p :class="`${prefixCls}-module__name`">{{ t(item.name) }}</p>
|
||||
<p :class="`${prefixCls}-module__name`">
|
||||
{{ t(item.name) }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
@ -156,9 +158,11 @@
|
||||
);
|
||||
|
||||
const getIsFixed = computed(() => {
|
||||
/* eslint-disable-next-line */
|
||||
mixSideHasChildren.value = unref(chilrenMenus).length > 0;
|
||||
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
|
||||
if (isFixed) {
|
||||
/* eslint-disable-next-line */
|
||||
openMenu.value = true;
|
||||
}
|
||||
return isFixed;
|
||||
|
||||
@ -5,9 +5,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, unref, computed } from 'vue';
|
||||
import { RedoOutlined } from '@ant-design/icons-vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
|
||||
@ -15,7 +13,7 @@
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FoldButton',
|
||||
components: { RedoOutlined, Tooltip, Icon },
|
||||
components: { Icon },
|
||||
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('multiple-tabs-content');
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view>
|
||||
<template v-slot="{ Component, route }">
|
||||
<template #default="{ Component, route }">
|
||||
<transition
|
||||
:name="
|
||||
getTransitionName({
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view>
|
||||
<template v-slot="{ Component, route }">
|
||||
<template #default="{ Component, route }">
|
||||
<transition
|
||||
:name="
|
||||
getTransitionName({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, Ref } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, Ref } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, Ref } from 'vue';
|
||||
|
||||
@ -2,14 +2,18 @@
|
||||
<div class="grow-card">
|
||||
<div class="grow-card-header">
|
||||
<div class="grow-card__info">
|
||||
<p class="grow-card__title">{{ info.title }}</p>
|
||||
<p class="grow-card__title">
|
||||
{{ info.title }}
|
||||
</p>
|
||||
<CountTo prefix="$" :startVal="1" :endVal="info.price" />
|
||||
</div>
|
||||
<img :src="info.icon" />
|
||||
</div>
|
||||
<div class="grow-card-footer" :class="{ 'is-up': info.up }">
|
||||
<Statistic :value="info.percent">
|
||||
<template #prefix> <img :src="info.up ? riseSvg : downSvg" /> </template>
|
||||
<template #prefix>
|
||||
<img :src="info.up ? riseSvg : downSvg" />
|
||||
</template>
|
||||
</Statistic>
|
||||
<span class="grow-card__mom">{{ info.mom }}</span>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, Ref } from 'vue';
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="analysis p-4">
|
||||
<div class="p-4 analysis">
|
||||
<a-row class="pl-2">
|
||||
<template v-for="item in growCardList" :key="item.title">
|
||||
<ACol :sm="24" :md="12" :lg="6">
|
||||
<a-col :sm="24" :md="12" :lg="6">
|
||||
<GrowCard :info="item" />
|
||||
</ACol>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import GrowCard from './components/GrowCard.vue';
|
||||
import TrendLine from './components/TrendLine.vue';
|
||||
import AnalysisLine from './components/AnalysisLine.vue';
|
||||
import AnalysisPie from './components/AnalysisPie.vue';
|
||||
import AnalysisBar from './components/AnalysisBar.vue';
|
||||
@ -55,7 +54,6 @@
|
||||
components: {
|
||||
GrowCard,
|
||||
CollapseContainer,
|
||||
TrendLine,
|
||||
AnalysisLine,
|
||||
AnalysisPie,
|
||||
AnalysisBar,
|
||||
|
||||
@ -15,26 +15,26 @@
|
||||
<div class="circle"></div>
|
||||
<div class="plastic">
|
||||
<div class="plastic__g">
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item" />
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
<div class="plastic__item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item" />
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
<div class="line__item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
@ -43,29 +43,29 @@
|
||||
<div class="cloud__item"></div>
|
||||
</div>
|
||||
<div class="cloud">
|
||||
<div class="cloud__item" />
|
||||
<div class="cloud__item" />
|
||||
<div class="cloud__item"></div>
|
||||
<div class="cloud__item"></div>
|
||||
</div>
|
||||
<div class="cloud">
|
||||
<div class="cloud__item" />
|
||||
<div class="cloud__item" />
|
||||
<div class="cloud__item"></div>
|
||||
<div class="cloud__item"></div>
|
||||
</div>
|
||||
<div class="bird" />
|
||||
<div class="bird"></div>
|
||||
</div>
|
||||
<div class="birds">
|
||||
<div class="bird" />
|
||||
<div class="bird" />
|
||||
<div class="bird"></div>
|
||||
<div class="bird"></div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree__item" />
|
||||
<div class="tree__item" />
|
||||
<div class="tree__item" />
|
||||
<div class="tree__item"></div>
|
||||
<div class="tree__item"></div>
|
||||
<div class="tree__item"></div>
|
||||
</div>
|
||||
<div class="bush">
|
||||
<div class="bush__item" />
|
||||
<div class="bush__item" />
|
||||
<div class="bush__item"></div>
|
||||
<div class="bush__item"></div>
|
||||
</div>
|
||||
<div class="dot" />
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -10,7 +10,9 @@
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="news-list__item-desc">
|
||||
<div class="news-list__item-time mb-1"> {{ item.sendTime }}</div>
|
||||
<div class="news-list__item-time mb-1">
|
||||
{{ item.sendTime }}
|
||||
</div>
|
||||
<div class="news-list__item-title mb-1">
|
||||
<span class="news-list__item-light">{{ item.sender }} </span>申请迭代
|
||||
<span class="news-list__item-light"> {{ item.title }} </span>发布
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<Row class="prod-total">
|
||||
<a-row class="prod-total">
|
||||
<template v-for="(item, index) in wokbProd" :key="item.type">
|
||||
<Col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
|
||||
<div class="img" :class="`prod-total__item-${index}-img`" />
|
||||
<a-col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
|
||||
<div class="img" :class="`prod-total__item-${index}-img`"></div>
|
||||
<div>{{ item.amount }}</div>
|
||||
<span>{{ item.type }}</span>
|
||||
</Col>
|
||||
</a-col>
|
||||
</template>
|
||||
</Row>
|
||||
</a-row>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
@ -16,7 +16,7 @@
|
||||
import { wokbProd } from '../data';
|
||||
// import {ProdTypeEnum} from '@/api/dashboard/model/wokbModel'
|
||||
export default defineComponent({
|
||||
components: { Row, Col },
|
||||
components: { [Row.name]: Row, [Col.name]: Col },
|
||||
setup() {
|
||||
return { wokbProd };
|
||||
},
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<template #action>
|
||||
<a-button size="small" type="link"> 新建 </a-button>
|
||||
</template>
|
||||
<Row>
|
||||
<a-row>
|
||||
<template v-for="item in shortCuts" :key="item.img">
|
||||
<Col :span="8" class="shortcuts__item p-3">
|
||||
<img :src="item.img" class="shortcuts__item-img mb-2" />
|
||||
<a-col :span="8" class="p-3 shortcuts__item">
|
||||
<img :src="item.img" class="mb-2 shortcuts__item-img" />
|
||||
<br />
|
||||
<span>{{ item.name }}</span>
|
||||
</Col>
|
||||
</a-col>
|
||||
</template>
|
||||
|
||||
<Col :span="8" class="shortcuts__item p-3">
|
||||
<span class="shortcuts__item-all mb-2">
|
||||
<a-col :span="8" class="p-3 shortcuts__item">
|
||||
<span class="mb-2 shortcuts__item-all">
|
||||
<RightOutlined />
|
||||
</span>
|
||||
<br />
|
||||
<span>查看全部</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@ -71,7 +71,7 @@
|
||||
},
|
||||
];
|
||||
export default defineComponent({
|
||||
components: { Row, Col, CollapseContainer, RightOutlined },
|
||||
components: { [Row.name]: Row, [Col.name]: Col, CollapseContainer, RightOutlined },
|
||||
setup() {
|
||||
return { shortCuts };
|
||||
},
|
||||
|
||||
@ -23,14 +23,14 @@
|
||||
</template>
|
||||
</ListItemMeta>
|
||||
<a-button type="link">
|
||||
<Tag color="blue">待审批</Tag>
|
||||
<Tag color="blue"> 待审批 </Tag>
|
||||
</a-button>
|
||||
</ListItem>
|
||||
</template>
|
||||
</List>
|
||||
<div class="todo-list__all">
|
||||
<Tooltip placement="topRight">
|
||||
<template #title>查看更多</template>
|
||||
<template #title> 查看更多 </template>
|
||||
<EllipsisOutlined />
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<CollapseContainer title="销售统计" :canExpan="false">
|
||||
<div ref="chartRef" :style="{ width: '100%' }" />
|
||||
<div ref="chartRef" :style="{ width: '100%' }"></div>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
|
||||
>
|
||||
<template #rightFooter>
|
||||
<a-button type="primary">确认</a-button>
|
||||
<a-button type="primary"> 确认 </a-button>
|
||||
</template>
|
||||
|
||||
<div class="my-2">
|
||||
<h3>success</h3>
|
||||
<a-button color="success">成功</a-button>
|
||||
<a-button color="success"> 成功 </a-button>
|
||||
<a-button color="success" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button color="success" class="ml-2" loading> loading </a-button>
|
||||
<a-button color="success" type="link" class="ml-2"> link </a-button>
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>warning</h3>
|
||||
<a-button color="warning">警告</a-button>
|
||||
<a-button color="warning"> 警告 </a-button>
|
||||
<a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button color="warning" class="ml-2" loading> loading </a-button>
|
||||
<a-button color="warning" type="link" class="ml-2"> link </a-button>
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>error</h3>
|
||||
<a-button color="error">错误</a-button>
|
||||
<a-button color="error"> 错误 </a-button>
|
||||
<a-button color="error" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button color="error" class="ml-2" loading> loading </a-button>
|
||||
<a-button color="error" type="link" class="ml-2"> link </a-button>
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>ghost</h3>
|
||||
<a-button ghost>幽灵</a-button>
|
||||
<a-button ghost> 幽灵 </a-button>
|
||||
<a-button ghost class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button ghost class="ml-2" loading> loading </a-button>
|
||||
<a-button ghost type="link" class="ml-2"> link </a-button>
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>primary</h3>
|
||||
<a-button type="primary" preIcon="mdi:page-next-outline">主按钮</a-button>
|
||||
<a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
|
||||
<a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button type="primary" class="ml-2" loading> loading </a-button>
|
||||
<a-button type="link" class="ml-2"> link </a-button>
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>default</h3>
|
||||
<a-button type="default">默认</a-button>
|
||||
<a-button type="default"> 默认 </a-button>
|
||||
<a-button type="default" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button type="default" class="ml-2" loading> loading </a-button>
|
||||
<a-button type="link" class="ml-2"> link </a-button>
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
<div class="my-2">
|
||||
<h3>dashed</h3>
|
||||
<a-button type="dashed">dashed</a-button>
|
||||
<a-button type="dashed"> dashed </a-button>
|
||||
<a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
|
||||
<a-button type="dashed" class="ml-2" loading> loading </a-button>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
|
||||
Drawer Info.
|
||||
<a-button type="primary" @click="closeDrawer">内部关闭drawer</a-button>
|
||||
<a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter @ok="handleOk">
|
||||
<p class="h-20" v-for="index in 40" :key="index">根据屏幕高度自适应</p>
|
||||
<p class="h-20" v-for="index in 40" :key="index"> 根据屏幕高度自适应 </p>
|
||||
<template #insertFooter>
|
||||
<a-button> btn</a-button>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" :isDetail="true" title="Drawer Title5">
|
||||
<p class="h-20">Content Message</p>
|
||||
<p class="h-20"> Content Message </p>
|
||||
<template #titleToolbar> toolbar </template>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<PageWrapper title="抽屉组件使用示例">
|
||||
<Alert message="使用 useDrawer 进行抽屉操作" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openDrawerLoading">打开Drawer</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
|
||||
|
||||
<Alert message="内外同时控制显示隐藏" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openDrawer2(true)">打开Drawer</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
|
||||
<Alert message="自适应高度/显示footer" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openDrawer3(true)">打开Drawer</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
|
||||
|
||||
<Alert
|
||||
message="内外数据交互,外部通过 transferModalData 发送，内部通过 receiveDrawerDataRef 接收。该数据具有响应式"
|
||||
show-icon
|
||||
/>
|
||||
<a-button type="primary" class="my-4" @click="send">打开Drawer并传递数据</a-button>
|
||||
<a-button type="primary" class="my-4" @click="send"> 打开Drawer并传递数据 </a-button>
|
||||
<Alert message="详情页模式" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openDrawer5(true)">打开详情Drawer</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openDrawer5(true)"> 打开详情Drawer </a-button>
|
||||
<Drawer1 @register="register1" />
|
||||
<Drawer2 @register="register2" />
|
||||
<Drawer3 @register="register3" />
|
||||
|
||||
@ -13,13 +13,12 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { Skeleton } from 'ant-design-vue';
|
||||
import TargetContent from './TargetContent.vue';
|
||||
import { LazyContainer } from '/@/components/Container/index';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { LazyContainer, TargetContent, Skeleton, PageWrapper },
|
||||
components: { LazyContainer, TargetContent, PageWrapper },
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
|
||||
<a-alert message="组件方式" />
|
||||
<a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">全屏 Loading</a-button>
|
||||
<a-button class="my-4" type="primary" @click="openCompAbsolute">容器内 Loading</a-button>
|
||||
<a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
|
||||
全屏 Loading
|
||||
</a-button>
|
||||
<a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
|
||||
<Loading :loading="loading" :absolute="absolute" :tip="tip" />
|
||||
|
||||
<a-alert message="函数方式" />
|
||||
|
||||
<a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">全屏 Loading</a-button>
|
||||
<a-button class="my-4" type="primary" @click="openFnWrapLoading">容器内 Loading</a-button>
|
||||
<a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> 全屏 Loading </a-button>
|
||||
<a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
|
||||
|
||||
<a-alert message="指令方式" />
|
||||
<a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
title="Modal Title"
|
||||
:helpMessage="['提示1', '提示2']"
|
||||
>
|
||||
<a-button type="primary" @click="closeModal" class="mr-2">从内部关闭弹窗</a-button>
|
||||
<a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
|
||||
|
||||
<a-button type="primary" @click="setModalProps">从内部修改title</a-button>
|
||||
<a-button type="primary" @click="setModalProps"> 从内部修改title </a-button>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']" width="700px">
|
||||
<p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p>
|
||||
<p class="h-20" v-for="index in 20" :key="index"> 根据屏幕高度自适应 </p>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
参数进行控制是否可以拖动/全屏"
|
||||
show-icon
|
||||
/>
|
||||
<a-button type="primary" class="my-4" @click="openModalLoading"
|
||||
>打开弹窗 默认可以拖动/全屏</a-button
|
||||
>
|
||||
<a-button type="primary" class="my-4" @click="openModalLoading">
|
||||
打开弹窗 默认可以拖动/全屏
|
||||
</a-button>
|
||||
|
||||
<Alert message="内外同时同时显示隐藏" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openModal2">打开弹窗</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗 </a-button>
|
||||
<Alert message="自适应高度" show-icon />
|
||||
<a-button type="primary" class="my-4" @click="openModal3">打开弹窗</a-button>
|
||||
<a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗 </a-button>
|
||||
|
||||
<Alert
|
||||
message="内外数据交互,外部通过 transferModalData 发送，内部通过 receiveDrawerDataRef 接收。该数据具有响应式"
|
||||
show-icon
|
||||
/>
|
||||
<a-button type="primary" class="my-4" @click="send">打开弹窗并传递数据</a-button>
|
||||
<a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
|
||||
|
||||
<Modal1 @register="register1" />
|
||||
<Modal2 @register="register2" />
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
<CollapseContainer title="下载示例" class="text-center qrcode-demo-item">
|
||||
<QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
|
||||
<a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
|
||||
<div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
|
||||
<div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div>
|
||||
</CollapseContainer>
|
||||
|
||||
<CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<PageWrapper title="滚动组件函数示例" content="基于el-scrollbar">
|
||||
<div class="my-4">
|
||||
<a-button @click="scrollTo(100)" class="mr-2">滚动到100px位置</a-button>
|
||||
<a-button @click="scrollTo(800)" class="mr-2">滚动到800px位置</a-button>
|
||||
<a-button @click="scrollTo(0)" class="mr-2">滚动到顶部</a-button>
|
||||
<a-button @click="scrollBottom()" class="mr-2">滚动到底部</a-button>
|
||||
<a-button @click="scrollTo(100)" class="mr-2"> 滚动到100px位置 </a-button>
|
||||
<a-button @click="scrollTo(800)" class="mr-2"> 滚动到800px位置 </a-button>
|
||||
<a-button @click="scrollTo(0)" class="mr-2"> 滚动到顶部 </a-button>
|
||||
<a-button @click="scrollBottom()" class="mr-2"> 滚动到底部 </a-button>
|
||||
</div>
|
||||
<div class="scroll-wrap">
|
||||
<ScrollContainer class="mt-4" ref="scrollRef">
|
||||
<ul class="p-3">
|
||||
<template v-for="index in 100" :key="index">
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">
|
||||
{{ index }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
@ -19,12 +21,11 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, unref } from 'vue';
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { CollapseContainer, ScrollContainer, PageWrapper },
|
||||
components: { ScrollContainer, PageWrapper },
|
||||
setup() {
|
||||
const scrollRef = ref<Nullable<ScrollActionType>>(null);
|
||||
const getScroll = () => {
|
||||
|
||||
@ -3,8 +3,10 @@
|
||||
<Divider>基础滚动示例</Divider>
|
||||
<div class="virtual-scroll-demo-wrap">
|
||||
<VScroll :itemHeight="41" :items="data" :height="300" :width="300">
|
||||
<template v-slot="{ item }">
|
||||
<div class="virtual-scroll-demo__item">{{ item.title }}</div>
|
||||
<template #default="{ item }">
|
||||
<div class="virtual-scroll-demo__item">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
</VScroll>
|
||||
</div>
|
||||
@ -12,8 +14,10 @@
|
||||
<Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
|
||||
<div class="virtual-scroll-demo-wrap">
|
||||
<VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
|
||||
<template v-slot="{ item }">
|
||||
<div class="virtual-scroll-demo__item">{{ item.title }}</div>
|
||||
<template #default="{ item }">
|
||||
<div class="virtual-scroll-demo__item">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</template>
|
||||
</VScroll>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
<ScrollContainer class="mt-4">
|
||||
<ul class="p-3">
|
||||
<template v-for="index in 100" :key="index">
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">
|
||||
{{ index }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
@ -13,12 +15,11 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { CollapseContainer } from '/@/components/Container/index';
|
||||
import { ScrollContainer } from '/@/components/Container/index';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
|
||||
export default defineComponent({
|
||||
components: { CollapseContainer, ScrollContainer, PageWrapper },
|
||||
components: { ScrollContainer, PageWrapper },
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<PageWrapper title="上传组件示例">
|
||||
<a-alert message="基础示例" class="my-5"></a-alert>
|
||||
<a-alert message="基础示例" class="my-5" />
|
||||
<BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" />
|
||||
|
||||
<a-alert message="嵌入表单,加入表单校验" class="my-5"></a-alert>
|
||||
<a-alert message="嵌入表单,加入表单校验" class="my-5" />
|
||||
|
||||
<BasicForm @register="register" />
|
||||
</PageWrapper>
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<PageWrapper title="拖动校验示例">
|
||||
<div class="flex justify-center p-4 items-center bg-gray-700">
|
||||
<BasicDragVerify ref="el1" @success="handleSuccess" />
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el1)">还原</a-button>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el1)"> 还原 </a-button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center p-4 items-center bg-gray-700">
|
||||
<BasicDragVerify ref="el2" @success="handleSuccess" circle />
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el2)">还原</a-button>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el2)"> 还原 </a-button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center p-4 items-center bg-gray-700">
|
||||
@ -20,7 +20,7 @@
|
||||
background: '#018ffb',
|
||||
}"
|
||||
/>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el3)">还原</a-button>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center p-4 items-center bg-gray-700">
|
||||
@ -30,7 +30,7 @@
|
||||
<RightOutlined v-else />
|
||||
</template>
|
||||
</BasicDragVerify>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el4)">还原</a-button>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el4)"> 还原 </a-button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center p-4 items-center bg-gray-700">
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</BasicDragVerify>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el5)">还原</a-button>
|
||||
<a-button type="primary" class="ml-2" @click="handleBtnClick(el5)"> 还原 </a-button>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }" />
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ width: '100%' }" />
|
||||
<div ref="chartRef" :style="{ width: '100%' }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ width: '100%' }" />
|
||||
<div ref="chartRef" :style="{ width: '100%' }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ width: '100%' }" />
|
||||
<div ref="chartRef" :style="{ width: '100%' }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ width: '100%' }" />
|
||||
<div ref="chartRef" :style="{ width: '100%' }"></div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, onMounted } from 'vue';
|
||||
|
||||
@ -6,8 +6,7 @@
|
||||
:schemas="schemas"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
</BasicForm>
|
||||
/>
|
||||
</CollapseContainer>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<PageWrapper title="MarkDown组件示例">
|
||||
<a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
|
||||
<a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
|
||||
<MarkDown :value="value" @change="handleChange" ref="markDownRef" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
@ -6,8 +6,7 @@
|
||||
:schemas="schemas"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
</BasicForm>
|
||||
/>
|
||||
</CollapseContainer>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user