mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 19:42:08 +08:00
feat: 🎸 新增hooks弹窗解决方案
This commit is contained in:
huangwentao
parent
66ccaa065a
commit
414aebae3f
149
pnpm-lock.yaml
generated
149
pnpm-lock.yaml
generated
@ -168,7 +168,7 @@ devDependencies:
|
||||
version: 0.24.1(vue@3.2.47)
|
||||
vite:
|
||||
specifier: ^4.3.5
|
||||
version: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
version: 4.3.5(terser@5.17.1)
|
||||
vite-plugin-compression:
|
||||
specifier: ^0.5.1
|
||||
version: 0.5.1(vite@4.3.5)
|
||||
@ -180,7 +180,7 @@ devDependencies:
|
||||
version: 0.6.1(vite@4.3.5)
|
||||
vite-plugin-mock:
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0(esbuild@0.17.12)(mockjs@1.1.0)(vite@4.3.5)
|
||||
version: 3.0.0(mockjs@1.1.0)(vite@4.3.5)
|
||||
vite-plugin-pages:
|
||||
specifier: ^0.29.0
|
||||
version: 0.29.0(vite@4.3.5)
|
||||
@ -193,9 +193,9 @@ devDependencies:
|
||||
vite-plugin-svg-icons:
|
||||
specifier: ^2.0.1
|
||||
version: 2.0.1(vite@4.3.5)
|
||||
vite-plugin-vue-setup-extend:
|
||||
specifier: ^0.4.0
|
||||
version: 0.4.0(vite@4.3.5)
|
||||
vite-plugin-vue-setup-extend-plus:
|
||||
specifier: ^0.1.0
|
||||
version: 0.1.0
|
||||
vitest:
|
||||
specifier: ^0.31.0
|
||||
version: 0.31.0(jsdom@22.0.0)(terser@5.17.1)
|
||||
@ -610,14 +610,6 @@ packages:
|
||||
js-tokens: 4.0.0
|
||||
dev: true
|
||||
|
||||
/@babel/parser@7.19.4:
|
||||
resolution: {integrity: sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@babel/types': 7.19.4
|
||||
dev: true
|
||||
|
||||
/@babel/parser@7.20.15:
|
||||
resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
@ -1537,15 +1529,6 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@babel/types@7.19.4:
|
||||
resolution: {integrity: sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/helper-string-parser': 7.19.4
|
||||
'@babel/helper-validator-identifier': 7.19.1
|
||||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@babel/types@7.20.5:
|
||||
resolution: {integrity: sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
@ -2328,7 +2311,7 @@ packages:
|
||||
regenerator-runtime: 0.13.11
|
||||
systemjs: 6.14.1
|
||||
terser: 5.17.1
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
@ -2343,7 +2326,7 @@ packages:
|
||||
'@babel/core': 7.20.12
|
||||
'@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.20.12)
|
||||
'@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.20.12)
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
vue: 3.2.47
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -2356,7 +2339,7 @@ packages:
|
||||
vite: ^4.0.0
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
vue: 3.2.47
|
||||
dev: true
|
||||
|
||||
@ -2465,15 +2448,6 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-core@3.2.36:
|
||||
resolution: {integrity: sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.19.4
|
||||
'@vue/shared': 3.2.36
|
||||
estree-walker: 2.0.2
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-core@3.2.47:
|
||||
resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
|
||||
dependencies:
|
||||
@ -2482,34 +2456,12 @@ packages:
|
||||
estree-walker: 2.0.2
|
||||
source-map: 0.6.1
|
||||
|
||||
/@vue/compiler-dom@3.2.36:
|
||||
resolution: {integrity: sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.2.36
|
||||
'@vue/shared': 3.2.36
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-dom@3.2.47:
|
||||
resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.2.47
|
||||
'@vue/shared': 3.2.47
|
||||
|
||||
/@vue/compiler-sfc@3.2.36:
|
||||
resolution: {integrity: sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.19.4
|
||||
'@vue/compiler-core': 3.2.36
|
||||
'@vue/compiler-dom': 3.2.36
|
||||
'@vue/compiler-ssr': 3.2.36
|
||||
'@vue/reactivity-transform': 3.2.36
|
||||
'@vue/shared': 3.2.36
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.25.9
|
||||
postcss: 8.4.23
|
||||
source-map: 0.6.1
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-sfc@3.2.47:
|
||||
resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
|
||||
dependencies:
|
||||
@ -2524,13 +2476,6 @@ packages:
|
||||
postcss: 8.4.23
|
||||
source-map: 0.6.1
|
||||
|
||||
/@vue/compiler-ssr@3.2.36:
|
||||
resolution: {integrity: sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.2.36
|
||||
'@vue/shared': 3.2.36
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-ssr@3.2.47:
|
||||
resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
|
||||
dependencies:
|
||||
@ -2582,16 +2527,6 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity-transform@3.2.36:
|
||||
resolution: {integrity: sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.19.4
|
||||
'@vue/compiler-core': 3.2.36
|
||||
'@vue/shared': 3.2.36
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.25.9
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity-transform@3.2.47:
|
||||
resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
|
||||
dependencies:
|
||||
@ -2628,10 +2563,6 @@ packages:
|
||||
'@vue/shared': 3.2.47
|
||||
vue: 3.2.47
|
||||
|
||||
/@vue/shared@3.2.36:
|
||||
resolution: {integrity: sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ==}
|
||||
dev: true
|
||||
|
||||
/@vue/shared@3.2.47:
|
||||
resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
|
||||
|
||||
@ -3176,13 +3107,12 @@ packages:
|
||||
ieee754: 1.2.1
|
||||
dev: true
|
||||
|
||||
/bundle-require@4.0.1(esbuild@0.17.12):
|
||||
/bundle-require@4.0.1:
|
||||
resolution: {integrity: sha512-9NQkRHlNdNpDBGmLpngF3EFDcwodhMUuLz9PaWYciVcQF9SE4LFjM2DB/xV1Li5JiuDMv7ZUWuC3rGbqR0MAXQ==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
peerDependencies:
|
||||
esbuild: '>=0.17'
|
||||
dependencies:
|
||||
esbuild: 0.17.12
|
||||
load-tsconfig: 0.2.5
|
||||
dev: true
|
||||
|
||||
@ -9069,7 +8999,7 @@ packages:
|
||||
chalk: 4.1.2
|
||||
debug: 4.3.4
|
||||
fs-extra: 10.1.0
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
@ -9106,12 +9036,12 @@ packages:
|
||||
imagemin-webp: 6.0.0
|
||||
jpegtran-bin: 6.0.1
|
||||
pathe: 0.2.0
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-plugin-mock@3.0.0(esbuild@0.17.12)(mockjs@1.1.0)(vite@4.3.5):
|
||||
/vite-plugin-mock@3.0.0(mockjs@1.1.0)(vite@4.3.5):
|
||||
resolution: {integrity: sha512-Ibwlga2CSgkoFHFtPW3T/l0fwsGVz9Ss5i7HauBQDyDFfMKgbQXh9wKDLksLZHyai9rkDanxJtIcxbD0bUHCfw==}
|
||||
engines: {node: '>=16.0.0'}
|
||||
peerDependencies:
|
||||
@ -9119,7 +9049,7 @@ packages:
|
||||
vite: '>=4.0.0'
|
||||
dependencies:
|
||||
'@types/mockjs': 1.0.7
|
||||
bundle-require: 4.0.1(esbuild@0.17.12)
|
||||
bundle-require: 4.0.1
|
||||
chokidar: 3.5.3
|
||||
connect: 3.7.0
|
||||
debug: 4.3.4
|
||||
@ -9127,7 +9057,7 @@ packages:
|
||||
mockjs: 1.1.0
|
||||
path-to-regexp: 6.2.1
|
||||
picocolors: 1.0.0
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
transitivePeerDependencies:
|
||||
- esbuild
|
||||
- supports-color
|
||||
@ -9150,7 +9080,7 @@ packages:
|
||||
json5: 2.2.3
|
||||
local-pkg: 0.4.3
|
||||
picocolors: 1.0.0
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
yaml: 2.2.1
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -9165,7 +9095,7 @@ packages:
|
||||
picocolors: 1.0.0
|
||||
progress: 2.0.3
|
||||
rd: 2.0.1
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
dev: true
|
||||
|
||||
/vite-plugin-restart@0.3.1(vite@4.3.5):
|
||||
@ -9174,7 +9104,7 @@ packages:
|
||||
vite: ^2.9.0 || ^3.0.0 || ^4.0.0
|
||||
dependencies:
|
||||
micromatch: 4.0.5
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
dev: true
|
||||
|
||||
/vite-plugin-svg-icons@2.0.1(vite@4.3.5):
|
||||
@ -9190,19 +9120,13 @@ packages:
|
||||
pathe: 0.2.0
|
||||
svg-baker: 1.7.0
|
||||
svgo: 2.8.0
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
vite: 4.3.5(terser@5.17.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-plugin-vue-setup-extend@0.4.0(vite@4.3.5):
|
||||
resolution: {integrity: sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==}
|
||||
peerDependencies:
|
||||
vite: '>=2.0.0'
|
||||
dependencies:
|
||||
'@vue/compiler-sfc': 3.2.36
|
||||
magic-string: 0.25.9
|
||||
vite: 4.3.5(@types/node@17.0.40)(terser@5.17.1)
|
||||
/vite-plugin-vue-setup-extend-plus@0.1.0:
|
||||
resolution: {integrity: sha512-pa27KIsHIBvBMv4xz9uB3UCfAuP2tr7PLlFhCS9vw+aXd326LEHsvhqd3hCQDOR5MjlQVyQH6vwuGr3u+KRiiw==}
|
||||
dev: true
|
||||
|
||||
/vite@4.3.5(@types/node@17.0.40)(terser@5.17.1):
|
||||
@ -9239,6 +9163,39 @@ packages:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
/vite@4.3.5(terser@5.17.1):
|
||||
resolution: {integrity: sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
'@types/node': '>= 14'
|
||||
less: '*'
|
||||
sass: '*'
|
||||
stylus: '*'
|
||||
sugarss: '*'
|
||||
terser: ^5.4.0
|
||||
peerDependenciesMeta:
|
||||
'@types/node':
|
||||
optional: true
|
||||
less:
|
||||
optional: true
|
||||
sass:
|
||||
optional: true
|
||||
stylus:
|
||||
optional: true
|
||||
sugarss:
|
||||
optional: true
|
||||
terser:
|
||||
optional: true
|
||||
dependencies:
|
||||
esbuild: 0.17.12
|
||||
postcss: 8.4.23
|
||||
rollup: 3.21.5
|
||||
terser: 5.17.1
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
/vitest@0.31.0(jsdom@22.0.0)(terser@5.17.1):
|
||||
resolution: {integrity: sha512-JwWJS9p3GU9GxkG7eBSmr4Q4x4bvVBSswaCFf1PBNHiPx00obfhHRJfgHcnI0ffn+NMlIh9QGvG75FlaIBdKGA==}
|
||||
engines: {node: '>=v14.18.0'}
|
||||
|
||||
BIN
src/assets/BaseModal/btn-close.png
Normal file
BIN
src/assets/BaseModal/btn-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/BaseModal/modal-bg-large.png
Normal file
BIN
src/assets/BaseModal/modal-bg-large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/BaseModal/modal-bg-normal.png
Normal file
BIN
src/assets/BaseModal/modal-bg-normal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@ -8,4 +8,5 @@ h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
6
src/components/Modal/index.ts
Normal file
6
src/components/Modal/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: Vinton
|
||||
* @Date: 2023-05-10 11:47:42
|
||||
* @Description: file content
|
||||
*/
|
||||
export { openFactoryModal } from './src/hooks/useFactoryModal';
|
||||
54
src/components/Modal/src/BasicModal.vue
Normal file
54
src/components/Modal/src/BasicModal.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
* @Author: Vinton
|
||||
* @Date: 2023-05-10 11:46:33
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<Popup
|
||||
:show="props.show"
|
||||
@close="$emit('update:show', false)"
|
||||
teleport="body"
|
||||
:style="`overflow-y: auto;`"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
>
|
||||
<div :class="['modal-content', size]">
|
||||
<div class="content">
|
||||
<slot>内容</slot>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn-confirm" @click="$emit('confirm')">{{ $t('btn.confirm') }}</div>
|
||||
<div class="btn-cancel" @click="$emit('update:show', false)">{{ $t('btn.cancel') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'BasicModal',
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import { Popup } from 'vant';
|
||||
import 'vant/es/popup/style/index';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
show: boolean;
|
||||
closeOnClickOverlay?: boolean;
|
||||
size?: 'normal' | 'large';
|
||||
}>(),
|
||||
{
|
||||
show: false,
|
||||
closeOnClickOverlay: false,
|
||||
size: 'large',
|
||||
},
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(event: 'confirm'): void;
|
||||
(event: 'update:show', data: boolean): void;
|
||||
}>();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
61
src/components/Modal/src/hooks/useFactoryModal.tsx
Normal file
61
src/components/Modal/src/hooks/useFactoryModal.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* @Author: Vinton
|
||||
* @Date: 2023-04-25 10:47:58
|
||||
* @Description: file content
|
||||
*/
|
||||
import { i18n } from '/@/i18n';
|
||||
import { Component } from 'vue';
|
||||
import BaseModal from '../BasicModal.vue';
|
||||
import { createApp, ref, defineComponent } from 'vue';
|
||||
|
||||
export const openFactoryModal = ({ renderComp, size }: { size?: 'normal' | 'large'; renderComp: Function }) => {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let u;
|
||||
const Wrapper = defineComponent({
|
||||
setup() {
|
||||
const show = ref(true);
|
||||
const onChange = (s) => {
|
||||
show.value = s;
|
||||
if (!s) {
|
||||
// unmount app and remove root dom
|
||||
if (u) u();
|
||||
reject('user closed modal manually');
|
||||
}
|
||||
};
|
||||
const onConfirm = () => {
|
||||
resolve('confirm');
|
||||
onChange(false);
|
||||
};
|
||||
return { show, onChange, onConfirm, size };
|
||||
},
|
||||
render(proxy) {
|
||||
return (
|
||||
<BaseModal size={proxy.size} show={proxy.show} {...{ 'onUpdate:show': proxy.onChange }} onConfirm={proxy.onConfirm}>
|
||||
{renderComp()}
|
||||
</BaseModal>
|
||||
);
|
||||
},
|
||||
});
|
||||
const { unmount } = mountPropModal(Wrapper);
|
||||
u = unmount;
|
||||
});
|
||||
};
|
||||
|
||||
const mountPropModal = (component: Component) => {
|
||||
const app = createApp(component);
|
||||
app.use(i18n);
|
||||
const root = document.createElement('div');
|
||||
|
||||
document.body.appendChild(root);
|
||||
|
||||
const instance = app.mount(root);
|
||||
|
||||
return {
|
||||
instance,
|
||||
unmount() {
|
||||
app.unmount();
|
||||
document.body.removeChild(root);
|
||||
},
|
||||
};
|
||||
};
|
||||
41
src/components/Modal/src/index.scss
Normal file
41
src/components/Modal/src/index.scss
Normal file
@ -0,0 +1,41 @@
|
||||
.modal-content {
|
||||
width: 650px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
@include center();
|
||||
&.normal {
|
||||
height: 604px;
|
||||
background-image: url(@/assets/BaseModal/modal-bg-normal.png);
|
||||
}
|
||||
&.large {
|
||||
height: 754px;
|
||||
background-image: url(@/assets/BaseModal/modal-bg-large.png);
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
@include center();
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
&-cancel {
|
||||
@extend .btn-common;
|
||||
background-color: coral;
|
||||
}
|
||||
&-confirm {
|
||||
@extend .btn-common;
|
||||
background-color: skyblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-common {
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
@include center();
|
||||
}
|
||||
@ -20,4 +20,8 @@ export const lang: langType = {
|
||||
list: {
|
||||
details: 'list details',
|
||||
},
|
||||
btn: {
|
||||
confirm: 'confirm',
|
||||
cancel: 'cancel',
|
||||
},
|
||||
};
|
||||
|
||||
@ -18,4 +18,8 @@ export type langType = {
|
||||
list: {
|
||||
details: string;
|
||||
};
|
||||
btn: {
|
||||
confirm: string;
|
||||
cancel: string;
|
||||
};
|
||||
};
|
||||
|
||||
@ -20,4 +20,8 @@ export const lang: langType = {
|
||||
list: {
|
||||
details: '列表详情',
|
||||
},
|
||||
btn: {
|
||||
confirm: '确认',
|
||||
cancel: '取消',
|
||||
},
|
||||
};
|
||||
|
||||
6
src/styles/vant.scss
Normal file
6
src/styles/vant.scss
Normal file
@ -0,0 +1,6 @@
|
||||
:root {
|
||||
.van-popup {
|
||||
background: transparent;
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
@ -32,18 +32,40 @@
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div :class="['btn-add', i18n.global.locale]"></div>
|
||||
<span class="title">Modal</span>
|
||||
<div class="demo">
|
||||
<var-button type="primary" @click="openLargeModal">Open large Modal</var-button>
|
||||
<var-button type="info" @click="openSmallModal">Open Normal Modal</var-button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup name="DemoPage">
|
||||
import { i18n } from '/@/i18n';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
// const { locale } = useI18n();
|
||||
<script setup name="DemoPage" lang="tsx">
|
||||
import { openFactoryModal } from '/@/components/Modal/index';
|
||||
const openLargeModal = () => {
|
||||
openFactoryModal({
|
||||
renderComp: function () {
|
||||
return <div>自定义内容</div>;
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log('确认成功', res);
|
||||
});
|
||||
};
|
||||
const openSmallModal = () => {
|
||||
openFactoryModal({
|
||||
size: 'normal',
|
||||
renderComp: function () {
|
||||
return <div>自定义内容</div>;
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log('确认成功', res);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/mixin.scss';
|
||||
|
||||
section {
|
||||
.title {
|
||||
font-size: 40px;
|
||||
@ -51,11 +73,13 @@
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:nth-child(n) {
|
||||
.title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.title {
|
||||
margin-top: 0;
|
||||
@ -66,6 +90,7 @@
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.demo {
|
||||
> :nth-child(n) {
|
||||
margin-right: 20px;
|
||||
|
||||
42
types/components.d.ts
vendored
42
types/components.d.ts
vendored
@ -5,28 +5,30 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {};
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
NutAvatar: typeof import('@nutui/nutui')['Avatar'];
|
||||
NutButton: typeof import('@nutui/nutui')['Button'];
|
||||
NutCard: typeof import('@nutui/nutui')['Card'];
|
||||
NutCell: typeof import('@nutui/nutui')['Cell'];
|
||||
NutCellGroup: typeof import('@nutui/nutui')['CellGroup'];
|
||||
NutForm: typeof import('@nutui/nutui')['Form'];
|
||||
NutFormItem: typeof import('@nutui/nutui')['FormItem'];
|
||||
NutGrid: typeof import('@nutui/nutui')['Grid'];
|
||||
NutGridItem: typeof import('@nutui/nutui')['GridItem'];
|
||||
NutSwiper: typeof import('@nutui/nutui')['Swiper'];
|
||||
NutSwiperItem: typeof import('@nutui/nutui')['SwiperItem'];
|
||||
NutTabbar: typeof import('@nutui/nutui')['Tabbar'];
|
||||
NutTabbarItem: typeof import('@nutui/nutui')['TabbarItem'];
|
||||
RouterLink: typeof import('vue-router')['RouterLink'];
|
||||
RouterView: typeof import('vue-router')['RouterView'];
|
||||
VanButton: typeof import('vant/es')['Button'];
|
||||
VanNavBar: typeof import('vant/es')['NavBar'];
|
||||
VarButton: typeof import('@varlet/ui')['_ButtonComponent'];
|
||||
VarSpace: typeof import('@varlet/ui')['_SpaceComponent'];
|
||||
BasicModal: typeof import('./../src/components/Modal/src/BasicModal.vue')['default']
|
||||
Modal: typeof import('./../src/components/Modal/index.vue')['default']
|
||||
NutAvatar: typeof import('@nutui/nutui')['Avatar']
|
||||
NutButton: typeof import('@nutui/nutui')['Button']
|
||||
NutCard: typeof import('@nutui/nutui')['Card']
|
||||
NutCell: typeof import('@nutui/nutui')['Cell']
|
||||
NutCellGroup: typeof import('@nutui/nutui')['CellGroup']
|
||||
NutForm: typeof import('@nutui/nutui')['Form']
|
||||
NutFormItem: typeof import('@nutui/nutui')['FormItem']
|
||||
NutGrid: typeof import('@nutui/nutui')['Grid']
|
||||
NutGridItem: typeof import('@nutui/nutui')['GridItem']
|
||||
NutSwiper: typeof import('@nutui/nutui')['Swiper']
|
||||
NutSwiperItem: typeof import('@nutui/nutui')['SwiperItem']
|
||||
NutTabbar: typeof import('@nutui/nutui')['Tabbar']
|
||||
NutTabbarItem: typeof import('@nutui/nutui')['TabbarItem']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
VanButton: typeof import('vant/es')['Button']
|
||||
VanNavBar: typeof import('vant/es')['NavBar']
|
||||
VarButton: typeof import('@varlet/ui')['_ButtonComponent']
|
||||
VarSpace: typeof import('@varlet/ui')['_SpaceComponent']
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ export default function ({ command, mode }: ConfigEnv): UserConfig {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// 配置 nutui 全局 scss 变量
|
||||
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";@import '/@/styles/mixin.scss';`,
|
||||
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";@import '/@/styles/mixin.scss'; @import '/@/styles/vant.scss';`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user