前端
分享与记录自己所学习的前端知识
Incimo
这个作者很懒,什么都没留下…
展开
-
vue 封装组件时,优雅的将子组件属性和方法对父组件暴露
对 el-input 进行封装,封装为 my-input<template> <!-- 使用 $attrs 传入已在父组件中声明但在子组件中未被声明的 props,从而达到当父组件传入的 prop 时,父组件能直接使用子组件的原生属性 --> <!-- 使用 $listeners 传入已在父组件中注册但在子组件中未注册的事件,将父组件中出发的事件直接传递给子组件,从而达到父组件中传入的事件直接在子组件的原生事件中触发 --> <el-input原创 2021-11-09 11:42:48 · 6461 阅读 · 0 评论 -
cimo 前端组件库
修改下载文件名/** * 保存 * @param {Blob} blob * @param {String} filename 想要保存的文件名称 */function saveAs(blob, filename) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename) } else { const link = document.createElement('a'原创 2021-05-10 10:07:03 · 387 阅读 · 0 评论 -
超简单手机连接 vue 项目 localhost
1 启动你的 vue 项目2 手机和电脑在同一局域网3 输入 vue 项目启动时的网址原创 2021-03-08 01:45:35 · 444 阅读 · 0 评论 -
天地图
<template> <div class="hello"> <el-form label-position="top" label-width="80px" :model="localInfo" style="margin: 20px"> <h3>定位成功</h3> <el-form-item label="纬度"> <el-input v-model="localInfo.原创 2021-03-05 01:21:42 · 322 阅读 · 1 评论 -
VUE 渲染性能优化
initMaterialIcon () { // 获取图标 materialIcons 下划线格式命名集合 for (const i in materialIconsSet) { this.materialIcons_key.push(this.toLowerLine(i)) } let i = 0 this.timer2 = setInterval(() => { this.group_md = this.group_md.concat(this.material原创 2020-12-25 01:19:46 · 4240 阅读 · 2 评论 -
前端学习路线
写给学弟们的原创 2020-12-10 21:23:28 · 301 阅读 · 0 评论 -
vue 项目首屏加载性能调优
体积性能优化分析项目体积可以使用webpack的webpack-bundle-analyzer或是 VUE GUI 里自带的webpack Analyzer本项目使用webpack-bundle-analyzer分析如下:主要针对比较通用的一些常规优化:常规的性能优化一般有四种:按需引入CDN 资源1、按需引入最常见的就是 UI 框架和路由页面的按需引入对于quasar按需引入的格式一般如下:import { Quasar, LoadingBar, Dialog, .原创 2020-12-09 00:44:38 · 1611 阅读 · 12 评论 -
vue cli 4快速访问 public 文件夹,同时确保打包并部署到 github 上不会 404
在 main.js 中注入 public 文件夹路径原型// 前往 public 文件夹的路径Vue.prototype.$PUBLIC_PATH = process.env.BASE_URL之后正常使用即可: getMsg () { const query = { url: this.$PUBLIC_PATH + 'data/lottieData.md', method: 'get', responseType: 'text'原创 2020-12-03 01:37:08 · 1255 阅读 · 0 评论 -
在 vue cli 4 项目中引入外部 html 项目,解决 外部 html 跳转到 vue 路由页面 404 问题
最近有个项目,本来使用 jq + bootsrap 开发,因此首页用了 jq + bootsrap 开发为 html 页面,并用 jq 做了很多动画。后来因为种种原因需要使用 vue 开发接下来的页面,但是重新做一个带多组动画的首页很麻烦,于是想到将首页home.html以及它的静态资源assest文件夹作为独立项目引入到 vue cli 中。遇到了不少问题,第一天搞到凌晨2点,没搞明白,第二天不到1个小时搞定…所以说,太累的话,工作效率不高,还浪费时间,还不如睡觉。!!!∑(゚Д゚ノ)ノ怎么做?原创 2020-11-30 14:14:17 · 2357 阅读 · 0 评论 -
使用 jquery 实现 css hover 长期维持效果
1、首先定义 hover 效果.base-style:hover{ color: red}2、在上面的 hover 上添加一个样式一模一样的效果样式.base-style-active,.base-style:hover{ color: red}3、使用 jquery 判断 .base-style是否触发了 hover,如果触发了就给他加上.base-style-active样式,这样触发的hover样式就得到了保留。 $('.base-style').mouseenter(func原创 2020-11-27 02:24:13 · 1960 阅读 · 0 评论 -
vue quasar manage 基于 vue 和 quasar 的中后台前端解决方案
vue-quasar-manage vue-quasar-manage 是一款中后台前端解决方案:基于 vue 和 quasar-ui 实现,quasar-ui 的设计规范来自 Material Design包含动态路由,动态缓存,权限验证等常用功能响应式设计,支持手机 / 平板 / 小分辨率屏幕显示包含 tagView 快捷导航、面包屑导航等 SPA 应用常用功能内置 Material Design 图标集简单的代码逻辑,多种自定义组件,高度可定制...原创 2020-11-21 00:26:38 · 1444 阅读 · 0 评论 -
vue js验证需要提交的表单数据对象中的属性是否为空
/** * 验证表单要提交的对象的某些属性是否为空 * @param obj 需要提交的对象 * @param args 不需要判断的属性 * @returns boolean */ function isForm (obj, ...args) { let empty = false for (const i in args) { delete obj[args[i]] } for (const key in obj) { // eslint-disable-.原创 2020-09-29 10:57:50 · 998 阅读 · 0 评论 -
vue + quasar 使用递归实现动态多级菜单
菜单初始化入口 menu.vue,初始化侧边栏菜单组建,<my-q-menu/>才是递归开始<template> <q-drawer v-model="is_hide_" show-if-above bordered content-class="bg-grey-2" :width="240" > <q-scroll-area class="fit"> <!-- 递归实现 循环菜单 -->原创 2020-09-15 16:15:27 · 3187 阅读 · 1 评论 -
webRTC 使用 getUserMedia()关闭和开启摄像头
<html><body><video id="webcam"></video><button onClick="openVideo()">开启摄像头</button><button onClick="closeVideo()">关闭摄像头</button></body><script> var video = document.getElementById('web.原创 2020-09-03 15:14:05 · 10407 阅读 · 0 评论 -
Android Material Design 组件集合Demo,附源码地址 :CimoGallery,仅供学习
Android Material Design 实战 :CimoGallery作者:incimo时间:2020/06/14CimoGallery v1.0.1 beta 版本初 为了加深对Android开发的理解。同时在B站上看到了longway777 这位大佬的视频,感觉确实是不可多得的好教材,给了我很多灵感和帮助,因为大佬用的是kotlin写了一个简易版的画廊Demo,于是我就想能不能用Java也实现一个Demo,顺便把开发时常用的一些功能加上,顺便给正在学习的同学们一点帮助,给Andr原创 2020-08-29 00:04:10 · 19213 阅读 · 2 评论 -
一张表格让你了解cookie、localStorage、sessionStorage、session的区别与使用方式
cookie localStorage sessionStorage session 存储形式 键值对存储,同域名可用 存储位置 客户端 服务器 特点 随请求头一同提交 不随请求头提交,可长时间保存 不随请求头提交,页面关闭即失效 安全 跨域 ...原创 2020-08-17 17:17:07 · 7478 阅读 · 0 评论 -
去除json中key的双引号
String json = ""; json = json.replaceAll("\"(\\w+)\"(\\s*:\\s*)", "$1$2"); System.out.println(json);转载 2020-07-22 02:05:10 · 10378 阅读 · 0 评论 -
Node.js 文件操作笔记
const express = require('express')const fs = require('fs')/** * 同步文件操作 */let fd = fs.openSync('h.txt','w')console.log(fd)//写入内容let str = 'cimo'fs.writeFileSync(fd,str)//退出文件fs.closeSync(fd)/** * 异步文件操作 */ fs.open('h.txt','w',(err,fd)=.原创 2020-06-29 00:45:15 · 7476 阅读 · 0 评论 -
webpack练习模板
//获取当前文件路径let path = require('path')//安装html-webpack-plugin依赖: cnpm install html-webpack-plugin --save-devlet HtmlWebpackPlugin = require('html-webpack-plugin')//console.log(path.resolve(__dirname,'dist'))module.exports = { // 入口文件 entry:'.原创 2020-06-28 10:03:06 · 7648 阅读 · 0 评论 -
手把手教你在自己的Android app中引入支付宝沙盒支付功能(可用于课设和测试)
1 进入支付宝开发者中心,设置自己的沙箱环境1.1 进入支付宝开发者中心1.2 进入沙箱开发界面1.3 下载沙箱app1.4 使用买家账号登录你的支付宝沙箱2 设置应用私钥与公钥2.1 下载支付宝开发平台开发助手https://opendocs.alipay.com/open/291/introduce2.2 自动生成私钥与公钥2.3 回到沙箱界面配置你的应用公钥2.4 下载支付宝支付Demohttps://opendocs.alipay.com/open/54/1045原创 2020-06-27 02:38:26 · 11392 阅读 · 0 评论 -
Android 子fragment中获取父fragment中的控件
下面展示了如何在子fragment中获取父fragment的底部导航控件BottomNavigationView bottomNavigationView = (BottomNavigationView) getParentFragment().getView().findViewById(R.id.bv);主要需要强转为指定的控件原创 2020-06-13 01:28:50 · 9320 阅读 · 0 评论 -
Vue 项目中的ESLint规则模板
在.eslintrc.js中module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { //在那些环境启用ESLint browser: true, node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:r原创 2020-06-08 13:08:42 · 8285 阅读 · 0 评论 -
Vue cli 使用QRcode在dailog中生成二维码
在package.json中添加模块"qrcode": "^1.4.4"在组件中引入import QRCode from 'qrcode'生成二维码方法: creatlocationQRcode() { const a = 'http://www.baidu.com' // 获取页面的canvas var msg = document.getElementById('msg_qrcode') // 将获取到的数据(val)画到msg(can原创 2020-06-06 20:37:49 · 7865 阅读 · 0 评论 -
cros 跨域模板
/*跨域运行*/ response.setHeader("Access-Control-Allow-Origin", "*"); response.setContentType("application/json; charset=utf-8"); /* 允许跨域的主机地址 */ response.setHeader("Access-Control-Allow-Origin", "*"); /* 允许跨域的请求方法GET, POST, HEAD 等 */ resp...原创 2020-05-28 21:35:27 · 7430 阅读 · 0 评论 -
Android: ViewPager2 结合 TabLayout (Java代码模板)
Tab标签名 private static final String[] TAB_LABEL = {"label1","label2","label3"};viewPager2初始化并应用 /** * viewpage2初始化并应用 */ private void initViewpager2() { viewPager2.setAdapter(new FragmentStateAdapter(getParentFragmentManager(原创 2020-05-23 23:22:57 · 7851 阅读 · 0 评论 -
天地图web端 通过H5 获取详细定位信息 (模板源码)
最近在做的项目需要用的天地图,置于为哈不用高德或者其他的…只能说,免费有免费的好处,收费有收费的好处吧下面是源码,在对应位置加上你的key即可<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="天地图" /> <tit原创 2020-05-15 21:14:46 · 14122 阅读 · 12 评论 -
AJAX jsonp解决跨域模板
<!-- jquery --> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function () { $("#bt1").click(function () { getimg(); }...原创 2020-05-15 00:59:20 · 7451 阅读 · 0 评论 -
jetpack:使用navigation从fragment_1切换到另一个fragment_2,再返回fragment_1时,fragment_1中的viewpager出现空白页面
jetpack中的navigation可以通过设置app:defaultNavHost="true"来达到拦截返回键并返回上一个fragment的效果,但是今天遇到一个问题:fragment_1中有viewpager,使用navigation从fragment_1切换到另一个fragment_2,再返回fragment_1时,fragment_1中的viewpage为空白页面。一开始从viewpager下手,但是发现viewpager都是正常操作,应该是fragment_1没有成功初始化viewpage原创 2020-05-10 03:11:50 · 8542 阅读 · 0 评论 -
Android jetpack,paging实现分页加载,LivePagedListProvider通过构造方法将PagedList与DataSource联系
kotlin:val pagedListLiveData = PixabayDataSourceFactory(application).toLiveData(1)Java:PixabayDataSourceFactory pixabayDataSourceFactory = new PixabayDataSourceFactory(getApplication());LiveData<PagedList<T>> pageListLiveData = new LivePag原创 2020-05-08 20:32:35 · 8050 阅读 · 0 评论 -
Android:BottomNavigationView设置noActionbar主题后闪退的解决方法,以及另外两种实现方法
Android Studio自带的BottomNavigationView项目设置了noActionbar这个主题就会闪退,不设置noActionbar的话就无法使用toolbar,蛋疼。下面我会两种BottomNavigationView的实现方法:一种是Android Studio自带的项目实现,使用Jetpack的Navigation做为页面的切换工具,以及说明为什么自带的基础模板不能设...原创 2020-04-28 17:29:34 · 22301 阅读 · 7 评论 -
Android 设置状态栏透明和状态栏文字自适应
1.设置状态栏透明方法 public static void makeStatusBarTransparent(Activity activity) { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) { return; } Window windo...原创 2020-04-27 18:46:34 · 8195 阅读 · 0 评论 -
Android:在service和activity之中,实现音乐播放进度条传递信息的两种方式,MediaPlayer做音乐播放器采坑以及解决办法
实现播放时的进度条显示,或是定时从service获取某些信息,是我们日常开发中经常遇到的需求,下面介绍当音乐再service中运行时,activity如果获取音乐进度信息的两种方式:一、在activity中建立消息接收机制我们需要在activity中建立一个用于接收信息的handler(handler简单的说是在android中可以发送消息和也可以处理消息的一种机制,当然它的用途更加强大,有时...原创 2020-04-26 15:26:56 · 21623 阅读 · 1 评论 -
Android:一键可视化操作为控件添加ripple(水波纹)点击效果
ripple点击效果最近很火,实现方式有很多种,包括用xml类配置属性动画,用java代码来动态绘制等,其实Android Studio 3.0 以上都自带了这个功能我就用最简单的初始界面来演示一下:1.点击控件,然后在右边属性栏搜索clickable属性,将其设置为true2.搜索background属性,在background属性中搜索sele,选择图中的属性,确定即可看一下效果...原创 2020-04-19 18:41:49 · 7995 阅读 · 0 评论 -
Android 如何动态添加MaterialButton按钮
如果按照普通的方法用java代码创建MaterialButton,会曝出关于:MaterialButton这个类的实例必须拥有Theme.Materialcomponents这个主题, @RequiresApi(api = Build.VERSION_CODES.O) public MaterialButton createMaterialButton(){ //必须...原创 2020-04-17 18:35:29 · 8062 阅读 · 0 评论 -
在fragment和activity中 如何对dialog中的spinner取值
正常情况下我们可以直接在dialog里写上我们想要的view,但是有时候view太多的话,我们就需要自定义一个dialog,其实就是将dialog的内容替换为我们写好的layout文件。比如我创建了一个layout文件:<!-- 这个文件名是allclasstime.xml --><LinearLayout xmlns:android="http://schemas.and...原创 2020-04-16 02:33:40 · 7780 阅读 · 1 评论 -
分享超赞的Vue教程,看了之后只能感叹:该死的博主为何Vue基础如此扎实
学习这个教程之前,建议先把官方的Vue视频教程过一遍,然后你一定会发现新大陆的。官方的Vue视频教程这个教程除了教你怎么使用Vue之外,还把大量的基础前端技术用通俗易懂的语言传授给你,包括前后端路由,JS 异步编程等等平常经常用到,但是又不知所云的骚操作…作者: TigerChain地址: https://www.jianshu.com/nb/23783223出自 TigerChain ...转载 2020-04-11 02:47:40 · 7619 阅读 · 0 评论 -
Android fragment和activity中隐藏软键盘
对于fragment在onclick事件中添加:InputMethodManager imm = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE);imm.hideSoftInputFromWindow(getActivity().getWindow().getDecorView...原创 2020-04-09 21:03:39 · 8006 阅读 · 0 评论 -
2019 使用idea自动创建基于Vue CLI的Vue程序
之前一直是用命令来创建vue,今天发现idea可以用vue.js插件自动创建基于vue-cli的应用PS:我觉得刚刚开始的话还是先用命令行来创建项目比较好1.请确定你已经安装好了环境和插件环境:插件:2.新建staticWeb项目,类型选择vue.js可以看到下面有提示说是基于vue CLI的输入项目名,idea会自动选择你的node:3.点击FINISH等待项目构建完成...原创 2020-04-08 12:03:42 · 8648 阅读 · 0 评论 -
Android Jetpack :Navigation 学习笔记
Android在2019今年的开发者大会上提出了一个App只有一个activity的建议,因此作为未来android开发规范组件库的Jetpack也自然要遵循这个建议。所以Navigation正常来说是用于fragment的导航而不是activity的导航。同时,Jetpack提倡使用图形化界面对前端进行编程,所以使用Navigation时,用图形化...原创 2020-03-29 21:06:21 · 7697 阅读 · 0 评论 -
Android Jetpack 使用Navigation时出现XXX.XXXX must implement OnFragmentInteractionListener解决方法
在使用最新的Jetpack时,用Navigation来导航到不同的fragment时出现了这个问题,百度了一下,发现jetpack实在是太新了,很多问题都还没有解决方式,毕竟2019年才逐步完善的东西,现在年初遇到问题至少在国内很难在网上有解答,o(╥﹏╥)o也许这就是一直用最新的东西的难处吧。算了,还是自己研究…先还原一下问题:我要实现图中蓝色线的跳转:下面是跳转代码:结果报错:从...原创 2020-03-29 01:43:10 · 887 阅读 · 1 评论