[Improment] add $toast/$dialog to Vue.prototype (#363)

This commit is contained in:
neverland 2017-11-30 14:52:19 +08:00 committed by GitHub
parent 121e2de375
commit c23762e08b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 153 additions and 86 deletions

View File

@ -6,21 +6,25 @@ const path = require('path');
const compiler = require('vue-sfc-compiler');
const libDir = path.resolve(__dirname, '../../lib');
const srcDir = path.resolve(__dirname, '../../packages');
require('shelljs/global');
const babel = require('babel-core');
const compilerOption = {
babel: {
extends: path.resolve(__dirname, '../../.babelrc')
}
};
// 清空 lib 目录
process.env.BABEL_ENV = 'commonjs';
// clear lib
fs.emptyDirSync(libDir);
// 复制 packages
// copy packages
fs.copySync(srcDir, libDir);
// 编译所有 .vue 文件到 .js
compileVueFiles(libDir);
compile(libDir);
// babel 编译
exec('cross-env BABEL_ENV=commonjs babel lib --out-dir lib');
function compileVueFiles(dir) {
function compile(dir) {
const files = fs.readdirSync(dir);
files.forEach(file => {
@ -32,7 +36,7 @@ function compileVueFiles(dir) {
}
// 遍历文件夹
else if (isDir(absolutePath)) {
return compileVueFiles(absolutePath);
return compile(absolutePath);
}
// 编译 .vue 文件
else if (/\.vue$/.test(file)) {
@ -42,7 +46,12 @@ function compileVueFiles(dir) {
const outputVuePath = absolutePath + '.js';
const outputJsPath = absolutePath.replace('.vue', '.js');
const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath;
fs.outputFileSync(output, compiler(source));
fs.outputFileSync(output, compiler(source, compilerOption).js);
} else if (/\.js$/.test(file)) {
babel.transformFile(absolutePath, compilerOption.babel, (err, { code }) => {
fs.outputFileSync(absolutePath, code);
});
}
});
}

View File

@ -35,8 +35,8 @@ Vue.component(Button.name, Button);
#### Loading
```html
<van-button loading></van-button>
<van-button loading type="primary"></van-button>
<van-button loading />
<van-button loading type="primary" />
```
#### Custom Tag

View File

@ -40,6 +40,19 @@ Used to confirm some messages, including a confirm button and a cancel button
});
```
#### $dialog Method
After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
```js
export default {
mounted() {
this.$dialog.alert({
message: 'Content'
});
}
}
```
### Methods
| Name | Attribute | Return value | Description |

View File

@ -51,6 +51,17 @@ const timer = setInterval(() => {
}, 1000);
```
#### $toast Method
After import the Toast component, the $toast method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
```js
export default {
mounted() {
this.$toast('Some messages');
}
}
```
### Methods
| Methods | Attribute | Return value | Description |

View File

@ -41,8 +41,8 @@ Vue.component(Button.name, Button);
#### 加载状态
```html
<van-button loading></van-button>
<van-button loading type="primary"></van-button>
<van-button loading />
<van-button loading type="primary" />
```
#### 自定义按钮标签

View File

@ -40,6 +40,19 @@ Dialog.confirm({
});
```
#### 组件内调用
引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,便于在组件内调用。
```js
export default {
mounted() {
this.$dialog.alert({
message: '弹窗内容'
});
}
}
```
### 方法
| 方法名 | 参数 | 返回值 | 介绍 |

View File

@ -51,6 +51,18 @@ const timer = setInterval(() => {
}, 1000);
```
#### 组件内调用
引入 Toast 组件后,会自动在 Vue 的 prototype 上挂载 $toast 方法,便于在组件内调用。
```js
export default {
mounted() {
this.$toast('提示文案');
}
}
```
### 方法

View File

@ -108,12 +108,12 @@
"uppercamelcase": "^3.0.0",
"url-loader": "^0.6.2",
"vant-doc": "0.3.18",
"vue": "^2.5.8",
"vue": "^2.5.9",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-sfc-compiler": "^0.0.5",
"vue-sfc-compiler": "^0.0.6",
"vue-style-loader": "^3.0.0",
"vue-template-compiler": "^2.5.8",
"vue-template-compiler": "^2.5.9",
"vue-template-es2015-compiler": "^1.6.0",
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.1",

View File

@ -61,6 +61,8 @@ Dialog.close = () => {
instance.value = false;
};
Vue.prototype.$dialog = Dialog;
export default Dialog;
export {
DialogComponent as Dialog

View File

@ -56,4 +56,6 @@ Toast.clear = () => {
instance && instance.clear();
};
Vue.prototype.$toast = Toast;
export default Toast;

6
types/dialog.d.ts vendored
View File

@ -17,4 +17,10 @@ export interface Dialog {
close(): void;
}
declare module 'vue/types/vue' {
interface Vue {
$dialog: Dialog
}
}
export const Dialog: Dialog;

6
types/toast.d.ts vendored
View File

@ -15,4 +15,10 @@ export interface Toast {
clear(): void;
}
declare module 'vue/types/vue' {
interface Vue {
$toast: Toast
}
}
export const Toast: Toast;

131
yarn.lock
View File

@ -2,10 +2,6 @@
# yarn lockfile v1
"@types/node@^7.0.48":
version "7.0.48"
resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.48.tgz#24bfdc0aa82e8f6dbd017159c58094a2e06d0abb"
abbrev@1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@ -72,8 +68,8 @@ ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
json-stable-stringify "^1.0.1"
ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
version "5.4.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.4.0.tgz#32d1cf08dbc80c432f426f12e10b2511f6b46474"
version "5.5.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.0.tgz#eb2840746e9dc48bd5e063a36e3fd400c5eab5a9"
dependencies:
co "^4.6.0"
fast-deep-equal "^1.0.0"
@ -1114,10 +1110,10 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
electron-to-chromium "^1.2.7"
browserslist@^2.1.2, browserslist@^2.5.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.0.tgz#706aca15c53be15610f466e348cbfa0c00a6a379"
version "2.9.1"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.1.tgz#b72d3982ab01b5cd24da62ff6d45573886aff275"
dependencies:
caniuse-lite "^1.0.30000760"
caniuse-lite "^1.0.30000770"
electron-to-chromium "^1.3.27"
buffer-indexof@^1.0.0:
@ -1206,12 +1202,12 @@ caniuse-api@^1.5.2:
lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000770"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000770.tgz#cf68ae1cb8a82f6d3c35df41c62dc6973e470244"
version "1.0.30000775"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000775.tgz#04bccdd0214edf25b97f61a096609f7ad6904333"
caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000760:
version "1.0.30000770"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000770.tgz#bc8e7f50b073273390db6ab357378909a14e9bdb"
caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000770:
version "1.0.30000775"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000775.tgz#74d27feddc47f3c84cfbcb130c3092a35ebc2de2"
caseless@~0.12.0:
version "0.12.0"
@ -1449,10 +1445,14 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
dependencies:
delayed-stream "~1.0.0"
commander@2.11.0, commander@2.11.x, commander@~2.11.0:
commander@2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
commander@2.12.x, commander@^2.11.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0, commander@~2.12.1:
version "2.12.2"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
commander@2.8.x, commander@~2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
@ -1465,12 +1465,6 @@ commander@2.9.0, commander@~2.9.0:
dependencies:
graceful-readlink ">= 1.0.0"
commander@^2.11.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0:
version "2.12.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.0.tgz#2f13615c39c687a77926aa68ef25c099db1e72fb"
dependencies:
"@types/node" "^7.0.48"
commondir@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@ -1567,8 +1561,8 @@ content-type@~1.0.4:
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
convert-source-map@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
version "1.5.1"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
cookie-signature@1.0.6:
version "1.0.6"
@ -2073,11 +2067,10 @@ doctrine@1.5.0, doctrine@^1.2.2:
isarray "^1.0.0"
doctrine@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
version "2.0.2"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
dependencies:
esutils "^2.0.2"
isarray "^1.0.0"
dom-converter@~0.1:
version "0.1.4"
@ -2293,8 +2286,8 @@ error-stack-parser@^2.0.0:
stackframe "^1.0.3"
es-abstract@^1.7.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
version "1.10.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
dependencies:
es-to-primitive "^1.1.1"
function-bind "^1.1.1"
@ -2311,8 +2304,8 @@ es-to-primitive@^1.1.1:
is-symbol "^1.0.1"
es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
version "0.10.35"
resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
version "0.10.37"
resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.37.tgz#0ee741d148b80069ba27d020393756af257defc3"
dependencies:
es6-iterator "~2.0.1"
es6-symbol "~3.1.1"
@ -2673,7 +2666,7 @@ expand-tilde@^2.0.2:
dependencies:
homedir-polyfill "^1.0.1"
express@^4.13.3, express@^4.15.2:
express@^4.15.2, express@^4.16.2:
version "4.16.2"
resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
dependencies:
@ -3636,17 +3629,17 @@ html-entities@^1.2.0:
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
html-minifier@^3.2.3:
version "3.5.6"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
version "3.5.7"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.7.tgz#511e69bb5a8e7677d1012ebe03819aa02ca06208"
dependencies:
camel-case "3.0.x"
clean-css "4.1.x"
commander "2.11.x"
commander "2.12.x"
he "1.1.x"
ncname "1.0.x"
param-case "2.1.x"
relateurl "0.2.x"
uglify-js "3.1.x"
uglify-js "3.2.x"
html-webpack-plugin@^2.29.0:
version "2.30.1"
@ -3827,8 +3820,8 @@ internal-ip@1.2.0:
meow "^3.3.0"
interpret@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
invariant@^2.2.2:
version "2.2.2"
@ -4920,8 +4913,8 @@ miller-rabin@^4.0.0:
brorand "^1.0.1"
"mime-db@>= 1.30.0 < 2":
version "1.31.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.31.0.tgz#a49cd8f3ebf3ed1a482b60561d9105ad40ca74cb"
version "1.32.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.32.0.tgz#485b3848b01a3cda5f968b4882c0771e58e09414"
mime-db@~1.30.0:
version "1.30.0"
@ -4937,9 +4930,9 @@ mime@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
mime@^1.3.4, mime@^1.4.1:
version "1.5.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.5.0.tgz#59c20e03ae116089edeb7d3b34a6788c5b3cccea"
mime@^1.3.4, mime@^1.4.1, mime@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
mimic-fn@^1.0.0:
version "1.1.0"
@ -5060,8 +5053,8 @@ multicast-dns-service-types@^1.1.0:
resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
multicast-dns@^6.0.1:
version "6.2.0"
resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.0.tgz#13f22d0c32dc5ee82a32878e3c380d875b3eab22"
version "6.2.1"
resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
dependencies:
dns-packet "^1.0.1"
thunky "^0.1.0"
@ -6426,8 +6419,8 @@ reduce-css-calc@^1.2.6:
reduce-function-call "^1.0.1"
reduce-css-calc@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.1.tgz#f4ecd7a00ec3e5683773f208067ad7da117b9db0"
version "2.1.3"
resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.3.tgz#63c4c6325ffbbf4ea6c23f1d4deb47c3953f3b81"
dependencies:
css-unit-converter "^1.1.1"
postcss-value-parser "^3.3.0"
@ -7447,8 +7440,8 @@ typescript@2.0.10:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.0.10.tgz#ccdd4ed86fd5550a407101a0814012e1b3fac3dd"
typescript@^2.4.2:
version "2.6.1"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.1.tgz#ef39cdea27abac0b500242d6726ab90e0c846631"
version "2.6.2"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
ua-parser-js@^0.7.9:
version "0.7.17"
@ -7458,11 +7451,11 @@ uc.micro@^1.0.1, uc.micro@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
uglify-js@3.1.x:
version "3.1.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.10.tgz#c4a5f9b5c6276b40cb971c1d97c9eeb26af9509c"
uglify-js@3.2.x:
version "3.2.0"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.2.0.tgz#cb411ee4ca0e0cadbfe3a4e1a1da97e6fa0d19c1"
dependencies:
commander "~2.11.0"
commander "~2.12.1"
source-map "~0.6.1"
uglify-js@^2.6, uglify-js@^2.8.29:
@ -7751,9 +7744,9 @@ vue-router@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
vue-sfc-compiler@^0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/vue-sfc-compiler/-/vue-sfc-compiler-0.0.5.tgz#fac2eca52185fb32afeea304c25fee1b5b1174b6"
vue-sfc-compiler@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/vue-sfc-compiler/-/vue-sfc-compiler-0.0.6.tgz#bb2645b0b53a13c0afc33ca40880940b41d80826"
vue-style-loader@^3.0.0:
version "3.0.3"
@ -7762,9 +7755,9 @@ vue-style-loader@^3.0.0:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-template-compiler@^2.5.8:
version "2.5.8"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.8.tgz#826ae77e1d5faa7fa5fca554f33872dde38de674"
vue-template-compiler@^2.5.9:
version "2.5.9"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.9.tgz#7fabc73c8d3d12d32340cd86c5fc33e00e86d686"
dependencies:
de-indent "^1.0.2"
he "^1.1.0"
@ -7773,9 +7766,9 @@ vue-template-es2015-compiler@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
vue@^2.5.8:
version "2.5.8"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.8.tgz#f855c1c27255184a82225f4bef225473e8faf15b"
vue@^2.5.9:
version "2.5.9"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.9.tgz#b2380cd040915dca69881dafd121d760952e65f7"
watchpack@^1.4.0:
version "1.4.0"
@ -7808,18 +7801,18 @@ webpack-bundle-analyzer@^2.9.1:
ws "^3.3.1"
webpack-dev-middleware@^1.11.0, webpack-dev-middleware@^1.12.0:
version "1.12.1"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.1.tgz#338be3ca930973be1c2ce07d84d275e997e1a25a"
version "1.12.2"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
dependencies:
memory-fs "~0.4.1"
mime "^1.4.1"
mime "^1.5.0"
path-is-absolute "^1.0.0"
range-parser "^1.0.3"
time-stamp "^2.0.0"
webpack-dev-server@^2.9.4:
version "2.9.4"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
version "2.9.5"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.5.tgz#79336fba0087a66ae491f4869f6545775b18daa8"
dependencies:
ansi-html "0.0.7"
array-includes "^3.0.3"
@ -7829,7 +7822,7 @@ webpack-dev-server@^2.9.4:
connect-history-api-fallback "^1.3.0"
debug "^3.1.0"
del "^3.0.0"
express "^4.13.3"
express "^4.16.2"
html-entities "^1.2.0"
http-proxy-middleware "~0.17.4"
import-local "^0.1.1"
@ -7863,8 +7856,8 @@ webpack-sources@^0.1.0:
source-map "~0.5.3"
webpack-sources@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.2.tgz#d0148ec083b3b5ccef1035a6b3ec16442983b27a"
version "1.1.0"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
dependencies:
source-list-map "^2.0.0"
source-map "~0.6.1"