我在使用vue-element-ui中的drawer组件中,使用嵌套方式,子drawer里面放入audio音频文件,音频文件会出现收缩现象。
解决方法:
我使用的方式是,在打开动画完成后,重新给audio的src数据赋值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<el-drawer title="历史记录" :visible.sync="currenthistory" direction="rtl" size="300" > <el-table :data="tableData" @row-click="handleCurrentChange"> <el-table-column property="result" label=" 结果" width="100" ></el-table-column> <el-table-column property="create_time" label="日期" width="200" ></el-table-column> </el-table> <el-drawer title="" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer" @opened = "onloaddata" > <audio ref="audio" controls controlsList="nodownload" :src="currentrow.file_url" ></audio> |
我们要使用drawer的opened事件,也就是Drawer 打开动画结束时调用下面方法,重新加载数据。
1 2 3 |
onloaddata(){ this.currentrow = this.tempcurrentrow } |
当数据重新加载后,第一次渲染出现的个别audio收缩现象解决。