mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
refactor: use tsx refactor selector component
This commit is contained in:
xiaoxian521
parent
8a4a39de3a
commit
0d1f5bb673
591
package-lock.json
generated
591
package-lock.json
generated
@ -9,16 +9,438 @@
|
||||
"resolved": "http://192.168.250.101:4873/@amap%2famap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
|
||||
"integrity": "sha1-nsS01dJGfqxFH2yFLjXbaen58MA="
|
||||
},
|
||||
"@babel/code-frame": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fcode-frame/-/code-frame-7.12.13.tgz",
|
||||
"integrity": "sha1-3PyCa+72XnXFDiHTg319lXmN1lg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/compat-data": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fcompat-data/-/compat-data-7.13.15.tgz",
|
||||
"integrity": "sha1-fo7qQtC2T9orN1si0GxgUiLoSPQ=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/core": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fcore/-/core-7.13.15.tgz",
|
||||
"integrity": "sha1-ptQJF98CdIe1QxIgKgaBLE93ktA=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.12.13",
|
||||
"@babel/generator": "^7.13.9",
|
||||
"@babel/helper-compilation-targets": "^7.13.13",
|
||||
"@babel/helper-module-transforms": "^7.13.14",
|
||||
"@babel/helpers": "^7.13.10",
|
||||
"@babel/parser": "^7.13.15",
|
||||
"@babel/template": "^7.12.13",
|
||||
"@babel/traverse": "^7.13.15",
|
||||
"@babel/types": "^7.13.14",
|
||||
"convert-source-map": "^1.7.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.2",
|
||||
"json5": "^2.1.2",
|
||||
"semver": "^6.3.0",
|
||||
"source-map": "^0.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
|
||||
"integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "http://192.168.250.101:4873/json5/-/json5-2.2.0.tgz",
|
||||
"integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "http://192.168.250.101:4873/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/generator": {
|
||||
"version": "7.13.9",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fgenerator/-/generator-7.13.9.tgz",
|
||||
"integrity": "sha1-Onqpb577jivkLTjYDizrTGTY3jk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.13.0",
|
||||
"jsesc": "^2.5.1",
|
||||
"source-map": "^0.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "http://192.168.250.101:4873/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-compilation-targets": {
|
||||
"version": "7.13.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz",
|
||||
"integrity": "sha1-KylyoJJkdIU/QeStvGkzj1IGAOU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/compat-data": "^7.13.12",
|
||||
"@babel/helper-validator-option": "^7.12.17",
|
||||
"browserslist": "^4.14.5",
|
||||
"semver": "^6.3.0"
|
||||
}
|
||||
},
|
||||
"@babel/helper-create-class-features-plugin": {
|
||||
"version": "7.13.11",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz",
|
||||
"integrity": "sha1-MNMKAFvKLJU/VlP8JQkaSSF39PY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-function-name": "^7.12.13",
|
||||
"@babel/helper-member-expression-to-functions": "^7.13.0",
|
||||
"@babel/helper-optimise-call-expression": "^7.12.13",
|
||||
"@babel/helper-replace-supers": "^7.13.0",
|
||||
"@babel/helper-split-export-declaration": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/helper-function-name": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-function-name/-/helper-function-name-7.12.13.tgz",
|
||||
"integrity": "sha1-k61lbbPDwiMlWf17LD29y+DrN3o=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-get-function-arity": "^7.12.13",
|
||||
"@babel/template": "^7.12.13",
|
||||
"@babel/types": "^7.12.13"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-get-function-arity": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
|
||||
"integrity": "sha1-vGNFHUA6OzCCuX4diz/lvUCR5YM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.13"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-member-expression-to-functions": {
|
||||
"version": "7.13.12",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
|
||||
"integrity": "sha1-3+No8m1CagcpnY1lE4IXaCFubXI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.13.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-imports": {
|
||||
"version": "7.13.12",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-module-imports/-/helper-module-imports-7.13.12.tgz",
|
||||
"integrity": "sha1-xqNppvNiHLJdoBQHhoTakZa2GXc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.13.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-transforms": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
|
||||
"integrity": "sha1-5gBlK6SMyxZBd1QTyzLPpOi0le8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.13.12",
|
||||
"@babel/helper-replace-supers": "^7.13.12",
|
||||
"@babel/helper-simple-access": "^7.13.12",
|
||||
"@babel/helper-split-export-declaration": "^7.12.13",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"@babel/template": "^7.12.13",
|
||||
"@babel/traverse": "^7.13.13",
|
||||
"@babel/types": "^7.13.14"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-optimise-call-expression": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
|
||||
"integrity": "sha1-XALRcbTIYVsecWP4iMHIHDCiquo=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.13"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-plugin-utils": {
|
||||
"version": "7.13.0",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
|
||||
"integrity": "sha1-gGUmzhJa7QM3O8QWqCgyHjpqM68=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/helper-replace-supers": {
|
||||
"version": "7.13.12",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
|
||||
"integrity": "sha1-ZEL0wa2RJQJIGlZKc4beDHf/OAQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-member-expression-to-functions": "^7.13.12",
|
||||
"@babel/helper-optimise-call-expression": "^7.12.13",
|
||||
"@babel/traverse": "^7.13.0",
|
||||
"@babel/types": "^7.13.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-simple-access": {
|
||||
"version": "7.13.12",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-simple-access/-/helper-simple-access-7.13.12.tgz",
|
||||
"integrity": "sha1-3WxTivthgZ0gWgEsMXkqOcel6vY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.13.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-split-export-declaration": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
|
||||
"integrity": "sha1-6UML4AuvPoiw4T5vnU6vITY3KwU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.13"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0="
|
||||
},
|
||||
"@babel/helper-validator-option": {
|
||||
"version": "7.12.17",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelper-validator-option/-/helper-validator-option-7.12.17.tgz",
|
||||
"integrity": "sha1-0fvwEuGnm37rv9xtJwuq+NnrmDE=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/helpers": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhelpers/-/helpers-7.13.10.tgz",
|
||||
"integrity": "sha1-/Y4rp0iFM83qxFzBWOnryl48ffg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/template": "^7.12.13",
|
||||
"@babel/traverse": "^7.13.0",
|
||||
"@babel/types": "^7.13.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fhighlight/-/highlight-7.13.10.tgz",
|
||||
"integrity": "sha1-qLKmYUj1sn1maxXYF3Q0enMdUtE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.12.11.tgz",
|
||||
"integrity": "sha1-nONZW810vFxGaQXobFNbiyUBHnk="
|
||||
},
|
||||
"@babel/plugin-syntax-import-meta": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
|
||||
"integrity": "sha1-7mATSMNw+jNNIge+FYd3SWUh/VE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/plugin-syntax-jsx": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz",
|
||||
"integrity": "sha1-BE+4HrrWaY/mLEeIdVdby7m3DxU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/plugin-syntax-typescript": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
|
||||
"integrity": "sha1-nf8RHKZBVM7w9NxSz4Q9nxLORHQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/plugin-transform-typescript": {
|
||||
"version": "7.13.0",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fplugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
|
||||
"integrity": "sha1-SkmOHzYANC0qnmH2ATEBj1V3SFM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-create-class-features-plugin": "^7.13.0",
|
||||
"@babel/helper-plugin-utils": "^7.13.0",
|
||||
"@babel/plugin-syntax-typescript": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
|
||||
@ -36,6 +458,71 @@
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftemplate/-/template-7.12.13.tgz",
|
||||
"integrity": "sha1-UwJlvooliduzdSOETFvLVZR/syc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.12.13",
|
||||
"@babel/parser": "^7.12.13",
|
||||
"@babel/types": "^7.12.13"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
|
||||
"integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/traverse": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftraverse/-/traverse-7.13.15.tgz",
|
||||
"integrity": "sha1-w4v3Z5M03dQCjo4fezqlAZ8Nrac=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.12.13",
|
||||
"@babel/generator": "^7.13.9",
|
||||
"@babel/helper-function-name": "^7.12.13",
|
||||
"@babel/helper-split-export-declaration": "^7.12.13",
|
||||
"@babel/parser": "^7.13.15",
|
||||
"@babel/types": "^7.13.14",
|
||||
"debug": "^4.1.0",
|
||||
"globals": "^11.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": {
|
||||
"version": "7.13.15",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
|
||||
"integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.13.14",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
|
||||
"integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.11",
|
||||
"resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.12.11.tgz",
|
||||
@ -107,6 +594,11 @@
|
||||
"@intlify/shared": "9.1.2"
|
||||
}
|
||||
},
|
||||
"@logicflow/core": {
|
||||
"version": "0.2.9",
|
||||
"resolved": "http://192.168.250.101:4873/@logicflow%2fcore/-/core-0.2.9.tgz",
|
||||
"integrity": "sha1-wTU8PV0P58QNm7jPq+PMbVmF5PE="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "http://192.168.250.101:4873/@nodelib%2ffs.scandir/-/fs.scandir-2.1.4.tgz",
|
||||
@ -215,6 +707,42 @@
|
||||
"integrity": "sha1-beSUNvw0b4KaVmdgZkKOPwEVIqw=",
|
||||
"dev": true
|
||||
},
|
||||
"@vitejs/plugin-vue-jsx": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "http://192.168.250.101:4873/@vitejs%2fplugin-vue-jsx/-/plugin-vue-jsx-1.1.3.tgz",
|
||||
"integrity": "sha1-Qmxo+KNnpgOsuC/KbisSUGup/I4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/plugin-transform-typescript": "^7.12.1",
|
||||
"@vue/babel-plugin-jsx": "^1.0.3",
|
||||
"hash-sum": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@vue/babel-helper-vue-transform-on": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "http://192.168.250.101:4873/@vue%2fbabel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",
|
||||
"integrity": "sha1-m5xpHNBvyFUiGiR1w8yDHXdLx9w=",
|
||||
"dev": true
|
||||
},
|
||||
"@vue/babel-plugin-jsx": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "http://192.168.250.101:4873/@vue%2fbabel-plugin-jsx/-/babel-plugin-jsx-1.0.4.tgz",
|
||||
"integrity": "sha1-B3gmyg7M13y2rWmCVPWCHe1cUYk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/plugin-syntax-jsx": "^7.0.0",
|
||||
"@babel/template": "^7.0.0",
|
||||
"@babel/traverse": "^7.0.0",
|
||||
"@babel/types": "^7.0.0",
|
||||
"@vue/babel-helper-vue-transform-on": "^1.0.2",
|
||||
"camelcase": "^6.0.0",
|
||||
"html-tags": "^3.1.0",
|
||||
"svg-tags": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-core": {
|
||||
"version": "3.0.11",
|
||||
"resolved": "http://192.168.250.101:4873/@vue%2fcompiler-core/-/compiler-core-3.0.11.tgz",
|
||||
@ -469,6 +997,12 @@
|
||||
"integrity": "sha1-RdXbmefuXmvE82LgCL+RerUEmIc=",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "http://192.168.250.101:4873/camelcase/-/camelcase-6.2.0.tgz",
|
||||
"integrity": "sha1-kkr4gcnVJaydh/QNlk5c6pgqGAk=",
|
||||
"dev": true
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001191",
|
||||
"resolved": "http://192.168.250.101:4873/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz",
|
||||
@ -557,6 +1091,15 @@
|
||||
"bluebird": "^3.7.2"
|
||||
}
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "http://192.168.250.101:4873/convert-source-map/-/convert-source-map-1.7.0.tgz",
|
||||
"integrity": "sha1-F6LLiC1/d9NJBYXizmxSRCSjpEI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.1"
|
||||
}
|
||||
},
|
||||
"core-js-pure": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.0.tgz",
|
||||
@ -872,6 +1415,12 @@
|
||||
"loader-utils": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "http://192.168.250.101:4873/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
"integrity": "sha1-MqbudsPX9S1GsrGuXZP+qFgKJeA=",
|
||||
"dev": true
|
||||
},
|
||||
"get-size": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "http://192.168.250.101:4873/get-size/-/get-size-2.0.3.tgz",
|
||||
@ -886,6 +1435,12 @@
|
||||
"is-glob": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"globals": {
|
||||
"version": "11.12.0",
|
||||
"resolved": "http://192.168.250.101:4873/globals/-/globals-11.12.0.tgz",
|
||||
"integrity": "sha1-q4eVM4hooLq9hSV1gBjCp+uVxC4=",
|
||||
"dev": true
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "http://192.168.250.101:4873/has/-/has-1.0.3.tgz",
|
||||
@ -906,6 +1461,12 @@
|
||||
"integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
|
||||
"dev": true
|
||||
},
|
||||
"html-tags": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "http://192.168.250.101:4873/html-tags/-/html-tags-3.1.0.tgz",
|
||||
"integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
|
||||
"dev": true
|
||||
},
|
||||
"icss-replace-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://192.168.250.101:4873/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
|
||||
@ -979,6 +1540,18 @@
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
|
||||
"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "http://192.168.250.101:4873/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk=",
|
||||
"dev": true
|
||||
},
|
||||
"jsesc": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "http://192.168.250.101:4873/jsesc/-/jsesc-2.5.2.tgz",
|
||||
"integrity": "sha1-gFZNLkg9rPbo7yCWUKZ98/DCg6Q=",
|
||||
"dev": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "http://192.168.250.101:4873/json5/-/json5-1.0.1.tgz",
|
||||
@ -1340,6 +1913,12 @@
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "http://192.168.250.101:4873/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.32.8",
|
||||
"resolved": "http://192.168.250.101:4873/sass/-/sass-1.32.8.tgz",
|
||||
@ -1359,6 +1938,12 @@
|
||||
"neo-async": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "http://192.168.250.101:4873/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
|
||||
"dev": true
|
||||
},
|
||||
"sortablejs": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "http://192.168.250.101:4873/sortablejs/-/sortablejs-1.10.2.tgz",
|
||||
@ -1395,6 +1980,12 @@
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"svg-tags": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "http://192.168.250.101:4873/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
|
||||
"dev": true
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "http://192.168.250.101:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@logicflow/core": "^0.2.9",
|
||||
"@vueuse/core": "^4.8.1",
|
||||
"await-to-js": "^2.1.1",
|
||||
"axios": "^0.21.1",
|
||||
@ -41,6 +42,7 @@
|
||||
"@types/node": "^14.14.14",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@vitejs/plugin-vue": "^1.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "^1.1.3",
|
||||
"@vue/compiler-sfc": "^3.0.11",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
|
||||
10
src/components/selector/index.ts
Normal file
10
src/components/selector/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { App } from "vue"
|
||||
import selector from "./src/selector"
|
||||
|
||||
export const Selector = Object.assign(selector, {
|
||||
install(app: App) {
|
||||
app.component(selector.name, selector)
|
||||
}
|
||||
})
|
||||
|
||||
export default Selector
|
||||
23
src/components/selector/src/index.css
Normal file
23
src/components/selector/src/index.css
Normal file
@ -0,0 +1,23 @@
|
||||
.hs-rate__icon {
|
||||
font-size: 18px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.hs-item {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
line-height: 30px;
|
||||
}
|
||||
.hs-on {
|
||||
background-color: #409eff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hs-range {
|
||||
background-color: #f2f6fc;
|
||||
}
|
||||
.both-left-sides {
|
||||
border-radius: 50% 0 0 50%;
|
||||
}
|
||||
.both-right-sides {
|
||||
border-radius: 0 50% 50% 0;
|
||||
}
|
||||
@ -1,9 +1,12 @@
|
||||
/**
|
||||
<template>
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
v-for="(item, key) in max"
|
||||
:data-index="HsKey"
|
||||
:ref="'hstd' + HsKey + key"
|
||||
:class="['hs-select__item' + key]"
|
||||
@mousemove.prevent="setCurrentValue(key, $event)"
|
||||
@mouseleave.prevent="resetCurrentValue(key)"
|
||||
@ -11,7 +14,7 @@
|
||||
:style="{ cursor: rateDisabled ? 'auto' : 'pointer', 'text-align': 'center' }"
|
||||
:key="key"
|
||||
>
|
||||
<div :class="[classes[key] + key]" class="hs-item">
|
||||
<div :ref="'hsdiv' + HsKey + key" :class="[classes[key] + key]" class="hs-item">
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -21,9 +24,14 @@
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { defineComponent, computed, nextTick } from "vue";
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
getCurrentInstance,
|
||||
} from "vue";
|
||||
import { addClass, removeClass, toggleClass } from "/@/utils/operate";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
|
||||
// 选中非选中状态
|
||||
let stayClass = "stay"; //鼠标点击
|
||||
@ -40,22 +48,33 @@ let selectedList = [];
|
||||
let overList = [];
|
||||
|
||||
export default defineComponent({
|
||||
name: "HsSelector",
|
||||
props: {
|
||||
HsKey: {
|
||||
type: Number || String,
|
||||
default: 0,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 10
|
||||
}
|
||||
default: 10,
|
||||
},
|
||||
// 回显数据的索引，长度必须是2
|
||||
echo: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["selectedVal"],
|
||||
setup(props, { emit }) {
|
||||
let vm: any;
|
||||
let currentValue = props.value;
|
||||
|
||||
let rateDisabled = computed(() => {
|
||||
@ -78,7 +97,9 @@ export default defineComponent({
|
||||
return result;
|
||||
});
|
||||
|
||||
// 鼠标移入
|
||||
const setCurrentValue = (index, event) => {
|
||||
if (props.disabled) return;
|
||||
// 当选中一个元素后，开始添加背景色
|
||||
if (selectedList.length === 1) {
|
||||
if (overList.length < 1) overList.push({ index });
|
||||
@ -122,7 +143,9 @@ export default defineComponent({
|
||||
addClass(document.querySelector("." + voidClass + index), activeClass);
|
||||
};
|
||||
|
||||
const resetCurrentValue = index => {
|
||||
// 鼠标离开
|
||||
const resetCurrentValue = (index) => {
|
||||
if (props.disabled) return;
|
||||
// 移除先检查是否选中 选中则返回false 不移除
|
||||
const currentHsDom = document.querySelector("." + voidClass + index);
|
||||
if (currentHsDom.className.includes(stayClass)) {
|
||||
@ -153,7 +176,9 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
// 鼠标点击
|
||||
const selectValue = (index, item) => {
|
||||
if (props.disabled) return;
|
||||
let len = selectedList.length;
|
||||
|
||||
if (len < 2) {
|
||||
@ -189,19 +214,19 @@ export default defineComponent({
|
||||
emit("selectedVal", {
|
||||
left: selectedList[0].item,
|
||||
right: selectedList[1].item,
|
||||
whole: selectedList
|
||||
whole: selectedList,
|
||||
});
|
||||
} else {
|
||||
emit("selectedVal", {
|
||||
left: selectedList[1].item,
|
||||
right: selectedList[0].item,
|
||||
whole: selectedList
|
||||
whole: selectedList,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
nextTick(() => {
|
||||
selectedList.forEach(v => {
|
||||
selectedList.forEach((v) => {
|
||||
removeClass(
|
||||
document.querySelector("." + voidClass + v.index),
|
||||
activeClass,
|
||||
@ -235,14 +260,55 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
// 回显数据
|
||||
const echoView = (item) => {
|
||||
if (item.length === 0) return;
|
||||
if (item.length > 2 || item.length === 1) {
|
||||
throw "传入的数组长度必须是2";
|
||||
}
|
||||
|
||||
item.sort((a, b) => {
|
||||
return a - b;
|
||||
});
|
||||
|
||||
addClass(
|
||||
vm.refs["hsdiv" + props.HsKey + item[0]],
|
||||
activeClass,
|
||||
stayClass
|
||||
);
|
||||
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
|
||||
|
||||
addClass(
|
||||
vm.refs["hsdiv" + props.HsKey + item[1]],
|
||||
activeClass,
|
||||
stayClass
|
||||
);
|
||||
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides);
|
||||
|
||||
while (item[1] >= item[0]) {
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange);
|
||||
item[0]++;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
vm = getCurrentInstance();
|
||||
nextTick(() => {
|
||||
echoView(props.echo);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
rateDisabled,
|
||||
setCurrentValue,
|
||||
resetCurrentValue,
|
||||
selectValue,
|
||||
classes
|
||||
classes,
|
||||
echoView,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -262,7 +328,7 @@ export default defineComponent({
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hs-range {
|
||||
background-color: #f2f6fc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.both-left-sides {
|
||||
border-radius: 50% 0 0 50%;
|
||||
@ -271,3 +337,4 @@ export default defineComponent({
|
||||
border-radius: 0 50% 50% 0;
|
||||
}
|
||||
</style>
|
||||
*/
|
||||
309
src/components/selector/src/selector.tsx
Normal file
309
src/components/selector/src/selector.tsx
Normal file
@ -0,0 +1,309 @@
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
getCurrentInstance,
|
||||
unref
|
||||
} from "vue"
|
||||
import { addClass, removeClass, toggleClass } from "/@/utils/operate"
|
||||
import "./index.css"
|
||||
|
||||
let stayClass = "stay" //鼠标点击
|
||||
let activeClass = "hs-on" //鼠标移动上去
|
||||
let voidClass = "hs-off" //鼠标移开
|
||||
let inRange = "hs-range" //当前选中的两个元素之间的背景
|
||||
let bothLeftSides = "both-left-sides"
|
||||
let bothRightSides = "both-right-sides"
|
||||
let selectedDirection = "right" //默认从左往右，索引变大
|
||||
|
||||
let overList = []
|
||||
// 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
|
||||
let selectedList = []
|
||||
|
||||
export default defineComponent({
|
||||
name: "HsSelector",
|
||||
props: {
|
||||
HsKey: {
|
||||
type: Number || String,
|
||||
default: 0,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Array,
|
||||
default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
},
|
||||
// 回显数据的索引，长度必须是2
|
||||
echo: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["selectedVal"],
|
||||
setup(props, { emit }) {
|
||||
let vm: any
|
||||
let currentValue = props.value
|
||||
|
||||
let rateDisabled = computed(() => {
|
||||
return props.disabled
|
||||
})
|
||||
|
||||
let classes = computed(() => {
|
||||
let result = []
|
||||
let i = 0
|
||||
let threshold = currentValue
|
||||
if (currentValue !== Math.floor(currentValue)) {
|
||||
threshold--
|
||||
}
|
||||
for (; i < threshold; i++) {
|
||||
result.push(activeClass)
|
||||
}
|
||||
for (; i < props.max.length; i++) {
|
||||
result.push(voidClass)
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
// 鼠标移入
|
||||
const setCurrentValue = (index) => {
|
||||
if (props.disabled) return
|
||||
// 当选中一个元素后，开始添加背景色
|
||||
if (selectedList.length === 1) {
|
||||
if (overList.length < 1) overList.push({ index })
|
||||
|
||||
let firstIndex = overList[0].index
|
||||
|
||||
// 往右走，索引变大
|
||||
if (index > firstIndex) {
|
||||
selectedDirection = "right"
|
||||
toggleClass(
|
||||
false,
|
||||
bothRightSides,
|
||||
document.querySelector(".hs-select__item" + selectedList[0].index)
|
||||
)
|
||||
|
||||
while (index >= firstIndex) {
|
||||
addClass(
|
||||
document.querySelector(".hs-select__item" + firstIndex),
|
||||
inRange
|
||||
)
|
||||
firstIndex++
|
||||
}
|
||||
} else {
|
||||
selectedDirection = "left"
|
||||
toggleClass(
|
||||
true,
|
||||
bothRightSides,
|
||||
document.querySelector(".hs-select__item" + selectedList[0].index)
|
||||
)
|
||||
|
||||
while (index <= firstIndex) {
|
||||
addClass(
|
||||
document.querySelector(".hs-select__item" + firstIndex),
|
||||
inRange
|
||||
)
|
||||
firstIndex--
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addClass(document.querySelector("." + voidClass + index), activeClass)
|
||||
}
|
||||
|
||||
// 鼠标离开
|
||||
const resetCurrentValue = (index) => {
|
||||
if (props.disabled) return
|
||||
// 移除先检查是否选中 选中则返回false 不移除
|
||||
const currentHsDom = document.querySelector("." + voidClass + index)
|
||||
if (currentHsDom.className.includes(stayClass)) {
|
||||
return false
|
||||
} else {
|
||||
removeClass(currentHsDom, activeClass)
|
||||
}
|
||||
|
||||
// 当选中一个元素后，开始移除背景色
|
||||
if (selectedList.length === 1) {
|
||||
let firstIndex = overList[0].index
|
||||
if (index >= firstIndex) {
|
||||
for (let i = 0; i <= index; i++) {
|
||||
removeClass(
|
||||
document.querySelector(".hs-select__item" + i),
|
||||
inRange
|
||||
)
|
||||
}
|
||||
} else {
|
||||
while (index <= firstIndex) {
|
||||
removeClass(
|
||||
document.querySelector(".hs-select__item" + index),
|
||||
inRange
|
||||
)
|
||||
index++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标点击
|
||||
const selectValue = (index, item) => {
|
||||
if (props.disabled) return
|
||||
let len = selectedList.length
|
||||
|
||||
if (len < 2) {
|
||||
selectedList.push({ item, index })
|
||||
addClass(document.querySelector("." + voidClass + index), stayClass)
|
||||
|
||||
addClass(
|
||||
document.querySelector(".hs-select__item" + selectedList[0].index),
|
||||
bothLeftSides
|
||||
)
|
||||
|
||||
if (selectedList[1]) {
|
||||
if (selectedDirection === "right") {
|
||||
addClass(
|
||||
document.querySelector(
|
||||
".hs-select__item" + selectedList[1].index
|
||||
),
|
||||
bothRightSides
|
||||
)
|
||||
} else {
|
||||
addClass(
|
||||
document.querySelector(
|
||||
".hs-select__item" + selectedList[1].index
|
||||
),
|
||||
bothLeftSides
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (len === 1) {
|
||||
// 顺时针排序
|
||||
if (selectedDirection === "right") {
|
||||
emit("selectedVal", {
|
||||
left: selectedList[0].item,
|
||||
right: selectedList[1].item,
|
||||
whole: selectedList,
|
||||
})
|
||||
} else {
|
||||
emit("selectedVal", {
|
||||
left: selectedList[1].item,
|
||||
right: selectedList[0].item,
|
||||
whole: selectedList,
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
nextTick(() => {
|
||||
selectedList.forEach((v) => {
|
||||
removeClass(
|
||||
document.querySelector("." + voidClass + v.index),
|
||||
activeClass,
|
||||
stayClass
|
||||
)
|
||||
|
||||
removeClass(
|
||||
document.querySelector(".hs-select__item" + v.index),
|
||||
bothLeftSides,
|
||||
bothRightSides
|
||||
)
|
||||
})
|
||||
|
||||
selectedList = []
|
||||
overList = []
|
||||
for (let i = 0; i <= props.max.length; i++) {
|
||||
let currentDom = document.querySelector(".hs-select__item" + i)
|
||||
if (currentDom) {
|
||||
removeClass(currentDom, inRange)
|
||||
}
|
||||
}
|
||||
|
||||
selectedList.push({ item, index })
|
||||
addClass(document.querySelector("." + voidClass + index), stayClass)
|
||||
|
||||
addClass(
|
||||
document.querySelector(".hs-select__item" + selectedList[0].index),
|
||||
bothLeftSides
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 回显数据
|
||||
const echoView = (item) => {
|
||||
if (item.length === 0) return
|
||||
|
||||
if (item.length > 2 || item.length === 1) {
|
||||
throw "传入的数组长度必须是2"
|
||||
}
|
||||
|
||||
item.sort((a, b) => {
|
||||
return a - b
|
||||
})
|
||||
|
||||
addClass(
|
||||
vm.refs["hsdiv" + props.HsKey + item[0]],
|
||||
activeClass,
|
||||
stayClass
|
||||
)
|
||||
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides)
|
||||
|
||||
addClass(
|
||||
vm.refs["hsdiv" + props.HsKey + item[1]],
|
||||
activeClass,
|
||||
stayClass
|
||||
)
|
||||
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides)
|
||||
|
||||
while (item[1] >= item[0]) {
|
||||
addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange)
|
||||
item[0]++
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
vm = getCurrentInstance()
|
||||
nextTick(() => {
|
||||
echoView(props.echo)
|
||||
})
|
||||
})
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<table cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
{
|
||||
props.max.map((item, key) => {
|
||||
return <td
|
||||
data-index={props.HsKey}
|
||||
ref={`hstd${props.HsKey}${key}`}
|
||||
class={`hs-select__item${key}`}
|
||||
onMousemove={() => setCurrentValue(key)}
|
||||
onMouseleave={() => resetCurrentValue(key)}
|
||||
onClick={() => selectValue(key, item)}
|
||||
style={{
|
||||
cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
<div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
</td>
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)
|
||||
},
|
||||
})
|
||||
@ -57,16 +57,14 @@ export default {
|
||||
justify-content: flex-start;
|
||||
margin-left: 5px;
|
||||
.scroll-item {
|
||||
// border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
padding: 2px 8px;
|
||||
display: inline-block;
|
||||
// margin-right: 2px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
padding: 0 10px;
|
||||
padding: 0 4px 0 10px;
|
||||
}
|
||||
}
|
||||
.el-icon-close {
|
||||
|
||||
@ -17,5 +17,6 @@
|
||||
"button": "按钮组件",
|
||||
"cropping": "图片裁剪",
|
||||
"countTo": "数字动画",
|
||||
"selector": "选择器组件"
|
||||
"selector": "选择器组件",
|
||||
"flowChart": "流程图"
|
||||
}
|
||||
@ -17,5 +17,6 @@
|
||||
"button": "Button Components",
|
||||
"cropping": "Picture Cropping",
|
||||
"countTo": "Digital Animation",
|
||||
"selector": "Selector Components"
|
||||
"selector": "Selector Components",
|
||||
"flowChart": "flow Chart"
|
||||
}
|
||||
@ -103,7 +103,16 @@ const routes: Array<RouteRecordRaw> = [
|
||||
showLink: false,
|
||||
savedPosition: true
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: '/components/flowChart',
|
||||
// component: () => import(/* webpackChunkName: "components" */ '../views/components/flowChart/index.vue'),
|
||||
// meta: {
|
||||
// title: 'flowChart',
|
||||
// showLink: false,
|
||||
// savedPosition: true
|
||||
// }
|
||||
// }
|
||||
],
|
||||
meta: {
|
||||
icon: 'el-icon-menu',
|
||||
|
||||
16
src/shims-tsx.d.ts
vendored
Normal file
16
src/shims-tsx.d.ts
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
import Vue, { VNode } from "vue"
|
||||
|
||||
declare module '*.tsx' {
|
||||
import Vue from 'compatible-vue'
|
||||
export default Vue
|
||||
}
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface Element extends VNode { }
|
||||
interface ElementClass extends Vue { }
|
||||
interface IntrinsicElements {
|
||||
[elem: string]: any
|
||||
}
|
||||
}
|
||||
}
|
||||
60
src/views/components/flowChart/index.vue
Normal file
60
src/views/components/flowChart/index.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div id="container"></div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import "@logicflow/core/dist/style/index.css";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
const data = {
|
||||
// 节点
|
||||
nodes: [
|
||||
{
|
||||
id: 50,
|
||||
type: "rect",
|
||||
x: 100,
|
||||
y: 150,
|
||||
text: "你好",
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
type: "circle",
|
||||
x: 300,
|
||||
y: 150,
|
||||
},
|
||||
],
|
||||
// 边
|
||||
edges: [
|
||||
{
|
||||
type: "polyline",
|
||||
sourceNodeId: 50,
|
||||
targetNodeId: 21,
|
||||
},
|
||||
],
|
||||
};
|
||||
export default {
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
const lf = new LogicFlow({
|
||||
container: document.querySelector("#container"),
|
||||
stopScrollGraph: true,
|
||||
stopZoomGraph: true,
|
||||
width: 500,
|
||||
height: 500,
|
||||
grid: {
|
||||
type: "dot",
|
||||
size: 20,
|
||||
},
|
||||
});
|
||||
|
||||
lf.render(data);
|
||||
});
|
||||
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,22 +1,37 @@
|
||||
<template>
|
||||
<el-card class="box-card" style="margin:20px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基本使用</span>
|
||||
</div>
|
||||
</template>
|
||||
<Selector @selectedVal="selectedVal" />
|
||||
<h4>选中范围：{{ selectRange }}</h4>
|
||||
</el-card>
|
||||
<div>
|
||||
<el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
|
||||
<h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { ref } from "vue";
|
||||
import Selector from "/@/components/selector/index.vue";
|
||||
import Selector from "/@/components/selector";
|
||||
|
||||
export default {
|
||||
components: { Selector },
|
||||
setup() {
|
||||
let selectRange = ref(null);
|
||||
let dataLists = ref([
|
||||
{
|
||||
title: "基本使用",
|
||||
echo: [],
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
title: "回显模式",
|
||||
echo: [2, 7],
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedVal = ({ left, right, whole }) => {
|
||||
selectRange.value = `${left}-${right}`;
|
||||
@ -24,11 +39,9 @@ export default {
|
||||
|
||||
return {
|
||||
selectedVal,
|
||||
selectRange
|
||||
selectRange,
|
||||
dataLists,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@ -28,17 +28,21 @@
|
||||
|
||||
<script lang='ts'>
|
||||
import flop from "../components/flop/index.vue";
|
||||
import { ref, computed, onMounted, inject, nextTick } from "vue";
|
||||
import { ref, computed, onMounted, nextTick, onUpdated } from "vue";
|
||||
import { deviceDetection } from "../utils/deviceDetection";
|
||||
import { echartsJson } from "../api/mock";
|
||||
import { useEventListener, tryOnUnmounted } from "@vueuse/core";
|
||||
import {
|
||||
useEventListener,
|
||||
tryOnUnmounted,
|
||||
useTimeoutFn,
|
||||
} from "@vueuse/core";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
let brokenLine: any = null; //折线图实例
|
||||
export default {
|
||||
name: "welcome",
|
||||
components: {
|
||||
flop
|
||||
flop,
|
||||
},
|
||||
setup() {
|
||||
let mobile = ref(deviceDetection());
|
||||
@ -71,39 +75,39 @@ export default {
|
||||
brokenLine.setOption({
|
||||
title: {
|
||||
text: "上海 空气质量指数",
|
||||
left: "1%"
|
||||
left: "1%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "15%",
|
||||
bottom: "10%"
|
||||
bottom: "10%",
|
||||
},
|
||||
xAxis: {
|
||||
data: info.map(function(item) {
|
||||
data: info.map(function (item) {
|
||||
return item[0];
|
||||
})
|
||||
}),
|
||||
},
|
||||
yAxis: {},
|
||||
toolbox: {
|
||||
right: 10,
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: "none"
|
||||
yAxisIndex: "none",
|
||||
},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
startValue: "2014-06-01"
|
||||
startValue: "2014-06-01",
|
||||
},
|
||||
{
|
||||
type: "inside"
|
||||
}
|
||||
type: "inside",
|
||||
},
|
||||
],
|
||||
visualMap: {
|
||||
top: 50,
|
||||
@ -112,67 +116,67 @@ export default {
|
||||
{
|
||||
gt: 0,
|
||||
lte: 50,
|
||||
color: "#93CE07"
|
||||
color: "#93CE07",
|
||||
},
|
||||
{
|
||||
gt: 50,
|
||||
lte: 100,
|
||||
color: "#FBDB0F"
|
||||
color: "#FBDB0F",
|
||||
},
|
||||
{
|
||||
gt: 100,
|
||||
lte: 150,
|
||||
color: "#FC7D02"
|
||||
color: "#FC7D02",
|
||||
},
|
||||
{
|
||||
gt: 150,
|
||||
lte: 200,
|
||||
color: "#FD0100"
|
||||
color: "#FD0100",
|
||||
},
|
||||
{
|
||||
gt: 200,
|
||||
lte: 300,
|
||||
color: "#AA069F"
|
||||
color: "#AA069F",
|
||||
},
|
||||
{
|
||||
gt: 300,
|
||||
color: "#AC3B2A"
|
||||
}
|
||||
color: "#AC3B2A",
|
||||
},
|
||||
],
|
||||
outOfRange: {
|
||||
color: "#999"
|
||||
}
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
series: {
|
||||
name: "上海 空气质量指数",
|
||||
type: "line",
|
||||
data: info.map(function(item) {
|
||||
data: info.map(function (item) {
|
||||
return item[1];
|
||||
}),
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
color: "#333",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
yAxis: 50
|
||||
yAxis: 50,
|
||||
},
|
||||
{
|
||||
yAxis: 100
|
||||
yAxis: 100,
|
||||
},
|
||||
{
|
||||
yAxis: 150
|
||||
yAxis: 150,
|
||||
},
|
||||
{
|
||||
yAxis: 200
|
||||
yAxis: 200,
|
||||
},
|
||||
{
|
||||
yAxis: 300
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
yAxis: 300,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -182,9 +186,13 @@ export default {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
useEventListener("resize", () => {
|
||||
if (!brokenLine) return;
|
||||
brokenLine.resize();
|
||||
nextTick(() => {
|
||||
useEventListener("resize", () => {
|
||||
if (!brokenLine) return;
|
||||
useTimeoutFn(() => {
|
||||
brokenLine.resize()
|
||||
}, 180);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -198,9 +206,9 @@ export default {
|
||||
greetings,
|
||||
mobile,
|
||||
loading,
|
||||
openDepot
|
||||
openDepot,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { resolve } from 'path'
|
||||
import { UserConfigExport, ConfigEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import { loadEnv } from './build/utils'
|
||||
import { createProxy } from './build/proxy'
|
||||
import { viteMockServe } from 'vite-plugin-mock'
|
||||
@ -45,6 +46,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
viteMockServe({
|
||||
mockPath: 'mock',
|
||||
localEnabled: command === 'serve',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user