![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 63
织_网
需求指导设计,设计指导开发
展开
-
Vue.js 混入(Mixins)高级用法:提升代码复用与灵活性
Vue允许开发者自定义选项的合并策略,这对于解决特定场景下的冲突问题非常有用。// 自定义合并逻辑,这里以简单合并数组为例// 混入定义customArray: ['混入项1'],// 组件中使用customArray: ['组件项1'],// 自定义合并策略将自动应用于customArrayVue混入提供了强大的代码复用能力,通过上述高级用法,我们可以更精细地控制混入的使用,解决潜在的冲突问题,同时通过模仿高阶组件的思想,提升组件的灵活性和可维护性。原创 2024-05-27 11:44:08 · 442 阅读 · 0 评论 -
vite + vu3 构建配置多页面打包
最近有多页面项目需要重构,使用vite + vue3 进行搭建,我只给出了我成功配置并在使用的方案原创 2023-02-15 11:58:50 · 2365 阅读 · 1 评论 -
vue 弹窗 惯性滚动 加速滚动
惯性滚动(也叫 滚动回弹,momentum-based scrolling)最早是出现在 iOS 系统中,是指 当用户在终端上滑动页面然后把手指挪开,页面不会马上停下而是继续保持一定时间的滚动效果,并且滚动的速度和持续时间是与滑动手势的强烈程度成正比。抽象地理解,就像高速行驶的列车制动后依然会往前行驶一段距离才会最终停下。而且在 iOS 系统中,当页面滚动到顶/底部时,还有可能触发 “回弹” 的效果。原创 2022-12-29 16:53:56 · 2437 阅读 · 0 评论 -
vue 获取滑动方向指令/左/右/上/下 v-touch
【代码】vue 获取滑动方向指令/左/右/上/下 v-touch。原创 2022-09-16 16:24:59 · 1075 阅读 · 0 评论 -
抓娃娃营销工具 uniapp
【代码】抓娃娃营销工具 uniapp。原创 2022-08-26 14:08:19 · 417 阅读 · 0 评论 -
uniapp 区分环境打包配置
配置如果没有package.json,通过命令npm init -y创建。删除package.json 初始化配置 ; 直接复制底下代码属性UNI_PLATFORM仅支持填写uni-app默认支持的基准平台,目前仅限如下枚举值:h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qqBROWSER 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值:chrome、firefox、id、edge、safari、hbuilderxtitle ..原创 2022-08-09 10:02:00 · 8688 阅读 · 11 评论 -
常用工具函数 持续更新
只刷新一次页面获取url参数对象原创 2022-07-27 22:32:41 · 138 阅读 · 0 评论 -
Pinia的数据持久化插件 pinia-plugin-persist
利用持久化工具 pinia-plugin-persist 进行数据持久化储存原创 2022-07-25 11:29:21 · 773 阅读 · 0 评论 -
技术方案设计文档
以上需求还有很多细节点,就不一一阐述编辑器画布使用的组件和渲染逻辑和h5完全一致,为了两边一致,应该抽离出来提供给它们使用,从而保证制作的时候和渲染出来的h5保持一致考虑自研服务前,先列出我们统计所需的功能我们需要实现分渠道统计这个需求,要实现这个需求,我们就需要自定义事件统计包括:思路:vuex storevuex getter......原创 2022-07-12 17:30:02 · 389 阅读 · 0 评论 -
倒计时组件 兼容 ios/安卓
倒计时 uniapp /vue自行修改原创 2022-07-07 13:28:51 · 284 阅读 · 0 评论 -
简单易修改的弹框组件
弹窗组件适用框架 vue, uniapp使用再uniapp 框架中可简单修改标签与尺寸单位后使用px与rpx原创 2022-06-27 14:18:24 · 385 阅读 · 1 评论 -
解决sass-loader与node-sass报错
问题:最开始想要学习一下vue-cli更换主题,然后就各种百度,最后说要使用sass,好家伙,就跟着百度的步骤一顿安装,结果,失败了,然后研究了两天,终于,终于解决了这个问题,激动得不知道跟谁分享所以记录下了这篇文章,希望能帮助到跟我相同问题的小伙伴,报错:这个报错可能是因为无法下载,所以切换到cnmp下载;但是也可能是因为版本不匹配,可以切换安装版本,具体步骤如下。问题1:下载的原因造成的问题方法1、本地安装第一步如果之前安装了一遍失败了,记得执行卸载,没有则跳过卸载步骤。卸载:npm原创 2022-01-26 11:53:28 · 7958 阅读 · 0 评论 -
前端 实现数据的分批加载
UNI-APP上拉分段加载数据当服务端数据没有进行分页处理时,ajax请求一次接口返回所有的数据;当请求数据过多的时候页面渲染会非常慢,并且很容易造成页面卡死现象;因此,前端可以通过js进行分页,达到分批加载数据的目的。思路:1、获取数据的分段处理 (1)无数据不显示加载状态栏显示无数据信息提示 (2)有数据动态设置API参数取值加载数据时动态改变API参数值,这里设置time来控制,追加数据时time++,确保查询的追加数据条数比上次获取的数据多十条。分段截取数据原创 2021-11-01 15:56:07 · 3897 阅读 · 0 评论 -
Vue 后台管理类项目兼容IE9+
Vue 后台管理类项目兼容IE9+最近项目进入到了第三方集成的环节,集成第三方监控非要用IE,咋办?老板让我将后台管理系统的框架兼容下IE,一直都是在chrome下开发的,也不知道IE下是什么鬼。目前后台管理系统前端搭建方式目前系统是用vue-cli@2.0生成的,UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。需要解决的兼容问题经过自己的一番测试,目前主要有以下的兼容问题:在IE下由于没有promise,所以axios不能用了;在涉及到fle转载 2021-08-12 09:24:40 · 348 阅读 · 0 评论 -
Vue 页面引导效果(首次登录新用户引导) driver.js 引导页
轻量级、无依赖的原生 JavaScript 引擎,可将用户的注意力集中在整个页面上;这是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。简介及使用教程Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项,支持所有主要浏览器。特点:简单:简单易用,完全没有外部依赖高度可定制:有一个强大的api,可以用于你希望突出显示任何内容高亮显示:页面功能介绍上的任意元素(字面上的任意)功能介绍:为你的web应用程序创建.原创 2022-02-08 16:45:00 · 7933 阅读 · 1 评论 -
[Vue warn]: Error in callback for immediate watcher “data“: “TypeError: Cannot read property ‘reduce
[Vue warn]: Error in callback for immediate watcher "data": "TypeError: Cannot read property 'reduce' of null"这个错误是el-table的data绑定的值为null造成的,只要把绑定的值赋值为数组就可以解决了。仔细检查el-table的data绑定的值在哪里被赋值为null,比如说初始化的时候items:""而不是items:[],这样就会报这种错,或者是中途哪里隐式地赋值为null原创 2022-02-08 14:34:11 · 10588 阅读 · 0 评论 -
Vue3有了解过吗?能说说跟Vue2的区别吗?
一、Vue3介绍关于vue3的重构背景,看看尤大怎么说:「Vue 新版本的理念成型于 2018 年末,当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,但在这段时期,前端世界已经今昔非比了在我们更新(和重写)Vue 的主要版本时,主要考虑两点因素:首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平;其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」我们可以概览Vue3的新特性,如下:速度更快体积减少更易维护更接近原更易使用转载 2021-12-05 11:02:27 · 555 阅读 · 0 评论 -
vue3 +Ts vsCode 报错 处理
常见报错Compile error with 4.0.6 Module ‘"…/…/…/vue/types"’ has no exported member ‘Ref’vscode报错 xxxx is declared but its value is never read Vetur解决办法卸载禁用 vuter 插件安装Vue Language Features (Volar)插件,重新打开项目原创 2021-11-30 17:02:33 · 5707 阅读 · 3 评论 -
html快速使用vue.js
原理很简单就是在html中引入vue.js文件,然后就可以进行vue的模式编写代码了这是vue.js的文件,也可以去vue官网查询最新的cdn文件https://cdn.jsdelivr.net/npm/vue在单个html中使用vue.js主要就是引入vue.js后在script中进行实例化vue,就可以按照vue的代码方式进行编写了<!DOCTYPE html><html lang="en"><head> <meta char.原创 2021-11-21 11:20:28 · 2542 阅读 · 0 评论 -
Vue2中$ref、$emit、props、model、provide / inject 的传参方式区别和使用及使用场景
概述$ref、$emit、props、model是 Vue2 中常见的传参方式,可以实现组件与组件之间的数据传递和交互$ref的使用方式父组件:<template> <div> <h1>我是父组件!</h1> <child ref="msg"></child> </div></template><script>import Child from '../componen原创 2022-03-26 10:35:51 · 2833 阅读 · 0 评论 -
vue v-model双向绑定checkbox遇到的坑
今天遇到一个vue诡异的数据绑定问题,下面我给大家分享一下我解决问题思路和方式,以及为什么要这样。一、问题现象使用vant的checkbox组件时无法使用v-model来双向绑定选中状态!但是重新打开checbox所在的pop弹窗,又能显示之前操作的最新的选中值,如果不关闭之后重新打开,始终都不更新,感觉好像没有没有反应一样。二、问题代码html代码:<div v-for="item in siteList" :key="'site-'+ item.id" class="list-site-原创 2021-12-16 23:05:50 · 2432 阅读 · 0 评论 -
js/vue 动态获取浏览器宽度/高度
data() { return { windowWidth: document.documentElement.clientWidth, // 实时屏幕宽度 windowHeight: document.documentElement.clientHeight // 实时屏幕高度 } }, mounted() { // 实时获取浏览器宽度高度 const that = this window.onresize = () => ..原创 2022-02-09 16:16:59 · 4114 阅读 · 0 评论 -
vue + element 与 vue element admin 中 tab标签视图 页拖拽(拖动) sortablejs 插件案例
业务需求公司有一堆tab签,每个tab签里展示对应的数据,方便拖拽更换位置实现el-tabs标签页下的el-tab-pane拖拽效果,可以使用第三方插件sortable进行实现效果图原位置拖动拖动后的位置因为csdn不会上传gif动图,所以就截取几张图片来展示实现的成果,可以看后两张红色框圈中的数据,是我按下鼠标还没放开时候的位置,证明已经实现动态拖拽。废话不多说,直接贴代码。npm安装sortable.jsnpm install sortablejs --save小案原创 2022-02-10 09:16:07 · 2919 阅读 · 1 评论 -
vue组件化 v-model 语法糖
//父组件<Demo v-model="num"></Demo>//子组件<template> <div> {{num}} </div></template><script>export default {data () { return { num:1 }},props:{ num: { type:Number,default:()=>原创 2022-03-25 18:37:54 · 721 阅读 · 0 评论 -
Vue3.0的新语法糖-script setup
<script setup>是vue3中新引入的语法糖,目的是简化使用Composition API时冗长的模板代码。<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法,它具有更多优势:更少的样板内容,更简洁的代码。能够使用纯 Typescript声明 props和抛出事件。更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类原创 2021-11-21 15:49:31 · 4601 阅读 · 0 评论 -
echarts vue组件封装
echarts vue组件封装为什么封装echarts组件1、原生echarts不是vue组件风格的,不爽2、原生echarts需要操作dom,麻烦3、原生echarts没有响应式系统,太菜在vue项目中使用echarts,步骤如下:(1)安装echarts依赖npm install echarts -S (2)引入echarts,可全局引入和按需引入全局引入:// 引入echarts --- 在 main.js 中import echarts from 'echarts'V原创 2021-09-06 10:20:15 · 2147 阅读 · 0 评论 -
Vue3 新特性 内置组件 <Teleport>
任意传送门——TeleportVue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新;Vue3 还新增了一个内置组件:Teleport。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。为什么我们需要 TeleportTeleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”场景像 modals,toast 等这样的元素,很多情况下,我们将它完全的和我们的原创 2021-12-04 00:48:23 · 1826 阅读 · 0 评论 -
后台管理系统的权限控制与管理
一、权限相关概念1.1 权限的分类(1)后端权限从根本上讲前端仅仅只是视图层的展示,权限的核心是在服务器中的数据变化,所以后端才是权限的概念,后端权限可以控制某个用户是否能够查询数据,是否能够修改数据等操作后端如何知道该请求是哪个用户发过来的cookiesessiontoken后端的权限设计RBAC简述: RBAC-0 模型的特点就是用户和角色是多对多的关系,同一个用户拥有多个角色的属性,我们通过组织这个概念来构建组织架构,从而实现对角色数据权限的分配。这样单个用户账号拥有的全部原创 2021-11-28 13:41:22 · 2547 阅读 · 0 评论 -
vue3 使用 jsx
<script lang="tsx">import {defineComponent, ElSelect, ElOption } from 'element-plus'import { ref, reactive } from 'vue'import { map } from 'lodash-es'let selectionValue = ref('子应用')const selectionOptions = reactive([ { value: '子应用1',原创 2022-05-23 10:54:53 · 1467 阅读 · 2 评论 -
vue 路由报错
TypeError: Failed to fetch dynamically imported module: http://192.xxx.xxx.xx:4000/src/views/orderManage/TradeOrder/TradeOrder.vueUncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://192.xxx.xxx.xx:4000/src/views/orderManag原创 2022-05-18 09:13:43 · 7896 阅读 · 0 评论 -
解决eslint空格报错等问题
.eslintrc.js中找到rules 下添加'no-irregular-whitespace':'off',原创 2022-05-13 16:47:45 · 641 阅读 · 0 评论 -
报错:‘xxxx‘ is declared but its value is never read.Vetur(6133)
报错:‘xxxx‘ is declared but its value is never read.Vetur(6133)解决方法:在设置中搜索vetur,找到 Vetur › Validation: Script取消勾选 Validate js/ts in原创 2022-01-06 19:18:48 · 10406 阅读 · 16 评论