Minor fix
This commit is contained in:
parent
f0b78d86d8
commit
d0e03840fe
|
@ -1126,6 +1126,23 @@
|
||||||
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
|
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@npmcli/move-file": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/@npmcli/move-file/download/@npmcli/move-file-1.0.1.tgz",
|
||||||
|
"integrity": "sha1-3hAwcNrA9IzknPZpPCOvWcD3BGQ=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"mkdirp": "^1.0.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"mkdirp": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
|
||||||
|
"integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@soda/friendly-errors-webpack-plugin": {
|
"@soda/friendly-errors-webpack-plugin": {
|
||||||
"version": "1.7.1",
|
"version": "1.7.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
|
||||||
|
@ -3745,6 +3762,189 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"compression-webpack-plugin": {
|
||||||
|
"version": "6.0.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/compression-webpack-plugin/download/compression-webpack-plugin-6.0.4.tgz?cache=0&sync_timestamp=1603716941687&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcompression-webpack-plugin%2Fdownload%2Fcompression-webpack-plugin-6.0.4.tgz",
|
||||||
|
"integrity": "sha1-UkaZwK1OlMqw6xmcc04pH2q2hbk=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"cacache": "^15.0.5",
|
||||||
|
"find-cache-dir": "^3.3.1",
|
||||||
|
"schema-utils": "^3.0.0",
|
||||||
|
"serialize-javascript": "^5.0.1",
|
||||||
|
"webpack-sources": "^1.4.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"cacache": {
|
||||||
|
"version": "15.0.5",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-15.0.5.tgz",
|
||||||
|
"integrity": "sha1-aRYoM9opFw1nMjNGQ8YOAF9fF9A=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@npmcli/move-file": "^1.0.1",
|
||||||
|
"chownr": "^2.0.0",
|
||||||
|
"fs-minipass": "^2.0.0",
|
||||||
|
"glob": "^7.1.4",
|
||||||
|
"infer-owner": "^1.0.4",
|
||||||
|
"lru-cache": "^6.0.0",
|
||||||
|
"minipass": "^3.1.1",
|
||||||
|
"minipass-collect": "^1.0.2",
|
||||||
|
"minipass-flush": "^1.0.5",
|
||||||
|
"minipass-pipeline": "^1.2.2",
|
||||||
|
"mkdirp": "^1.0.3",
|
||||||
|
"p-map": "^4.0.0",
|
||||||
|
"promise-inflight": "^1.0.1",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
|
"ssri": "^8.0.0",
|
||||||
|
"tar": "^6.0.2",
|
||||||
|
"unique-filename": "^1.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chownr": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"find-cache-dir": {
|
||||||
|
"version": "3.3.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
|
||||||
|
"integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"commondir": "^1.0.1",
|
||||||
|
"make-dir": "^3.0.2",
|
||||||
|
"pkg-dir": "^4.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"find-up": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-4.1.0.tgz?cache=0&sync_timestamp=1597169795121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-4.1.0.tgz",
|
||||||
|
"integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"locate-path": "^5.0.0",
|
||||||
|
"path-exists": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"locate-path": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
|
||||||
|
"integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"p-locate": "^4.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lru-cache": {
|
||||||
|
"version": "6.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427573763&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
|
||||||
|
"integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"yallist": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"make-dir": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
|
||||||
|
"integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"semver": "^6.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mkdirp": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
|
||||||
|
"integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"p-locate": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz?cache=0&sync_timestamp=1597081369770&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-locate%2Fdownload%2Fp-locate-4.1.0.tgz",
|
||||||
|
"integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"p-limit": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"p-map": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/p-map/download/p-map-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"aggregate-error": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"path-exists": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"pkg-dir": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602859056682&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
|
||||||
|
"integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"find-up": "^4.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rimraf": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz",
|
||||||
|
"integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"glob": "^7.1.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"schema-utils": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-3.0.0.tgz",
|
||||||
|
"integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/json-schema": "^7.0.6",
|
||||||
|
"ajv": "^6.12.5",
|
||||||
|
"ajv-keywords": "^3.5.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"semver": {
|
||||||
|
"version": "6.3.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz",
|
||||||
|
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"serialize-javascript": {
|
||||||
|
"version": "5.0.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/serialize-javascript/download/serialize-javascript-5.0.1.tgz?cache=0&sync_timestamp=1599740668657&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fserialize-javascript%2Fdownload%2Fserialize-javascript-5.0.1.tgz",
|
||||||
|
"integrity": "sha1-eIbshIBJpGJGepfT2Rjrsqr5NPQ=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"randombytes": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ssri": {
|
||||||
|
"version": "8.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.0.tgz",
|
||||||
|
"integrity": "sha1-ecp04h+M6u3fy0uQFDxFi42YiAg=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"minipass": "^3.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"yallist": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
|
||||||
|
@ -7573,6 +7773,24 @@
|
||||||
"minipass": "^3.0.0"
|
"minipass": "^3.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"minizlib": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/minizlib/download/minizlib-2.1.2.tgz?cache=0&sync_timestamp=1597445621090&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminizlib%2Fdownload%2Fminizlib-2.1.2.tgz",
|
||||||
|
"integrity": "sha1-6Q00Zrogm5MkUVCKEc49NjIUWTE=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"minipass": "^3.0.0",
|
||||||
|
"yallist": "^4.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"yallist": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"mississippi": {
|
"mississippi": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
|
||||||
|
@ -10702,6 +10920,40 @@
|
||||||
"integrity": "sha1-ofzMBrWNth/XpF2i2kT186Pme6I=",
|
"integrity": "sha1-ofzMBrWNth/XpF2i2kT186Pme6I=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"tar": {
|
||||||
|
"version": "6.0.5",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/tar/download/tar-6.0.5.tgz?cache=0&sync_timestamp=1597445621518&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftar%2Fdownload%2Ftar-6.0.5.tgz",
|
||||||
|
"integrity": "sha1-vegVCG4Qs58dzSmOidWW4VNeIA8=",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"chownr": "^2.0.0",
|
||||||
|
"fs-minipass": "^2.0.0",
|
||||||
|
"minipass": "^3.0.0",
|
||||||
|
"minizlib": "^2.1.1",
|
||||||
|
"mkdirp": "^1.0.3",
|
||||||
|
"yallist": "^4.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"chownr": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"mkdirp": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
|
||||||
|
"integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"yallist": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"terser": {
|
"terser": {
|
||||||
"version": "4.8.0",
|
"version": "4.8.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/terser/download/terser-4.8.0.tgz?cache=0&sync_timestamp=1603374212519&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser%2Fdownload%2Fterser-4.8.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/terser/download/terser-4.8.0.tgz?cache=0&sync_timestamp=1603374212519&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser%2Fdownload%2Fterser-4.8.0.tgz",
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-service": "~4.5.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"babel-plugin-component": "^1.1.1",
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"compression-webpack-plugin": "^6.0.4",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-vue": "^6.2.2",
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
"px2rem-loader": "^0.1.9",
|
"px2rem-loader": "^0.1.9",
|
||||||
|
@ -37,7 +38,7 @@
|
||||||
"node": true
|
"node": true
|
||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"plugin:vue/essential",
|
"plugin:vue/recommended",
|
||||||
"eslint:recommended"
|
"eslint:recommended"
|
||||||
],
|
],
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<VirtualKeyboard/>
|
<VirtualKeyboard />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,38 +1,54 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-stage :config="{height: height, width: width}" @tap="onParentClick" @click="onParentClick"
|
<v-stage
|
||||||
:style="{transform: 'scale(' + scale +')', 'transform-origin': '0 0', 'margin-bottom': '-' + height*(1-scale) + 'px'}">
|
:config="{height: height, width: width}"
|
||||||
|
:style="{transform: 'scale(' + scale +')', 'transform-origin': '0 0', 'margin-bottom': '-' + height*(1-scale) + 'px'}"
|
||||||
|
@tap="onParentClick"
|
||||||
|
@click="onParentClick"
|
||||||
|
>
|
||||||
<v-layer>
|
<v-layer>
|
||||||
<v-rect
|
<v-rect
|
||||||
:config="{x:0,y:0,width:width,height:height,stroke: 'cyan',strokeWidth: 1 / this.scale, dash: [5 / this.scale, 5 / this.scale],preventDefault:false}"></v-rect>
|
:config="{x:0,y:0,width:width,height:height,stroke: 'cyan',strokeWidth: 1 / scale, dash: [5 / scale, 5 / scale],preventDefault:false}"
|
||||||
|
/>
|
||||||
<v-rect
|
<v-rect
|
||||||
:config="{x:4,y:16,width:slotSize+24,height:slotSize*24+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale],preventDefault:false}"></v-rect>
|
:config="{x:4,y:16,width:slotSize+24,height:slotSize*24+24,stroke: 'gold',strokeWidth: 1 / scale, dash: [3 / scale, 3 / scale],preventDefault:false}"
|
||||||
|
/>
|
||||||
<v-rect
|
<v-rect
|
||||||
:config="{x:16,y:height - slotSize - 28,width:slotSize*24+24,height:slotSize+24,stroke: 'gold',strokeWidth: 1 / this.scale, dash: [3 / this.scale, 3 / this.scale],preventDefault:false}"></v-rect>
|
:config="{x:16,y:height - slotSize - 28,width:slotSize*24+24,height:slotSize+24,stroke: 'gold',strokeWidth: 1 / scale, dash: [3 / scale, 3 / scale],preventDefault:false}"
|
||||||
<v-group @tap="toggle" @click="toggle">
|
/>
|
||||||
<v-rect :config="getButtonConfig(config.vToggle, 'lightyellow')"></v-rect>
|
<v-group
|
||||||
<v-text :config="getTextConfig(config.vToggle, $t('toggle'))"></v-text>
|
@tap="toggle"
|
||||||
|
@click="toggle"
|
||||||
|
>
|
||||||
|
<v-rect :config="getButtonConfig(config.vToggle, 'lightyellow')" />
|
||||||
|
<v-text :config="getTextConfig(config.vToggle, $t('toggle'))" />
|
||||||
</v-group>
|
</v-group>
|
||||||
</v-layer>
|
</v-layer>
|
||||||
<v-layer>
|
<v-layer>
|
||||||
<v-group v-for="button in buttonsWithoutCurrent" :key="firstNotEmpty(button.id, button.key)"
|
<v-group
|
||||||
@tap="() => onActivated(button)"
|
v-for="button in buttonsWithoutCurrent"
|
||||||
@click="() => onActivated(button)">
|
:key="firstNotEmpty(button.id, button.key)"
|
||||||
<v-rect :config="getButtonConfig(button, 'darkorange')"></v-rect>
|
@tap="() => onActivated(button)"
|
||||||
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
|
@click="() => onActivated(button)"
|
||||||
|
>
|
||||||
|
<v-rect :config="getButtonConfig(button, 'darkorange')" />
|
||||||
|
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))" />
|
||||||
</v-group>
|
</v-group>
|
||||||
</v-layer>
|
</v-layer>
|
||||||
<v-layer v-if="toggleState">
|
<v-layer v-if="toggleState">
|
||||||
<v-group v-for="button in buttonsExtendWithoutCurrent" :key="firstNotEmpty(button.id, button.key)"
|
<v-group
|
||||||
@tap="() => onActivated(button)"
|
v-for="button in buttonsExtendWithoutCurrent"
|
||||||
@click="() => onActivated(button)">
|
:key="firstNotEmpty(button.id, button.key)"
|
||||||
<v-rect :config="getButtonConfig(button, 'lightyellow')"></v-rect>
|
@tap="() => onActivated(button)"
|
||||||
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))"></v-text>
|
@click="() => onActivated(button)"
|
||||||
|
>
|
||||||
|
<v-rect :config="getButtonConfig(button, 'lightyellow')" />
|
||||||
|
<v-text :config="getTextConfig(button, firstNotEmpty(button.alias, button.key))" />
|
||||||
</v-group>
|
</v-group>
|
||||||
</v-layer>
|
</v-layer>
|
||||||
<v-layer v-if="!isEmpty(currentButtonId)">
|
<v-layer v-if="!isEmpty(currentButtonId)">
|
||||||
<v-rect :config="getButtonConfig(currentButton, 'lightcyan')"></v-rect>
|
<v-rect :config="getButtonConfig(currentButton, 'lightcyan')" />
|
||||||
<v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))"></v-text>
|
<v-text :config="getTextConfig(currentButton, firstNotEmpty(currentButton.alias, currentButton.key))" />
|
||||||
</v-layer>
|
</v-layer>
|
||||||
</v-stage>
|
</v-stage>
|
||||||
<el-drawer
|
<el-drawer
|
||||||
|
@ -40,105 +56,140 @@
|
||||||
:visible.sync="drawer"
|
:visible.sync="drawer"
|
||||||
direction="rtl"
|
direction="rtl"
|
||||||
size="40%"
|
size="40%"
|
||||||
:with-header="true">
|
:with-header="true"
|
||||||
|
>
|
||||||
<el-form label-width="50px">
|
<el-form label-width="50px">
|
||||||
<el-form-item :label="$t('X')">
|
<el-form-item :label="$t('X')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.X"
|
v-model="currentButton.rectangle.X"
|
||||||
:max="width" :min="0" :step="5"
|
:max="width"
|
||||||
show-input>
|
:min="0"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Y')">
|
<el-form-item :label="$t('Y')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Y"
|
v-model="currentButton.rectangle.Y"
|
||||||
:max="height" :min="0" :step="5"
|
:max="height"
|
||||||
show-input>
|
:min="0"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Width')">
|
<el-form-item :label="$t('Width')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Width"
|
v-model="currentButton.rectangle.Width"
|
||||||
:max="width" :min="5" :step="5"
|
:max="width"
|
||||||
show-input>
|
:min="5"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Height')">
|
<el-form-item :label="$t('Height')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Height"
|
v-model="currentButton.rectangle.Height"
|
||||||
:max="height" :min="5" :step="5"
|
:max="height"
|
||||||
show-input>
|
:min="5"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
<el-button v-if="landscape && !isEmpty(currentButtonId)"
|
<el-button
|
||||||
type="primary" icon="el-icon-edit" circle @click="drawer=true"
|
v-if="landscape && !isEmpty(currentButtonId)"
|
||||||
class="button-float"></el-button>
|
type="primary"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
circle
|
||||||
|
class="button-float"
|
||||||
|
@click="drawer=true"
|
||||||
|
/>
|
||||||
<el-form label-width="80px">
|
<el-form label-width="80px">
|
||||||
<el-form-item :label="$t('key')">
|
<el-form-item :label="$t('key')">
|
||||||
<el-autocomplete
|
<el-autocomplete
|
||||||
class="inline-input"
|
|
||||||
v-model="currentButton.key"
|
v-model="currentButton.key"
|
||||||
|
class="inline-input"
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
:placeholder="$t('key')"
|
:placeholder="$t('key')"
|
||||||
></el-autocomplete>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('alias')">
|
<el-form-item :label="$t('alias')">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input v-model="currentButton.alias" :placeholder="$t('alias')"></el-input>
|
<el-input
|
||||||
|
v-model="currentButton.alias"
|
||||||
|
:placeholder="$t('alias')"
|
||||||
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('command')">
|
<el-form-item :label="$t('command')">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input v-model="currentButton.command" :placeholder="$t('command')"></el-input>
|
<el-input
|
||||||
|
v-model="currentButton.command"
|
||||||
|
:placeholder="$t('command')"
|
||||||
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('transparency')">
|
<el-form-item :label="$t('transparency')">
|
||||||
<el-row>
|
<el-col>
|
||||||
<el-col :span="2">
|
<el-slider
|
||||||
<el-color-picker v-model="color" show-alpha disabled></el-color-picker>
|
v-model="currentButton.transparency"
|
||||||
</el-col>
|
:max="1"
|
||||||
<el-col :span="22">
|
:min="0"
|
||||||
<el-slider
|
:step="0.01"
|
||||||
v-model="currentButton.transparency"
|
show-input
|
||||||
:max="1" :min="0" :step="0.01"
|
/>
|
||||||
show-input>
|
</el-col>
|
||||||
</el-slider>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('X')">
|
<el-form-item :label="$t('X')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.X"
|
v-model="currentButton.rectangle.X"
|
||||||
:max="width" :min="0" :step="5"
|
:max="width"
|
||||||
show-input>
|
:min="0"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Y')">
|
<el-form-item :label="$t('Y')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Y"
|
v-model="currentButton.rectangle.Y"
|
||||||
:max="height" :min="0" :step="5"
|
:max="height"
|
||||||
show-input>
|
:min="0"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Width')">
|
<el-form-item :label="$t('Width')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Width"
|
v-model="currentButton.rectangle.Width"
|
||||||
:max="width" :min="5" :step="5"
|
:max="width"
|
||||||
show-input>
|
:min="5"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('Height')">
|
<el-form-item :label="$t('Height')">
|
||||||
<el-slider
|
<el-slider
|
||||||
v-model="currentButton.rectangle.Height"
|
v-model="currentButton.rectangle.Height"
|
||||||
:max="height" :min="5" :step="5"
|
:max="height"
|
||||||
show-input>
|
:min="5"
|
||||||
</el-slider>
|
:step="5"
|
||||||
|
show-input
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="onAddButton">{{$t('add')}}</el-button>
|
<el-button
|
||||||
<el-button type="danger" @click="onRemoveButton">{{$t('remove')}}</el-button>
|
type="primary"
|
||||||
|
@click="onAddButton"
|
||||||
|
>
|
||||||
|
{{ $t('add') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
@click="onRemoveButton"
|
||||||
|
>
|
||||||
|
{{ $t('remove') }}
|
||||||
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -174,9 +225,6 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
color: function () {
|
|
||||||
return 'rgba(255,171,0,' + this.currentButton.transparency + ')';
|
|
||||||
},
|
|
||||||
buttonsWithoutCurrent: function () {
|
buttonsWithoutCurrent: function () {
|
||||||
if(!this.config.buttons)
|
if(!this.config.buttons)
|
||||||
return {}
|
return {}
|
||||||
|
@ -358,16 +406,6 @@
|
||||||
//判断字符是否为空的方法
|
//判断字符是否为空的方法
|
||||||
isEmpty: function (obj) {
|
isEmpty: function (obj) {
|
||||||
return typeof obj == "undefined" || obj == null || obj === "";
|
return typeof obj == "undefined" || obj == null || obj === "";
|
||||||
},
|
|
||||||
saveHistory: function (newConfig) {
|
|
||||||
this.configHistory[this.configIndex + 1] = this.deepCopy(newConfig);
|
|
||||||
this.configIndex++;
|
|
||||||
},
|
|
||||||
revoke: function () {
|
|
||||||
this.configIndex--;
|
|
||||||
},
|
|
||||||
redo: function () {
|
|
||||||
this.configIndex++;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,26 +1,22 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import {
|
import {
|
||||||
Row,
|
|
||||||
Col,
|
Col,
|
||||||
Button,
|
Button,
|
||||||
Autocomplete,
|
Autocomplete,
|
||||||
Option,
|
Option,
|
||||||
Input,
|
Input,
|
||||||
Slider,
|
Slider,
|
||||||
ColorPicker,
|
|
||||||
Form,
|
Form,
|
||||||
FormItem,
|
FormItem,
|
||||||
Drawer
|
Drawer
|
||||||
} from 'element-ui';
|
} from 'element-ui';
|
||||||
|
|
||||||
Vue.component(Row.name, Row,);
|
|
||||||
Vue.component(Col.name, Col);
|
Vue.component(Col.name, Col);
|
||||||
Vue.component(Button.name, Button);
|
Vue.component(Button.name, Button);
|
||||||
Vue.component(Autocomplete.name, Autocomplete);
|
Vue.component(Autocomplete.name, Autocomplete);
|
||||||
Vue.component(Option.name, Option);
|
Vue.component(Option.name, Option);
|
||||||
Vue.component(Input.name, Input);
|
Vue.component(Input.name, Input);
|
||||||
Vue.component(Slider.name, Slider);
|
Vue.component(Slider.name, Slider);
|
||||||
Vue.component(ColorPicker.name, ColorPicker);
|
|
||||||
Vue.component(Form.name, Form);
|
Vue.component(Form.name, Form);
|
||||||
Vue.component(FormItem.name, FormItem);
|
Vue.component(FormItem.name, FormItem);
|
||||||
Vue.component(Drawer.name, Drawer);
|
Vue.component(Drawer.name, Drawer);
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
pluginOptions: {
|
pluginOptions: {
|
||||||
i18n: {
|
i18n: {
|
||||||
|
@ -9,6 +11,18 @@ module.exports = {
|
||||||
},
|
},
|
||||||
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
|
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
|
||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
|
configureWebpack: config => {
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
config.plugins.push(
|
||||||
|
new CompressionWebpackPlugin({
|
||||||
|
// 正在匹配需要压缩的文件后缀
|
||||||
|
test: /\.(js|css|svg|woff|ttf|json|html)$/,
|
||||||
|
threshold: 10240,
|
||||||
|
deleteOriginalAssets: true
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
chainWebpack: config => {
|
chainWebpack: config => {
|
||||||
if (process.env.NODE_ENV === 'production') {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
config.output.filename('js/[name].js').end();
|
config.output.filename('js/[name].js').end();
|
||||||
|
|
Loading…
Reference in New Issue