前端小工具

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 Markwodn Editor

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推荐的插件版本为echarts@4.6.0、mermaid@9.4.3

# 安装mermaid依赖开启mermaid画图功能
npm i mermaid@9.4.3
# 安装echarts依赖开启表格自动转图表功能
npm i echarts@4.6.0

SVG组件

为了在vue项目中使用SVG，首先进行安装插件：

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中引入插件：

// 引入SVG需要用到插件
import {createSvgIconsPlugin} from "vite-plugin-svg-icons";
...

export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            symbolId: 'icon-[dir]-[name]',
        })
    ],
    ...
})

在main.ts中配置：

// svg插件需要配置代码
import 'virtual:svg-icons-register'

在页面中使用时：

<!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
<svg style="width: 90px; height: 90px;">
    <!-- xlink:href 执行用哪一个图标,格式 #icon-[路径src/assets/icons下的SVG文件名]  -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use xlink:href="#icon-phone" fill="red"></use>
</svg>

为了方便使用将SVG封装为一个组件，新建一个组件在 src/components/SvgIcon/index.vue，写入：

<template>
  <!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
  <svg :style="{width,height}">
    <!-- xlink:href 执行用哪一个图标 -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script lang="ts" setup name="index">
defineProps({
  // xlink:href属性值前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  // 提供使用的图标名字
  name: String,
  // 接收父组件传递颜色
  color: {
    type: String,
    default: ''
  },
  // 接收父组件传递的图标宽度
  width: {
    type: String,
    default: '16px'
  },
  // 接收父组件传递的图标高度
  height: {
    type: String,
    default: '16px'
  }
})
</script>

<style scoped></style>

在其他组件使用时：可传入，name:路径src/assets/icons下SVG图标名称 color:图标颜色 width、height:图标宽高

<template>
	<svg-icon name="home" color="pink" width="100px" height="100px" />
</template>

<script lang="ts" setup name="App">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>