发表于： 2020-08-05 22:28:59
1 2024
今日完成:
input图片上传样式重新设置
第一步,都是设置父元素,设置边框，边框设置相对定位
第二步,设置显示样式,;样式完全占据父元素的宽高
第三步,设置input,type=file,设置绝对定位,完全占据宽高,然后设置透明,显示的是被它覆盖的显示样式
or
因为,input本身不能设置游标样式,所以
样式设置上,可以第二步和第三步调换,显示样式采用决绝定位,覆盖input,
遇到问题:如何触发input事件?
这里点击事件举例
可以在显示事件上设置点击事件,点击触发input的点击事件
or更简单一点,可以在显示样式上添加透明属性,鼠标指针实际点击是穿透绝对定位的显示样式,点击在被遮盖的input
禁止点击事件
css中设置pointer-events: none对应dom节点不能点击
通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击
ps:
注意：设置pointer-events: none;再设置cursor是没有效果的
即:如果想要显示游标的禁止点击样式,禁止点击操作和禁止点击样式,要在js和css中分别操作,这里不能用这个属性
* pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中。
* pointer-events: none; 只是用来禁用鼠标的事件，通过其他方式绑定的事件还是会触发的，比如键盘事件等。
* 如果将一个元素的子元素 pointer-events 设置成其他值（比如：auto），那么当点击子元素时，还是会通过事件冒泡的形式出发父元素的事件。
禁止点击事件,可以给点击事件if显示限制条件,满足直接return结束语句即可
进度条
progress和input结合使用
<progress v-if="tableShow" :value="progress" max="100" class="jindu"></progress> 
<span v-if="tableShow">{{progress}}%</span>
progress的max默认就是0-1,设置就根据设置的来
我们平时是使用 post 请求来上传数据，使用 get 请求来下载数据。
遇到问题:
设置图片读取缓存预览,打印出来是正确的但是赋值之后没有生效,
必须用ref指向,才生效
原因:是函数中的this指向理解有误
解决:在函数外部添加this使的它指向全局变量
inputImg (e){
let image = this.$refs.yvlan//同过ref赋值,也可以指向全局
this.file = e.target.files[0]//锁定图片,图片直接双向绑订无效
this.name = this.file.name//显示图片名称
this.size = ((this.file.size) / 1024 / 1024).toFixed(2) + 'MB'//显示图片大小
this.imgc = '' //地址
this.progress = '' //进度
this.tableShow = true
var reader = new FileReader();
var that=this//使函数体内部的this指向变成全局的this指向
reader.readAsDataURL(this.file)
reader.onloadend = function(e) {
console.log(22,e.target.result); //查看对象属性里面有个result属性，属性值，是一大串的base64格式的东西，这个就是我们要的图片
console.log(33,this);//取得数据 这里的this指向FileReader（）对象的实例reader
// this.imgc = this.result//赋值给img标签让它显示出来 ,这里直接this指向是错误的
that.imgc = e.target.result//赋值给img标签让它显示出来
console.log(44,this.imgc)
// image.setAttribute("src", this.result)//
}
},
遇到问题:
进度条设置的是文件点击上传的实时传输,100%只代表图片文件完成上传,但是处理和返回数据是不知道的,
如果之后操作文件整天的上传,速度过快,导致文件还没返回数据,就完成上传指令,那么上传是不成功的
解决:
让图片上传值最大是99,等数据返回再次赋值是100
var config = {
onUploadProgress: e => {
var complete = ((e.loaded / e.total) * 100).toFixed()
this.progress = complete-1
}
}
let fD= new FormData()
fD.set('file',file)
axios.post('/carrots-admin-ajax/a/u/img/{module}', fD,config)
.then(res => {
console.log('res',res)
this.imgc = res.data.data.url
this.progress = 100
})
即:在数据返回前,进度条会卡在99%
返回列表
评论