- 博客(233)
- 收藏
- 关注
RSS订阅原创 iview的select数字模糊查询功能实现
然后判断是否是数字类型!isNaN(parseFloat(querys)) && isFinite(querys)，还要就是要清除下空格。思路是这样， projectList是全部项目数据，projectListSearch是模糊查询的下拉数据。如果值为‘’，就清空v-model的值，并让模糊下拉数据等于全部数据即可。主要是on-query-change这个方法是监听搜索词的val值。
2023-06-16 11:23:24
474
原创 iview的select加filterable多点击几次数据会减少
这个问题的产生应该是因为有空格，filterable选中值后，再点击change事件获取的值就是前面加了空格，可以写在label里面。
2023-06-16 11:17:04
182
原创 vue日期的转换总结
安装dayjs依赖包importdayjsfrom'dayjs'export const formatDate = (value, format = 'YYYY-MM-DD') => { if (value) { let date = new Date(value) return dayjs(date).format(format) } else { return null }}export const f...
2021-11-19 11:47:46
780
原创 ES6复习小记
1：函数参数的解构赋值[1, undefined, 3].map((x = 'yes') => x);// [ 1, 'yes', 3 ][[1, 2], [3, 4]].map(([a, b]) => a + b);// [ 3, 7 ]2：从函数返回多个值// 返回一个数组function example() { return [1, 2, 3];}let [a, b, c] = example();// 返回一个对象function example(
2021-10-29 16:48:30
126
原创 vue中点击加减按钮，添加或删除一列输入框
<template> <el-form :model="form"> <div v-for="(item,index) in form.addForm" :key="`addForm${index}`"> <el-col :span="7"> <el-form-item label="" :prop="`addForm.${index}.name`"> .
2021-10-27 14:24:44
1657
原创 VUE之elementUI组件：输入金额的限制（两位小数、不能0或.开头 只能输入数字和.）
参考了几种金额判断是方法整合了下方法：<el-form :model="form" :rules="rules"> <el-form-item label="金额" required prop="money"> <el-input placeholder="请输入金额" v-model="form.money" /> </el-form-item></el-form>date(){ const
2021-10-22 14:28:13
4234
原创 Css3弹性盒子实现自适应功能方法
1：只显示最多10条数据，高度自适应<template> <div id="app"> <div class="content"> <p>111111111111111111111111</p> <p>111111111111111111111111</p> <p>111111111111111111111111<
2021-09-06 17:26:51
1050
转载 基于vue-grid-layout的自定义布局桌面
重要：vue-grid-layout拖拽自定义桌面demo演示项目跑起来会遇到一个错误，把文件名改一下就可以跑起来了,如下图所示：
2021-08-26 16:25:27
2574
1
原创 bizcharts入坑问题Part2：X轴与Y轴添加单位
import React from "react";import { Chart} from "bizcharts@3.5.8";class Basic extends React.Component { render() { const cols = { value: { min: 0, range:[0,0.93], alias:'次' }, year: { range: [0,.
2021-05-11 10:30:27
868
原创 bizcharts入坑问题Part1：雷达图文字过长怎么换行
官网：bizcharts完整代码如下：import React from "react";import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util} from "bizcharts@3.5.8";import DataSet from "@antv/data-set";class Basic extend.
2021-05-10 15:22:58
746
原创 React之useRef的简单用法-获取input里面的值
useRefimport {useRef} from 'react'const inputVal = useRef(null)const inputValOpt=()=>{ console.log(inputVal.current.state.value) console.log(inputVal.current.input.defaultValue)}<input type='text' ref={inputVal }/><button onC.
2021-04-19 17:27:09
5828
5
原创 每日一练29：antd-design框架搭建表格功能-增删功能
首先说下功能是表格数据展示，点击增加会出来一个表单弹框，删除用户直接调接口删除就行1：首先写个新增用户按钮import {PlusOutlined} from '@ant-design/icon'<Button icon={<PlusOutlined/>} type="primary" onClick={()=>{showModal()}>新增用户<Button>2：写个表单modalimport React,{useState} from
2021-04-19 15:56:09
614
转载 JavaScript 复杂判断的更优雅写法
前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子，先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonCl.
2021-02-07 11:43:39
105
转载 ES7 and ES8 新功能
可选链运算符使用可选链运算符，只需要使用?.来访问嵌套对象。 而且如果碰到的是undefined或null属性，那么它只会返回undefined。const opt = { obj1: { obj2: { obj3: { obj4: { obj5: 5 } } } }}console.log(opt?.obj1?.obj2?.obj3?.obj4?.obj5);当我们的程序执行...
2021-02-05 17:02:17
122
转载 Css的用法总结part4 line-clamp
line-clamp参考：line-clamp限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列
2021-02-04 16:33:24
1205
原创 Vue常用问题总结-2class与style
一Class与Style绑定列子1：<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}渲染结果为：<div class="static active"></div> 列子2：<div v-bind:cl...
2021-02-01 15:47:27
247
原创 Vue常用问题总结-1
图片引入方式对象图片第一种方式：<div :style="`background-image:url('${BANNER')`"></div>import {BANNER} from '@/const/imgUrl'export default {data() { return {BANNER｝}第二种方式：background-image: url('~assets/loading.gif');...
2021-02-01 15:18:23
135
原创 每日一练28：移动端页面布局总结
效果图如下：只有中间内容滚动，头部红色定位在顶部，底部绿色背景定位在底部，只有中间内容滚动这个效果用的盒子模型写的，不用定位<template> <div class="app"> <div class="top"> <p>我是top</p> </div> <div class="content"> <
2021-01-30 15:17:01
220
转载 css伪类有哪些？
伪类的语法：selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited）。同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover
2020-12-14 18:26:18
613
原创 Css的用法总结part3：css3弹性盒子模型
1：align-content属性定义：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐2：align-items属性定义：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。3：align-self属性定义：在弹性子元素上使用。覆盖容器的 align-items 属性。4：justify-content属性定义：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。5：flex-wrap...
2020-11-24 17:59:52
151
原创 Css的用法总结part2：column-count 属性、flex、columns、filter、font
1：column-count属性Column-count属性指定某个元素应分为的列数。Column-gap并指定一个30像素的列之间的差距Column-rule指定列之间的规则：宽度，样式和颜色。简写：columns:100px 3;<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <.
2020-11-24 17:35:37
394
原创 Css的用法总结part1：sticky定位、align-content、backface-visibility、background
1：sticky定位用法：基于用户的滚动位置来定位<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px;.
2020-11-24 16:29:15
179
转载 axios学习日记Part2：常见传参方式get/post/put/patch/delete
参考：axios (get,post,delete,put,patch)用法GET请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的select操作一样，只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的。 与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，该请求就像数据库的update操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。 .
2020-11-24 14:55:16
719
原创 每日一练26：vue的选项卡功能编写
参考vue官网：动态组件效果如下：<template> <div class="demo"> <button v-for="tab in tabs" :key="tab.name" :class="['tab-button', { active: currentTab.name === tab.name }]" @click="currentTab = tab" > {{ tab
2020-11-19 16:23:27
313
2
原创 每日一练25：vue的vue-canvas-poster生成海报
本文参考：vue- canvas生成海报图看下效果：点击分享海报后弹出海报，点击X按钮和空白处海报消失的效果安装：yarn addvue-canvas-poster全局importCanvasPosterfrom'vue-canvas-poster'Vue.use(CanvasPoster)局部import {vueCanvasPoster} from 'vue-canvas-poster'components: {vueCanvasPost...
2020-11-19 11:54:20
2415
原创 每日一练24：Vue的城市列表tabbar样式
首先说下功能：效果如下功能一：点击右侧的H英文：如下效果功能二：页面滚动时：如下效果会看到英文固定到顶部效果好了，现在开始写页面样式我就不写了，第一个功能大概代码city.vue<template> <div class="city"> <van-cell-group> <van-cell :title="`当前选择城市：${this.name}`" /> <van-cell titl
2020-11-13 18:52:41
198
原创 javascript常用数组方法-字符串查找-截取字符串
1：JS字符串查找（6种方法）String 类型的查找字符串方法 字符串方法 说明 charAt() 返回字符串中的第n个字符 charCodeAt() 返回字符串中的第n个字符的代码 indexOf() 检索字符串 lastIndexOf() 从后向前检索一个字符串 match() 找到一个或多个正则表达式的匹配 search() 检索与正则表达式相匹配的子串 2：JS截取字符串（3种方法）...
2020-11-05 18:01:10
599
原创 javascript常用逻辑&&||回顾
1：三目运算可看出只要条件为false就返回2，否则，返回1console.log(true && false ? 1: 2)console.log(false && true ? 1: 2)console.log(false ? 1: 2)console.log(true ? 1: 2)2：&&参考：彻底理解js中的&&和||第一个打印结果第一个值为true，则不管第二个值是不是true或者false都返回第
2020-11-05 11:10:18
405
1
原创 React学习总结part2：react-hooks的useState，useContext ，useReducer，useEffect
useStateuseState的优点：便于管理数据的状态，多次声明状态的方式更加方便 useState的缺点：处理多层嵌套数据逻辑，比较吃力index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import Routers from './project/router.js';import * as serviceWorker from './service
2020-11-02 16:09:52
305
原创 码云基本用法
安装好git1：登录码云2：新建仓库3：创建好后，自动跳转到这个页面跟着上面步骤走就可以生成一个本地项目并提交第一个代码。在这过程中，创建git仓库的最后一步可能会出现的错误：1：出现一个弹框，让你输入用户名和密码，没输入对后，报一下错误解决办法：1：打开谷歌中的设置2：点击密码3：找到你保存的账号和密码4：打开控制面板，找到用户账户5：打开管理Windows凭据6：出现一下找到gitee.com7：点击...
2020-10-28 14:41:44
984
原创 React简单个人网站项目记录Part2 - 关于
关于页面功能编写import React from 'react'import "../About/index.scss"import { Row, Col,Typography } from 'antd';import whiteRoseImg from '../../assets/image/white_rose.png';const { Title ,Text} = Typography;function About() { return ( <div class.
2020-10-27 18:50:29
130
2
原创 React简单个人网站项目记录Part1 - 安装项目和依赖、首页、路由
安装项目：npm install -g create-react-app create-react-app my-app cdmy-app yarn start npm install react-router-dom yarn add antd yarn add sass-loader node-sass --save-dev
2020-10-27 18:43:31
212
1
转载 axios学习日记Part1：安装
axios使用 npm:npm install axiosGET// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// 上面的请求也可以这样做axios.get('/user', { p.
2020-10-26 14:49:30
62
原创 Vue学习日记part7 slot基本用法
slot用法官网：slot简单用法1//HelloWorld页面<template> <div class="HelloWorld"><to-do>我是HelloWorld页面</to-do></div></template><script>import ToDo from '@/components/ToDo'export default { name: 'HelloWorld', c
2020-10-26 11:19:54
389
原创 React学习总结part1：redux是什么、react-redux
redux作用：集中式管理react应用中多个组件共享的状态redux和react没有任何关系 redux是一个状态管理器 redux相当于一个公共的容器来存放数据，哪个组件需要，就可以直接调用redux的三个核心APIstore（相当于一个容器，用来保存数据的地方，整个项目中有且只能有一个 创建方式 Redux.createStore()） action（相当于记录了需要通知的各种方法。它是一个对象，有个type属性 写法：const action = {type:'ADD..
2020-10-23 18:44:41
165
原创 Vue学习日记part6 Vue3新特特性-Setup、生命周期钩子、provide
Setup语法：Setup(props,context)｛｝参数:1:props:是响应式的，当传入新的 prop 时，它将被更新(因为props是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性)export default { props: { title: String }, setup(props) { console.log(props.title) }}需要销毁 prop (可以通过使用setup函数中...
2020-10-22 16:56:12
1643
1
原创 每日一练23：二维码的实现
第一种写法qrcodenpm i qrcode --save<template> <div id="qrCode"> <div id="code"></div> <canvas id="canvas"></canvas> </div></template><script>import QRCode from "qrcode";export defa
2020-10-21 18:03:41
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人