js实现点击下载文件

https://blog.csdn.net/believet93/article/details/99821853
创建a标签设置download属性（filename）自定义事件触发

        var a = document.createElement('a')
        a.download = ''
        a.href = 'http://' + res.detail.url
        a.click()`

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

也有类似示例

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

html5 video标签不能播放mp4的问题

结论：视频的编码格式h264可以播放，其他格式不一定能播放。

https://blog.csdn.net/u012193330/article/details/47448981

el-upload源码中的upload-list.vue模板样式

背景：上传功能不是ajax实现，所以导致无法直接食用el-upload,但是想用el-upload的HTML模板和样式，所以从源码中选取一点出来。

源码位置

node_modules>element-ui>packages>upload>src>upload-list.vue

对源码的理解
－ 使用了transition-group实现过渡动画，详细不做细究，这里就直接使用。
disabled变量猜测为禁止上传，因为其他地方处理，所以这里就都是false。
－ 用v－for循环li标签，其中file.status相关猜测与ajax 上传相关，这里就直接用ready／success状态。tabindex属性设置了使用键盘上的 "Tab" 键
－ slot标签插槽
－ a标签将文件图标和文件名包裹
－ label标签将图标包裹
－ i 标签来使用图标（其实i 标签表示斜体的意思）
el-icon-circle-check为文件上传成功后的打圈的对勾图标
el-icon-check为图片上传成功后的对勾图标
－ i 标签来实现删除文件
－ el-progress猜测与ajax 上传相关，不适用
－ span（文本的容器）标签来实现picture card样式
－ 再用span标签包裹标签实现预览，删除下载

补充：使用el-image预览

vue element组件image-viewer使用

背景：el-upload的图片预览效果不佳，发现el-image的预览大图的功能不错。所以image-viewer。
做法：源码中拿
坑：此处有用法上的歧义，当在for循环中调用此组件，因为其绑定的opacity（不透明）属性，在同一父级下透明度为父opacity*子opacity。所以单个图片的蒙层会和多图时蒙层颜色不一致（通俗讲，多个图片时，你的背景会是黑的）
解决方法：不在for中调用，只要保证你的每次打开时能将url赋值进你的viewUrl就行了。
用法：下文写得不错，这里就不写了。
————————————————

原文链接：https://blog.csdn.net/qq_38977441/article/details/105976959

补充坑：层级问题。关于element ui的el-drawer，z-index初始2000，每打开一次都会+1。由于image-viewer设定了2000所以以后都只会出现在el-drawer下面。
原因：详见一下链接。
————————————————

原文链接：https://segmentfault.com/a/1190000039967181

解决办法：暂时image-viewer的z-index设定5000。

el-checkbox option的值为一个对象数组

对于checkbox label的值为对象的ID，插值绑定对象的name
这样group 值就是一个ID的数组。
如果checkbox标签不用插值绑定，那么group的值会是ID和name的数组。所以使用下面的写法

<el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in cities" :label="city.id" :key="city">{{city.name}}</el-checkbox> </el-checkbox-group>

关于重置表单内容

Vue+element-ui
this.$refs[formName].resetFields()的注意事项

  • Form必须要有ref属性
  • Form必须绑定：model
  • Form包裹的元素绑定值需与FormItem中prop属性名称保持一致
    关于复杂表单，form-item嵌套form-item，或者form-item嵌套form，还有动态form-item等后续有方法再补充
    暂时直接将数据清空

新建与编辑公用同一个模板

结论：相似的模板，又不同时出现可使用一套模板和变量
编辑大体就是给新建的表单加上一个初始值而已，若还有其他变更可使用v－if来实现
补充：编辑窗口关闭后，使用this.$refs[formName].resetFields()。那么重置的结果会和编辑初时一样，也就是说，不是空表单，会导致新建时表单不干净。
所以，编辑关闭时，必须将表单置空。
感受：两套代码变一套，性能可能提升不大，但是程序员只需要维护一套代码！

浏览器缓存

Window sessionStorage 属性
保存数据语法：
sessionStorage.setItem("key", "value");
读取数据语法：
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法：
sessionStorage.removeItem("key");
删除所有数据：
sessionStorage.clear();

备注：localStorage的用法和sessionStorage一致。
sessionStorage在浏览器关闭后，清空。
而localStorage在清空浏览器缓存时清空。
个人经验，使用localStorage居多。

ctrl+shift+delete 清除浏览器缓存

浏览器的ctrl+F5

背景：F5刷新页面，新的变更没有反应出来。
原因：HTTP请求有可能不是到Server拿数据。可能获得到的是缓存的数据。
解决测：ctrl+F5可以强制HTTP请求不用缓存，到Server拿数据。
强力击：直接清空浏览器缓存（Cookies and other site data/Cached images and files等）
使用经验：ctrl+F5仅对当前页面有效，所以每个页面都要ctrl+F5