前端小工具
本文最后更新于:2024年6月21日 凌晨
HTML
video样式
<style>
/*video默认setting按钮*/
video::-internal-media-controls-overflow-button{ display: none !important;}
/*更改是否显示播放秒数*/
video::-webkit-media-controls-current-time-display{display: none; !important;}
/*更改是否显示进度条*/
video::-webkit-media-controls-timeline {display: none; !important;}
/*更改是否显示视频总时间*/
video::-webkit-media-controls-time-remaining-display {display: none; !important;}
/*更改是否显示播放暂停按钮 */
video::-webkit-media-controls-play-button {display: none; !important;}
/*更改是否显示下载按钮 */
video::-internal-media-controls-download-button { display:none; !important;}
/*更改是否显示全屏按钮*/
video::-webkit-media-controls-fullscreen-button { display: none; }
/*更改是否显示声音*/
video::-webkit-media-controls-mute-button { display: none;}
video::-webkit-media-controls-toggle-closed-captions-button {display: none;}
/*更改是否显示音量的控制条*/
video::-webkit-media-controls-volume-slider {display: none;}
/*整个控制栏都隐藏掉*/
video::-webkit-media-controls-enclosure{ overflow: hidden; }
/*重置audio和video的边框和圆角样式*/
video::-webkit-media-controls-panel{ width: calc(100% + 30px); }
</style>
Vue
element-plus
组件设置为中文
在App.vue
中,设置为中文,即可全局都为中文
<template>
<el-config-provider :locale="zhCn">
<router-view/>
</el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>
<style scoped lang="scss">
</style>
也可对某个组件单独设置
<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
zhCn.el.pagination.goto = '🛩️'
</script>
预览office
//docx文档预览组件
npm install @vue-office/docx
//excel文档预览组件
npm install @vue-office/excel
//pdf文档预览组件
npm install @vue-office/pdf
docx
演示
<template>
<vue-office-docx :src="docx" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
excel
文档
<template>
<vue-office-excel :src="excel" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
components:{
VueOfficeExcel
},
data(){
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
pdf
文档
<template>
<vue-office-pdf :src="pdf" @rendered="rendered"/>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
components:{
VueOfficePdf
},
data(){
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
编写预览Markdown
Cherry Markdown Editor 是一款 Javascript Markdown 编辑器,具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).
开箱即用
开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器,实例化的编辑器默认支持大部分常用的 markdown 语法(如标题、目录、流程图、公式等)。
易于拓展
当 Cherry Markdown 编辑器支持的语法不满足开发者需求时,可以快速的进行二次开发或功能扩展。同时,CherryMarkdown 编辑器应该由纯 JavaScript 实现,不应该依赖 angular、vue、react 等框架技术,框架只提供容器环境即可。
安装
npm install cherry-markdown --save
如果需要开启 mermaid
画图、表格自动转图表功能,需要同时添加mermaid
与echarts
包。
目前Cherry推荐的插件版本为[email protected]
、[email protected]
# 安装mermaid依赖开启mermaid画图功能
npm i [email protected]
# 安装echarts依赖开启表格自动转图表功能
npm i [email protected]
前端小工具
https://junyyds.top/2023/08/04/前端小工具/