随笔分类 - vue相关
摘要：Linux/Mac系统删除node_modules // 清理缓存 npm cache clean --force // 删除node_modules文件夹 rm -rf node_modules // 删除包版本锁 rm -rf package-lock.json Windows系统删除node_
阅读全文
摘要：VUE3 子组件 <template> <view class=""> <view class="" @click="handleClick">1</view> <view class="" @click="handleClick2">2</view> </view> </template> <sc
阅读全文
摘要：// debounce <template> <!-- 生效 --> <el-input v-model="value" @keyup="handelKeyUp"></el-input> <!-- 不生效 --> <el-input v-model="value" @keyup="debounce(
阅读全文
摘要：事件总线的概念： 事件总线（Event Bus）可以理解为一个全局的发布/订阅模式，可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽，通过它可以让一个组件发出事件，而其他组件监听并响应这些事件 事件总线的创建 Vue3版本中，我们不再使用new Vue()来创建事件
阅读全文
摘要：封装弹框组件 // 封装 Modal.confirm 方法 function confirm(title: string, content: string, okText: string = '确定', cancelText: string = '取消') { return new Promise<
阅读全文
摘要：在 Vue CLI 中，只有以 VUE_APP_ 开头的变量才会被 webpack.DefinePlugin 静态嵌入到客户端包中。这是因为在打包过程中，Vue CLI 会将环境变量中以 VUE_APP_ 开头的变量注入到应用程序中，以便 Vue.js 应用程序在运行时能够访问这些变量。 其他的变量
阅读全文
摘要：directive/dialogDrag.js import Vue from "vue"; Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400; let
阅读全文
摘要：1、组件结构 2、组件封装 src/components/StampBadge/src/StampBadge.vue 文件代码 <template> <div class="first-ring" v-bind="getBindValue" :class="getStampBadgeClass" >
阅读全文
摘要：1、组件封装 <template> <div ref="watermarkContainerRef" class="watermark-container"> <!-- 插槽--> <slot></slot> </div> </template> <script setup> import { re
阅读全文
摘要：遇到一个需求就是对这个 el-notification 加一个倒计时进度条，方便用户知道该通知何时自动关闭。 一、示例代码 （1）基于Vue2+ElementUI的项目 <template> <div> <el-button @click="showTip">do it</el-button> </
阅读全文
摘要：方式一：通过vue中的响应式对象可使用toRaw()方法获取原始对象 import { toRaw } from 'vue' const trueUserList=toRaw(dataObj) 方式二：通过json序列化 JSON.parse(JSON.stringify(dataObj))
阅读全文
摘要：将js文件放在public文件夹下面 在index.html文件下引入js文件 在前面加<%= BASE_URL %>后面加路径，如果想将本地js文件打包之后也放在static/js文件夹下，需要在public文件夹下创建一个和打包之后文件放的位置一样的文件夹 <script src="<%= BA
阅读全文
摘要：问题描述 工作中一般都是后端去解析excel数据，前端使用上传组件去将excel组件丢给后端，后端使用一些插件去解析excel（比如hutool工具类） 不过有些情况下，前端也需要去做一些excel的解析，比如产品经理说，在上传excel文件之前，要做一个excel的图表化预览审核查看啥的，没问题的
阅读全文
摘要：改封装组件依赖`element-china-area-data`插件，引入组件可参照：https://www.npmjs.com/package/element-china-area-data ``` title：弹框显示标题, pageId:页面id，根据id查询历史操作记录 --> 生成新地址
阅读全文
摘要：``` // html ``` ``` // js export default{ name : 'blog-header', data(){ return{ isPC:true, // 大图片 qall: '../../static/image/土味.jpg', qallBig: '../../s
阅读全文
摘要：``` methods: { //点击调用上传方法 async handleUpload(row) { try { let fileList = await this.getFile("", true); // 参数1：选取文件类型如.pdf、.png、.doc文件，参数2、是否多选 console
阅读全文
摘要：### 一、v-model 的参数 默认情况下，`v-model` 在组件上都是使用 `modelValue` 作为 prop，并以 `update:modelValue` 作为对应的事件。我们可以通过给 `v-model` 指定一个参数来更改这些名字： ``` ``` 在这个例子中，子组件应声明一
阅读全文
摘要：Prop 校验 ``` export default { props: { // 基础类型检查 //（给出 `null` 和 `undefined` 值则会跳过任何类型检查） propA: Number, // 多种可能的类型 propB: [String, Number], // 必传，且为 St
阅读全文
浙公网安备 33010602011771号