文章分类 - vue3.0
摘要：在做表单设计的时候，右侧数据是对中间数据的浅拷贝 { ...element, //浅拷贝，但是引用类型的数据，无法独立出来 id: guid(), } ，会出现右侧数据更改，中间部分两个组件数据会同步修改。 解决方案是将所有数据进行深拷贝 //组件克隆 const clone = (element)
阅读全文
摘要：<template> <div class="text-container"> <p v-if="isCollapsed" :title="fullText">{{ trimmedText }}</p> <p v-else>{{ fullText }}</p> <div class="flex ju
阅读全文
摘要：<template> <!-- 自动检测文本文字超过2行添加展开按钮，未超过则不显示展开按钮，溢出部分显示省略号--> <div class="text-container"> <div ref="textDiv" class="text-content"> {{ text }} </div> <d
阅读全文
摘要：亲测好用的组件 5分钟倒计时也可以做成60秒倒计时 main.vue引入countDown.vue 倒计时：<countDown :minutes="5" :seconds="0" @stopCountdown="stopCountdown"></countDown> <script setup l
阅读全文
摘要：1.1 给表单添加ref属性 1.2 给el-form-item添加prop属性 1.3 定义表单的验证规则(也可以不需要定义) 1.4 表单提交时，通过this.$refs.表单的ref.validate() 源码： <template> <el-main> <el-form :model="li
阅读全文
摘要：js使用正则表达式去掉文本中的空格、标点及符号，仅仅保留中文、英文、数字，input textarea排除标点符号空格等计算长度 const countWords = (text) => { const regex = /[^\u4e00-\u9fa5a-zA-Z0-9]/g; // 使用repla
阅读全文
摘要：1、禁止鼠标右键操作 // 禁止鼠标右键 window.oncontextmenu = function () { return false; }; 2、禁止选中网页内容 // 禁止选中网页上内容 window.onselectstart = function () { return false;
阅读全文
摘要：在Element UI中，el-tree组件提供了default-expanded-keys属性来设置默认展开的节点，并且可以通过current-node-key属性来高亮（也就是定位）当前选中的节点。以下是一个简单的实例代码，展示了如何在el-tree中自动展开并定位到选中的节点： <templa
阅读全文
摘要：电子班牌pc项目：shpc.dianzibanpai.pc //判断是否学生是否未签到，类似单选const clickStudent = (row: any) => { let index = wqdStudentList.value.findIndex(item => item.xh == row
阅读全文
摘要：https://devpress.csdn.net/vue/632fc951357a883f870c8be2.html <!-- BaseInput.vue component --> <template> <div> <h2>Composition API</h2> <input type="te
阅读全文
摘要：https://blog.csdn.net/weixin_43288600/article/details/121430649 安装 npm i html2canvas //需要引用的页面 import html2canvas from 'html2canvas'; //使用方法：使用div包裹一下
阅读全文
摘要：base64的图片转成blob const dataURLtoBlob = (dataurl) => { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.le
阅读全文
摘要：vue3.0常用的函数及方法： 数组操作常用方法.map filter forEach find findIndex includes some every map 用于数组 一般map适用于对于数组中的数据需要重新处理，也就是需要return出一个新数组的时候。 solutionPlaces.va
阅读全文
摘要：父组件只引用组件，在子组件内进行弹窗的隐藏和显示 父组件： <overallSolution :showDialog="showDialog" :readonly="false" @close="showDialog = false"></overallSolution> const showDia
阅读全文
摘要：E:\shimily\project\gench.projectmanage\gench.projectmanage.pc\src\util\request.ts import axios from "axios"; import { notification } from 'ant-design-
阅读全文
摘要：gench.projectmanage.pc\src\pinia\index.ts import { defineStore } from "pinia"; import { storage } from '../util/storage'; import { GetChargeTypes, Get
阅读全文
摘要：组件通过v-model:XXXX实现数据双向绑定，更新的时候通过emit（"update:XXXX"）向外抛出数据，即可被v-model绑定。 父组件： <emergencyLevelSelector v-model:emergency-level="taskData.emergencyLevel"
阅读全文
摘要：解决方案：通过 v-model:projectList="projectList" 绑定在组件上， 子组件内通过 defineProps 接收数据，在watch里监听到数据变化的时候再赋值给新的对象 newProjectList ，子组件内使用该组件 父组件： <projectBoard v-mod
阅读全文
