other / mew-iview

Commit bf9649f6e8f0c00245318ccbbb7157892933b7a8

Authored by 梁灏
1 parent 4ed43a17

add Form

Showing 3 changed files with 398 additions and 301 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @bf9649f
  1 +<!--<template>-->
  2 + <!--<div>-->
  3 + <!--date: {{ formInline.date }}-->
  4 + <!--<i-form ref="formInline" :model="formInline" :rules="ruleInline">-->
  5 + <!--<Form-item prop="date" label="日期">-->
  6 + <!--<Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>-->
  7 + <!--</Form-item>-->
  8 + <!--<Form-item prop="value2" label="级联选择">-->
  9 + <!--<Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>-->
  10 + <!--</Form-item>-->
  11 + <!--<Form-item prop="user" label="输入框">-->
  12 + <!--<Input v-model="formInline.user"></Input>-->
  13 + <!--</Form-item>-->
  14 + <!--<Form-item prop="targetKeys1" label="穿梭框">-->
  15 + <!--<Transfer-->
  16 + <!--filterable-->
  17 + <!--:data="formInline.data1"-->
  18 + <!--:target-keys="formInline.targetKeys1"-->
  19 + <!--:render-format="render1"-->
  20 + <!--@on-change="handleChange1"></Transfer>-->
  21 + <!--</Form-item>-->
  22 + <!--<Form-item>-->
  23 + <!--<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>-->
  24 + <!--</Form-item>-->
  25 + <!--</i-form>-->
  26 + <!--</div>-->
  27 +<!--</template>-->
  28 +<!--<script>-->
  29 + <!--export default {-->
  30 + <!--data () {-->
  31 + <!--return {-->
  32 + <!--formInline: {-->
  33 + <!--data1: this.getMockData(),-->
  34 + <!--targetKeys1: this.getTargetKeys(),-->
  35 + <!--date: new Date(),-->
  36 + <!--user: '',-->
  37 + <!--value2: [],-->
  38 + <!--data: [{-->
  39 + <!--value: 'beijing',-->
  40 + <!--label: '北京',-->
  41 + <!--children: [-->
  42 + <!--{-->
  43 + <!--value: 'gugong',-->
  44 + <!--label: '故宫'-->
  45 + <!--},-->
  46 + <!--{-->
  47 + <!--value: 'tiantan',-->
  48 + <!--label: '天坛'-->
  49 + <!--},-->
  50 + <!--{-->
  51 + <!--value: 'wangfujing',-->
  52 + <!--label: '王府井'-->
  53 + <!--}-->
  54 + <!--]-->
  55 + <!--}, {-->
  56 + <!--value: 'jiangsu',-->
  57 + <!--label: '江苏',-->
  58 + <!--children: [-->
  59 + <!--{-->
  60 + <!--value: 'nanjing',-->
  61 + <!--label: '南京',-->
  62 + <!--children: [-->
  63 + <!--{-->
  64 + <!--value: 'fuzimiao',-->
  65 + <!--label: '夫子庙',-->
  66 + <!--}-->
  67 + <!--]-->
  68 + <!--},-->
  69 + <!--{-->
  70 + <!--value: 'suzhou',-->
  71 + <!--label: '苏州',-->
  72 + <!--children: [-->
  73 + <!--{-->
  74 + <!--value: 'zhuozhengyuan',-->
  75 + <!--label: '拙政园',-->
  76 + <!--},-->
  77 + <!--{-->
  78 + <!--value: 'shizilin',-->
  79 + <!--label: '狮子林',-->
  80 + <!--}-->
  81 + <!--]-->
  82 + <!--}-->
  83 + <!--],-->
  84 + <!--}]-->
  85 + <!--},-->
  86 + <!--ruleInline: {-->
  87 + <!--date: [-->
  88 + <!--{-->
  89 + <!--required: true,-->
  90 + <!--type: 'date',-->
  91 + <!--message: '请选择日期',-->
  92 + <!--trigger: 'change'-->
  93 + <!--}-->
  94 + <!--],-->
  95 + <!--user: [-->
  96 + <!--{-->
  97 + <!--required: true,-->
  98 + <!--message: '请输入',-->
  99 + <!--trigger: 'change',-->
  100 + <!--min: 10-->
  101 + <!--},-->
  102 + <!--{-->
  103 + <!--required: true,-->
  104 + <!--message: '请输入2',-->
  105 + <!--trigger: 'blur'-->
  106 + <!--}-->
  107 + <!--],-->
  108 + <!--value2: [-->
  109 + <!--{-->
  110 + <!--required: true,-->
  111 + <!--type: 'array',-->
  112 + <!--message: '请输入',-->
  113 + <!--trigger: 'change'-->
  114 + <!--}-->
  115 + <!--],-->
  116 + <!--targetKeys1: [-->
  117 + <!--{-->
  118 + <!--required: true,-->
  119 + <!--type: 'array',-->
  120 + <!--max: 2,-->
  121 + <!--message: '太多了',-->
  122 + <!--trigger: 'change'-->
  123 + <!--}-->
  124 + <!--]-->
  125 + <!--}-->
  126 + <!--}-->
  127 + <!--},-->
  128 + <!--methods: {-->
  129 + <!--handleSubmit(name) {-->
  130 + <!--this.$refs[name].validate((valid) => {-->
  131 + <!--if (valid) {-->
  132 + <!--this.$Message.success('提交成功!');-->
  133 + <!--} else {-->
  134 + <!--this.$Message.error('表单验证失败!');-->
  135 + <!--}-->
  136 + <!--})-->
  137 + <!--},-->
  138 + <!--handleInput (val) {-->
  139 + <!--console.log(val)-->
  140 + <!--},-->
  141 + <!--getMockData () {-->
  142 + <!--let mockData = [];-->
  143 + <!--for (let i = 1; i <= 20; i++) {-->
  144 + <!--mockData.push({-->
  145 + <!--key: i.toString(),-->
  146 + <!--label: '内容' + i,-->
  147 + <!--description: '内容' + i + '的描述信息',-->
  148 + <!--disabled: Math.random() * 3 < 1-->
  149 + <!--});-->
  150 + <!--}-->
  151 + <!--return mockData;-->
  152 + <!--},-->
  153 + <!--getTargetKeys () {-->
  154 + <!--return this.getMockData()-->
  155 + <!--.filter(() => Math.random() * 2 > 1)-->
  156 + <!--.map(item => item.key);-->
  157 + <!--},-->
  158 + <!--render1 (item) {-->
  159 + <!--return item.label;-->
  160 + <!--},-->
  161 + <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
  162 + <!--console.log(newTargetKeys);-->
  163 + <!--console.log(direction);-->
  164 + <!--console.log(moveKeys);-->
  165 + <!--this.formInline.targetKeys1 = newTargetKeys;-->
  166 + <!--}-->
  167 + <!--}-->
  168 + <!--}-->
  169 +<!--</script>-->
  170 +
  171 +
