<el-dialog title="视频顶览”:visible.sync="this.previewVid" :before-close="handleClose":destroy-on-close="true") <el-container> <el-aside width="20px" style="background-color: rgb(238,241, 246)"> <el-menu default-active="1" class="el-menu-vertical-demo" <el-menu-item v-for="(item,index) in vidurls":index-"index”:key-"item.name” @click="changevid(item)"<span slot="title">{( item.name ]i</span> </el-menu-item> </e1-menu> </el-aside> <el-main> <video :src="useVid" controls height="100%"width="109%"></video> </el-main> </el-container> </el-dialog>这段代码存在什么问题
时间: 2023-07-19 07:25:19 浏览: 154
element ui 对话框el-dialog关闭事件详解
这段代码存在以下问题:
1. 表示标题的双引号不匹配:`title="视频顶览"`中的引号没有正确关闭。
2. `visible.sync`中的`this`应该去掉,应该直接使用`previewVid`。
3. `:before-close`和`:destroy-on-close`两个属性中的括号不匹配,应该为`:before-close="handleClose"`和`:destroy-on-close="true"`。
4. `el-menu`标签中的`class`属性没有正确关闭。
5. `el-menu-item`标签中的`v-for`属性中的冒号`:`和连字符`-`使用错误,应该为`v-for="(item, index) in vidurls" :key="item.name"`。
6. `el-menu-item`标签中的`@click`事件缺少冒号`:click`。
7. `span`标签中的`{( item.name ]i`应该为`{{ item.name }}`。
8. `video`标签中的`height`和`width`属性值不合适,可能会导致视频显示不正常。
综上,这段代码应该修改为以下形式:
```
<el-dialog title="视频预览" :visible.sync="previewVid" :before-close="handleClose" :destroy-on-close="true">
<el-container>
<el-aside width="20px" style="background-color: rgb(238, 241, 246)">
<el-menu default-active="1" class="el-menu-vertical-demo">
<el-menu-item v-for="(item, index) in vidurls" :key="item.name" :click="changevid(item)">
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<video :src="useVid" controls height="500px" width="100%"></video>
</el-main>
</el-container>
</el-dialog>
```
阅读全文