- 博客(32)
- 收藏
- 关注
原创 vue2 自定义指令
指令定义函数提供了几个钩子函数(可选):bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次, 指令与元素解绑时调用。指令钩子函数会被传入以下参数:
2021-07-07 15:55:23 208
原创 [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 2102 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 1602 1
原创 uniapp 悬浮球 可回弹
<template> <!-- 悬浮球 --> <movable-area class="movableArea"> <!-- damping:官方默认值20,控制x或y改变时的动画和过界回弹的动画,值越大移动越快 direction: 移动方向,属性值有all、vertical、horizontal、none friction: 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止,越小,滑动会有停留,会有原路返回的情况
2021-06-09 10:49:51 1038
原创 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 2968 1
原创 递归父级
var arr = [ { check: false, child: [ { check: false, child: [ { check: true, }, { check: true, }, ], }, {
2021-02-24 15:17:14 151
原创 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 1776
原创 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 1103
原创 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 3247 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 541 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 691
转载 mac安装brew出现443报错
找遍全网办法没有用后找到这个/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"终端执行之后然后选择安装源,输入数字,按照提示输入密码,之后等待安装完毕即可
2020-08-27 23:06:13 260
原创 所以希望生成[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 342
转载 vue cli4.0 配置环境变量
我个人的理解就是:你执行npm run serve时,对应的环境就是开发环境;你执行npm run build时,对应的环境就是生产环境。如果你开发的项目中,不止该3种,该咋整呢?像在我开发的项目中,就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。1.创建不同环境变量文件如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置.
2020-05-29 14:44:16 667 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 2637 1
原创 防抖+ 节流+ 图片懒加载
节流滚动,隔⼀段时间只触发⼀次 第⼀个⼈说了算 在时间结束出发// func是⽤户传⼊需要防抖的函数// wait是等待时间const throttle = (func, wait = 50) => { // 上⼀次执⾏该函数的时间 let lastTime = 0 return (...args)=>{ // 当前时间 let now = +new Date() ...
2020-03-16 13:25:28 254
原创 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 1464
原创 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 419
原创 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 569
原创 webpack学习笔记
什什么是webpackwebpack is a module bundler.(模块打包⼯工具)Webpack可以看做是模块打包机:它做的事情是,分析你的项⽬目结构,找到JavaScript模块以及其它的⼀一些浏览器器不不能直接运⾏行行的拓拓展语⾔言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器器使⽤用。官方⽹站:https://webpack.js.org/...
2020-02-16 13:47:01 306
原创 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 619
原创 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 514
原创 导出文件 ()
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 111
原创 基于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 787
转载 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 560
原创 获取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 2549
原创 移动端基于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 330
原创 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 4766
转载 判断一个时间是否在当前时间范围内(未开始,进行中,已结束)
判断一个时间是否在当前时间范围内(未开始,进行中,已结束)nowInDateBetwen(d1, d2) { //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 // var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/,使用new Date // var dateEnd = new D...
2019-07-24 14:32:13 3404
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人