美文网首页
iview框架的实战解坑

iview框架的实战解坑

作者: 十年之后_b94a | 来源:发表于2019-05-25 10:33 被阅读0次

1、Upload组件手动上传并动态改变上传路径

在实际开发场景中,不可避免的需要把文件上传,但由用户选择上传到哪里

<Upload ref="uploads" :before-upload="handleUpload" :show-upload-list="false" 
        :on-success="uploadSuccess" :action="action">
    </Upload>
    <Button type="ghost" icon="ios-cloud-upload-outline" @click="uploads1">点击上传至1</Button>
    <Button type="ghost" icon="ios-cloud-upload-outline" @click="uploads2">点击上传至2</Button>

其中action地址可以是字符

<script>
  export default{
  data(){
    return{
         action: '', //上传地址
          files : '' //文件
      }
  },
  methods:{
    handleUpload(file,url,b){//重点这几个参数
      return new Promise((resolve,reject)=>{
        this.$nextTick(()=>{
          file && (this.files =file  );
          url&& (this.action = url);
          if(!b){
            return false  //官方文档return false中断上传
          }else{
            setTimeout(()=>{  //异步上传 这只是我的解决思路 如果不进行异步 上传的是上一个地址
              this.$refs.uploads.post(this.files )
            },0)
          }
        })
       })
    },
    uploads1(){
      this.$refs.uploads.beforeUpload(undefined,你需要上传的地址,true)
    },
    uploads2(){},
    uploadSuccess(){
      //****
    }
  }
}
</script>

上述代码只是我个人的方法,如有更好的,请在评论区留言

2、怎么在iview的响应事件上加上自己的参数

场景:例如在v-for中有Select他的响应事件@on-change事件他默认返回你当前选择的这一个value,如果我们要加上循环的这一列数据怎么写?

<div v-for="(item.idx) in arr" :key="idx">
  ***
  <Select @on-change="v=>custom(v,item)" v-model="model15" prefix="ios-home" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>  
  ***
</div>
methods:{
  custom(v,item){}
}

相关文章

网友评论

      本文标题:iview框架的实战解坑

      本文链接:https://www.haomeiwen.com/subject/wbcazqtx.html