随笔分类 -  前端框架(Angular React Vue Echarts Mint UI 等)

摘要:动态ref示例 import React from "react"; class MyComponent extends React.Component { myRef: React.RefObject<unknown>; private _refMaps: Map<any, any>; const 阅读全文
posted @ 2024-10-16 09:52 奔跑的太阳花 阅读(70) 评论(0) 推荐(0) 编辑
摘要:const giftsMapRef = useRef({}) const giftRef = (ele:HTMLElement, giftId:number) =>{ giftsMapRef.current['gift-'+giftId] = ele; } <div className='gift- 阅读全文
posted @ 2022-06-29 15:33 奔跑的太阳花 阅读(1359) 评论(0) 推荐(0) 编辑
摘要:目录 一、类组件的情况下 1、定义父组件(直接使用ref) export default class UserRef1 extends Component { constructor(props) { super(props); this.child = React.createRef(); } f 阅读全文
posted @ 2022-06-29 15:14 奔跑的太阳花 阅读(9196) 评论(0) 推荐(0) 编辑
摘要:1、redux-thunk 安装 (redux-thunk 是一个 Redux的中间件) npm install redux-thunk --save // 或者 yarn add redux-thunk 2、在创建 store 时,使用 redux, redux-thunk 配置 redux-de 阅读全文
posted @ 2022-06-19 22:07 奔跑的太阳花 阅读(503) 评论(0) 推荐(0) 编辑
摘要:vuex的优点 1.解决了非父子组件的消息传递(将数据存放在state中) 2.减少了AJAX请求次数,有些情景可以直接从内存中的state获取 vuex的缺点 1.刷新浏览器,vuex中的state会重新变为初始状态 解决方案vuex-along ,vuex-persistedstate http 阅读全文
posted @ 2020-10-12 16:50 奔跑的太阳花 阅读(2110) 评论(0) 推荐(0) 编辑
摘要:一、Vuex是什么 Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 1、Vuex的构成 由上图,我们可以看出Vuex有以下几个部分构成: 1)state state是存储的单一状态,是存储的基本数据。 阅读全文
posted @ 2020-09-30 12:14 奔跑的太阳花 阅读(1793) 评论(0) 推荐(0) 编辑
摘要:篇文章主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下 用法: **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名 v-longtap="{f 阅读全文
posted @ 2020-07-31 17:12 奔跑的太阳花 阅读(7288) 评论(0) 推荐(0) 编辑
摘要:(免费分享,点个赞再走呗) SUI Mobile http://m.sui.taobao.org/components/#popup SUI Mobile 是一套基于 Framework7 开发的UI库。 MUI http://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性 阅读全文
posted @ 2020-07-29 11:15 奔跑的太阳花 阅读(4634) 评论(0) 推荐(0) 编辑
摘要:import Vue from "vue"; import axios from "axios"; import { apis } from "@/static/js/apis.js"; // import NoData from "@/components/NoData.vue"; let myV 阅读全文
posted @ 2020-07-22 16:50 奔跑的太阳花 阅读(344) 评论(0) 推荐(0) 编辑
摘要:flexible 主要是用来响应式改变根元素的字体大小 安装命令 npm install lib-flexible --save 在main.js里面导入命令import 'lib-flexible' 要把index.html里面的<meta name='viewport'>标签删除;因为会自动添加 阅读全文
posted @ 2020-07-16 14:13 奔跑的太阳花 阅读(891) 评论(0) 推荐(0) 编辑
摘要:想要实现vue动态改变页面title,需要给每个页面设置标题。并且在路由发生变化时修改页面title router - index.js const router = new Router({ mode: 'history', routes: [ { path: '/index', name: 'i 阅读全文
posted @ 2020-07-16 11:16 奔跑的太阳花 阅读(1858) 评论(0) 推荐(0) 编辑
摘要:在vue.config.js里 添加 configureWebpack : { performance: { hints:'warning', //入口起点的最大体积 整数类型(以字节为单位) maxEntrypointSize: 50000000, //生成文件的最大体积 整数类型(以字节为单位 阅读全文
posted @ 2020-07-06 14:01 奔跑的太阳花 阅读(3816) 评论(0) 推荐(0) 编辑
摘要:vue 中使用高德地图有两种方式 一、vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对。我所遇到的问题: 1. 安装之后使用,始终提示跨域问 阅读全文
posted @ 2020-05-31 13:11 奔跑的太阳花 阅读(1562) 评论(0) 推荐(0) 编辑
摘要:(免费分享,点个赞再走呗) 在el-table标签中添加highlight-current-row <el-table highlight-current-row > 在style 里面设置全局样式: /* 用来设置当前页面element全局table 选中某行时的背景色*/ .el-table__ 阅读全文
posted @ 2020-05-28 14:43 奔跑的太阳花 阅读(14462) 评论(1) 推荐(3) 编辑
摘要:实际开发工作中会经常遇到一个需求,就是判断当前登录网页的设备是PC还是移动,要求PC端和移动端显示的是不同的网页内容。 那么我们就需要对当前登录设备进行判断。 使用 navigator.userAgent 字符串检测 我是在PC端开发完接到要做移动端的需求,而且移动端只有一个页面,我就统一放在了一个 阅读全文
posted @ 2020-04-15 16:54 奔跑的太阳花 阅读(3791) 评论(0) 推荐(0) 编辑
摘要:html: <div id="root"> <smart :items=items></smart> </div> js: <script> let EmptyList = 'p'; let TableList = 'ul'; let OrderedList = 'ul'; let Unordere 阅读全文
posted @ 2020-04-08 17:22 奔跑的太阳花 阅读(872) 评论(0) 推荐(0) 编辑
摘要:前言前排警告,这不是玩具! 那、还能是啥呢 起因最近看到好多在Vue中使用JSX的文章,作为目前最受欢迎的MVVM框架,其实不学习还是有些对不住自己的。但是无奈太喜欢React,所以在Vue中能使用JSX还是能勾起很多人的好奇心的。 我就是,还有么 简单Demo对于vue-cli3和4创建的Vue工 阅读全文
posted @ 2020-04-08 14:26 奔跑的太阳花 阅读(2458) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #app{ width: 300px; overflow: hidden; } .item{ margin-left: 30px; /* padding-le 阅读全文
posted @ 2020-04-02 16:26 奔跑的太阳花 阅读(511) 评论(0) 推荐(0) 编辑
摘要:错误代码: NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/index") is not al 阅读全文
posted @ 2020-03-30 14:29 奔跑的太阳花 阅读(3964) 评论(0) 推荐(1) 编辑
摘要:对于 Vue.nextTick 方法,自己有些疑惑。在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教。 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 疑问: DOM 更新循环是指什么? 下次更新循环 阅读全文
posted @ 2020-01-31 23:46 奔跑的太阳花 阅读(1955) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示