件选择器是我们经常会使用到的，一般都是通过点击某个按钮然后选取文件。

所以封装一个文件选择按钮还是有必要的。

首先，这个按钮使用起来必须和普通按钮一模一样，否则就失去了封装的意义。

其次也要基本符合我[基础]中讲到的几点。

于是(注意在chrome中使用image/*会很慢)：(基础版本)

import React, { PureComponent } from 'react';
import CSSModules from 'react-css-modules';
 
import Tools from '../../common_js/Tools'
 
import styles from './FileButton.css'
 
class FileButton extends PureComponent {
 constructor(props) {
 super(props);
 
 this.getFiles=this.getFiles.bind(this)
 this.onChange=this.onChange.bind(this)
 }
 
 getFiles() {
 let ans=[]
 let files=this.refs.fileLoader.files
 for (let i=0; i < files.length; i++) {
 ans.push(files[i])
 }
 return ans
 }
 
 onChange(e) {
 if (!Tools.isNone(this.props.onChange)) {
 this.props.onChange(this.getFiles())
 }
 this.refs.fileLoader.value=''
 }
 
 render() {
 let accept=this.props.accept
 if (Tools.isNone(accept)) {
 accept='image/*'
 if (Tools.isChrome()) {
 accept='image/jpeg,image/gif,image/png,image/bmp'
 }
 }
 return (
 <label className={this.props.className} style={this.props.style} >
 {this.props.children}
 {
 this.props.multiple==true ?
 <input styleName='input-area' ref='fileLoader' onChange={this.onChange} type="file" accept={accept} multiple />
 :
 <input styleName='input-area' ref='fileLoader' onChange={this.onChange} type="file" accept={accept} />
 }
 </label>
 );
 }
}
 
export default CSSModules(FileButton, styles);

input_area样式：

.input-area {
 width: 0px;
 height: 0px;
 position:absolute;
 clip:rect(0 0 0 0);
}

此外：（@material-ui中Button的封装版本）

于vue封装的Modal弹出层，包含html页面打开，提示，确认等常用diaog打开形式，引入js，css即可开箱使用，无需在页面上提前声明Modal，随用随生成，动态渲染挂接到页面，关闭后自动移除，方便快捷，并且支持页面大小，页面传参，页面回调函数等在开发中需要使用的功能

引入控件

1.引入vue.js

2.引入dist文件夹下的fastdialog.js和fastdialog.css文件，详情可查看test分支，为演示示例

使用控件

首先，页面初始化化vue需要用变量存一下

 var app1=new Vue({})

普通打开页面

 app1.$fastdialog.OpenDialog("111", "打开窗口", "newpage1.html", "600", "1200");

参数：dialog标识，页面标题名称，页面url地址，页面高度，页面宽度

百分比打开页面

app1.$fastdialog.OpenDialog("111", "打开窗口", "newpage1.html", "70", "80",null,null,"%");

注：第8个参数为宽高的单位，不传默认px

打开的页面关闭后，主页面触发回调函数

app1.$fastdialog.OpenDialog("222", "关闭窗口有回调函数", "newpage1.html", "600", "1200", AfterClose);

打开的页面关闭后，主页面触发回调函数,回调函数包含关闭页面传递的返回值

 app1.$fastdialog.OpenDialog("333", "回掉函数包含返回值", "newpage1.html", "600", "1200", AfterCloseWithReturn);
 function AfterCloseWithReturn(ReturnValue) {
 alert("page1回传的参数："+ReturnValue);
 }

打开页面并传递参数

OpenDialog("444", "有回调函数并传参", "newpage1.html", "600", "1200", AfterCloseWithReturn, "125sds");

打开页面获取参数

var params=app1.$fastdialog.GetParams();
 if (params && params !="undefined") {
 alert("打开页面接收的参数：" + params);
}

关闭打开的页面

app1.$fastdialog.CloseDialog();

关闭打开的页面并向主页面传递返回值，配合3使用

app1.$fastdialog.CloseDialog("page1回传222222");

在顶层窗口打开页面，一般用于iframe中

app1.$fastdialog.OpenTopDialog("777777", "有回调函数并传参", "newpage2.html", "500", "1000", AfterCloseWithReturn, "page1-page2传参");

关闭顶层页面

app1.$fastdialog.CloseDialog("page2回传111111","page3");

注：CloseDialog方法在关闭OpenDialog的页面，无需传参，或者传返回值，关闭OpenTopDialog的页面时必须传入两个参数，ReturnValue和打开的dialog的id标识，无返回值传null，如果一个页面同时需要被 OpenDialog和OpenTopDialog打开，两个参数必传

打开普通提示窗

 app1.$fastdialog.OpenAlert("提示", "请在规定期限内处理完成！");

关闭提示窗关闭后触发回调事件

app1.$fastdialog.OpenAlert("提示", "请在规定期限内处理完成！",AfterClose);

打开成功提示窗

app1.$fastdialog.OpenSuccess("提示", "请在规定期限内处理完成！");

打开警告提示窗

 app1.$fastdialog.OpenWaring("提示", "请在规定期限内处理完成！",null,"知道了");

打开失败提示窗

 app1.$fastdialog.OpenFail("提示", "请在规定期限内处理完成！");

打开确认提示窗

app1.$fastdialog.OpenConfirm("确认提示", "是否删除当前数据", function () {
 app1.$fastdialog.OpenSuccess("提示", "删除成功");
 });
 app1.$fastdialog.OpenConfirm("确认提示", "是否删除当前数据", function () {
 }, "确认删除", "取消操作");

注：

1.alert类提示窗支持4个参数 标题，提示信息，回调函数，关闭按钮文字

3.confirm提示窗支持5个参数 标题，提示信息，确认按钮回调函数，自定义确认按钮文字，自定义取消按钮文字

一些说明： 下载代码的同学查看例子时需要部署一下，因为Modal中包含了请求模板的http操作

项目地址

https://gitee.com/grassprogramming/FastDialog-Vue

示例:http://grassprogramming.gitee.io/fastdialog-vue/example.html