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