run-Ameng-CSDN博客

原创 Vue3+element 实现双轮播效果

点击父页面图片，进入放大图页面。点击大图切换，小图片也进行切换，点击小图片，大图片跟着切换。一：弹框页面接收父组件传递的图片列表数据，以及当前点击放大的图片url。根据setActiveItem属性来手动改变当前索引。二：放大图片页面，引用走马灯组件。

2023-04-20 16:31:24 579 1

原创学习Typescript 的准备工作，（一句代码解决Typescript安装报错[Error: EACCES: permission denied, mkdir ‘/usr/local/lib]）

我安装时出现报错，报错内容大致是没有安装权限。

2022-09-29 14:10:06 420

原创 ant-design-vue Table组件去掉自带分页器

ant-design-vue Table组件去掉自带分页器去除分页器只需要一行代码 :pagination=“false” <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" //去除自带分页器

2022-05-13 10:16:41 2501

如何用一行 CSS 实现 10 种现代布局原文链接：https://mp.weixin.qq.com/s/r4cx9CVDSAgIJWGebx358w现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。1. 超级居中：place-items: center对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center

2022-04-18 15:01:48 465

原创 JS的常用技巧

原文链接：https://juejin.cn/post/70688538191357542531. 声明和初始化数组我们可以使用默认值（如""、null或）初始化特定大小的数组0。您可能已经将这些用于一维数组，但如何初始化二维数组/矩阵呢？const array = Array(5).fill(''); // 输出(5) ["", "", "", "", ""]const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); //

2022-04-13 14:40:12 82

原创常用的JavaScript

原文链接：https://mp.weixin.qq.com/s/eEjNuftBGIOKVbIo5FgDdA1-随机获取布尔值此函数将使用Math.random()方法返回布尔值（真或假）。Math.random创建一个介于0和1之间的随机数，然后我们检查它是否大于或小于0.5。这意味着有50/50的机会会得到对或错。const getRandomBoolean = () => Math.random() >= 0.5;console.log(getRandomBoolean())

2022-03-16 11:49:13 220

原创【无标题】

如何回答如何理解重排和重绘原文链接：https://mp.weixin.qq.com/s/x7Z4kHxgtTK4GtemqyOy5Q浏览器的关键渲染路径。如果答不到这上面，一般这个题就凉了。性能优化，如果减少重绘和回流，当然这个点肯定也是要基于对关键渲染路径的理解（这点不是关键点）。复习“复习的目的是为了知道考点是啥，简单的给大家复习一下，更详细的内容希望按我介绍的知识点(可以看我文末推荐的文章进行深入学习)，毕竟复习不是上课。”我们可以能知道，写了 HTML、CSS、JavaScri

2022-03-16 10:28:44 786 1

原创用Css实现阅读进度条

