Commit bf9649f6e8f0c00245318ccbbb7157892933b7a8
1 parent
4ed43a17
add Form
Showing
3 changed files
with
398 additions
and
301 deletions
Show diff stats
examples/routers/form.vue
| 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 | <template> | 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 | </template> | 188 | </template> |
| 28 | <script> | 189 | <script> |
| 29 | export default { | 190 | export default { |
| 30 | data () { | 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 | return { | 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 | methods: { | 249 | methods: { |
| 129 | - handleSubmit(name) { | 250 | + handleSubmit (name) { |
| 130 | this.$refs[name].validate((valid) => { | 251 | this.$refs[name].validate((valid) => { |
| 131 | if (valid) { | 252 | if (valid) { |
| 132 | this.$Message.success('提交成功!'); | 253 | this.$Message.success('提交成功!'); |
| @@ -135,34 +256,8 @@ | @@ -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
| 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 | <template> | 1 | <template> |
| 151 | <div> | 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 | </Upload> | 33 | </Upload> |
| 155 | - <i-button @click.native="handleUpload">上传</i-button> | 34 | + {{ visible }} |
| 156 | </div> | 35 | </div> |
| 157 | </template> | 36 | </template> |
| 158 | <script> | 37 | <script> |
| 159 | export default { | 38 | export default { |
| 160 | data () { | 39 | data () { |
| 161 | return { | 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 | methods: { | 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 | </script> | 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
| @@ -67,6 +67,7 @@ const iview = { | @@ -67,6 +67,7 @@ const iview = { | ||
| 67 | Dropdown, | 67 | Dropdown, |
| 68 | DropdownItem: Dropdown.Item, | 68 | DropdownItem: Dropdown.Item, |
| 69 | DropdownMenu: Dropdown.Menu, | 69 | DropdownMenu: Dropdown.Menu, |
| 70 | + Form, | ||
| 70 | iForm: Form, | 71 | iForm: Form, |
| 71 | FormItem: Form.Item, | 72 | FormItem: Form.Item, |
| 72 | Col, | 73 | Col, |
| @@ -103,6 +104,7 @@ const iview = { | @@ -103,6 +104,7 @@ const iview = { | ||
| 103 | Spin, | 104 | Spin, |
| 104 | Step: Steps.Step, | 105 | Step: Steps.Step, |
| 105 | Steps, | 106 | Steps, |
| 107 | + // Switch, | ||
| 106 | iSwitch: Switch, | 108 | iSwitch: Switch, |
| 107 | iTable: Table, | 109 | iTable: Table, |
| 108 | Table, | 110 | Table, |