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