rcs5.0 commit
This commit is contained in:
wangxinfei
+23
@@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "lerna run serve",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "lerna run serve --scope=@rcs5.0 --stream",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npm run serve",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vue-cli-service serve",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "npm run serve",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs5.0",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "yarn serve",
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"bootstrap": "lerna bootstrap"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"lerna": "3.22.1",
|
||||||
|
"vue": "^2.6.14"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import VueDynamic from 'vue-dynamic'
|
||||||
|
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '/dynamic',
|
||||||
|
component: VueDynamic.Viewer
|
||||||
|
}
|
||||||
|
];
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import desktopRoutes from '../src/router/index'
|
||||||
|
|
||||||
|
export default desktopRoutes;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import routes from '../src/router/index'
|
||||||
|
|
||||||
|
export default routes;
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs_5.0",
|
||||||
|
"description": "description",
|
||||||
|
"authors": "author",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "pathToMain",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"build:electron": "cross-env IDE=electron vue-cli-service build",
|
||||||
|
"start:electron": "cross-env IDE=electron vue-cli-service serve",
|
||||||
|
"start:main:dev": " electron ./.electron.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@erayt/language": "^1.0.0",
|
||||||
|
"@erayt/titanOne-kernel":"^1.0.0",
|
||||||
|
"@erayt/titanOne-observer": "^5.0.0",
|
||||||
|
"@erayt/titanOne-vue":"^0.1.1",
|
||||||
|
"@erayt/titanOne-component-vue": "^1.0.0",
|
||||||
|
"core-js": "3.31.0",
|
||||||
|
"element-ui": "2.15.13",
|
||||||
|
"js-cookie": "3.0.1",
|
||||||
|
"nprogress": "0.2.0",
|
||||||
|
"vue": "2.7.14",
|
||||||
|
"vue-i18n": "8.22.2",
|
||||||
|
"vue-router": "3.6.5",
|
||||||
|
"vuedraggable": "2.24.3",
|
||||||
|
"vuex": "3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "7.21.8",
|
||||||
|
"@babel/eslint-parser": "7.21.8",
|
||||||
|
"vue-dynamic": "^1.0.57",
|
||||||
|
"vue-dynamic-theme": "^1.0.9",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"@erayt/eui2-themes": "3.2.32",
|
||||||
|
"@erayt/eui3.5-customize-themes": "^1.0.9",
|
||||||
|
"@erayt/titanOne-dll": "^3.2.33",
|
||||||
|
"@erayt/titanOne3.0-web-login": "^3.0.0",
|
||||||
|
"@erayt/titanOne-electron": "^3.1.69",
|
||||||
|
"@erayt/titanOne3.0-electron-login": "^3.1.65",
|
||||||
|
"@erayt/element-customize-themes": "^2.15.19",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"babel-plugin-dynamic-import-node": "2.3.3",
|
||||||
|
"babel-plugin-transform-remove-strict-mode": "0.0.2",
|
||||||
|
"copy-webpack-plugin": "11.0.0",
|
||||||
|
"eslint": "7.32.0",
|
||||||
|
"eslint-plugin-vue": "8.7.1",
|
||||||
|
"path-browserify": "1.0.1",
|
||||||
|
"prettier": "2.8.7",
|
||||||
|
"vue-template-compiler": "2.7.14",
|
||||||
|
"cache-loader": "4.1.0",
|
||||||
|
"sass": "1.63.4",
|
||||||
|
"sass-loader": "12.6.0",
|
||||||
|
"stylus-loader": "6.2.0",
|
||||||
|
"sass-resources-loader": "2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs_5.0",
|
||||||
|
"description": "description",
|
||||||
|
"authors": "author",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "pathToMain",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"build:electron": "cross-env IDE=electron vue-cli-service build",
|
||||||
|
"start:electron": "cross-env IDE=electron vue-cli-service serve",
|
||||||
|
"start:main:dev": " electron ./.electron.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@erayt/language": "^1.0.0",
|
||||||
|
"@erayt/titanOne-kernel":"^1.0.0",
|
||||||
|
"@erayt/titanOne-observer": "^5.0.0",
|
||||||
|
"@erayt/titanOne-vue":"^0.1.1",
|
||||||
|
"@erayt/titanOne-component-vue": "^1.0.0",
|
||||||
|
"core-js": "3.31.0",
|
||||||
|
"element-ui": "2.15.13",
|
||||||
|
"js-cookie": "3.0.1",
|
||||||
|
"nprogress": "0.2.0",
|
||||||
|
"vue": "2.7.14",
|
||||||
|
"vue-i18n": "8.22.2",
|
||||||
|
"vue-router": "3.6.5",
|
||||||
|
"vuedraggable": "2.24.3",
|
||||||
|
"vuex": "3.6.2",
|
||||||
|
"echarts": "4.9.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "7.21.8",
|
||||||
|
"@babel/eslint-parser": "7.21.8",
|
||||||
|
"vue-dynamic": "^1.0.57",
|
||||||
|
"vue-dynamic-theme": "^1.0.9",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"@erayt/eui2-themes": "3.2.32",
|
||||||
|
"@erayt/eui3.5-customize-themes": "^1.0.9",
|
||||||
|
"@erayt/titanOne-dll": "^3.2.33",
|
||||||
|
"@erayt/titanOne3.0-web-login": "^3.0.0",
|
||||||
|
"@erayt/titanOne-electron": "^3.1.69",
|
||||||
|
"@erayt/titanOne3.0-electron-login": "^3.1.65",
|
||||||
|
"@erayt/element-customize-themes": "^2.15.19",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"babel-plugin-dynamic-import-node": "2.3.3",
|
||||||
|
"babel-plugin-transform-remove-strict-mode": "0.0.2",
|
||||||
|
"copy-webpack-plugin": "11.0.0",
|
||||||
|
"eslint": "7.32.0",
|
||||||
|
"eslint-plugin-vue": "8.7.1",
|
||||||
|
"path-browserify": "1.0.1",
|
||||||
|
"prettier": "2.8.7",
|
||||||
|
"vue-template-compiler": "2.7.14",
|
||||||
|
"cache-loader": "4.1.0",
|
||||||
|
"sass": "1.63.4",
|
||||||
|
"sass-loader": "12.6.0",
|
||||||
|
"stylus-loader": "6.2.0",
|
||||||
|
"sass-resources-loader": "2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
{
|
||||||
|
"name": "rcs_5.0",
|
||||||
|
"description": "description",
|
||||||
|
"authors": "author",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "pathToMain",
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"build:electron": "cross-env IDE=electron vue-cli-service build",
|
||||||
|
"start:electron": "cross-env IDE=electron vue-cli-service serve",
|
||||||
|
"start:main:dev": " electron ./.electron.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@erayt/language": "^1.0.0",
|
||||||
|
"@erayt/titanOne-kernel":"^1.0.0",
|
||||||
|
"@erayt/titanOne-observer": "^5.0.0",
|
||||||
|
"@erayt/titanOne-vue":"^0.1.1",
|
||||||
|
"@erayt/titanOne-component-vue": "^1.0.0",
|
||||||
|
"core-js": "3.31.0",
|
||||||
|
"element-ui": "2.15.13",
|
||||||
|
"js-cookie": "3.0.1",
|
||||||
|
"nprogress": "0.2.0",
|
||||||
|
"vue": "2.7.14",
|
||||||
|
"vue-i18n": "8.22.2",
|
||||||
|
"vue-router": "3.6.5",
|
||||||
|
"vuedraggable": "2.24.3",
|
||||||
|
"vuex": "3.6.2",
|
||||||
|
"echarts": "4.9.0",
|
||||||
|
"axios": "0.27.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "7.21.8",
|
||||||
|
"@babel/eslint-parser": "7.21.8",
|
||||||
|
"vue-dynamic": "^1.0.57",
|
||||||
|
"vue-dynamic-theme": "^1.0.9",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"@erayt/eui2-themes": "3.2.32",
|
||||||
|
"@erayt/eui3.5-customize-themes": "^1.0.9",
|
||||||
|
"@erayt/titanOne-dll": "^3.2.33",
|
||||||
|
"@erayt/titanOne3.0-web-login": "^3.0.0",
|
||||||
|
"@erayt/titanOne-electron": "^3.1.69",
|
||||||
|
"@erayt/titanOne3.0-electron-login": "^3.1.65",
|
||||||
|
"@erayt/element-customize-themes": "^2.15.19",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-mock": "^1.0.0",
|
||||||
|
"@erayt/vue-cli-plugin-titanOne": "^1.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"babel-plugin-dynamic-import-node": "2.3.3",
|
||||||
|
"babel-plugin-transform-remove-strict-mode": "0.0.2",
|
||||||
|
"copy-webpack-plugin": "11.0.0",
|
||||||
|
"eslint": "7.32.0",
|
||||||
|
"eslint-plugin-vue": "8.7.1",
|
||||||
|
"path-browserify": "1.0.1",
|
||||||
|
"prettier": "2.8.7",
|
||||||
|
"vue-template-compiler": "2.7.14",
|
||||||
|
"cache-loader": "4.1.0",
|
||||||
|
"sass": "1.63.4",
|
||||||
|
"sass-loader": "12.6.0",
|
||||||
|
"stylus-loader": "6.2.0",
|
||||||
|
"sass-resources-loader": "2.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import {service} from "@erayt/titanOne-vue/lib/main.js"
|
||||||
|
|
||||||
|
import routeConfig from "../config/route.config";
|
||||||
|
import modules from "./store/modules";
|
||||||
|
import getters from "./store/getters";
|
||||||
|
import rxd from 'vue-dynamic';
|
||||||
|
import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
import "vue-dynamic-theme";
|
||||||
|
rxd.titan.init();
|
||||||
|
function handleCustomizeEvent() {
|
||||||
|
Eui.Ipc.addSubscribes(
|
||||||
|
{
|
||||||
|
"edit:phoenix:page": () => {
|
||||||
|
Eui.Comm.postToRemote({
|
||||||
|
url: "loginAfter.action",
|
||||||
|
hostKey: "phoenix",
|
||||||
|
},res=>{
|
||||||
|
if(res.success){
|
||||||
|
const result = res.data.result;
|
||||||
|
sessionStorage.setItem("user_loginId", result.loginId);
|
||||||
|
sessionStorage.setItem("loginType", "ecas");
|
||||||
|
window.open("/#/project");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ scopeId: Eui.scopeId }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// import rxd from 'vue-dynamic';
|
||||||
|
// import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
// rxd.titan.init();
|
||||||
|
|
||||||
|
service.registerApplication("rcs_5.0",{
|
||||||
|
routeConfig,
|
||||||
|
getters,
|
||||||
|
modules
|
||||||
|
})
|
||||||
|
|
||||||
|
service.load();
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import {service} from "@erayt/titanOne-vue/lib/main.js"
|
||||||
|
|
||||||
|
import routeConfig from "../config/route.config";
|
||||||
|
import modules from "./store/modules";
|
||||||
|
import getters from "./store/getters";
|
||||||
|
import rxd from 'vue-dynamic';
|
||||||
|
import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
import "vue-dynamic-theme";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
|
rxd.titan.init();
|
||||||
|
function handleCustomizeEvent() {
|
||||||
|
Eui.Ipc.addSubscribes(
|
||||||
|
{
|
||||||
|
"edit:phoenix:page": () => {
|
||||||
|
Eui.Comm.postToRemote({
|
||||||
|
url: "loginAfter.action",
|
||||||
|
hostKey: "phoenix",
|
||||||
|
},res=>{
|
||||||
|
if(res.success){
|
||||||
|
const result = res.data.result;
|
||||||
|
sessionStorage.setItem("user_loginId", result.loginId);
|
||||||
|
sessionStorage.setItem("loginType", "ecas");
|
||||||
|
window.open("/#/project");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ scopeId: Eui.scopeId }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
|
||||||
|
// import rxd from 'vue-dynamic';
|
||||||
|
// import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
// rxd.titan.init();
|
||||||
|
|
||||||
|
service.registerApplication("rcs_5.0",{
|
||||||
|
routeConfig,
|
||||||
|
getters,
|
||||||
|
modules
|
||||||
|
})
|
||||||
|
|
||||||
|
service.load();
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import {service} from "@erayt/titanOne-vue/lib/main.js"
|
||||||
|
|
||||||
|
import routeConfig from "../config/route.config";
|
||||||
|
import modules from "./store/modules";
|
||||||
|
import getters from "./store/getters";
|
||||||
|
import rxd from 'vue-dynamic';
|
||||||
|
import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
import "vue-dynamic-theme";
|
||||||
|
import ECharts from './plugins/echarts';
|
||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
|
rxd.titan.init();
|
||||||
|
function handleCustomizeEvent() {
|
||||||
|
Eui.Ipc.addSubscribes(
|
||||||
|
{
|
||||||
|
"edit:phoenix:page": () => {
|
||||||
|
Eui.Comm.postToRemote({
|
||||||
|
url: "loginAfter.action",
|
||||||
|
hostKey: "phoenix",
|
||||||
|
},res=>{
|
||||||
|
if(res.success){
|
||||||
|
const result = res.data.result;
|
||||||
|
sessionStorage.setItem("user_loginId", result.loginId);
|
||||||
|
sessionStorage.setItem("loginType", "ecas");
|
||||||
|
window.open("/#/project");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ scopeId: Eui.scopeId }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.use(ECharts)
|
||||||
|
|
||||||
|
// import rxd from 'vue-dynamic';
|
||||||
|
// import 'vue-dynamic/dist/Dynamic.css';
|
||||||
|
// rxd.titan.init();
|
||||||
|
|
||||||
|
service.registerApplication("rcs_5.0",{
|
||||||
|
routeConfig,
|
||||||
|
getters,
|
||||||
|
modules
|
||||||
|
})
|
||||||
|
|
||||||
|
service.load();
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const ECharts = {
|
||||||
|
install: function (Vue, options) {
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
Vue.component('v-chart', {
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement('div', this.$slots.default);
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.options);
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
options: Object
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (newVal) {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.setOption(newVal, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy: function () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ECharts;
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const ECharts = {
|
||||||
|
install: function (Vue, options) {
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
Vue.component('v-chart', {
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement('div', this.$slots.default);
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.options);
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
options: Object
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (newVal) {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.setOption(newVal, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy: function () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ECharts;
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const ECharts = {
|
||||||
|
install: function (Vue, options) {
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
Vue.component('chartComponent', {
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement('div', this.$slots.default);
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.options);
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
options: Object
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (newVal) {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.setOption(newVal, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy: function () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ECharts;
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const ECharts = {
|
||||||
|
install: function (Vue, options) {
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
Vue.component('v-chart', {
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement('div', this.$slots.default);
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.chart = echarts.init(this.$el);
|
||||||
|
this.chart.setOption(this.options);
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
options: Object
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (newVal) {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.setOption(newVal, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy: function () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ECharts;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export default [
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export default [
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/test",
|
||||||
|
component: () => import("../views/test"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/directive",
|
||||||
|
component: () => import("../views/permisson/directive"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/directive",
|
||||||
|
component: () => import("../views/permisson/directive.vue"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/test",
|
||||||
|
component: () => import("../views/test"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/chart",
|
||||||
|
component: () => import("../views/charts"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/chart",
|
||||||
|
component: () => import("../views/charts/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/chart2",
|
||||||
|
component: () => import("../views/charts/index2"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/chart",
|
||||||
|
component: () => import("../views/charts/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/chart2",
|
||||||
|
component: () => import("../views/charts/index2"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/x-input",
|
||||||
|
component: () => import("../views/x-input"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: "/chart",
|
||||||
|
component: () => import("../views/charts/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/chart2",
|
||||||
|
component: () => import("../views/charts/index2"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/numberInput",
|
||||||
|
component: () => import("../views/numberInput"),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const names = [
|
||||||
|
'Orange',
|
||||||
|
'Tomato',
|
||||||
|
'Apple',
|
||||||
|
'Sakana',
|
||||||
|
'Banana',
|
||||||
|
'Iwashi',
|
||||||
|
'Snappy Fish',
|
||||||
|
'Lemon',
|
||||||
|
'Pasta'
|
||||||
|
];
|
||||||
|
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||||
|
const shuffle = (array) => {
|
||||||
|
let currentIndex = array.length;
|
||||||
|
let randomIndex = 0;
|
||||||
|
while (currentIndex > 0) {
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
[array[currentIndex], array[randomIndex]] = [
|
||||||
|
array[randomIndex],
|
||||||
|
array[currentIndex]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
const generateRankingData = () => {
|
||||||
|
const map = new Map();
|
||||||
|
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||||
|
for (const _ of years) {
|
||||||
|
const shuffleArray = shuffle(defaultRanking);
|
||||||
|
names.forEach((name, i) => {
|
||||||
|
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
const generateSeriesList = () => {
|
||||||
|
const seriesList = [];
|
||||||
|
const rankingMap = generateRankingData();
|
||||||
|
rankingMap.forEach((data, name) => {
|
||||||
|
const series = {
|
||||||
|
name,
|
||||||
|
symbolSize: 20,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
endLabel: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{a}',
|
||||||
|
distance: 20
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
data
|
||||||
|
};
|
||||||
|
seriesList.push(series);
|
||||||
|
});
|
||||||
|
return seriesList;
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: 'Bump Chart (Ranking)'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 30,
|
||||||
|
right: 110,
|
||||||
|
bottom: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: years
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: '#{value}'
|
||||||
|
},
|
||||||
|
inverse: true,
|
||||||
|
interval: 1,
|
||||||
|
min: 1,
|
||||||
|
max: names.length
|
||||||
|
},
|
||||||
|
series: generateSeriesList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const names = [
|
||||||
|
'Orange',
|
||||||
|
'Tomato',
|
||||||
|
'Apple',
|
||||||
|
'Sakana',
|
||||||
|
'Banana',
|
||||||
|
'Iwashi',
|
||||||
|
'Snappy Fish',
|
||||||
|
'Lemon',
|
||||||
|
'Pasta'
|
||||||
|
];
|
||||||
|
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||||
|
const shuffle = (array) => {
|
||||||
|
let currentIndex = array.length;
|
||||||
|
let randomIndex = 0;
|
||||||
|
while (currentIndex > 0) {
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
[array[currentIndex], array[randomIndex]] = [
|
||||||
|
array[randomIndex],
|
||||||
|
array[currentIndex]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
const generateRankingData = () => {
|
||||||
|
const map = new Map();
|
||||||
|
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||||
|
for (const _ of years) {
|
||||||
|
const shuffleArray = shuffle(defaultRanking);
|
||||||
|
names.forEach((name, i) => {
|
||||||
|
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
const generateSeriesList = () => {
|
||||||
|
const seriesList = [];
|
||||||
|
const rankingMap = generateRankingData();
|
||||||
|
rankingMap.forEach((data, name) => {
|
||||||
|
const series = {
|
||||||
|
name,
|
||||||
|
symbolSize: 20,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
endLabel: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{a}',
|
||||||
|
distance: 20
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
data
|
||||||
|
};
|
||||||
|
seriesList.push(series);
|
||||||
|
});
|
||||||
|
return seriesList;
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: 'Bump Chart (Ranking)'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 30,
|
||||||
|
right: 110,
|
||||||
|
bottom: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: years
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: '#{value}'
|
||||||
|
},
|
||||||
|
inverse: true,
|
||||||
|
interval: 1,
|
||||||
|
min: 1,
|
||||||
|
max: names.length
|
||||||
|
},
|
||||||
|
series: generateSeriesList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="optionCalculator">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div id="chart">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
var myChart = echarts.init(document.getElementById('chart'));
|
||||||
|
// 绘制图表
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: 'ECharts 入门示例'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
var myChart = echarts.init(document.getElementById('chart'));
|
||||||
|
// 绘制图表
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: 'ECharts 入门示例'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<chartComponent :options="chartOptions"></chartComponent>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const names = [
|
||||||
|
'Orange',
|
||||||
|
'Tomato',
|
||||||
|
'Apple',
|
||||||
|
'Sakana',
|
||||||
|
'Banana',
|
||||||
|
'Iwashi',
|
||||||
|
'Snappy Fish',
|
||||||
|
'Lemon',
|
||||||
|
'Pasta'
|
||||||
|
];
|
||||||
|
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||||
|
const shuffle = (array) => {
|
||||||
|
let currentIndex = array.length;
|
||||||
|
let randomIndex = 0;
|
||||||
|
while (currentIndex > 0) {
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
[array[currentIndex], array[randomIndex]] = [
|
||||||
|
array[randomIndex],
|
||||||
|
array[currentIndex]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
const generateRankingData = () => {
|
||||||
|
const map = new Map();
|
||||||
|
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||||
|
for (const _ of years) {
|
||||||
|
const shuffleArray = shuffle(defaultRanking);
|
||||||
|
names.forEach((name, i) => {
|
||||||
|
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
const generateSeriesList = () => {
|
||||||
|
const seriesList = [];
|
||||||
|
const rankingMap = generateRankingData();
|
||||||
|
rankingMap.forEach((data, name) => {
|
||||||
|
const series = {
|
||||||
|
name,
|
||||||
|
symbolSize: 20,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
endLabel: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{a}',
|
||||||
|
distance: 20
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
data
|
||||||
|
};
|
||||||
|
seriesList.push(series);
|
||||||
|
});
|
||||||
|
return seriesList;
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: 'Bump Chart (Ranking)'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 30,
|
||||||
|
right: 110,
|
||||||
|
bottom: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: years
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: '#{value}'
|
||||||
|
},
|
||||||
|
inverse: true,
|
||||||
|
interval: 1,
|
||||||
|
min: 1,
|
||||||
|
max: names.length
|
||||||
|
},
|
||||||
|
series: generateSeriesList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const names = [
|
||||||
|
'Orange',
|
||||||
|
'Tomato',
|
||||||
|
'Apple',
|
||||||
|
'Sakana',
|
||||||
|
'Banana',
|
||||||
|
'Iwashi',
|
||||||
|
'Snappy Fish',
|
||||||
|
'Lemon',
|
||||||
|
'Pasta'
|
||||||
|
];
|
||||||
|
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
|
||||||
|
const shuffle = (array) => {
|
||||||
|
let currentIndex = array.length;
|
||||||
|
let randomIndex = 0;
|
||||||
|
while (currentIndex > 0) {
|
||||||
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex--;
|
||||||
|
[array[currentIndex], array[randomIndex]] = [
|
||||||
|
array[randomIndex],
|
||||||
|
array[currentIndex]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
};
|
||||||
|
const generateRankingData = () => {
|
||||||
|
const map = new Map();
|
||||||
|
const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
|
||||||
|
for (const _ of years) {
|
||||||
|
const shuffleArray = shuffle(defaultRanking);
|
||||||
|
names.forEach((name, i) => {
|
||||||
|
map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
const generateSeriesList = () => {
|
||||||
|
const seriesList = [];
|
||||||
|
const rankingMap = generateRankingData();
|
||||||
|
rankingMap.forEach((data, name) => {
|
||||||
|
const series = {
|
||||||
|
name,
|
||||||
|
symbolSize: 20,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
endLabel: {
|
||||||
|
show: true,
|
||||||
|
formatter: '{a}',
|
||||||
|
distance: 20
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 4
|
||||||
|
},
|
||||||
|
data
|
||||||
|
};
|
||||||
|
seriesList.push(series);
|
||||||
|
});
|
||||||
|
return seriesList;
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: 'Bump Chart (Ranking)'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 30,
|
||||||
|
right: 110,
|
||||||
|
bottom: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: years
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
margin: 30,
|
||||||
|
fontSize: 16,
|
||||||
|
formatter: '#{value}'
|
||||||
|
},
|
||||||
|
inverse: true,
|
||||||
|
interval: 1,
|
||||||
|
min: 1,
|
||||||
|
max: names.length
|
||||||
|
},
|
||||||
|
series: generateSeriesList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>哈哈哈哈哈哈哈</div>
|
||||||
|
<div style="height: 300px;">
|
||||||
|
<v-chart :options="chartOptions"></v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 123,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '1,234',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '1234',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '1223.4',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '1,223.4',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '1,2,23.4',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '11,223.4',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '11223.4',
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" :digit="6" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" :digit="6" :disabled="true" @sendValue="sendValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" :digit="6" :disabled="true" @getNumberValue="getNumberValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getNumberValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" :digit="6" @getNumberValue="getNumberValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getNumberValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
金额：<numberInput :value="inputValue" :digit="6" @getNumberValue="getNumberValue"></numberInput>
|
||||||
|
<v-chart :options="chartOptions" style="height: 300px;"></v-chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import numberInput from '../numberInput'
|
||||||
|
export default {
|
||||||
|
name: 'chart',
|
||||||
|
components: {
|
||||||
|
numberInput
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 11234.5,
|
||||||
|
chartOptions: {
|
||||||
|
// ECharts 配置项...
|
||||||
|
title: {
|
||||||
|
text: '示例图表'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10, 20]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getNumberValue (data) {
|
||||||
|
console.log('data-------', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.value.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value
|
||||||
|
this.inputValueCopy = this.value
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/;
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value;
|
||||||
|
this.inputValueCopy = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
let newValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
this.inputValue = newValue
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValue.replace(/,/g, '')
|
||||||
|
this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus">
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<el-input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<el-input type="text" v-model="inputValue" @input="handleInput" @blur="handleBlur" @focus="handleFocus" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
digit: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<el-input type="text" v-model="inputValue" :disabled="disabled" @input="handleInput" @blur="handleBlur" @focus="handleFocus" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
digit: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('sendValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<el-input type="text" v-model="inputValue" :disabled="disabled" @input="handleInput" @blur="handleBlur" @focus="handleFocus" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
digit: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(event) {
|
||||||
|
let value = event.target.value;
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('getNumberValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<el-input type="text" v-model="inputValue" :disabled="disabled" @input="handleInput" @blur="handleBlur" @focus="handleFocus" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'numberInput',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
digit: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
inputValueCopy: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.inputValue = this.value ? this.value.toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) : '' // 转换千分位
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleInput(value) {
|
||||||
|
// 使用正则表达式限制只能输入数字、指定英文和一个小数点
|
||||||
|
const regex = /^[0-9bkmBKM]*\.?[0-9bkmBKM]*$/
|
||||||
|
// 如果输入的值不符合正则规则，则回退到上一次的值
|
||||||
|
if (!regex.test(value)) {
|
||||||
|
this.inputValue = this.inputValueCopy
|
||||||
|
} else {
|
||||||
|
this.inputValue = value
|
||||||
|
this.inputValueCopy = value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBlur () {
|
||||||
|
if (this.inputValue) {
|
||||||
|
let lastLetter = this.getLastLetter(this.inputValue)
|
||||||
|
let firstLetter = this.getFirstLetter(this.inputValue)
|
||||||
|
let num = firstLetter ? (this.inputValue.split(firstLetter)[0].replace(/[a-zA-Z]/g, '') * 1) : (this.inputValue.replace(/[a-zA-Z]/g, '') * 1) // 去除字母
|
||||||
|
let unit = 0
|
||||||
|
if (lastLetter === 'k') {
|
||||||
|
unit = 3
|
||||||
|
} else if (lastLetter === 'm') {
|
||||||
|
unit = 6
|
||||||
|
} else if (lastLetter === 'b') {
|
||||||
|
unit = 9
|
||||||
|
}
|
||||||
|
this.inputValue = (num * Math.pow(10, unit)).toLocaleString('en-US', {
|
||||||
|
minimumFractionDigits: this.digit,
|
||||||
|
maximumFractionDigits: this.digit
|
||||||
|
}) // 转换千分位
|
||||||
|
}
|
||||||
|
this.$emit('getNumberValue', this.inputValue)
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.inputValue = this.inputValueCopy = this.inputValue.replace(/,/g, '')
|
||||||
|
},
|
||||||
|
// 获取第一个字母
|
||||||
|
getFirstLetter(str) {
|
||||||
|
return str.match(/[a-zA-Z]/)?.[0] || ''
|
||||||
|
},
|
||||||
|
// 获取最后一个字母
|
||||||
|
getLastLetter(str) {
|
||||||
|
const letters = str.match(/[a-zA-Z]/g) // 使用正则表达式匹配所有字母
|
||||||
|
if (letters) {
|
||||||
|
return letters[letters.length - 1] // 返回最后一个字母
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user