小程序防抖节流方法封装 /* * @Author: lzx * @Date: 2022-05-06 13:33:43 * @LastEditors: lzx * @LastEditTime: 2022-05-06 13:57:06 * @Description: Fuck Bug * @FilePath: \reconsitution_talk_vant\utils\tool.js */ /*函数节流*/ const throttle = (fn, interval) => { let enterTime = 0; // 触发的时间 let gapTime = interval || 500; // 间隔时间，如果interval不传，则默认300ms return function () { var context = this; var backTime = new Date(); // 第一次函数return即触发的时间 if (backTime - enterTime > gapTime) { fn.call(context, arguments); enterTime = backTime; // 赋值给第一次触发的时间，这样就保存了第二次触发的时间 } }; } /*函数防抖*/ const debounce = (fn, interval) => { let timer; let gapTime = interval || 500; // 间隔时间，如果interval不传，则默认500ms return function () { clearTimeout(timer); var context = this; var args = arguments; // 保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。 timer = setTimeout(function () { fn.call(context, args); }, gapTime); }; } export default { throttle, debounce }; // 说明 // 页面引入：import tool from '../../utils/tool' // 调用示例： // 防抖 // test1: tool.debounce(function () { // console.log('防抖') // }, 5000) // 节流 // test2: tool.throttle(function () { // console.log('节流') // }, 5000)

Vue3使用setup语法糖 1、语法糖与非语法糖代码写法对比{mtitle title="普通写法非语法糖"/}<script lang="ts"> import { toRefs, reactive } from 'vue' import navBar from '@/components/public/navBar.vue' import foot from '@/components/public/foot.vue' import productList from './components/product-list.vue' /** * 普通写法非语法糖 */ export default { name: '', props: {}, components: { navBar, foot, productList }, setup() { // 传参 const state = reactive({ navTitle: [{ name: '题目' }, { name: '题目' }, { name: '题目' }, { name: '题目' }, { name: '题目' }], mousee: '', mouseeIndex: 0, }) const mouseenter = (data: any, index: number) => { state.mousee = data state.mouseeIndex = index console.log("? ~ file: index.vue ~ line 102 ~ mouseenter ~ state.mousee", state.mousee, index) } const mouseleave = () => { state.mousee = '' } return { ...toRefs(state), mouseenter, mouseleave } } } </script>{mtitle title="setup语法糖写法"/}/** * setup语法糖写法 */ <script lang="ts" setup> import { toRefs, reactive } from 'vue' import navBar from '@/components/public/navBar.vue' import foot from '@/components/public/foot.vue' import productList from './components/product-list.vue' const state = reactive({ navTitle: [{ name: '题目' }, { name: '题目' }, { name: '题目' }, { name: '题目' }, { name: '题目' }], mousee: '', mouseeIndex: 0, }) const mouseenter = (data: any, index: number) => { state.mousee = data state.mouseeIndex = index console.log("? ~ file: index.vue ~ line 102 ~ mouseenter ~ state.mousee", state.mousee, index) } const mouseleave = () => { state.mousee = '' } let { navTitle, mousee, mouseeIndex } = toRefs(state) // 使用toRefs </script>2、如何在setup语法糖中使用props和配置TS使用（首先需要在<script setup>中使用defineProps来声明props，它具备完整的类型推断并且在<script setup>中是直接可用的）{mtitle title="非setup语法糖使用props"/}/** *非setup语法糖使用props */ <script> export default { props: ['more'], } </script>{mtitle title="setup语法糖使用props"/}/** *setup语法糖使用props */ <script lang="ts" setup> import { reactive } from 'vue' /** * 普通获取props数据 */ const props = defineProps({ more: { type: Object, default: { title: '', subhead: '', isMore: '', isMoreUrl: '' } } //或者：more: Object，more: {}，虽然能正常使用但是页面使用的时候ts会报错未定义或者unknow }) /** * TS获取props数据 */ const props = defineProps<{ more: Object }>() /** * TS获取props数据(默认值) * 引用：https://www.jianshu.com/p/102906089ab9 * withDefaults 用于defineProps绑定默认值的api * defineProps 只能是要么使用运行时声明，要么使用typescript类型声明。同时使用两种声明方式会导致编译报错。 * defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。他不需要导入且会随着 <script setup> 处理过程一同被编译掉。 * 运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。 * 若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。 */ interface Props { more?: {// 设置好类型定义 title: string, subhead: string, isMore: string, isMoreUrl: string } } /** * 可以给定默认值 */ const props = withDefaults(defineProps<Props>(), { more: () => { return { title: '', subhead: '', isMore: '', isMoreUrl: '' } } }) </script>3、如何在setup语法糖中使用emit和配置TS使用（首先需要在<script setup>中使用defineEmits来声明emits，它具备完整的类型推断并且在<script setup>中是直接可用的）{mtitle title="子组件调用在非setup语法糖下"/}// 父组件调用子组件 <subheading @testEmits="testEmits"/> // 父组件方法测试emits const testEmits = (type: String) => { console.log('我是测试emits：', type) } /** * 子组件调用在非setup语法糖下 */ <script> export default { emits: ['testEmits'], emit('testEmits', '我是子组件调用的') } } </script>{mtitle title="子组件调用在setup语法糖下"/}/** * 子组件调用在setup语法糖下 */ <script setup lang='ts'> import { defineEmits } from 'vue' const emit = defineEmits(['testEmit']) // 可以接收多个 emit('testEmit', '我是子组件调用') // 在ts下使用 const emit = defineEmits<{ // 类型声明 (e: 'testEmit', value: String): void }>() emit('testEmit', 'test') </script>3、使用defineExpose（使用<script setup>的组件是默认关闭的，也即通过模板ref或者$parent链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定）{mtitle title="使用defineExpose"/}<script setup lang="ts"> import { ref } from 'vue' const count = ref('我是子组件传递的值') defineExpose({ count }) </script><template> <div @click="childClick">⽗组件</div> <child ref="child" /> </template> <script setup lang="ts"> import { ref } from 'vue' import child from './components/child.vue' const child = ref(null) const childClick = () => { console.log(child.value.count) // 我是子组件传递的值 } </script>

vue3使用pdfh5插件 // 下载引入 npm i pdfh5 -S 或者 npm install pdfh5 需要用到的页面引入 import Pdfh5 from "pdfh5" import"pdfh5/css/pdfh5.css" 模板 <template> <div ref="pdfBox"></div> </template> 创建实例对象 setup (props, { emit }) { // 获取dom let pdfBox = ref(null) // 传参 const state = reactive({ pdfh5: null }) // 挂载 onMounted(() => { if (router.currentRoute.value.query) { state.pdfh5 = new Pdfh5(pdfBox.value, { // 此处使用ref获取避免不刷新 pdfurl: 'http://192.168.4.67:17000/sign/' + router.currentRoute.value.query.url }); //监听完成事件 state.pdfh5.on("complete", function (status, msg, time) { console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum) }) } }) onUnmounted(() => { state.pdfh5 = null }) }

前端转PDF，通过前端edge库去实现（officeNet源码见附件） 通过前端edge库去实现（officeNet源码见附件）1、方案系统环境：　需要安装office，试过office2019 和 2016，其他版本尚未测试；　需要安装vs2010的office运行时（office安装完毕之后应该已经包含运行时环境，但实际情况不能保证每一台安装都没问题）（最好下载安装个微软运行库）　运行时微软官方下载地址（或者直接下载微软运行库合集）：　　微软运行库 　　微软运行库 　需要.netframework4.5及其以上（因为edge支持的.net的类库版本要求不得低于4.5，否则类库语法编译不通过，类库代码编写必须按照edge的格式要求定义返回值方法名入参格式等）2、方案前端环境：　1.package.json  dependencies 追加 "electron-edge-js": "^14.16.1" （和electron 13.6.0版本匹配）　2.vue.config.js 外部拓展 externals 追加 "electron-edge-js"，打包的时候否则遗漏报错　3.officeNet.dll 提供的中间类库，放到前端项目根目录下调用 const edge = require('electron-edge-js')3、officeNet功能：{mtitle title="执行word转换pdf：前端代码调用示例（backgrund.js中测试）"/}var sdkPath = path.resolve("./officeNet.dll") // 三个参数名称和参数的值写死 const translate = edgefunc({ assemblyFile: sdkPath, typeName:"officeNet.OfficeTrans", translate: "Invoke" }) // 这两个参数名称写死，一个是输入文件绝对地址，一个是输出文件绝对地址，类库取这两个字段 var input = { inputFilePath: "E:\office-dll\0222\1.docx", outputFilePath: "E:\office-dll\0222\1.pdf" } translate(input, function(err,result) { if (err) throw err; console.log("traslate doc -> pdf: " + result); // 成功返回1 失败返回2 });{mtitle title="判断当前系统是否安装office"/}// 三个参数名称和参数的值写死 const officeVersionCheck =edge.func({ assemblyFile: sdkPath, typeName:"officeNet.OfficeCheck", translate: "Invoke" }) // 入参为{}对象（预留） officeVersionCheck({}, function(err,result) { if (err) throw err; console.log("office word version check：" + result); // 返回1 环境正常，返回2，office版本低于2010，返回3，系统无office });该方法通过注册表去获取word信息，不能绝对确认office在系统中安装，无法检测office安装是否存在问题；简单举例：注册表异常 或者 注册表残留 都会导致返回的值不准确（该方法只能作为一个参考）备注：　1.不能保证所有版本的word文件都能转换为pdf，可能存在转换失败的情况，代码注意做好不能转换的处理　2.仅限于windows环境使用　3.虽然edge内可以写c#代码，c#中可以写node代码，禁止这样写，代码互侵太严重　4.edge官方地址https://github.com/tjanczuk/edge#how-to-marshal-data-between-c-and-nodejs　5.自行熟悉edge的语法和代码约束和方法定义要求，edge性能不高（node和c#两个运行环境的胶水层），但是应用于当前pc场景本地转换文件功能足够隐藏内容，请前往内页查看详情

Vue3请求封装 {mtitle title="使用教程"/}配合使用 Vue3接口封装（配合请求封装）{mtitle title="新建一个request.js文件"/}import axios from 'axios' import {getUserInfo} from '@/utils/auth' import errorCode from '@/utils/errorCode' let msgBox: any = null; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_API, // 配置的地址 timeout: 30000, // 超时 headers: { 'content-type': 'application/json;charset=utf-8' } }); // request拦截器 // @ts-ignore service.interceptors.request.use(config => { if (getUserInfo() && getUserInfo().token) { // @ts-ignore config.headers.token = getUserInfo().token.toString() // 自定义token } // get请求映射params参数 if (config.method === 'get' && config.params) { let url = config.url + '?'; for (const propName of Object.keys(config.params)) { // @ts-ignore const value = config.params[propName]; let part = encodeURIComponent(propName) + "="; if (value !== null && typeof (value) !== "undefined") { if (typeof value === 'object') { for (const key of Object.keys(value)) { let params = propName + '[' + key + ']'; let subPart = encodeURIComponent(params) + "="; url += subPart + encodeURIComponent(value[key]) + "&"; } } else { url += part + encodeURIComponent(value) + "&"; } } } url = url.slice(0, -1); config.params = {}; config.url = url; } return config }, error => { return Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(res => { // 未设置状态码则默认成功状态 const code = res.data.code || 200; // 获取错误信息 // @ts-ignore const msg = errorCode[code] || res.data.message || errorCode['default']; if (code === 403) { if (msgBox) return false; // msgBox = ElMessage.error("登录状态已过期，请重新登录！") setTimeout(() => { location.href = '/'; }, 1500) } else if (code === 400) { // ElMessage.error(msg); return res.data; } else if (code !== 200) { // ElMessage.error(msg); return res.data; } else { return res.data } }, error => { // ElMessage.error("服务器连接错误，请联系管理员！") // ElMessage.error(errorCode['default']); return null } ) export default service {mtitle title="新建一个errorCode.js文件"/}// 用于定义一些错误码封装 export default { '401': '认证失败，无法访问系统资源', '403': '当前操作没有权限', '404': '访问资源不存在', 'default': '服务器繁忙，请稍后再试！' } {mtitle title="新建一个request.js文件"/}另一个写的request.js封装/* * @Author: lzx * @Date: 2022-01-11 09:08:05 * @LastEditors: lzx * @LastEditTime: 2022-04-06 15:56:55 * @Description: Fuck Bug * @FilePath: \cs_talk_admin\src\utils\request.js */ import axios from 'axios' import router from '@/router/index' import { message } from '@utils/resetMessage.js' import { ElMessageBox } from 'element-plus' // 数据请求字符 // axios.defaults.baseURL = 'http://192.168.10.254:20000/talk/' // axios.defaults.baseURL = window.g.baseURL axios.defaults.baseURL = process.env.VUE_APP_API // 设置请求超时时长 axios.defaults.timeout = 5000 // 表示跨域请求时是否需要使用凭证 axios.defaults.withCredentials = false // axios.defaults.headers.common['token'] = AUTH_TOKEN axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' // 允许跨域 axios.defaults.headers.post['Access-Control-Allow-Origin-Type'] = '*' // 请求拦截器 axios.interceptors.request.use( config => { if (config.push === '/user') { } else { if (sessionStorage.getItem('token')) { // 在请求头加入token，名字要和后端接收请求头的token名字一样 config.headers.token = sessionStorage.getItem('token') } } return config }, error => { message.error('接口错误，请联系管理员！') return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 后端返回的状态码 // if (response.data.code === 403 || response.data.code === 110) { // // 清空缓存 // sessionStorage.clear() // message.error('登录已过期，请重新登录！') // console.log(router) // console.log(router.options.history) // console.log(router.options.history.state.current) // // 避免重复跳转,导致控制台红色 // if (router.options.history.state.current !== '/login') { // router.replace('/login') // } // } switch (response.data.code) { case 403 || 110: message.error('登录已过期，请重新登录！') // 清空缓存 sessionStorage.clear() if (router.options.history.state.current !== '/login') { router.replace('/login') } break case 500: message.error(response.data.message) break } return response }, error => { // message.error('服务器繁忙，请联系管理员！') // 清空缓存 // sessionStorage.clear() // // 避免重复跳转,导致控制台红色 // if (router.options.history.state.current !== '/login') { // router.replace('/login') // } ElMessageBox.confirm( '服务器繁忙，请联系管理员！', '错误提示', { confirmButtonText: '退出登录', cancelButtonText: '取消', type: 'warning' } ) .then(() => { message.success('退出登录！') // 清空缓存 sessionStorage.clear() // 避免重复跳转,导致控制台红色 if (router.options.history.state.current !== '/login') { router.replace('/login') } }).catch() return Promise.reject(error) } ) export default axios