学而不化，非学也。-CSDN博客

原创 vue2 自定义指令

指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次，指令与元素解绑时调用。指令钩子函数会被传入以下参数：

2021-07-07 15:55:23 201

原创 [X] Android Studio (not installed)

[X] Android Studio (not installed)你安装了AS，只是路径是自定义的，所以给Flutter指定你的路径吧flutter config --android-studio-dir="D:\Android Studio"路径有空格所以路径加引号，没有空格可不加

2021-07-02 15:25:37 2064 2

原创 uniapp 左滑删除

<template> <view class=""> <scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }"> <block :key="index" v-for="(item, index) in dataList"> <view :data-index="index" class="order-item" @touchstart="dra

2021-06-09 16:29:12 1542 1

原创 uniapp 悬浮球可回弹

<template>  <movable-area class="movableArea"> <!-- damping:官方默认值20，控制x或y改变时的动画和过界回弹的动画，值越大移动越快 direction: 移动方向，属性值有all、vertical、horizontal、none friction: 摩擦系数,用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止，越小，滑动会有停留，会有原路返回的情况

2021-06-09 10:49:51 1007

原创 uniapp实现美团效果，右侧上下滚动商品，左侧菜单切换选中并高亮

有三步初始化左右滑块的高度得到右边每个区间的top和buttom监听右边商品部分滑动事件，如果在某个区间内，则那个区间的菜单名高亮主界面index.vue <view style="display: flex;">  <food-menu :tabBars="tabBars" :tabIndexShow="tabIndexShow" :swiperWidth="menuWidth" :swiperHeight="swiperHeight"

2021-06-09 10:45:21 2932 1

原创递归父级

