mod: conflict resolution
This commit is contained in:
kailong321200875
commit
47edf7b270
114
CHANGELOG.md
114
CHANGELOG.md
|
|
@ -2,55 +2,107 @@
|
|||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [1.1.14](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.13...v1.1.14) (2022-03-22)
|
||||
|
||||
### [1.2.4](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.3...v1.2.4) (2022-04-06)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix the bug that the form search function is invalid of the example-dialog page ([9ec30e7](https://github.com/kailong321200875/vue-element-plus-admin/commit/9ec30e719f89865497dbb1321be1df906f59f14e))
|
||||
|
||||
### [1.1.13](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.12...v1.1.13) (2022-03-17)
|
||||
|
||||
|
||||
### Build System
|
||||
|
||||
* update plugins ([a2d0313](https://github.com/kailong321200875/vue-element-plus-admin/commit/a2d03137899f9b16fc1d4a09a23576cd74e7950e))
|
||||
|
||||
### [1.1.12](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.11...v1.1.12) (2022-03-15)
|
||||
|
||||
|
||||
### Build System
|
||||
|
||||
* update plugins ([fee2252](https://github.com/kailong321200875/vue-element-plus-admin/commit/fee2252930b05b709d0c012e809568c4ed32bd89))
|
||||
|
||||
### [1.1.11](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.10...v1.1.11) (2022-03-15)
|
||||
- add Sticky props comment ([46133b3](https://github.com/kailong321200875/vue-element-plus-admin/commit/46133b3ff39d48d11cbcaa1f20a271118f48eb29))
|
||||
- fix bug ([179ca06](https://github.com/kailong321200875/vue-element-plus-admin/commit/179ca064ba8adbb3b063d9798ec1930ccc68e459))
|
||||
- fix remove unnecessary variables ([ca01cbf](https://github.com/kailong321200875/vue-element-plus-admin/commit/ca01cbfd98b63a0d76190fe8d43097fdc9df74e6))
|
||||
- fix style ([17c8fea](https://github.com/kailong321200875/vue-element-plus-admin/commit/17c8fea93811d9d9b708808484f5c907d761fcf1))
|
||||
- remove ContentDetailWrap style ([4ceaa9d](https://github.com/kailong321200875/vue-element-plus-admin/commit/4ceaa9d7816369d0dcaf3e18e4cdbbd6165cef88))
|
||||
|
||||
### [1.2.3](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.2...v1.2.3) (2022-03-31)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix the problem of blank bar when toggle the TagsView component ([b1d9771](https://github.com/kailong321200875/vue-element-plus-admin/commit/b1d9771c750709fe45061d13299a85dbbd6ead25))
|
||||
* fix the problem that no reaction when copy setting config in http page ([61e0e33](https://github.com/kailong321200875/vue-element-plus-admin/commit/61e0e33c64d6a889fe6ed80d27a10cf8b201d21a))
|
||||
- fix refresh with query ([e94020f](https://github.com/kailong321200875/vue-element-plus-admin/commit/e94020ff541a061599486c0003258f1dbf13aba8))
|
||||
|
||||
### [1.1.10](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.9...v1.1.10) (2022-03-13)
|
||||
### [1.2.2](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.1...v1.2.2) (2022-03-30)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- fix avatar height bug ([cd4ab76](https://github.com/kailong321200875/vue-element-plus-admin/commit/cd4ab767018941777174d7837045f5259d1cc403))
|
||||
- fix parmas to params ([2c7211c](https://github.com/kailong321200875/vue-element-plus-admin/commit/2c7211c89d7299ffc0a36bef8999b3c201dbaf4a))
|
||||
|
||||
### [1.2.1](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.0...v1.2.1) (2022-03-29)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- fix invalid paging ([ad184ee](https://github.com/kailong321200875/vue-element-plus-admin/commit/ad184ee9c0619da36f1ca3f26e67f18f88488523))
|
||||
|
||||
### Build System
|
||||
|
||||
* update plugins ([0b525c8](https://github.com/kailong321200875/vue-element-plus-admin/commit/0b525c875075a28288e92243b205b337f85ab550))
|
||||
- update plugins ([0c7276f](https://github.com/kailong321200875/vue-element-plus-admin/commit/0c7276feadaedef83e6a4ad9d457e26d408698a8))
|
||||
|
||||
### [1.1.9](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.8...v1.1.9) (2022-03-07)
|
||||
## [1.2.0](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.14...v1.2.0) (2022-03-27)
|
||||
|
||||
### Features
|
||||
|
||||
### Build System
|
||||
|
||||
* update plugins ([1456fd4](https://github.com/kailong321200875/vue-element-plus-admin/commit/1456fd49ec9abbfe1f25aeadfe5fed54fec07394))
|
||||
|
||||
### [1.1.8](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.7...v1.1.8) (2022-03-07)
|
||||
|
||||
- add hooks demo ([c43f39e](https://github.com/kailong321200875/vue-element-plus-admin/commit/c43f39efef296266c64cc24690717d07fa0bcb85))
|
||||
- add inputPassword demo ([8f8b126](https://github.com/kailong321200875/vue-element-plus-admin/commit/8f8b1260e75df6998ebea617f62d4ab6be81d721))
|
||||
|
||||
### Docs
|
||||
|
||||
* update changelog ([bf09441](https://github.com/kailong321200875/vue-element-plus-admin/commit/bf09441852e59b0d07d4949a33de75958696817f))
|
||||
- update LICENSE ([69d3dcc](https://github.com/kailong321200875/vue-element-plus-admin/commit/69d3dcc7edf69e9b4e3042ddb11faa85ec7d39e2))
|
||||
|
||||
### Styling
|
||||
|
||||
- modify the function name to make it more semantic ([046ae51](https://github.com/kailong321200875/vue-element-plus-admin/commit/046ae512f02df2d3f08134949b9376a061c1eef3))
|
||||
- update Footer component presentation ([d4a9ba3](https://github.com/kailong321200875/vue-element-plus-admin/commit/d4a9ba3aa6758b8aac18b30e1a6b9501baff826c))
|
||||
- update Icon demo ([8597122](https://github.com/kailong321200875/vue-element-plus-admin/commit/85971227cd3055ea280cf493c7c42b250c1515da))
|
||||
|
||||
### Tests
|
||||
|
||||
- test push first commit ([a67bb48](https://github.com/kailong321200875/vue-element-plus-admin/commit/a67bb48f269651a2dcd01b9e33d10f20c42d76ee))
|
||||
|
||||
### Build System
|
||||
|
||||
- update plugins ([9c13d92](https://github.com/kailong321200875/vue-element-plus-admin/commit/9c13d92b36a2a7c95b9edb7821367fc8f0ac6658))
|
||||
- update server port ([d2be8c1](https://github.com/kailong321200875/vue-element-plus-admin/commit/d2be8c1a307a3c5daf363bd7f1d21e574598de5c))
|
||||
|
||||
### [1.1.14](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.13...v1.1.14) (2022-03-22)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- fix the bug that the form search function is invalid of the example-dialog page ([9ec30e7](https://github.com/kailong321200875/vue-element-plus-admin/commit/9ec30e719f89865497dbb1321be1df906f59f14e))
|
||||
|
||||
### [1.1.13](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.12...v1.1.13) (2022-03-17)
|
||||
|
||||
### Build System
|
||||
|
||||
- update plugins ([a2d0313](https://github.com/kailong321200875/vue-element-plus-admin/commit/a2d03137899f9b16fc1d4a09a23576cd74e7950e))
|
||||
|
||||
### [1.1.12](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.11...v1.1.12) (2022-03-15)
|
||||
|
||||
### Build System
|
||||
|
||||
- update plugins ([fee2252](https://github.com/kailong321200875/vue-element-plus-admin/commit/fee2252930b05b709d0c012e809568c4ed32bd89))
|
||||
|
||||
### [1.1.11](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.10...v1.1.11) (2022-03-15)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- fix the problem of blank bar when toggle the TagsView component ([b1d9771](https://github.com/kailong321200875/vue-element-plus-admin/commit/b1d9771c750709fe45061d13299a85dbbd6ead25))
|
||||
- fix the problem that no reaction when copy setting config in http page ([61e0e33](https://github.com/kailong321200875/vue-element-plus-admin/commit/61e0e33c64d6a889fe6ed80d27a10cf8b201d21a))
|
||||
|
||||
### [1.1.10](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.9...v1.1.10) (2022-03-13)
|
||||
|
||||
### Build System
|
||||
|
||||
- update plugins ([0b525c8](https://github.com/kailong321200875/vue-element-plus-admin/commit/0b525c875075a28288e92243b205b337f85ab550))
|
||||
|
||||
### [1.1.9](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.8...v1.1.9) (2022-03-07)
|
||||
|
||||
### Build System
|
||||
|
||||
- update plugins ([1456fd4](https://github.com/kailong321200875/vue-element-plus-admin/commit/1456fd49ec9abbfe1f25aeadfe5fed54fec07394))
|
||||
|
||||
### [1.1.8](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.7...v1.1.8) (2022-03-07)
|
||||
|
||||
### Docs
|
||||
|
||||
- update changelog ([bf09441](https://github.com/kailong321200875/vue-element-plus-admin/commit/bf09441852e59b0d07d4949a33de75958696817f))
|
||||
|
||||
### [1.1.7](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.6...v1.1.7) (2022-03-06)
|
||||
|
||||
|
|
|
|||
|
|
@ -249,6 +249,22 @@ const adminList = [
|
|||
meta: {
|
||||
title: 'router.infotip'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'input-password',
|
||||
component: 'views/Components/InputPassword',
|
||||
name: 'InputPassword',
|
||||
meta: {
|
||||
title: 'router.inputPassword'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'sticky',
|
||||
component: 'views/Components/Sticky',
|
||||
name: 'Sticky',
|
||||
meta: {
|
||||
title: 'router.sticky'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -468,6 +484,8 @@ const testList: string[] = [
|
|||
'/components/qrcode',
|
||||
'/components/highlight',
|
||||
'/components/infotip',
|
||||
'/Components/InputPassword',
|
||||
'/Components/Sticky',
|
||||
'/hooks',
|
||||
'/hooks/useWatermark',
|
||||
'/level',
|
||||
|
|
|
|||
50
package.json
50
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vue-element-plus-admin",
|
||||
"version": "1.1.14",
|
||||
"version": "1.2.4",
|
||||
"description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。",
|
||||
"author": "Archer <502431556@qq.com>",
|
||||
"private": false,
|
||||
|
|
@ -27,22 +27,22 @@
|
|||
"plop": "plop"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/iconify": "^2.1.2",
|
||||
"@vueuse/core": "^8.1.1",
|
||||
"@wangeditor/editor": "^0.15.14",
|
||||
"@iconify/iconify": "^2.2.1",
|
||||
"@vueuse/core": "^8.2.5",
|
||||
"@wangeditor/editor": "^0.15.19",
|
||||
"@wangeditor/editor-for-vue": "^5.1.8-7",
|
||||
"@zxcvbn-ts/core": "^2.0.0",
|
||||
"@zxcvbn-ts/core": "^2.0.1",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.26.1",
|
||||
"echarts": "^5.3.1",
|
||||
"echarts": "^5.3.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "2.1.4",
|
||||
"intro.js": "^5.0.0",
|
||||
"element-plus": "2.1.8",
|
||||
"intro.js": "^5.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.12",
|
||||
"pinia": "^2.0.13",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"qrcode": "^1.5.0",
|
||||
"qs": "^6.10.3",
|
||||
|
|
@ -55,43 +55,43 @@
|
|||
"devDependencies": {
|
||||
"@commitlint/cli": "^16.2.3",
|
||||
"@commitlint/config-conventional": "^16.2.1",
|
||||
"@iconify/json": "^2.1.16",
|
||||
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
|
||||
"@iconify/json": "^2.1.25",
|
||||
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
||||
"@purge-icons/generated": "^0.8.1",
|
||||
"@types/intro.js": "^3.0.2",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/node": "^17.0.21",
|
||||
"@types/node": "^17.0.23",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qrcode": "^1.4.2",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.15.0",
|
||||
"@typescript-eslint/parser": "^5.15.0",
|
||||
"@vitejs/plugin-vue": "^2.2.4",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.8",
|
||||
"@typescript-eslint/eslint-plugin": "^5.18.0",
|
||||
"@typescript-eslint/parser": "^5.18.0",
|
||||
"@vitejs/plugin-vue": "^2.3.1",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.9",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"commitizen": "^4.2.4",
|
||||
"eslint": "^8.11.0",
|
||||
"eslint": "^8.12.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-define-config": "^1.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.5.0",
|
||||
"eslint-plugin-vue": "^8.6.0",
|
||||
"husky": "^7.0.4",
|
||||
"less": "^4.1.2",
|
||||
"lint-staged": "^12.3.6",
|
||||
"lint-staged": "^12.3.7",
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-html": "^1.3.0",
|
||||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.6.0",
|
||||
"prettier": "^2.6.2",
|
||||
"pretty-quick": "^3.1.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"stylelint": "^14.6.0",
|
||||
"stylelint": "^14.6.1",
|
||||
"stylelint-config-html": "^1.0.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^25.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"typescript": "4.6.2",
|
||||
"unplugin-vue-define-options": "^0.4.0",
|
||||
"vite": "2.8.6",
|
||||
"typescript": "4.6.3",
|
||||
"unplugin-vue-define-options": "^0.6.0",
|
||||
"vite": "2.9.1",
|
||||
"vite-plugin-eslint": "^1.3.0",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
"vite-plugin-style-import": "^1.4.1",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-windicss": "^1.8.3",
|
||||
"vue-tsc": "^0.33.2",
|
||||
"vue-tsc": "^0.33.9",
|
||||
"windicss": "^3.5.1",
|
||||
"windicss-analysis": "^0.3.5",
|
||||
"plop": "^3.0.5"
|
||||
|
|
|
|||
1455
pnpm-lock.yaml
1455
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
|||
import ContentDetailWrap from './src/ContentDetailWrap.vue'
|
||||
|
||||
export { ContentDetailWrap }
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import { ElCard, ElButton } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { ref, onMounted, defineEmits } from 'vue'
|
||||
import { Sticky } from '@/components/Sticky'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('content-detail-wrap')
|
||||
|
||||
defineProps({
|
||||
title: propTypes.string.def(''),
|
||||
message: propTypes.string.def('')
|
||||
})
|
||||
const emit = defineEmits(['back'])
|
||||
const offset = ref(85)
|
||||
const contentDetailWrap = ref()
|
||||
onMounted(() => {
|
||||
offset.value = contentDetailWrap.value.getBoundingClientRect().top
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap">
|
||||
<Sticky :offset="offset">
|
||||
<div
|
||||
:class="[
|
||||
`${prefixCls}-header`,
|
||||
'flex border-bottom-1 h-50px items-center text-center bg-white pr-10px '
|
||||
]"
|
||||
>
|
||||
<div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
|
||||
<el-button @click="emit('back')">
|
||||
<Icon icon="ep:arrow-left" class="mr-5px" />
|
||||
{{ t('common.back') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']">
|
||||
<slot name="title">
|
||||
<label class="text-16px font-700">{{ title }}</label>
|
||||
</slot>
|
||||
</div>
|
||||
<div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Sticky>
|
||||
<div style="padding: var(--app-content-padding)">
|
||||
<ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -73,7 +73,7 @@ const dialogStyle = computed(() => {
|
|||
</slot>
|
||||
<Icon
|
||||
v-if="fullscreen"
|
||||
class="mr-15px cursor-pointer is-hover"
|
||||
class="mr-11px cursor-pointer is-hover mt-2px"
|
||||
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
|
||||
color="var(--el-color-info)"
|
||||
@click="toggleFull"
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const getIconName = computed(() =>
|
|||
}
|
||||
|
||||
&__bar {
|
||||
background-color: var(--el-text-color-disabled-base);
|
||||
background-color: var(--el-text-color-disabled);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
|
||||
&::before,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const setCurrentSize = (size: ElememtPlusSzie) => {
|
|||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
|
||||
{{ t(`size.${[item]}`) }}
|
||||
{{ t(`size.${item}`) }}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import Sticky from './src/Sticky.vue'
|
||||
|
||||
export { Sticky }
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<script setup lang="ts">
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { ref, onMounted, onActivated, shallowRef } from 'vue'
|
||||
import { useEventListener, useWindowSize, isClient } from '@vueuse/core'
|
||||
import type { CSSProperties } from 'vue'
|
||||
const props = defineProps({
|
||||
// 距离顶部或者底部的距离(单位px)
|
||||
offset: propTypes.number.def(0),
|
||||
// 设置元素的堆叠顺序
|
||||
zIndex: propTypes.number.def(999),
|
||||
// 设置指定的class
|
||||
className: propTypes.string.def(''),
|
||||
// 定位方式，默认为(top)，表示距离顶部位置，可以设置为top或者bottom
|
||||
position: {
|
||||
type: String,
|
||||
validator: function (value: string) {
|
||||
return ['top', 'bottom'].indexOf(value) !== -1
|
||||
},
|
||||
default: 'top'
|
||||
}
|
||||
})
|
||||
const width = ref('auto' as string)
|
||||
const height = ref('auto' as string)
|
||||
const isSticky = ref(false)
|
||||
const refSticky = shallowRef<HTMLElement>()
|
||||
const scrollContainer = shallowRef<HTMLElement | Window>()
|
||||
const { height: windowHeight } = useWindowSize()
|
||||
onMounted(() => {
|
||||
height.value = refSticky.value?.getBoundingClientRect().height + 'px'
|
||||
|
||||
scrollContainer.value = getScrollContainer(refSticky.value!, true)
|
||||
useEventListener(scrollContainer, 'scroll', handleScroll)
|
||||
useEventListener('resize', handleReize)
|
||||
handleScroll()
|
||||
})
|
||||
onActivated(() => {
|
||||
handleScroll()
|
||||
})
|
||||
|
||||
const camelize = (str: string): string => {
|
||||
return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
||||
}
|
||||
|
||||
const getStyle = (element: HTMLElement, styleName: keyof CSSProperties): string => {
|
||||
if (!isClient || !element || !styleName) return ''
|
||||
|
||||
let key = camelize(styleName)
|
||||
if (key === 'float') key = 'cssFloat'
|
||||
try {
|
||||
const style = element.style[styleName]
|
||||
if (style) return style
|
||||
const computed = document.defaultView?.getComputedStyle(element, '')
|
||||
return computed ? computed[styleName] : ''
|
||||
} catch {
|
||||
return element.style[styleName]
|
||||
}
|
||||
}
|
||||
const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
|
||||
if (!isClient) return false
|
||||
const key = (
|
||||
{
|
||||
undefined: 'overflow',
|
||||
true: 'overflow-y',
|
||||
false: 'overflow-x'
|
||||
} as const
|
||||
)[String(isVertical)]!
|
||||
const overflow = getStyle(el, key)
|
||||
return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
|
||||
}
|
||||
|
||||
const getScrollContainer = (
|
||||
el: HTMLElement,
|
||||
isVertical: boolean
|
||||
): Window | HTMLElement | undefined => {
|
||||
if (!isClient) return
|
||||
let parent = el
|
||||
while (parent) {
|
||||
if ([window, document, document.documentElement].includes(parent)) return window
|
||||
if (isScroll(parent, isVertical)) return parent
|
||||
parent = parent.parentNode as HTMLElement
|
||||
}
|
||||
return parent
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
width.value = refSticky.value!.getBoundingClientRect().width! + 'px'
|
||||
if (props.position === 'top') {
|
||||
const offsetTop = refSticky.value?.getBoundingClientRect().top
|
||||
if (offsetTop !== undefined && offsetTop < props.offset) {
|
||||
sticky()
|
||||
return
|
||||
}
|
||||
reset()
|
||||
} else {
|
||||
const offsetBottom = refSticky.value?.getBoundingClientRect().bottom
|
||||
|
||||
if (offsetBottom !== undefined && offsetBottom > windowHeight.value - props.offset) {
|
||||
sticky()
|
||||
return
|
||||
}
|
||||
reset()
|
||||
}
|
||||
}
|
||||
const handleReize = () => {
|
||||
if (isSticky.value && refSticky.value) {
|
||||
width.value = refSticky.value.getBoundingClientRect().width + 'px'
|
||||
}
|
||||
}
|
||||
const sticky = () => {
|
||||
if (isSticky.value) {
|
||||
return
|
||||
}
|
||||
isSticky.value = true
|
||||
}
|
||||
const reset = () => {
|
||||
if (!isSticky.value) {
|
||||
return
|
||||
}
|
||||
width.value = 'auto'
|
||||
isSticky.value = false
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div :style="{ height: height, zIndex: zIndex }" ref="refSticky">
|
||||
<div
|
||||
:class="className"
|
||||
:style="{
|
||||
top: position === 'top' ? offset + 'px' : '',
|
||||
bottom: position !== 'top' ? offset + 'px' : '',
|
||||
zIndex: zIndex,
|
||||
position: isSticky ? 'fixed' : 'static',
|
||||
width: width,
|
||||
height: height
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<div>sticky</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -77,10 +77,11 @@ const closeOthersTags = () => {
|
|||
const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
|
||||
if (!view) return
|
||||
tagsViewStore.delCachedView()
|
||||
const { fullPath } = view
|
||||
const { path, query } = view
|
||||
await nextTick()
|
||||
replace({
|
||||
path: '/redirect' + fullPath
|
||||
path: '/redirect' + path,
|
||||
query: query
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const toDocument = () => {
|
|||
<img
|
||||
src="@/assets/imgs/avatar.jpg"
|
||||
alt=""
|
||||
class="w-[calc(var(--tags-view-height)-10px)] rounded-[50%]"
|
||||
class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
|
||||
/>
|
||||
<span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Table, TableExpose } from '@/components/Table'
|
|||
import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
|
||||
import { AxiosPromise } from 'axios'
|
||||
import { get, assign } from 'lodash-es'
|
||||
import { get } from 'lodash-es'
|
||||
import type { TableProps } from '@/components/Table/src/types'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ interface TableObject<K, L> {
|
|||
currentPage: number
|
||||
total: number
|
||||
tableList: K[]
|
||||
parmasObj: L
|
||||
paramsObj: L
|
||||
loading: boolean
|
||||
currentRow: Nullable<K>
|
||||
}
|
||||
|
|
@ -42,23 +42,21 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
|
|||
// 表格数据
|
||||
tableList: [],
|
||||
// AxiosConfig 配置
|
||||
parmasObj: {} as L,
|
||||
paramsObj: {} as L,
|
||||
// 加载中
|
||||
loading: true,
|
||||
// 当前行的数据
|
||||
currentRow: null
|
||||
})
|
||||
|
||||
const parmasObj = computed(() => {
|
||||
return assign(
|
||||
{
|
||||
const paramsObj = computed(() => {
|
||||
return {
|
||||
params: {
|
||||
...tableObject.paramsObj.params,
|
||||
pageSize: tableObject.pageSize,
|
||||
pageIndex: tableObject.currentPage
|
||||
}
|
||||
},
|
||||
tableObject.parmasObj
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
|
|
@ -118,14 +116,14 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
|
|||
setProps: (props: Recordable) => void
|
||||
getList: () => Promise<void>
|
||||
setColumn: (columnProps: TableSetPropsType[]) => void
|
||||
setSearchParmas: (data: Recordable) => void
|
||||
setSearchParams: (data: Recordable) => void
|
||||
getSelections: () => Promise<K[]>
|
||||
delList: (ids: string[] | number[], multiple: boolean, message?: boolean) => Promise<void>
|
||||
} = {
|
||||
getList: async () => {
|
||||
tableObject.loading = true
|
||||
const res = await config
|
||||
?.getListApi(unref(parmasObj) as L)
|
||||
?.getListApi(unref(paramsObj) as unknown as L)
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
tableObject.loading = false
|
||||
|
|
@ -148,9 +146,9 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
|
|||
return (table?.selections || []) as K[]
|
||||
},
|
||||
// 与Search组件结合
|
||||
setSearchParmas: (data: Recordable) => {
|
||||
setSearchParams: (data: Recordable) => {
|
||||
tableObject.currentPage = 1
|
||||
tableObject.parmasObj = Object.assign(tableObject.parmasObj, {
|
||||
tableObject.paramsObj = Object.assign(tableObject.paramsObj, {
|
||||
params: {
|
||||
pageSize: tableObject.pageSize,
|
||||
pageIndex: tableObject.currentPage,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ export default {
|
|||
loginOut: 'Login out',
|
||||
document: 'Document',
|
||||
reminder: 'Reminder',
|
||||
loginOutMessage: 'Exit the system？',
|
||||
loginOutMessage: 'Exit the system?',
|
||||
back: 'Back',
|
||||
ok: 'OK',
|
||||
cancel: 'Cancel',
|
||||
reload: 'Reload current',
|
||||
|
|
@ -131,7 +132,9 @@ export default {
|
|||
authorization: 'Authorization',
|
||||
user: 'User management',
|
||||
role: 'Role management',
|
||||
document: 'Document'
|
||||
document: 'Document',
|
||||
inputPassword: 'InputPassword',
|
||||
sticky: 'Sticky'
|
||||
},
|
||||
analysis: {
|
||||
newUser: 'New user',
|
||||
|
|
@ -333,6 +336,9 @@ export default {
|
|||
center: 'center',
|
||||
right: 'right'
|
||||
},
|
||||
stickyDemo: {
|
||||
sticky: 'Sticky'
|
||||
},
|
||||
tableDemo: {
|
||||
table: 'Table',
|
||||
tableDes: 'Secondary packaging of Table components based on ElementPlus',
|
||||
|
|
@ -411,5 +417,9 @@ export default {
|
|||
remark: 'Remark',
|
||||
remarkMessage1: 'Back end control routing permission',
|
||||
remarkMessage2: 'Front end control routing permission'
|
||||
},
|
||||
inputPasswordDemo: {
|
||||
title: 'InputPassword',
|
||||
inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export default {
|
|||
document: '项目文档',
|
||||
reminder: '温馨提示',
|
||||
loginOutMessage: '是否退出本系统？',
|
||||
back: '返回',
|
||||
ok: '确定',
|
||||
cancel: '取消',
|
||||
reload: '重新加载',
|
||||
|
|
@ -131,7 +132,9 @@ export default {
|
|||
authorization: '权限管理',
|
||||
user: '用户管理',
|
||||
role: '角色管理',
|
||||
document: '文档'
|
||||
document: '文档',
|
||||
inputPassword: '密码输入框',
|
||||
sticky: '黏性'
|
||||
},
|
||||
analysis: {
|
||||
newUser: '新增用户',
|
||||
|
|
@ -330,6 +333,9 @@ export default {
|
|||
center: '中',
|
||||
right: '右'
|
||||
},
|
||||
stickyDemo: {
|
||||
sticky: '黏性'
|
||||
},
|
||||
tableDemo: {
|
||||
table: '表格',
|
||||
tableDes: '基于 ElementPlus 的 Table 组件二次封装',
|
||||
|
|
@ -374,7 +380,7 @@ export default {
|
|||
},
|
||||
descriptionsDemo: {
|
||||
descriptions: '描述',
|
||||
descriptionsDes: '基于 ElementPlus 的 descriptions 组件二次封装',
|
||||
descriptionsDes: '基于 ElementPlus 的 Descriptions 组件二次封装',
|
||||
username: '用户名',
|
||||
nickName: '昵称',
|
||||
phone: '联系电话',
|
||||
|
|
@ -407,5 +413,9 @@ export default {
|
|||
remark: '备注',
|
||||
remarkMessage1: '后端控制路由权限',
|
||||
remarkMessage2: '前端控制路由权限'
|
||||
},
|
||||
inputPasswordDemo: {
|
||||
title: '密码输入框',
|
||||
inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -300,6 +300,22 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
|||
meta: {
|
||||
title: t('router.infotip')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'input-password',
|
||||
component: () => import('@/views/Components/InputPassword.vue'),
|
||||
name: 'InputPassword',
|
||||
meta: {
|
||||
title: t('router.inputPassword')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'sticky',
|
||||
component: () => import('@/views/Components/Sticky.vue'),
|
||||
name: 'Sticky',
|
||||
meta: {
|
||||
title: t('router.sticky')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@ const keyClick = (key: string) => {
|
|||
window.open('https://iconify.design/')
|
||||
}
|
||||
}
|
||||
|
||||
const peoples = useIcon({ icon: 'svg-icon:peoples' })
|
||||
const money = useIcon({ icon: 'svg-icon:money' })
|
||||
const aim = useIcon({ icon: 'ep:aim' })
|
||||
const alarmClock = useIcon({ icon: 'ep:alarm-clock' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -48,10 +53,10 @@ const keyClick = (key: string) => {
|
|||
</ContentWrap>
|
||||
<ContentWrap title="useIcon">
|
||||
<div class="flex justify-between">
|
||||
<ElButton :icon="useIcon({ icon: 'svg-icon:peoples' })">Button</ElButton>
|
||||
<ElButton :icon="useIcon({ icon: 'svg-icon:money' })">Button</ElButton>
|
||||
<ElButton :icon="useIcon({ icon: 'ep:aim' })">Button</ElButton>
|
||||
<ElButton :icon="useIcon({ icon: 'ep:alarm-clock' })">Button</ElButton>
|
||||
<ElButton :icon="peoples">Button</ElButton>
|
||||
<ElButton :icon="money">Button</ElButton>
|
||||
<ElButton :icon="aim">Button</ElButton>
|
||||
<ElButton :icon="alarmClock">Button</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { InputPassword } from '@/components/InputPassword'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const password = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap
|
||||
:title="t('inputPasswordDemo.title')"
|
||||
:message="t('inputPasswordDemo.inputPasswordDes')"
|
||||
>
|
||||
<InputPassword v-model="password" class="mb-20px" />
|
||||
<InputPassword v-model="password" strength />
|
||||
<InputPassword v-model="password" strength disabled class="mt-20px" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Sticky } from '@/components/Sticky'
|
||||
import { ElAffix } from 'element-plus'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('stickyDemo.sticky')">
|
||||
<Sticky :offset="90">
|
||||
<div style="padding: 10px; background-color: lightblue"> Sticky 距离顶部90px </div>
|
||||
</Sticky>
|
||||
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<el-affix :offset="150">
|
||||
<div style="padding: 10px; background-color: lightblue">Affix 距离顶部150px </div>
|
||||
</el-affix>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<el-affix :offset="150" position="bottom">
|
||||
<div style="padding: 10px; background-color: lightblue">Affix 距离底部150px </div>
|
||||
</el-affix>
|
||||
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<Sticky :offset="90" position="bottom">
|
||||
<div style="padding: 10px; background-color: lightblue"> Sticky 距离底部90px </div>
|
||||
</Sticky>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
|
@ -27,7 +27,7 @@ const { register, tableObject, methods } = useTable<
|
|||
}
|
||||
})
|
||||
|
||||
const { getList, setSearchParmas } = methods
|
||||
const { getList, setSearchParams } = methods
|
||||
|
||||
getList()
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ const save = async () => {
|
|||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
|
||||
<Search :schema="searchData" @search="setSearchParams" @reset="setSearchParams" />
|
||||
|
||||
<div class="mb-10px">
|
||||
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import Write from './components/Write.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
|
||||
import { ref, unref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
|
@ -42,14 +42,13 @@ const save = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.add')">
|
||||
<ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')">
|
||||
<Write ref="writeRef" />
|
||||
|
||||
<div class="text-center">
|
||||
<template #right>
|
||||
<ElButton type="primary" :loading="loading" @click="save">
|
||||
{{ t('exampleDemo.save') }}
|
||||
</ElButton>
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
</ContentDetailWrap>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import Detail from './components/Detail.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
|
||||
import { ref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getTableDetApi } from '@/api/table'
|
||||
|
|
@ -31,11 +30,7 @@ getTableDet()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.detail')">
|
||||
<ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
|
||||
<Detail :current-row="currentRow" />
|
||||
|
||||
<div class="text-center">
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</ContentDetailWrap>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import Write from './components/Write.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
|
||||
import { ref, unref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
|
@ -58,14 +58,13 @@ const save = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.edit')">
|
||||
<ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
|
||||
<Write ref="writeRef" :current-row="currentRow" />
|
||||
|
||||
<div class="text-center">
|
||||
<template #right>
|
||||
<ElButton type="primary" :loading="loading" @click="save">
|
||||
{{ t('exampleDemo.save') }}
|
||||
</ElButton>
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
</ContentDetailWrap>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const { register, tableObject, methods } = useTable<
|
|||
}
|
||||
})
|
||||
|
||||
const { getList, setSearchParmas } = methods
|
||||
const { getList, setSearchParams } = methods
|
||||
|
||||
getList()
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ const action = (row: TableData, type: string) => {
|
|||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
|
||||
<Search :schema="searchData" @search="setSearchParams" @reset="setSearchParams" />
|
||||
|
||||
<div class="mb-10px">
|
||||
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||
|
|
|
|||
Loading…
Reference in New Issue