qq_42750608的博客

摘要：本文介绍了一种使用ResizeObserver动态调整表格高度的实现方案。通过监听textarea元素尺寸变化，在Vue组件中计算并设置表格tbody的最大高度，使其不超出可视窗口范围。主要实现步骤包括：获取DOM元素引用、定义高度计算函数、使用防抖优化性能、监听编辑状态变化，并在组件卸载时清理观察器。该方法避免了直接修改样式表的繁琐，实现了表格内容区域的自适应并纵向滚动的效果。

摘要：本文介绍了基于Pinia的状态管理实现方案。首先在store目录下创建核心配置(index.ts)，初始化Pinia并集成持久化插件。然后定义了一个表格数据存储模块(tableStore.ts)，包含状态(state)、持久化配置(persist)、计算属性(getters)和操作方法(actions)。在main.ts中挂载状态管理，最后展示了使用示例：通过storeToRefs获取响应式状态，直接解构获取操作方法。该方案实现了类型安全的状态管理，支持持久化存储，并提供了清晰的使用方式。

本文介绍了在Vue3项目中实现文本溢出显示Tooltip功能的三种方案：1) 自定义指令v-ellipsis-tooltip，通过检测文本宽度自动添加省略号和提示图标；2) 全局注册指令方式，无需重复引入；3) 封装MyTooltipWrapper组件，通过插槽简化使用。核心实现包括：使用Range API检测文本溢出、ElementPlus的Tooltip组件展示完整内容、动态渲染提示图标。三种方案均支持响应式更新，适用于需要文本截断并提示完整内容的场景，开发者可根据项目需求选择适合的实现方式。

本文介绍了基于Vue 3和Element Plus的弹窗组件实现方案。核心是通过useModal钩子函数管理弹窗状态，利用h函数安全渲染内容避免XSS风险，采用nextTick确保弹窗正确显示。组件支持多种操作类型（添加、编辑、删除等），根据状态调用不同API，并为复杂场景提供自定义内容渲染。示例展示了删除和设为默认模板两种操作，强调了对于简单弹窗应优先使用Element Plus内置组件。该方案实现了弹窗逻辑与UI的分离，提升了代码复用性和安全性。

基于element-plus的el-tooltip写组件适用于pc端和h5端

vue3滚动到顶部钩子函数+组件简单示例

关于pc端分页+h5端加载更多的vue3简单钩子函数

vue3写一个简单的搜索栏（带历史记录+光标自动聚焦到文案最后）

vue3写一个简单的时间轴组件

vue3使用mavon-editor插件实现富文本编辑效果

经过多番查证，使用npm config ls查看相关配置等方式，最后发现全局的.npmrc文件的配置多写了global=true，去掉就好了。重新打开项目，使用npm install（全部下载）或者npm install xxx 其他参数（单个插件下载）重试。路径：C:\Users\xxx(一般是自己的名字或拼音）\.npmrc。

vue3使用vuex的示例(模块化功能)

vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)

vue3写nav滚动事件中悬停在顶部

vue3通过ref获取子组件defineExpose的数据和方法

Vue2插槽的简单使用示例

vue3使用v-model控制子组件进行双向数据绑定

vue3父子通信+ref,toRef,toRefs使用示例