1 172 <template>
2   - <div>
3   - date: {{ formInline.date }}
4   - <i-form ref="formInline" :model="formInline" :rules="ruleInline">
5   - <Form-item prop="date" label="日期">
6   - <Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>
7   - </Form-item>
8   - <Form-item prop="value2" label="级联选择">
9   - <Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>
10   - </Form-item>
11   - <Form-item prop="user" label="输入框">
12   - <Input v-model="formInline.user"></Input>
13   - </Form-item>
14   - <Form-item prop="targetKeys1" label="穿梭框">
15   - <Transfer
16   - filterable
17   - :data="formInline.data1"
18   - :target-keys="formInline.targetKeys1"
19   - :render-format="render1"
20   - @on-change="handleChange1"></Transfer>
21   - </Form-item>
22   - <Form-item>
23   - <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
24   - </Form-item>
25   - </i-form>
26   - </div>
  173 + <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
  174 + <Form-item label="密码" prop="passwd">
  175 + <Input type="password" v-model="formCustom.passwd"></Input>
  176 + </Form-item>
  177 + <Form-item label="确认密码" prop="passwdCheck">
  178 + <Input type="password" v-model="formCustom.passwdCheck"></Input>
  179 + </Form-item>
  180 + <Form-item label="年龄" prop="age">
  181 + <Input type="text" v-model="formCustom.age" number></Input>
  182 + </Form-item>
  183 + <Form-item>
  184 + <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
  185 + <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
  186 + </Form-item>
  187 + </Form>