利用JavaScript实现阅读进度📃 HTML与CSShtml css 部分非常简单，通过嵌套的两个 div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度<div class="read_pro"> <div class="read_pro_inner"></div></div>复制代码.read_pro { position: fixed; top: 0; left: 0; width

2022-03-07 16:19:48 554

原创 javaScript有关数据的那些事

介绍 js 的基本数据类型。js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 类型，代表创建后独一无二且不可变的数据类型，它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。JavaScript的值类型栈：原始数据类型（Undefined、Null、Boolean、Number、String）堆：引用数据类型（对象、数组和函数）两种类型的区别是：存储位置不同。原始数据类型直.

2022-02-24 16:59:08 91

原创 ES7-ES12的知识点你掌握了吗？

Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。arr.includes(valueToFind[, fromIndex])valueToFind，需要查找的元素值。fromIndex 可选从fromIndex 索引处开始查找 valueToFind。如果为负值（即从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。const arr = ['es

2022-02-15 15:00:43 346

原创 echarts在Vue项目中的使用

echarts使用1：使用命令安装npm i echarts --save2：在项目中引入（1）全局引入在main.js中import echarts from 'echarts'Vue.prototype.$echarts = echarts（2）按需引入（在echarts.vue中作为子组件）import * as echarts from 'echarts';import Vue from "vue";Vue.prototype["$echarts"] = echarts

2022-01-18 14:18:12 588

原创 echarts数据更新以及数据处理问题

一：ECharts数据更新问题父组件<echarts :data='data'></echarts>子组件<div> <div id="index" style="height:450px;padding:10px 10px" ></div> </div>props{data:{ type:Array, default:()=>{

2022-01-18 14:12:40 1167

原创 Viser图表折线图tooltip文本加单位

viser图表中展示的文本或者tooltip信息展示框中的文本信息如果需要添加单位等某些处理来最终展示，那么可以用 formatter 来进行文本格式处理，效果图如下 <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick" :title="title">...

2022-01-11 16:31:28 1051 1

原创 Vue Viser图表饼状图tooltip提示文本修改

自定义提示文本，如图效果 <v-pie position="count" color="item" :v-style="pieStyle" :label="labelConfig" :tooltip="tooltip" />data（）{return{ tooltip:[ 'item*percent*count', (item,percent,count) => { //这里可以对数据进行处理

2022-01-11 16:26:16 1454

原创点击跳转详情页的时候。路由改变，页面不刷新，也不触发created 事件。

问题：点击跳转详情页的时候。路由改变，页面不刷新，也不触发created 事件。原因：页面有缓存。解决方案：1: 在路由出口处，加上唯一的key属性做为路由的id<keep-alive><router-view :key="$route.fullPath"> </router-view><keep-alive>我们配置了动态路由，并且给每个标题传了不同的id值通过$route.fullpath就可以拿到传过去的id2:watch 监

2022-01-07 10:25:55 1705

原创 Ant Design Vue 时间选择器自定义时间

vue Ant Design a-range-picker自定义时间要实现的效果，选择时间时，需要添加昨天，今天，上周，本月，本季度等筛选条件步骤自定义 rangeDate.jsimport moment from 'moment'const rangeDate = { data() { return { ranges: { '昨天': [moment().day(moment().day() - 1), m

2021-12-17 13:31:44 2505

原创 Jeecg 自定义详情页追加导航栏

Jeecg 自定义详情页追加导航栏要实现的效果、-点击详情。跳转详情页面，详情追加到tab导航栏。但是不在菜单栏显示实现步骤在菜单栏设置路由2。在需要跳转的地方设置路由（传递id）// 点击跳转详情页面xiangqing(id){ this.$router.push({ path:`/xxx/${id}`, }}3，在详情页面从路由中获得id id =this.$route.params.id，用发送请求...

2021-12-16 14:06:13 566

原创 Vue3自己封装 confirm 函数

Vue3自己封装 confirm 函数一。封装 confirm 组件 confirm.vue<template> <div class="confirm" :class='{ fade: fade }'> <div class="wrapper" :class='{ fade: fade }'> <div class="header"> <h3>{{title}}</h3>

2021-09-28 23:12:44 1490 1

原创 vue3——自己实现数据无限加载功能的封装

vue3——自己实现数据无限加载功能的封装一、封装的意义数据较多的时候，滑动滚动条显示加载状态，可以给用户很好的体验代码维护性更好代码可复用二、如何封装？需要用到@vueuse/core中的useIntersectionObserver，用来判断元素是否出现在可视区链接：useIntersectionObserver1. 准备项目根目录下打开任意终端，执行npm install @vueuse/[email protected]，这里安装的固定版本，各位按需选择因考虑复用组件，故封装为全局组件，老

2021-09-27 16:16:00 485 1

原创 Vue3 制作发送验证码倒计时

Vue3 制作发送验证码倒计时提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue3 制作发送验证码倒计时前言一、怎么制作验证码定时器包？采用 VueUse的包。useIntervalFn( )二、使用步骤1.设置发送验证码按钮2.功能实现3.样式总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考

2021-09-25 12:21:58 1976 2

原创 Vue3封装 page 分页组件

Vue3封装 page 分页组件实现效果分页组件封装 page.vue<template> <div class="pagination"> <a @click='changePage(false)' href="javascript:;">上一页</a> <span v-if='currentPage > 3'>...</span> <a @click='changePage(item)

2021-09-24 21:24:33 1178 1

原创 Vue3封装 Message消息提示实例函数

Vue3封装消息提示实例函数Vue2.0使用 Vue.prototype.$message = function () {}vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.$message = Message也支持直接导入函数使用 import Message from './Message.js样式布局封装 message.vue<template> <Transition na

2021-09-23 22:15:13 1838

原创 Vue3封装消息提示实例函数

Vue3封装消息提示实例函数组件功能分析：固定顶部显示，有三种类型：成功，错误，警告。显示消息提示时需要动画从上滑入且淡出。组件使用的方式不够便利，封装成工具函数方式。样式布局封装 message.vue<template> <Transition name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式

2021-09-23 17:53:31 293

原创 vue按钮组件的自定义封装

vue按钮组件的自定义封装封装按钮组件 button.vue<template> <button class="xtx-button ellipsis" :class="[size,type]"> <slot /> </button></template><script>export default { name: 'XtxButton', props: { size: { type

2021-09-22 20:05:51 344

原创 Vue 控制商品数量组件的封装及使用

Vue 控制商品数量组件的封装及使用。控制商品数量组件封装 Numbox<template> <div class="xtx-numbox"> <div class="label"> <slot /> </div> <div class="numbox"> <a href="javascript:;" @click='toggle(-1)'>-</a>

2021-09-22 18:06:27 280

原创 Vue3页面滚动容易忽略的小bug

Vue3 每次切换路由的时候滚动到顶部//在路由配置中添加scrollBehavior()方法const router = createRouter({ history: createWebHashHistory(), routes, scrollBehavior () { return { left: 0, top: 0 } }})

2021-09-18 14:32:09 460

原创 vue中自己封装面包屑组件

vue中自己封装面包屑组件要实现效果前言很多电商类产品都需要实现面包屑导航，用来优化用户体验一.初级面包屑封装组件1.封装基础结构组件 xxx.vue<template> <div class='xtx-bread'> <div class="xtx-bread-item"> <RouterLink to="/">首页</RouterLink> </div> <i cl

2021-09-16 23:23:52 448

原创在Vue3中如何使用依赖注入完成组件之间的数据传递

教你在Vue3中如何使用依赖注入完成组件之间的数据传递使用依赖注入父组件向子孙组件传递数据// 父组件import 子孙组件import {ref,provide} from 'vue' setup(){ provide('moneyInfo',1000) return{moneyInfo} }//孙子组件import {inject} from 'vue'setup(){ const moneyInfo=inject('moneyInfo') ret

2021-09-12 22:49:24 807

原创 Less的手动引入和自动化

Less的自动化导入提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Less的自动化导入一、为什么要做Less的自动化导入？二、项目中引入less1.手动引入1）准备样式变量文件2）手动引入使用其中的变量2自动引入方案1）在当前项目下执行一下命令`vue add style-resources-loader`，添加一个vue-cli的插件2）安装完毕

2021-09-12 12:42:51 389 1

原创 vue持久化

Vue的持久化文章目录Vue的持久化前言一、为什么要做Vue的持久化？二、使用步骤1）首先：我们需要安装一个vuex的插件`vuex-persistedstate`来支持vuex的状态持久化。2）然后：在`src/store` 文件夹下新建 `modules` 文件，在 `modules` 下新建 `user.js` 和 `cart.js`3）继续：在 `src/store/index.js` 中导入 user cart cate模块。4）最后：使用vuex-persistedstate插件来进行持久化

2021-09-12 09:52:39 2829

空空如也

空空如也