var arr = [ { check: false, child: [ { check: false, child: [ { check: true, }, { check: true, }, ], }, {

2021-02-24 15:17:14 150

原创 vue 3.0 + TS form 表单封装

input 封装// components/ValidateInput.vue<template> <div class="validate-input-container pb-3"> <input v-if="tag !== 'textarea'" class="form-control" :class="{'is-invalid': inputRef.error}" @blur="validateInput"

2020-11-17 16:26:55 1753

原创 vue3.0 v-model自定义组件实现,回顾vue2.x v-model

vue2.xv-model 语法糖model:默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。默认状态下model: { prop: 'value', event: 'change'}vue3.0v-model 语法糖<my-component v-model="fool"

2020-11-12 23:38:13 1090

原创 vue3.0 使用 vue-router以及vueX的简单使用

首先通过vue-cli搭建, vue-cli 版本大于4.0vue create [项目名称]选择 vue3 版本vue3.0的setup函数Lsetup 函数执行时期在beforeCreate 之后、created 之前执行需要非常注意的是在vue3.0的setup 函数中是无法访问到this的页面渲染数据，以及页面的一些函数事件都需要通过return出去,基本结构如下<script>import { reactive, toRefs } from ".

2020-11-11 09:59:04 3234 1

原创 vue-cli4 配置px2rem做rem移动端自适配

在实际开发中，我们需要将设计稿中的px转换成rem，然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。一、安装依赖npm install amfe-flexible postcss-px2rem -Samfe-flexible：是rem的适配插件。（例：750px == 10rem）postcss-px2rem：负责将输入的px自动转为rem二、入口文件main.js里引入amfe-flexibleimport "amfe-flexible";三、在项目根目录创

2020-11-10 09:40:20 539 4

转载 MAC 安装oh my zsh

mac 本身就自带了zsh如果不放心可以查看下是否安装cat /etc/shells如果没有 brew install zsh更新zsh*设置zsh为自己使用 chsh-s/bin/zsh确保有zsh的情况下安装oh my zsh官方提供下载地址：sh-c"$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"解决方案：使用国内地址： sh -c "$

2020-08-28 00:45:32 681

转载 mac安装brew出现443报错

找遍全网办法没有用后找到这个/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"终端执行之后然后选择安装源，输入数字，按照提示输入密码，之后等待安装完毕即可

2020-08-27 23:06:13 256

原创所以希望生成[min,max]的随机数，公式如下：

// max - 期望的最大值// min - 期望的最小值parseInt(Math.random()*(max-min+1)+min,10);Math.floor(Math.random()*(max-min+1)+min);

2020-06-30 14:09:21 332

转载 vue cli4.0 配置环境变量

我个人的理解就是：你执行npm run serve时，对应的环境就是开发环境；你执行npm run build时，对应的环境就是生产环境。如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。1.创建不同环境变量文件如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置.

2020-05-29 14:44:16 645 1

原创 vue-cli 4的跨域解决方案

module.exports = { devServer: { host: 'localhost', port: '8081', // 端口号 https: false, // https: {type:Bollean} open: true, // 配置自动启动浏览器 // 配置代理 proxy: { "/api": { target: 'http://www.baidu.com', // 想要访问接口域名 c

2020-05-29 14:17:09 2635 1

原创防抖+ 节流+ 图片懒加载

节流滚动，隔⼀段时间只触发⼀次第⼀个⼈说了算在时间结束出发// func是⽤户传⼊需要防抖的函数// wait是等待时间const throttle = (func, wait = 50) => { // 上⼀次执⾏该函数的时间 let lastTime = 0 return (...args)=>{ // 当前时间 let now = +new Date() ...

2020-03-16 13:25:28 244

原创 React+umi+dva

Umi基本使用安装 npm install umi -g项目目录 md umi-app cd umi-app新建 index页 umi g page index umi g page about起服务 umi dev动态路由以$开头的文件或目录 umi g page users/'$id'获取参数和以前写法相同 export default function...

2020-02-22 14:59:27 1447

原创 React全家桶

1.redux2.react-redux3.react-router安装redux npm install redux --saveredux上手创建store，src/store.js import {createStore} from 'redux' const counterReducer = (state = 0, action) => { switch (...

2020-02-22 14:31:27 229

原创 yarn|| npm 切换镜像源

yarn|| npm 切换镜像源查看一下当前源 yarn config get registry切换为淘宝源 yarn config set registry https://registry.npm.taobao.org切回原镜像 yarn config set registry https://registry.yarnpkg.com...

2020-02-18 16:39:24 409

原创 react+ react Hooks学习笔记

起步安装官方脚手架： npm install -g create-react-app创建项目： create-react-app react-study启动项目： npm start文件结构文件结构一览 ├── README.md 文档 ├── public 静态资源 │ ├── favicon.ico │ ├── i...

2020-02-17 20:19:27 557

原创 webpack学习笔记

什什么是webpackwebpack is a module bundler.(模块打包⼯工具)Webpack可以看做是模块打包机：它做的事情是，分析你的项⽬目结构，找到JavaScript模块以及其它的⼀一些浏览器器不不能直接运⾏行行的拓拓展语⾔言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器器使⽤用。官方⽹站：https://webpack.js.org/...

2020-02-16 13:47:01 304

原创 react 基于wangeditor 封装富文本编辑器

import React, { Component } from 'react';import E from 'wangeditor';import styles from './index.less';// import xss from 'xss';const editorConfig = { menus: [ 'head', // 标题 'bold', //...

2019-08-09 11:17:41 614

原创 HTML导出Excel

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> <!-...

2019-08-06 09:36:46 513

原创导出文件 ()

export const exportExcel = (pathname, params) => { let url = `${baseUrl}${pathname}` let xhr = new XMLHttpRequest(); if (!params) { xhr.open('GET', url, true); } else { xhr.open('PO...

2019-08-06 09:33:03 110

原创基于React,封装富文本编辑器

import React, { Component } from 'react';import E from 'wangeditor';import styles from './index.less';// import xss from 'xss';const editorConfig = { menus: [ 'head', // 标题 'bold', //...

2019-08-02 16:32:55 785

转载 vue-scroller

效果：下拉刷新，上拉分页加载更多数据首先在命令行进行npm||cnpm下载cnpm install vue-scroller -D-D:就是 --save -dev然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueSc...

2019-07-30 15:40:24 138

原创获取用户手机的的型号

获取用户手机的的型号// 获取平台export const getPlatForm = () => { const agentInfo = navigator.userAgent const agentList = ['Android', 'iPhone', 'iPad', 'iPod', 'Windows Phone'] const agent = agentList.fi...

2019-07-29 17:35:41 548

原创获取URL上的参数

获取URL上的参数/** * 取URL上的参数 * @param {String} param 参数名 * @return {String} */export const getUrlParam = (name) => { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // eslint...

2019-07-29 17:33:04 99

原创 vue校验邮箱,校验手机号

vue校验邮箱/** * * @param str 传入被校验手机号身份证 * @param type 校验类型 'phone','idCard' * @returns {*} false校验失败， true校验成功 */export function check (str, type) { let types = { phone () { // 校验手机号 ...

2019-07-29 17:30:18 2533

原创移动端基于Vux二次封装弹窗

移动端基于Vux二次封装弹窗// confirmexport function confirm (params) { if (!params) return let p = new Promise((resolve) => { let title, content, buttonText, confirmText, cancelText, showInput, input...

2019-07-29 17:27:23 316

原创 vue中常用处理时间格式化方法

vue中常用处理时间格式化方法import Vue from 'vue'import moment from 'moment'// 将时间戳转化为xxxx-xx-xx xx:xx:xx的时间格式Vue.filter('datetime', timestamp => { function format (number) { return number.toString()....

2019-07-29 17:19:15 4754

转载判断一个时间是否在当前时间范围内(未开始,进行中,已结束)

判断一个时间是否在当前时间范围内(未开始,进行中,已结束)nowInDateBetwen(d1, d2) { //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了 // var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date // var dateEnd = new D...

2019-07-24 14:32:13 3386

weixin_41579185的博客