27 188 </template>
28 189 <script>
29 190 export default {
30 191 data () {
  192 + const validatePass = (rule, value, callback) => {
  193 + if (value === '') {
  194 + callback(new Error('请输入密码'));
  195 + } else {
  196 + if (this.formCustom.passwdCheck !== '') {
  197 + // 对第二个密码框单独验证
  198 + this.$refs.formCustom.validateField('passwdCheck');
  199 + }
  200 + callback();
  201 + }
  202 + };
  203 + const validatePassCheck = (rule, value, callback) => {
  204 + if (value === '') {
  205 + callback(new Error('请再次输入密码'));
  206 + } else if (value !== this.formCustom.passwd) {
  207 + callback(new Error('两次输入密码不一致!'));
  208 + } else {
  209 + callback();
  210 + }
  211 + };
  212 + const validateAge = (rule, value, callback) => {
  213 + if (!value) {
  214 + return callback(new Error('年龄不能为空'));
  215 + }
  216 + // 模拟异步验证效果
  217 + setTimeout(() => {
  218 + if (!Number.isInteger(value)) {
  219 + callback(new Error('请输入数字值'));
  220 + } else {
  221 + if (value < 18) {
  222 + callback(new Error('必须年满18岁'));
  223 + } else {
  224 + callback();
  225 + }
  226 + }
  227 + }, 1000);
  228 + };
  229 +
31 230 return {
32   - formInline: {
33   - data1: this.getMockData(),
34   - targetKeys1: this.getTargetKeys(),
35   - date: new Date(),
36   - user: '',
37   - value2: [],
38   - data: [{
39   - value: 'beijing',
40   - label: '北京',
41   - children: [
42   - {
43   - value: 'gugong',
44   - label: '故宫'
45   - },
46   - {
47   - value: 'tiantan',
48   - label: '天坛'
49   - },
50   - {
51   - value: 'wangfujing',
52   - label: '王府井'
53   - }
54   - ]
55   - }, {
56   - value: 'jiangsu',
57   - label: '江苏',
58   - children: [
59   - {
60   - value: 'nanjing',
61   - label: '南京',
62   - children: [
63   - {
64   - value: 'fuzimiao',
65   - label: '夫子庙',
66   - }
67   - ]
68   - },
69   - {
70   - value: 'suzhou',
71   - label: '苏州',
72   - children: [
73   - {
74   - value: 'zhuozhengyuan',
75   - label: '拙政园',
76   - },
77   - {
78   - value: 'shizilin',
79   - label: '狮子林',
80   - }
81   - ]
82   - }
83   - ],
84   - }]
  231 + formCustom: {
  232 + passwd: '',
  233 + passwdCheck: '',
  234 + age: ''
85 235 },
86   - ruleInline: {
87   - date: [
88   - {
89   - required: true,
90   - type: 'date',
91   - message: '请选择日期',
92   - trigger: 'change'
93   - }
  236 + ruleCustom: {
  237 + passwd: [
  238 + { validator: validatePass, trigger: 'blur' }
94 239 ],
95   - user: [
96   - {
97   - required: true,
98   - message: '请输入',
99   - trigger: 'change',
100   - min: 10
101   - },
102   - {
103   - required: true,
104   - message: '请输入2',
105   - trigger: 'blur'
106   - }
  240 + passwdCheck: [
  241 + { validator: validatePassCheck, trigger: 'blur' }
107 242 ],
108   - value2: [
109   - {
110   - required: true,
111   - type: 'array',
112   - message: '请输入',
113   - trigger: 'change'
114   - }
115   - ],
116   - targetKeys1: [
117   - {
118   - required: true,
119   - type: 'array',
120   - max: 2,
121   - message: '太多了',
122   - trigger: 'change'
123   - }
  243 + age: [
  244 + { validator: validateAge, trigger: 'blur' }
124 245 ]
125 246 }
126 247 }
127 248 },
128 249 methods: {
129   - handleSubmit(name) {
  250 + handleSubmit (name) {
130 251 this.$refs[name].validate((valid) => {
131 252 if (valid) {
132 253 this.$Message.success('提交成功!');
... ... @@ -135,34 +256,8 @@
135 256 }
136 257 })
137 258 },
138   - handleInput (val) {
139   - console.log(val)
140   - },
141   - getMockData () {
142   - let mockData = [];
143   - for (let i = 1; i <= 20; i++) {
144   - mockData.push({
145   - key: i.toString(),
146   - label: '内容' + i,
147   - description: '内容' + i + '的描述信息',
148   - disabled: Math.random() * 3 < 1
149   - });
150   - }
151   - return mockData;
152   - },
153   - getTargetKeys () {
154   - return this.getMockData()
155   - .filter(() => Math.random() * 2 > 1)
156   - .map(item => item.key);
157   - },
158   - render1 (item) {
159   - return item.label;
160   - },
161   - handleChange1 (newTargetKeys, direction, moveKeys) {
162   - console.log(newTargetKeys);
163   - console.log(direction);
164   - console.log(moveKeys);
165   - this.formInline.targetKeys1 = newTargetKeys;
  259 + handleReset (name) {
  260 + this.$refs[name].resetFields();
166 261 }
167 262 }
168 263 }
... ...
examples/routers/upload.vue
  Show/Hide comments   View file @bf9649f
1   -<!--<template>-->
2   - <!--<div>-->
3   - <!--<div class="demo-upload-list" v-for="item in uploadList">-->
4   - <!--<template v-if="item.status === 'finished'">-->
5   - <!--<img :src="item.url">-->
6   - <!--<div class="demo-upload-list-cover">-->
7   - <!--<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>-->
8   - <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
9   - <!--</div>-->
10   - <!--</template>-->
11   - <!--<template v-else>-->
12   - <!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
13   - <!--</template>-->
14   - <!--</div>-->
15   - <!--<Upload-->
16   - <!--ref="upload"-->
17   - <!--:show-upload-list="false"-->
18   - <!--:default-file-list="defaultList"-->
19   - <!--:on-success="handleSuccess"-->
20   - <!--:format="['jpg','jpeg','png']"-->
21   - <!--:max-size="2048"-->
22   - <!--:on-format-error="handleFormatError"-->
23   - <!--:on-exceeded-size="handleMaxSize"-->
24   - <!--@on-progress="handleProgress"-->
25   - <!--:before-upload="handleBeforeUpload"-->
26   - <!--multiple-->
27   - <!--type="drag"-->
28   - <!--action="//jsonplaceholder.typicode.com/posts/"-->
29   - <!--style="display: inline-block;width:58px;">-->
30   - <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
31   - <!--<Icon type="camera" size="20"></Icon>-->
32   - <!--</div>-->
33   - <!--</Upload>-->
34   - <!--{{ visible }}-->
35   - <!--</div>-->
36   -<!--</template>-->
37   -<!--<script>-->
38   - <!--export default {-->
39   - <!--data () {-->
40   - <!--return {-->
41   - <!--defaultList: [-->
42   - <!--{-->
43   - <!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
44   - <!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
45   - <!--},-->
46   - <!--{-->
47   - <!--'name': 'bc7521e033abdd1e92222d733590f104',-->
48   - <!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
49   - <!--}-->
50   - <!--],-->
51   - <!--imgName: '',-->
52   - <!--visible: false,-->
53   - <!--uploadList: []-->
54   - <!--}-->
55   - <!--},-->
56   - <!--computed: {-->
57   -<!--// uploadList () {-->
58   -<!--// return this.$refs.upload ? this.$refs.upload.fileList : [];-->
59   -<!--// }-->
60   - <!--},-->
61   - <!--watch: {-->
62   -
63   - <!--},-->
64   - <!--mounted () {-->
65   - <!--this.uploadList = this.$refs.upload.fileList;-->
66   -<!--// console.log(this.$refs.upload.fileList)-->
67   - <!--},-->
68   - <!--methods: {-->
69   - <!--handleView (name) {-->
70   - <!--this.imgName = name;-->
71   - <!--this.visible = true;-->
72   - <!--},-->
73   - <!--handleRemove (file) {-->
74   - <!--// 从 upload 实例删除数据-->
75   - <!--const fileList = this.$refs.upload.fileList;-->
76   - <!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
77   - <!--},-->
78   - <!--handleSuccess (res, file) {-->
79   - <!--// 因为上传过程为实例，这里模拟添加 url-->
80   - <!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
81   - <!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
82   - <!--},-->
83   - <!--handleFormatError (file) {-->
84   - <!--this.$Notice.warning({-->
85   - <!--title: '文件格式不正确',-->
86   - <!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
87   - <!--});-->
88   - <!--},-->
89   - <!--handleMaxSize (file) {-->
90   - <!--this.$Notice.warning({-->
91   - <!--title: '超出文件大小限制',-->
92   - <!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
93   - <!--});-->
94   - <!--},-->
95   - <!--handleBeforeUpload () {-->
96   - <!--const check = this.uploadList.length < 5;-->
97   - <!--if (!check) {-->
98   - <!--this.$Notice.warning({-->
99   - <!--title: '最多只能上传 5 张图片。'-->
100   - <!--});-->
101   - <!--}-->
102   - <!--return check;-->
103   - <!--},-->
104   - <!--handleProgress (s) {-->
105   - <!--console.log(s)-->
106   - <!--}-->
107   - <!--}-->
108   - <!--}-->
109   -<!--</script>-->
110   -<!--<style>-->
111   - <!--.demo-upload-list{-->
112   - <!--display: inline-block;-->
113   - <!--width: 60px;-->
114   - <!--height: 60px;-->
115   - <!--text-align: center;-->
116   - <!--line-height: 60px;-->
117   - <!--border: 1px solid transparent;-->
118   - <!--border-radius: 4px;-->
119   - <!--overflow: hidden;-->
120   - <!--background: #fff;-->
121   - <!--position: relative;-->
122   - <!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
123   - <!--margin-right: 4px;-->
124   - <!--}-->
125   - <!--.demo-upload-list img{-->
126   - <!--width: 100%;-->
127   - <!--height: 100%;-->
128   - <!--}-->
129   - <!--.demo-upload-list-cover{-->
130   - <!--display: none;-->
131   - <!--position: absolute;-->
132   - <!--top: 0;-->
133   - <!--bottom: 0;-->
134   - <!--left: 0;-->
135   - <!--right: 0;-->
136   - <!--background: rgba(0,0,0,.6);-->
137   - <!--}-->
138   - <!--.demo-upload-list:hover .demo-upload-list-cover{-->
139   - <!--display: block;-->
140   - <!--}-->
141   - <!--.demo-upload-list-cover i{-->
142   - <!--color: #fff;-->
143   - <!--font-size: 20px;-->
144   - <!--cursor: pointer;-->
145   - <!--margin: 0 2px;-->
146   - <!--}-->
147   -<!--</style>-->
148   -
149   -
150 1 <template>
151 2 <div>
152   - <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
153   - <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
  3 + <div class="demo-upload-list" v-for="item in uploadList">
  4 + <template v-if="item.status === 'finished'">
  5 + <img :src="item.url">
  6 + <div class="demo-upload-list-cover">
  7 + <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
  8 + <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
  9 + </div>
  10 + </template>
  11 + <template v-else>
  12 + <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
  13 + </template>
  14 + </div>
  15 + <Upload
  16 + ref="upload"
  17 + :show-upload-list="false"
  18 + :default-file-list="defaultList"
  19 + :on-success="handleSuccess"
  20 + :format="['jpg','jpeg','png']"
  21 + :max-size="2048"
  22 + :on-format-error="handleFormatError"
  23 + :on-exceeded-size="handleMaxSize"
  24 + @on-progress="handleProgress"
  25 + :before-upload="handleBeforeUpload"
  26 + multiple
  27 + type="drag"
  28 + action="//jsonplaceholder.typicode.com/posts/"
  29 + style="display: inline-block;width:58px;">
  30 + <div style="width: 58px;height:58px;line-height: 58px;">
  31 + <Icon type="camera" size="20"></Icon>
  32 + </div>
154 33 </Upload>
155   - <i-button @click.native="handleUpload">上传</i-button>
  34 + {{ visible }}
156 35 </div>
157 36 </template>
158 37 <script>
159 38 export default {
160 39 data () {
161 40 return {
162   - file: null
  41 + defaultList: [
  42 + {
  43 + 'name': 'a42bdcc1178e62b4694c830f028db5c0',
  44 + 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
  45 + },
  46 + {
  47 + 'name': 'bc7521e033abdd1e92222d733590f104',
  48 + 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
  49 + }
  50 + ],
  51 + imgName: '',
  52 + visible: false,
  53 + uploadList: []
163 54 }
164 55 },
  56 + computed: {
  57 +// uploadList () {
  58 +// return this.$refs.upload ? this.$refs.upload.fileList : [];
  59 +// }
  60 + },
  61 + watch: {
  62 +
  63 + },
  64 + mounted () {
  65 + this.uploadList = this.$refs.upload.fileList;
  66 +// console.log(this.$refs.upload.fileList)
  67 + },
165 68 methods: {
166   - handleBeforeUpload (file) {
167   - this.file = file;
168   - return false;
  69 + handleView (name) {
  70 + this.imgName = name;
  71 + this.visible = true;
  72 + },
  73 + handleRemove (file) {
  74 + // 从 upload 实例删除数据
  75 + const fileList = this.$refs.upload.fileList;
  76 + this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
  77 + },
  78 + handleSuccess (res, file) {
  79 + // 因为上传过程为实例，这里模拟添加 url
  80 + file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
  81 + file.name = '7eb99afb9d5f317c912f08b5212fd69a';
  82 + },
  83 + handleFormatError (file) {
  84 + this.$Notice.warning({
  85 + title: '文件格式不正确',
  86 + desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
  87 + });
  88 + },
  89 + handleMaxSize (file) {
  90 + this.$Notice.warning({
  91 + title: '超出文件大小限制',
  92 + desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
  93 + });
  94 + },
  95 + handleBeforeUpload () {
  96 + const check = this.uploadList.length < 5;
  97 + if (!check) {
  98 + this.$Notice.warning({
  99 + title: '最多只能上传 5 张图片。'
  100 + });
  101 + }
  102 + return check;
169 103 },
170   - handleUpload () {
171   - this.$refs.file.post(this.file);
  104 + handleProgress (s) {
  105 + console.log(s)
172 106 }
173 107 }
174 108 }
175 109 </script>
  110 +<style>
  111 + .demo-upload-list{
  112 + display: inline-block;
  113 + width: 60px;
  114 + height: 60px;
  115 + text-align: center;
  116 + line-height: 60px;
  117 + border: 1px solid transparent;
  118 + border-radius: 4px;
  119 + overflow: hidden;
  120 + background: #fff;
  121 + position: relative;
  122 + box-shadow: 0 1px 1px rgba(0,0,0,.2);
  123 + margin-right: 4px;
  124 + }
  125 + .demo-upload-list img{
  126 + width: 100%;
  127 + height: 100%;
  128 + }
  129 + .demo-upload-list-cover{
  130 + display: none;
  131 + position: absolute;
  132 + top: 0;
  133 + bottom: 0;
  134 + left: 0;
  135 + right: 0;
  136 + background: rgba(0,0,0,.6);
  137 + }
  138 + .demo-upload-list:hover .demo-upload-list-cover{
  139 + display: block;
  140 + }
  141 + .demo-upload-list-cover i{
  142 + color: #fff;
  143 + font-size: 20px;
  144 + cursor: pointer;
  145 + margin: 0 2px;
  146 + }
  147 +</style>
  148 +
  149 +
  150 +<!--<template>-->
  151 + <!--<div>-->
  152 + <!--<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">-->
  153 + <!--<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>-->
  154 + <!--</Upload>-->
  155 + <!--<i-button @click.native="handleUpload">上传</i-button>-->
  156 + <!--</div>-->
  157 +<!--</template>-->
  158 +<!--<script>-->
  159 + <!--export default {-->
  160 + <!--data () {-->
  161 + <!--return {-->
  162 + <!--file: null-->
  163 + <!--}-->
  164 + <!--},-->
  165 + <!--methods: {-->
  166 + <!--handleBeforeUpload (file) {-->
  167 + <!--this.file = file;-->
  168 + <!--return false;-->
  169 + <!--},-->
  170 + <!--handleUpload () {-->
  171 + <!--this.$refs.file.post(this.file);-->
  172 + <!--}-->
  173 + <!--}-->
  174 + <!--}-->
  175 +<!--</script>-->
... ...
src/index.js
  Show/Hide comments   View file @bf9649f
... ... @@ -67,6 +67,7 @@ const iview = {
67 67 Dropdown,
68 68 DropdownItem: Dropdown.Item,
69 69 DropdownMenu: Dropdown.Menu,
  70 + Form,
70 71 iForm: Form,
71 72 FormItem: Form.Item,
72 73 Col,
... ... @@ -103,6 +104,7 @@ const iview = {
103 104 Spin,
104 105 Step: Steps.Step,
105 106 Steps,
  107 + // Switch,
106 108 iSwitch: Switch,
107 109 iTable: Table,
108 110 Table,
... ...