首先是主要逻辑文件=>vuex页面keepAliveCtrls.js:const state = { include_arr: []}const getters = { get_clude_arr: state_ => state_.include_arr}const mutations = { setinclude_arr(state_,data) { state_.include_arr = data }}const actions = { add_ro

使用vue写一个picker插件,使用3d滚轮的原理

首先是vue.config.js--主要是在module.exports中加入pages的配置(最重要的一点):module.exports = { pages: { index: { // page 的入口 entry: "src/views/index/main.js", // 模板来源 template: "public/index.html", // 在 dist/index.html 的输出 filename

首先是store目录,目录结构如下:index.js// 组装模块并导出 store 的地方import Vue from 'vue'import Vuex from 'vuex'import loading from './modules/loading'Vue.use(Vuex)export default new Vuex.Store({ modules: { loading, }, strict: process.env.NODE_ENV !== 'p

众所周知,UI设计师是根据ip6的手机尺寸画的设计图,所以一般html宽是375px,所以将html的font-size写为37.5px;html{ font-size: 37.5px;}然后在style标签(记得写lang="scss")中:@function px2rem($px) { $item: 37.5px; @return $px/$item+rem;}/...

项目中经常子组件被引入父组件,有时候父页面会出现错乱样式,原因就是同名元素选择器互相影响,其他页面的样式影响了当前页面的样式,可以参考以下解决方式:1.在style标签中写scoped2.在style不用写scoped,但是最外层的div的class或者id必须是整个项目来看都是唯一的最外层的选择器+空格+元素本身的选择器写样式,当然由于每个元素前面都写太麻烦可以使用less,styl...

已知客户端中,data写的内容能够使子组件中的textarea自动撑高,但是数据返回callback后更改数据赋值就不能随着内容撑高了,因为此时dom已经加载完成,要么通过ref修改dom的style样式,要么可知v-if的true和false在nextTick中触发页面重绘,将textarea元素的高度设置为textarea的scrollHeight:this.text = ?;this...

<button ref="btn">按钮</button>最好不要使用this.$refs.btn.setAttribute('disabled',true);禁用按钮因为这个的效果和this.$refs.btn.setAttribute('disabled',false);是一样的,都禁用按钮了,因为true或者false被转化为了字符串,而这个字符串基本等效于...

vue框架的nextTick使用场景示例

使用localStorage模拟保存token,因为localStorage默认保存的是字符串,所以就限制保存isLogin为0就是未登录,要默认直接跳到/login页面,若为1就是默认到/home页面,没有localStorage的也是默认跳转到/login登录页1.router.js--使用beforeEach前置导航判断是否要跳转/login页面/* eslint-disable ...

1.首先说一下v-model,印象中只有input标签使用?太天真,它是进行双向数据绑定的,有了它再不用多写代码了.v-model是 :value和@input的语法糖使用v-model时:<input v-model="sth"/>等效于使用:value和@input时:<input :value="sth" @input="sth=$event.t...

本文章是在rap2模拟接口下实现axios交互功能,axios拦截大部分代码逻辑来自https://blog.youkuaiyun.com/qq_38145702/article/details/815588161.src目录下新建axios文件夹,内有api.js和request.js首先是request.js//对axios的封装/****** 创建axios实例 ******/impo...

首先看文档:https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E5%8F%AF%E9%80%89%E7%94%A8%E6%B3%95把oneOf可以让以下两种方式并存:一种就是module用法,在style标签后面加module,可以用:class="$style.minHeader" ;一种就是普通的scoped...

移动端1px边框的问题

1.新建filter目录,内写index.jslet dataServer = value => { //保留xxxx-xx-xx的格式 // return value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') var pattern = /^(\d{4})\-(\d{2})\-(\d{2})\s(\d{1,2}...

点击26个字母出现以该字母开头的城市原理:1.获取字母A到顶部的距离startY2.获取当前点击的字母到顶部的距离touchY3.因为一个字母的区域高度已知为20px,所以可以寻找下标indexconst index = Math.floor(( touchY - this.startY) / 20)4.通过this.$emit('change', this.letters...

1.用vue-cli3创建的vue项目2.在vue.config.js配置一下const webpack = require('webpack')const path = require('path')const appData = require('./data.json')const city = require('./city.json')const seller = ap...

1.新建一个store文件夹在src目录下(1)新建index.jsimport Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getter'import mutations from './mutation'import actions from ...

1.利用js的this.$refs拿到dom进行操作<template> <div id="slider"> <div class="window"> <ul class="container" ref="container" v-if="true" @mouseout="play" @mouseover="clear"&...

1.父组件给子组件传递值父组件通过属性传递子组件通过props接收2.子组件给父组件传递值子组件methods: { //点击事件 handleLetterClick(e) { console.log(e.target.innerText) //向外传递change事件,传递值e.target.innerText ...