数据记录第一版
parent
7f6e6cd51a
commit
8963fe274f
|
|
@ -15,7 +15,7 @@
|
|||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.4.0",
|
||||
"dompurify": "^3.1.6",
|
||||
"element-plus": "^2.3.7",
|
||||
"element-plus": "2.8.1",
|
||||
"pinia": "^2.1.3",
|
||||
"qrcode": "^1.5.4",
|
||||
"swiper": "^11.1.5",
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"fast-glob": "3.2.11",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.0.0",
|
||||
"sass": "^1.63.6",
|
||||
"sass": "1.63.6",
|
||||
"typescript": "~5.0.4",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-icons": "^0.16.3",
|
||||
|
|
@ -763,280 +763,6 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.4.1.tgz",
|
||||
"integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"detect-libc": "^1.0.3",
|
||||
"is-glob": "^4.0.3",
|
||||
"micromatch": "^4.0.5",
|
||||
"node-addon-api": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@parcel/watcher-android-arm64": "2.4.1",
|
||||
"@parcel/watcher-darwin-arm64": "2.4.1",
|
||||
"@parcel/watcher-darwin-x64": "2.4.1",
|
||||
"@parcel/watcher-freebsd-x64": "2.4.1",
|
||||
"@parcel/watcher-linux-arm-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-arm64-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-arm64-musl": "2.4.1",
|
||||
"@parcel/watcher-linux-x64-glibc": "2.4.1",
|
||||
"@parcel/watcher-linux-x64-musl": "2.4.1",
|
||||
"@parcel/watcher-win32-arm64": "2.4.1",
|
||||
"@parcel/watcher-win32-ia32": "2.4.1",
|
||||
"@parcel/watcher-win32-x64": "2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-android-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-darwin-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-darwin-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-freebsd-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm64-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-arm64-musl": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
|
||||
"integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-x64-glibc": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
|
||||
"integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-linux-x64-musl": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
|
||||
"integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-arm64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
|
||||
"integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-ia32": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
|
||||
"integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/watcher-win32-x64": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
|
||||
"integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.28",
|
||||
"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.28.tgz",
|
||||
|
|
@ -1449,30 +1175,6 @@
|
|||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/cli/node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/cli/node_modules/fast-glob": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
|
||||
|
|
@ -1501,18 +1203,6 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/cli/node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/config": {
|
||||
"version": "0.53.6",
|
||||
"resolved": "https://registry.npmmirror.com/@unocss/config/-/config-0.53.6.tgz",
|
||||
|
|
@ -1812,30 +1502,6 @@
|
|||
"vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/vite/node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/vite/node_modules/fast-glob": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
|
||||
|
|
@ -1864,18 +1530,6 @@
|
|||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/@unocss/vite/node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@uppy/companion-client": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/@uppy/companion-client/-/companion-client-2.2.2.tgz",
|
||||
|
|
@ -2873,19 +2527,37 @@
|
|||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.1.tgz",
|
||||
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"dependencies": {
|
||||
"readdirp": "^4.0.1"
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.16.0"
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar/node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/class-utils": {
|
||||
|
|
@ -3460,19 +3132,6 @@
|
|||
"integrity": "sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"detect-libc": "bin/detect-libc.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/dijkstrajs": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
|
||||
|
|
@ -3589,10 +3248,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.8.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.6.tgz",
|
||||
"integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
|
||||
"license": "MIT",
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.8.1.tgz",
|
||||
"integrity": "sha512-p11/6w/O0+hGvPhiN3jrcgh+XG+eg5jZlLdQVYvcPHZYhhCh3J3YeZWW1JO/REPES1vevkboT6VAi+9wHA8Dsg==",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
|
|
@ -6314,13 +5972,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-addon-api": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-fetch-native": {
|
||||
"version": "1.6.4",
|
||||
"resolved": "https://registry.npmmirror.com/node-fetch-native/-/node-fetch-native-1.6.4.tgz",
|
||||
|
|
@ -7347,17 +6998,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.2.tgz",
|
||||
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 14.16.0"
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
|
|
@ -7665,14 +7313,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.80.3",
|
||||
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.80.3.tgz",
|
||||
"integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
|
||||
"version": "1.63.6",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
|
||||
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@parcel/watcher": "^2.4.1",
|
||||
"chokidar": "^4.0.0",
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
|
|
@ -10044,31 +9690,6 @@
|
|||
"balanced-match": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unplugin-vue-components/node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/unplugin-vue-components/node_modules/fast-glob": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
|
||||
|
|
@ -10128,19 +9749,6 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/unplugin-vue-components/node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unset-value": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/unset-value/-/unset-value-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.4.0",
|
||||
"dompurify": "^3.1.6",
|
||||
"element-plus": "^2.3.7",
|
||||
"element-plus": "2.8.1",
|
||||
"pinia": "^2.1.3",
|
||||
"qrcode": "^1.5.4",
|
||||
"swiper": "^11.1.5",
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"fast-glob": "3.2.11",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.0.0",
|
||||
"sass": "^1.63.6",
|
||||
"sass": "1.63.6",
|
||||
"typescript": "~5.0.4",
|
||||
"unplugin-auto-import": "^0.16.6",
|
||||
"unplugin-icons": "^0.16.3",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-radio-group v-model="modelValue" is-button>
|
||||
<el-radio-group v-model="modelValue" is-button @change="operation_end">
|
||||
<el-tooltip v-for="item in radio_list" :key="item.value" :content="item.name" placement="top" effect="dark">
|
||||
<el-radio-button :value="item.value"><icon :name="item.icon"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
|
|
@ -15,4 +15,9 @@ const radio_list = [
|
|||
{ name: '平铺', value: '3', icon: 'tile' },
|
||||
{ name: '铺满', value: '4', icon: 'spread-over' },
|
||||
];
|
||||
// 操作结束触发事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex-row align-c gap-12">
|
||||
<el-color-picker v-model="color" :predefine="predefine_colors" />
|
||||
<el-color-picker v-model="color" :predefine="predefine_colors" @change="blur" />
|
||||
<icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -27,6 +27,12 @@ const reset_event = () => {
|
|||
color.value = '';
|
||||
}
|
||||
}
|
||||
blur();
|
||||
};
|
||||
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const blur = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="input-number" :class="iconName ? 'has-icon' : ''">
|
||||
<icon v-if="iconName" :name="iconName" size="14" color="3" class="input-icon"></icon>
|
||||
<el-input-number v-model="internal_value" :min="min" :max="max" type="number" placeholder="0" controls-position="right" @keyup.enter="preventDefault"></el-input-number>
|
||||
<el-input-number v-model="internal_value" :min="min" :max="max" type="number" placeholder="0" controls-position="right" @keyup.enter="preventDefault" @blur="blur"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,6 +26,10 @@ const internal_value = defineModel({ type: Number, default: 0 });
|
|||
const preventDefault = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
}
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const blur = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.input-number {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex-col w">
|
||||
<div class="flex-row gap-10 align-c">
|
||||
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event"></slider>
|
||||
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event" @operation_end="operation_end"></slider>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
|
||||
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
|
||||
<icon :name="icon_data.name" size="24"></icon>
|
||||
|
|
@ -10,16 +10,16 @@
|
|||
</div>
|
||||
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
|
||||
<input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.margin_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
|
||||
<input-number v-model="form.margin_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.margin_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
|
||||
<input-number v-model="form.margin_left" :max="200" icon-name="enter-l" @update:model-value="pl_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.margin_right" :max="200" icon-name="enter-r" @update:model-value="pr_event"></input-number>
|
||||
<input-number v-model="form.margin_right" :max="200" icon-name="enter-r" @update:model-value="pr_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,8 +39,11 @@ const state = reactive({
|
|||
// 如果需要解构,确保使用toRefs
|
||||
const { form } = toRefs(state);
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const emit = defineEmits(['update:value', 'operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
const margin_event = (val: number | undefined) => {
|
||||
form.value.margin = Number(val);
|
||||
form.value.margin_top = Number(val);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flex-col w">
|
||||
<div class="flex-row gap-10 align-c">
|
||||
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event"></slider>
|
||||
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event" @operation_end="operation_end"></slider>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
|
||||
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
|
||||
<icon :name="icon_data.name" size="24"></icon>
|
||||
|
|
@ -11,17 +11,17 @@
|
|||
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
|
||||
<template v-if="isUpDown">
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
|
||||
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
|
||||
<input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
|
||||
<input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.padding_right" :max="200" icon-name="enter-r" @update:model-value="pr_event"></input-number>
|
||||
<input-number v-model="form.padding_right" :max="200" icon-name="enter-r" @update:model-value="pr_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,8 +45,11 @@ const state = reactive({
|
|||
// 如果需要解构,确保使用toRefs
|
||||
const { form } = toRefs(state);
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const emit = defineEmits(['update:value', 'operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
const padding_event = (val: number | undefined) => {
|
||||
form.value.padding = Number(val);
|
||||
form.value.padding_top = Number(val);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="flex-col w">
|
||||
<div class="flex-row gap-10 align-c">
|
||||
<slider v-model="form.radius" type="retract" @update:model-value="radius_event"></slider>
|
||||
<slider v-model="form.radius" type="retract" @update:model-value="radius_event" @operation_end="operation_end"></slider>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
|
||||
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
|
||||
<icon :name="icon_data.name" size="24"></icon>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
</div>
|
||||
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.radius_top_left" icon-name="radius-l-t" @update:model-value="rtl_event"></input-number>
|
||||
<input-number v-model="form.radius_top_left" icon-name="radius-l-t" @update:model-value="rtl_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.radius_top_right" icon-name="radius-r-t" @update:model-value="rtr_event"></input-number>
|
||||
<input-number v-model="form.radius_top_right" icon-name="radius-r-t" @update:model-value="rtr_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pr-10">
|
||||
<input-number v-model="form.radius_bottom_left" icon-name="radius-l-b" @update:model-value="rbl_event"></input-number>
|
||||
<input-number v-model="form.radius_bottom_left" icon-name="radius-l-b" @update:model-value="rbl_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
<div class="flex-width-half pl-10">
|
||||
<input-number v-model="form.radius_bottom_right" icon-name="radius-r-b" @update:model-value="rbr_event"></input-number>
|
||||
<input-number v-model="form.radius_bottom_right" icon-name="radius-r-b" @update:model-value="rbr_event" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,11 @@ const state = reactive({
|
|||
// 如果需要解构,确保使用toRefs
|
||||
const { form } = toRefs(state);
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
const emit = defineEmits(['update:value', 'operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
const radius_event = (val: number | undefined) => {
|
||||
form.value.radius = Number(val);
|
||||
form.value.radius_top_left = Number(val);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="slider w">
|
||||
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" :show-stops="max <= 10" />
|
||||
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max"></input-number>
|
||||
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" :show-stops="max <= 10" @change="operation_end" />
|
||||
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max" @operation_end="operation_end"></input-number>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,6 +25,11 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const modelValue = defineModel({ type: Number, default: 0 });
|
||||
const emit = defineEmits(['operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<mult-color-picker :value="color_list" :type="direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
<div class="size-12">背景图</div>
|
||||
<bg-btn-style v-model="background_img_style"></bg-btn-style>
|
||||
<bg-btn-style v-model="background_img_style" @operation_end="operation_end"></bg-btn-style>
|
||||
</div>
|
||||
<template v-if="componentType == 'carousel'">
|
||||
<el-radio-group v-model="background_type">
|
||||
|
|
@ -17,11 +17,11 @@
|
|||
<el-radio value="carousel">轮播图片</el-radio>
|
||||
</el-radio-group>
|
||||
<template v-if="background_type == 'custom'">
|
||||
<upload v-model="background_img" :limit="1"></upload>
|
||||
<upload v-model="background_img" :limit="1" @update:model-value="operation_end"></upload>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<upload v-model="background_img" :limit="1"></upload>
|
||||
<upload v-model="background_img" :limit="1" @update:model-value="operation_end"></upload>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -56,8 +56,13 @@ const background_type = defineModel('type', {
|
|||
type: String,
|
||||
default: 'custom',
|
||||
});
|
||||
const emit = defineEmits(['mult_color_picker_event']);
|
||||
const emit = defineEmits(['mult_color_picker_event', 'operation_end']);
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
emit('mult_color_picker_event', arry, type);
|
||||
operation_end();
|
||||
};
|
||||
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<el-form-item label="边框">
|
||||
<el-switch v-model="border_show" active-value="1" inactive-value="0" />
|
||||
<el-switch v-model="border_show" active-value="1" inactive-value="0" @change="operation_end" />
|
||||
</el-form-item>
|
||||
<template v-if="border_show == '1'">
|
||||
<el-form-item v-if="typeList.includes('color')" label="边框颜色">
|
||||
<color-picker v-model="border_color" :default-color="defaultColor"></color-picker>
|
||||
<color-picker v-model="border_color" :default-color="defaultColor" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="typeList.includes('style')" label="边框样式">
|
||||
<el-radio-group v-model="border_style">
|
||||
<el-radio-group v-model="border_style" @change="operation_end">
|
||||
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
|
||||
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
|
||||
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="typeList.includes('size')" label="边框粗细">
|
||||
<padding :value="border_size" :max="100"></padding>
|
||||
<padding :value="border_size" :max="100" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -51,6 +51,12 @@ const border_size = defineModel('size', {
|
|||
padding_right: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="mb-12">指示器设置</div>
|
||||
<el-form-item label="是否显示">
|
||||
<el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
|
||||
<el-switch v-model="form.is_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.is_show == '1'">
|
||||
<el-form-item label="位置">
|
||||
<el-radio-group v-model="form.indicator_new_location">
|
||||
<el-radio-group v-model="form.indicator_new_location" @change="operation_end">
|
||||
<el-radio value="top">上</el-radio>
|
||||
<el-radio value="bottom">下</el-radio>
|
||||
<el-radio value="left">左</el-radio>
|
||||
|
|
@ -13,14 +13,14 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="对齐方式">
|
||||
<el-radio-group v-model="form.indicator_location">
|
||||
<el-radio-group v-model="form.indicator_location" @change="operation_end">
|
||||
<el-radio value="flex-start">{{ ['left', 'right'].includes(form.indicator_new_location) ? '上' : '左' }}对齐</el-radio>
|
||||
<el-radio value="center">居中</el-radio>
|
||||
<el-radio value="flex-end">{{ ['left', 'right'].includes(form.indicator_new_location) ? '下' : '右' }}对齐</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-radio-group v-model="form.indicator_style" is-button>
|
||||
<el-radio-group v-model="form.indicator_style" is-button @change="operation_end">
|
||||
<el-tooltip content="点" placement="top" effect="dark">
|
||||
<el-radio-button value="dot"><icon name="iconfont icon-ellipsis"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="大小">
|
||||
<slider v-model="form.indicator_size" :max="100"></slider>
|
||||
<slider v-model="form.indicator_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isIndicatorBottom" label="边距">
|
||||
<slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
|
||||
<slider v-model="form.indicator_bottom" :min="0" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.indicator_style != 'num'" label="圆角">
|
||||
<radius :value="form.indicator_radius"></radius>
|
||||
<radius :value="form.indicator_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -86,5 +86,12 @@ const color_picker_change = (color: string, type: string) => {
|
|||
} else {
|
||||
form.value.color = color;
|
||||
}
|
||||
operation_end();
|
||||
};
|
||||
|
||||
const emit = defineEmits(['operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
|
@ -5,30 +5,30 @@
|
|||
<el-form :model="form" label-width="70">
|
||||
<div class="mb-12">通用</div>
|
||||
<el-form-item label="底部背景">
|
||||
<background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
|
||||
<background-common v-if="isMultBackground" v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end" />
|
||||
<div v-else>
|
||||
<color-picker v-model="form.color_list[0].color"></color-picker>
|
||||
<color-picker v-model="form.color_list[0].color" @operation_end="operation_end"></color-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isFloatingUp" label="组件上浮">
|
||||
<slider v-model="form.floating_up" :min="0" :max="500"></slider>
|
||||
<slider v-model="form.floating_up" :min="0" :max="500" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isFloatingUp" label="组件层级">
|
||||
<slider v-model="form.module_z_index" :min="0" :max="10"></slider>
|
||||
<slider v-model="form.module_z_index" :min="0" :max="10" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form" :is-up-down="isUpDown"></padding>
|
||||
<padding :value="form" :is-up-down="isUpDown" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isMargin" label="外边距">
|
||||
<margin :value="form"></margin>
|
||||
<margin :value="form" @operation_end="operation_end"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isRadius" label="圆角">
|
||||
<radius :value="form"></radius>
|
||||
<radius :value="form" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
|
||||
<border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size" @operation_end="operation_end"></border-config>
|
||||
<!-- 阴影配置 -->
|
||||
<shadow-config v-if="isShadow" v-model="form"></shadow-config>
|
||||
<shadow-config v-if="isShadow" v-model="form" @operation_end="operation_end"></shadow-config>
|
||||
</el-form>
|
||||
</div>
|
||||
</card-container>
|
||||
|
|
@ -110,12 +110,16 @@ const props = defineProps({
|
|||
});
|
||||
// value 和初始化数据合并数据
|
||||
let form = ref(props.value);
|
||||
const emit = defineEmits(['update:value']);
|
||||
const emit = defineEmits(['update:value', 'operation_end']);
|
||||
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.color_list = arry;
|
||||
form.value.direction = type.toString();
|
||||
};
|
||||
// 操作结束
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.common-styles {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<card-container>
|
||||
<div class="mb-12">条件设置</div>
|
||||
<el-form-item label="条件字段">
|
||||
<el-select v-model="form.condition.field" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1">
|
||||
<el-select v-model="form.condition.field" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="operation_end">
|
||||
<el-option v-for="item in options" :key="item.field" :label="item.name" :value="item.field" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -13,12 +13,12 @@
|
|||
</el-form-item>
|
||||
<template v-if="['greater-than', 'less-than', 'equal'].includes(form.condition.type)">
|
||||
<el-form-item label="条件内容">
|
||||
<input-number v-model="form.condition.value" class="w h"></input-number>
|
||||
<input-number v-model="form.condition.value" class="w h" @operation_end="operation_end"></input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else-if="['contains', 'does-not-contain'].includes(form.condition.type)">
|
||||
<el-form-item label="条件内容">
|
||||
<el-input v-model="form.condition.value" placeholder="请输入内容" />
|
||||
<el-input v-model="form.condition.value" placeholder="请输入内容" @blur="operation_end" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -43,6 +43,12 @@ const judge_change = (val: string) => {
|
|||
} else {
|
||||
form.value.condition.value = '';
|
||||
}
|
||||
operation_end();
|
||||
};
|
||||
// 操作结束
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
|
||||
const judge_list = [
|
||||
|
|
|
|||
|
|
@ -2,14 +2,19 @@
|
|||
<card-container>
|
||||
<div class="mb-12">定位设置</div>
|
||||
<el-form-item label="X轴">
|
||||
<slider v-model="data_location.x" :max="390"></slider>
|
||||
<slider v-model="data_location.x" :max="390" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴">
|
||||
<slider v-model="data_location.y" :max="1000"></slider>
|
||||
<slider v-model="data_location.y" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0 }) });
|
||||
const emit = defineEmits(['operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,13 +1,18 @@
|
|||
<template>
|
||||
<card-container>
|
||||
<div class="mb-20">显示设置</div>
|
||||
<el-form-item label="数据来源">
|
||||
<!-- <el-radio-group v-model="form.data_source_type" @change="operation_end">
|
||||
<el-radio v-for="(item, index) in default_type_data?.data_source" :key="index" :value="item">{{ item }}</el-radio>
|
||||
</el-radio-group> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="铺满方式">
|
||||
<el-radio-group v-model="form.data_source_direction">
|
||||
<el-radio-group v-model="form.data_source_direction" @change="operation_end">
|
||||
<el-radio v-for="(item, index) in default_type_data?.show_type" :key="index" :value="item">{{ item == 'vertical' ? '纵向展示' : item == 'vertical-scroll' ? '纵向滑动' : '横向滑动' }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="每屏显示">
|
||||
<el-radio-group v-model="form.data_source_carousel_col">
|
||||
<el-radio-group v-model="form.data_source_carousel_col" @change="operation_end">
|
||||
<el-radio v-for="(item, index) in default_type_data?.show_number" :key="index" :value="item">{{ item }}{{ form.data_source_direction == 'vertical-scroll' ? '行' : '列' }}展示</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
|
@ -30,10 +35,14 @@ const default_type_data = {
|
|||
show_type: ['vertical', 'vertical-scroll', 'horizontal-scroll'],
|
||||
show_number: [1, 2, 3, 4],
|
||||
};
|
||||
const emit = defineEmits(['custom_edit']);
|
||||
const emit = defineEmits(['custom_edit', 'operation_end']);
|
||||
const custom_edit = () => {
|
||||
emit('custom_edit');
|
||||
};
|
||||
// 操作结束触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-background {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">容器设置</div>
|
||||
<el-form-item label="容器宽度">
|
||||
<slider v-model="form.com_width" :max="390"></slider>
|
||||
<slider v-model="form.com_width" :max="390" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器高度">
|
||||
<slider v-model="form.com_height" :max="1000"></slider>
|
||||
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<el-tabs v-model="tabs_name" class="content-tabs">
|
||||
<el-tab-pane label="内容设置" name="content">
|
||||
<custom-tabs-content :value="form" @custom_edit="custom_edit"></custom-tabs-content>
|
||||
<custom-tabs-content :value="form" @custom_edit="custom_edit" @operation_end="operation_end"></custom-tabs-content>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="样式设置" name="styles">
|
||||
<model-custom-styles :value="form.data_style" :content="form" :is-floating-up="false"></model-custom-styles>
|
||||
<model-custom-styles :value="form.data_style" :content="form" :is-floating-up="false" @operation_end="operation_end"></model-custom-styles>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
|
@ -48,7 +48,7 @@ const state = reactive({
|
|||
const { diy_data } = toRefs(state);
|
||||
const form = ref(diy_data.value.com_data);
|
||||
//#region 自定义组的编辑功能
|
||||
const emit = defineEmits(['custom_edit']);
|
||||
const emit = defineEmits(['custom_edit', 'operation_end']);
|
||||
const custom_edit = () => {
|
||||
const { custom_list, com_width, custom_height } = form.value;
|
||||
// 计算宽度
|
||||
|
|
@ -56,6 +56,10 @@ const custom_edit = () => {
|
|||
emit('custom_edit', diy_data.value.id, custom_list, width, custom_height);
|
||||
};
|
||||
//# endregion
|
||||
// 操作结束触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
//#region 位置计算
|
||||
// 监听数据变化
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">文本设置</div>
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标颜色">
|
||||
<color-picker v-model="form.icon_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.icon_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标大小">
|
||||
<slider v-model="form.icon_size" :max="100"></slider>
|
||||
<slider v-model="form.icon_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标位置">
|
||||
<el-radio-group v-model="form.icon_location" is-button>
|
||||
<el-radio-group v-model="form.icon_location" is-button @change="operation_end">
|
||||
<el-tooltip content="左对齐" placement="top" effect="dark">
|
||||
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
|
|
@ -41,10 +41,10 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form.icon_padding" @update:value="padding_change"></padding>
|
||||
<padding :value="form.icon_padding" @update:value="padding_change" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转角度">
|
||||
<slider v-model="form.icon_rotate" :max="1000"></slider>
|
||||
<slider v-model="form.icon_rotate" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否置底">
|
||||
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
|
||||
|
|
@ -54,39 +54,39 @@
|
|||
<card-container>
|
||||
<div class="mb-12">容器设置</div>
|
||||
<el-form-item label="容器宽度">
|
||||
<slider v-model="form.com_width" :max="1000"></slider>
|
||||
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器高度">
|
||||
<slider v-model="form.com_height" :max="1000"></slider>
|
||||
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.bg_radius"></radius>
|
||||
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框样式">
|
||||
<el-radio-group v-model="form.border_style">
|
||||
<el-radio-group v-model="form.border_style" @change="operation_end">
|
||||
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
|
||||
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
|
||||
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框粗细">
|
||||
<slider v-model="form.border_size" :max="100"></slider>
|
||||
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -126,6 +126,7 @@ const icon_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_field = get_data_fields([], 'icon', '');
|
||||
}
|
||||
operation_end();
|
||||
};
|
||||
const link_change = (key: string) => {
|
||||
if (key == '2') {
|
||||
|
|
@ -134,10 +135,17 @@ const link_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_link_field = get_data_fields([], 'link', '');
|
||||
}
|
||||
operation_end();
|
||||
};
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.color_list = arry;
|
||||
form.value.direction = type.toString();
|
||||
operation_end();
|
||||
};
|
||||
// 操作结束触发的事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
//#region 位置计算
|
||||
// 监听数据变化
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">图片设置</div>
|
||||
|
|
@ -22,45 +22,45 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片圆角">
|
||||
<radius :value="form.img_radius"></radius>
|
||||
<radius :value="form.img_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片宽度">
|
||||
<slider v-model="form.img_width" :max="1000"></slider>
|
||||
<slider v-model="form.img_width" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片高度">
|
||||
<slider v-model="form.img_height" :max="1000"></slider>
|
||||
<slider v-model="form.img_height" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转角度">
|
||||
<slider v-model="form.img_rotate" :max="1000"></slider>
|
||||
<slider v-model="form.img_rotate" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否置底">
|
||||
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
|
||||
</el-form-item> -->
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container class="h">
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end" />
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框样式">
|
||||
<el-radio-group v-model="form.border_style">
|
||||
<el-radio-group v-model="form.border_style" @change="operation_end">
|
||||
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
|
||||
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
|
||||
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框圆角">
|
||||
<radius :value="form.border_radius"></radius>
|
||||
<radius :value="form.border_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框粗细">
|
||||
<slider v-model="form.border_size" :max="100"></slider>
|
||||
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -96,6 +96,7 @@ const img_src_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_field = get_data_fields([], 'images', '');
|
||||
}
|
||||
operation_end();
|
||||
}
|
||||
// 数据链接字段切换时,更新另外一个数据
|
||||
const img_link_change = (key: string) => {
|
||||
|
|
@ -105,7 +106,13 @@ const img_link_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_link_field = get_data_fields([], 'link', '');
|
||||
}
|
||||
operation_end();
|
||||
}
|
||||
// 操作结束触发的事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
//#region 位置计算
|
||||
// 监听数据变化
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container class="">
|
||||
<div class="mb-12">线条设置</div>
|
||||
<el-form-item label="竖线横线">
|
||||
<el-radio-group v-model="form.line_settings">
|
||||
<el-radio-group v-model="form.line_settings" @change="operation_end">
|
||||
<el-radio value="horizontal">横线</el-radio>
|
||||
<el-radio value="vertical">竖线</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条样式">
|
||||
<el-radio-group v-model="form.line_style">
|
||||
<el-radio-group v-model="form.line_style" @change="operation_end">
|
||||
<el-radio value="dashed">
|
||||
<icon name="line-point" class="re top-2" size="32"></icon>
|
||||
</el-radio>
|
||||
|
|
@ -25,20 +25,20 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="form.line_settings === 'horizontal' ? '线条宽度' : '线条高度'">
|
||||
<slider v-model="form.line_width" :max="1000"></slider>
|
||||
<slider v-model="form.line_width" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条粗细">
|
||||
<slider v-model="form.line_size" :min="1" :max="100"></slider>
|
||||
<slider v-model="form.line_size" :min="1" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条颜色">
|
||||
<color-picker v-model="form.line_color"></color-picker>
|
||||
<color-picker v-model="form.line_color" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否置底">
|
||||
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
|
||||
</el-form-item> -->
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -64,6 +64,12 @@ const { diy_data } = toRefs(state);
|
|||
const form = ref(diy_data.value.com_data);
|
||||
const center_height = defineModel("height", { type: Number, default: 0 })
|
||||
|
||||
// 操作结束触发的事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
|
||||
//#region 位置计算
|
||||
// 监听数据变化
|
||||
watch(diy_data, (val) => {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">容器设置</div>
|
||||
<el-form-item label="链接">
|
||||
<url-value v-model="form.link"></url-value>
|
||||
<url-value v-model="form.link" @update:model-value="img_link_change('1')"></url-value>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据链接">
|
||||
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
|
||||
|
|
@ -14,38 +14,38 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
|
||||
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.bg_radius"></radius>
|
||||
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转角度">
|
||||
<slider v-model="form.panel_rotate" :max="1000"></slider>
|
||||
<slider v-model="form.panel_rotate" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否置底">
|
||||
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="容器宽度">
|
||||
<slider v-model="form.com_width" :max="1000"></slider>
|
||||
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器高度">
|
||||
<slider v-model="form.com_height" :max="1000"></slider>
|
||||
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" />
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框样式">
|
||||
<el-radio-group v-model="form.border_style">
|
||||
<el-radio-group v-model="form.border_style" @change="operation_end">
|
||||
<el-radio value="dashed">
|
||||
<div class="border-style-item" style="border: 1px dashed #979797"></div>
|
||||
</el-radio>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框粗细">
|
||||
<slider v-model="form.border_size" :max="100"></slider>
|
||||
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -101,7 +101,12 @@ const img_link_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_link_field = get_data_fields([], 'link', '');
|
||||
}
|
||||
operation_end();
|
||||
}
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
// #region 位置计算
|
||||
// 监听数据变化
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div class="w h bg-f">
|
||||
<el-form :model="form" label-width="70">
|
||||
<custom-location v-model="diy_data.location"></custom-location>
|
||||
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">文本设置</div>
|
||||
<el-form-item label="文本标题">
|
||||
<el-input v-model="form.text_captions" placeholder="请输入文本内容" type="input" clearable></el-input>
|
||||
<el-input v-model="form.text_captions" placeholder="请输入文本内容" type="input" clearable @blur="operation_end"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本内容">
|
||||
<div class="flex-row gap-5 align-s w">
|
||||
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
|
||||
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @blur="operation_end" @input="text_change('1')"></el-input>
|
||||
<el-button @click="copy_field">复制字段</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据字段">
|
||||
<el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
|
||||
<el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')" @blur="operation_end">
|
||||
<el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -28,16 +28,16 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="富文本">
|
||||
<el-switch v-model="form.is_rich_text" active-value="1" inactive-value="0" />
|
||||
<el-switch v-model="form.is_rich_text" active-value="1" inactive-value="0" @change="operation_end" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.is_rich_text == '1'" label="上下滚动">
|
||||
<el-switch v-model="form.is_up_down" active-value="1" inactive-value="0" />
|
||||
<el-switch v-model="form.is_up_down" active-value="1" inactive-value="0" @change="operation_end" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字颜色">
|
||||
<color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.text_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小">
|
||||
<el-radio-group v-model="form.text_weight">
|
||||
<el-radio-group v-model="form.text_weight" @change="operation_end">
|
||||
<el-radio value="500">加粗</el-radio>
|
||||
<el-radio value="normal">正常</el-radio>
|
||||
<el-radio value="italic">倾斜</el-radio>
|
||||
|
|
@ -46,18 +46,18 @@
|
|||
<slider v-model="form.text_size" :max="100" @update:model-value="text_size_change"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="行间距" label-width="50" class="mb-0 w">
|
||||
<slider v-model="form.line_text_size" :max="200"></slider>
|
||||
<slider v-model="form.line_text_size" :max="200" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-form-item label="字符选项">
|
||||
<el-radio-group v-model="form.text_option">
|
||||
<el-radio-group v-model="form.text_option" @change="operation_end">
|
||||
<el-radio value="none"><span style="text-decoration: none">Aa</span></el-radio>
|
||||
<el-radio value="underline"><span style="text-decoration: underline">Aa</span></el-radio>
|
||||
<el-radio value="line-through"><span style="text-decoration: line-through">Aa</span></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字位置">
|
||||
<el-radio-group v-model="form.text_location" is-button>
|
||||
<el-radio-group v-model="form.text_location" is-button @change="operation_end">
|
||||
<el-tooltip content="左对齐" placement="top" effect="dark">
|
||||
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
|
|
@ -70,49 +70,49 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="内边距">
|
||||
<padding :value="form.text_padding" @update:value="padding_change"></padding>
|
||||
<padding :value="form.text_padding" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转角度">
|
||||
<slider v-model="form.text_rotate" :max="1000"></slider>
|
||||
<slider v-model="form.text_rotate" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">容器设置</div>
|
||||
<el-form-item label="容器宽度">
|
||||
<slider v-model="form.com_width" :max="1000"></slider>
|
||||
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="容器高度">
|
||||
<slider v-model="form.com_height" :max="1000"></slider>
|
||||
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.bg_radius"></radius>
|
||||
<radius :value="form.bg_radius" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<condition-config :value="form" :options="options"></condition-config>
|
||||
<condition-config :value="form" :options="options" @operation_end="operation_end"></condition-config>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">边框设置</div>
|
||||
<el-form-item label="边框显示">
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0"/>
|
||||
<el-switch v-model="form.border_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.border_show == '1'">
|
||||
<el-form-item label="边框颜色">
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
|
||||
<color-picker v-model="form.border_color" default-color="#FF3F3F" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框样式">
|
||||
<el-radio-group v-model="form.border_style">
|
||||
<el-radio-group v-model="form.border_style" @change="operation_end">
|
||||
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
|
||||
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
|
||||
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框粗细">
|
||||
<slider v-model="form.border_size" :max="100"></slider>
|
||||
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
|
|
@ -141,10 +141,6 @@ const state = reactive({
|
|||
const { diy_data } = toRefs(state);
|
||||
const form = ref(diy_data.value.com_data);
|
||||
const center_height = defineModel('height', { type: Number, default: 0 });
|
||||
|
||||
const padding_change = (padding: any) => {
|
||||
form.value.text_padding = Object.assign(form.value.text_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
|
||||
};
|
||||
// 如果历史的字体高度为空,就赋值为文字内容的大小
|
||||
onBeforeMount(() => {
|
||||
if (typeof form.value.line_text_size != 'number') {
|
||||
|
|
@ -179,20 +175,28 @@ const text_link_change = (key: string) => {
|
|||
} else {
|
||||
form.value.data_source_link_field = get_data_fields([], 'link', '');
|
||||
}
|
||||
operation_end();
|
||||
};
|
||||
// 文字大小变化时,同步更新行间距
|
||||
const text_size_change = (size: number) => {
|
||||
form.value.line_text_size = size;
|
||||
operation_end();
|
||||
};
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.color_list = arry;
|
||||
form.value.direction = type.toString();
|
||||
operation_end();
|
||||
};
|
||||
// 复制字段
|
||||
const copy_field_visiable = ref(false);
|
||||
const copy_field = () => {
|
||||
copy_field_visiable.value = true;
|
||||
};
|
||||
// 操作结束触发事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
// #region 位置计算
|
||||
// 监听数据变化
|
||||
watch(
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@
|
|||
<el-form-item label="阴影设置">
|
||||
<div class="flex-col gap-10 w">
|
||||
<el-form-item label="颜色" label-width="45">
|
||||
<color-picker v-model="form.box_shadow_color"></color-picker>
|
||||
<color-picker v-model="form.box_shadow_color" @operation_end="operation_end"></color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴" label-width="45">
|
||||
<slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
|
||||
<slider v-model="form.box_shadow_x" :min="-20" :max="20" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴" label-width="45">
|
||||
<slider v-model="form.box_shadow_y" :min="-20" :max="20"></slider>
|
||||
<slider v-model="form.box_shadow_y" :min="-20" :max="20" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="模糊" label-width="45">
|
||||
<slider v-model="form.box_shadow_blur"></slider>
|
||||
<slider v-model="form.box_shadow_blur" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="扩展" label-width="45">
|
||||
<slider v-model="form.box_shadow_spread"></slider>
|
||||
<slider v-model="form.box_shadow_spread" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
|
@ -22,4 +22,10 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
const form = defineModel({ type: Object, default: {}, required: true})
|
||||
|
||||
// 操作结束触发事件
|
||||
const emit = defineEmits(['operation_end']);
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
|
|
@ -631,7 +631,7 @@ const del_icon_event = () => {
|
|||
icon_value.value = '';
|
||||
};
|
||||
//#endregion 图标 ----------------------------------------------------------end
|
||||
const emit = defineEmits(['update:icon']);
|
||||
const emit = defineEmits(['update:icon', 'operation_end']);
|
||||
// 确认
|
||||
const confirm_event = () => {
|
||||
dialog_visible.value = false;
|
||||
|
|
@ -661,6 +661,11 @@ const confirm_event = () => {
|
|||
search_filter.value = '';
|
||||
is_replace.value = false;
|
||||
replace_index.value = -1;
|
||||
operation_end();
|
||||
};
|
||||
// 操作结束触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
// 替换标识
|
||||
const is_replace = ref(false);
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@
|
|||
<!-- 右侧配置区域 -->
|
||||
<div class="settings">
|
||||
<template v-if="diy_data.key === 'img'">
|
||||
<model-image-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-image-style>
|
||||
<model-image-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-image-style>
|
||||
</template>
|
||||
<template v-else-if="diy_data.key == 'text'">
|
||||
<model-text-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-text-style>
|
||||
<model-text-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-text-style>
|
||||
</template>
|
||||
<template v-else-if="diy_data.key == 'auxiliary-line'">
|
||||
<model-lines-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-lines-style>
|
||||
<model-lines-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-lines-style>
|
||||
</template>
|
||||
<template v-else-if="diy_data.key == 'icon'">
|
||||
<model-icon-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-icon-style>
|
||||
<model-icon-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-icon-style>
|
||||
</template>
|
||||
<template v-else-if="diy_data.key == 'panel'">
|
||||
<model-panel-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-panel-style>
|
||||
<model-panel-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @operation_end="operation_end"></model-panel-style>
|
||||
</template>
|
||||
<template v-else-if="diy_data.key == 'custom-group' && configType == 'custom'">
|
||||
<model-custom-group-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @custom_edit="custom_edit"></model-custom-group-style>
|
||||
<model-custom-group-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w h flex align-c bg-f">
|
||||
|
|
@ -126,6 +126,9 @@ const custom_edit = (id: string, list: diy, width: number, height: number) => {
|
|||
}
|
||||
emits('custom_edit', 'custom-group', id, father_list, list, width, height);
|
||||
};
|
||||
const operation_end = () => {
|
||||
console.log('操作结束');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@ const data_list_index_update = () => {
|
|||
}
|
||||
};
|
||||
// 数据来源的内容
|
||||
let data_source_content_list = computed(() => {
|
||||
const data_source_content_list = computed(() => {
|
||||
if (form.value.is_custom_data == '1') {
|
||||
if (Number(form.value.data_source_content.data_type) === 0) {
|
||||
return form.value.data_source_content.data_list;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
<card-container>
|
||||
<div class="mb-12">轮播设置</div>
|
||||
<el-form-item label="自动轮播">
|
||||
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
|
||||
<el-switch v-model="form.is_roll" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.is_roll == '1'">
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
|
||||
<slider v-model="form.interval_time" :min="1" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="滚动方式">
|
||||
<el-radio-group v-model="form.rolling_fashion">
|
||||
<el-radio-group v-model="form.rolling_fashion" @change="operation_end">
|
||||
<el-radio value="translation">平移</el-radio>
|
||||
<el-radio value="cut-screen">切屏</el-radio>
|
||||
</el-radio-group>
|
||||
|
|
@ -21,62 +21,62 @@
|
|||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<carousel-indicator :value="form"></carousel-indicator>
|
||||
<carousel-indicator :value="form" @operation_end="operation_end"></carousel-indicator>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
</template>
|
||||
<card-container>
|
||||
<div class="mb-12">数据样式</div>
|
||||
<el-form-item label="背景">
|
||||
<background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" />
|
||||
<background-common v-model:color_list="form.data_style.color_list" v-model:direction="form.data_style.direction" v-model:img_style="form.data_style.background_img_style" v-model:img="form.data_style.background_img" @mult_color_picker_event="mult_color_picker_event" @operation_end="operation_end" />
|
||||
</el-form-item>
|
||||
<el-form-item label="外间距">
|
||||
<margin :value="form.data_style"></margin>
|
||||
<margin :value="form.data_style" @operation_end="operation_end"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.data_style"></padding>
|
||||
<padding :value="form.data_style" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.data_style"></radius>
|
||||
<radius :value="form.data_style" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据间距">
|
||||
<div class="flex-col w h gap-10">
|
||||
<el-form-item v-if="['vertical', 'horizontal'].includes(data.data_source_direction)" label="横向" label-width="40" class="mb-0 w form-item-child-label">
|
||||
<slider v-model="form.column_gap" :max="100"></slider>
|
||||
<slider v-model="form.column_gap" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['vertical', 'vertical-scroll'].includes(data.data_source_direction)" label="纵向" label-width="40" class="mb-0 w form-item-child-label">
|
||||
<slider v-model="form.row_gap" :max="100"></slider>
|
||||
<slider v-model="form.row_gap" :max="100" @operation_end="operation_end"></slider>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-model:show="form.data_style.border_is_show" v-model:color="form.data_style.border_color" v-model:style="form.data_style.border_style" v-model:size="form.data_style.border_size"></border-config>
|
||||
<border-config v-model:show="form.data_style.border_is_show" v-model:color="form.data_style.border_color" v-model:style="form.data_style.border_style" v-model:size="form.data_style.border_size" @operation_end="operation_end"></border-config>
|
||||
<!-- 阴影配置 -->
|
||||
<shadow-config v-model="form.data_style"></shadow-config>
|
||||
<shadow-config v-model="form.data_style" @operation_end="operation_end"></shadow-config>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">内容样式</div>
|
||||
<el-form-item label="背景">
|
||||
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" />
|
||||
<background-common v-model:color_list="form.data_content_style.color_list" v-model:direction="form.data_content_style.direction" v-model:img_style="form.data_content_style.background_img_style" v-model:img="form.data_content_style.background_img" @mult_color_picker_event="mult_content_color_picker_event" @operation_end="operation_end" />
|
||||
</el-form-item>
|
||||
<el-form-item label="外间距">
|
||||
<margin :value="form.data_content_style"></margin>
|
||||
<margin :value="form.data_content_style" @operation_end="operation_end"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.data_content_style"></padding>
|
||||
<padding :value="form.data_content_style" @operation_end="operation_end"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.data_content_style"></radius>
|
||||
<radius :value="form.data_content_style" @operation_end="operation_end"></radius>
|
||||
</el-form-item>
|
||||
<!-- 边框处理 -->
|
||||
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size"></border-config>
|
||||
<border-config v-model:show="form.data_content_style.border_is_show" v-model:color="form.data_content_style.border_color" v-model:style="form.data_content_style.border_style" v-model:size="form.data_content_style.border_size" @operation_end="operation_end"></border-config>
|
||||
<!-- 阴影配置 -->
|
||||
<shadow-config v-model="form.data_content_style"></shadow-config>
|
||||
<shadow-config v-model="form.data_content_style" @operation_end="operation_end"></shadow-config>
|
||||
</card-container>
|
||||
</el-form>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<common-styles :value="form.common_style" :is-floating-up="isFloatingUp" />
|
||||
<common-styles :value="form.common_style" :is-floating-up="isFloatingUp" @operation_end="operation_end"/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -110,6 +110,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
|
|||
form.value.data_style.color_list = arry;
|
||||
form.value.data_style.direction = type.toString();
|
||||
}
|
||||
const emit = defineEmits(['operation_end']);
|
||||
// 失去焦点时触发事件
|
||||
const operation_end = () => {
|
||||
emit('operation_end');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.topic {
|
||||
|
|
|
|||
Loading…
Reference in New Issue