![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
daisy0328
这个作者很懒,什么都没留下…
展开
-
linear-gradient 绘制不规则四边形
.box { width: vw(100); height: vw(40); background: linear-gradient(120deg, #dfe2ef, #dfe2ef vw(80), transparent vw(82), transparent);}效果:注意:两个色衔接处需要间隔1个像素,否则衔接处会呈锯齿状。原创 2022-04-21 15:51:38 · 395 阅读 · 0 评论 -
微信小程序开发——scroll-view里边放fixed元素后样式错乱
问题描述:scroll-view,里面的自定义组件中包含一个fixed弹框,但这个弹框无论怎么设置层级,只能显示在当前scroll-view的有效宽度内。安卓、开发工具都正常。ios不行。原因:因为 iOS 下加了 -webkit-overflow-scrolling: touch,这个会产生滚动惯性,体验更好,但会改变 fixed 的行为,建议不在 scroll-view 里有 fixed 元素解决:将scroll-view标签改为view,并设置样式: overflow-x: hidden原创 2022-03-14 10:24:31 · 9996 阅读 · 1 评论 -
git commit 强行终止后如何操作
执行 git add somefile 的时候,出现 如下 错误:If no other git process is currently running, this probably means agit process crashed in this repository earlier. Make sure no other gitprocess is running and remove the file manually to continue.解决方法:rm -f ./.git/i原创 2022-01-27 10:00:02 · 652 阅读 · 0 评论 -
小程序开发 tips——2
1、getCurrentPages 获取到某一个页面后,可以直接 setData 更新页面数据:let currentPages = getCurrentPages();let prevPage = currentPages[currentPages.length - 2]; //上一个页面// 直接调用上一个页面的setData()方法,把数据存到上一个页面中去prevPage.setData({ newCustomerCoupon,});2、image onload 时获取图片宽高:原创 2022-01-26 18:28:40 · 796 阅读 · 0 评论 -
小程序eventChannel传递参数时报错
报错信息:“MiniProgramErrornthis.getOpenerEventChannel(…).on is not a functionn”原因:如果页面不是 navigateTo 跳转进入的, getOpenerEventChannel 将返回空对象。可以检查页面是否可能存在其他进入来源,如首页启动、分享卡片跳入等。处理:getOpenerEventChannel获取到对象之后做兼容处理:const eventChannel = this.getOpenerEventChannel();原创 2022-01-26 18:13:57 · 2127 阅读 · 1 评论 -
小程序订阅消息报错
报错信息:requestSubscribeMessage:fail can only be invoked by user TAP gesture低版本订阅消息api必须在点击事件中触发(直接调用订阅消息api就会出现以上报错),也可在提交表单时弹出确认弹框再调用订阅消息:wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) {原创 2022-01-12 17:09:08 · 685 阅读 · 0 评论 -
tips-one——2021-06-24
1、flex-1由于子元素过宽超出父元素宽度,给flex-1元素设置overflow:hidden。2、连续的数字字母不会换行——word-wrap: break-word;word-break: break-all;3、微信小程序component里边监听属性值的变化:property 里边定义property时添加observer属性:properties: { show: { // 属性名 type: Boolean, value: false原创 2021-06-24 16:52:09 · 122 阅读 · 0 评论 -
使用 sortablejs 实现拖拽排序
sortable.js 官网——配置项:点击查看举例:el-table 拖拽排序js 代码://引入 sortablejsimport Sortable from "sortablejs"; data() { return { list: [] // 列表数据 }; },methods:{ //排序 async listSort() { let ids = []; //排序好的id集合 this.list.forEach原创 2021-03-02 00:38:26 · 2371 阅读 · 0 评论 -
Element UI —— el-form 自定义验证规则
自定义验证规则:金额不能超过两位小数html代码: <el-form :model="formData" :rules="rules" ref="msgForm" label-width="120px" > <el-form-item label="商品名称:" prop="name"> <el-input v-model="formData.name"原创 2021-03-02 00:10:59 · 3533 阅读 · 0 评论 -
微信小程序 input 数据双向绑定
原理:给input的data-prop绑定一个字符串,和value绑定的变量名一致,给input绑定change事件,事件触发时获取input的value值,赋值给对应的变量(通过该input上data-prop绑定的字符串确定)wxml页面:<input value="{{address_detail}}" data-prop="address_detail" bind:change="onChange" type="text"></input><input valu原创 2021-01-31 21:14:59 · 1979 阅读 · 0 评论 -
点击按钮复制功能
复制操作是基于input输入框的,所以得事先生成一个输入框来存放需要复制的文本数据。举例:el-table 中点击按钮复制商品链接:<el-table-column label="商品链接" min-width="120"> <template slot-scope="scope"> <el-button @click="copyUrl(scope.row.goodsurl)" round>复制链接</el-button> </te原创 2021-01-19 18:00:57 · 2284 阅读 · 0 评论 -
React 生命周期
一、原创 2020-12-01 01:13:56 · 101 阅读 · 0 评论 -
React Hooks 的使用
官方文档:https://react.docschina.org/docs/hooks-overview.htmlHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 。1、useState()通过在函数组件里调用useState()来给组件添加一些内部 state。React 会在重原创 2020-12-01 00:49:32 · 92 阅读 · 0 评论 -
react-router 的配置及使用
一、原创 2020-11-30 14:21:59 · 629 阅读 · 0 评论 -
React 实现数据双向
一、手动实现数据双向React中的数据绑定是单项的。可以通过表单元素标签 onchange事件实现数据双向。<input type="text" value={this.state.txt} onChange={this.changeData} /> // react 当中手动实现数据双向 changeData = (e) => { //获取当前的目标元素 let ele = e.target; //获取目标元素的v原创 2020-11-29 23:18:57 · 498 阅读 · 0 评论 -
React 事件 和 方法
一、方法的声明方法声明的位置和constructor同级。1、普通方法 //普通方法 this指针undefined sendMsg = function () { console.log("事件执行", this); }this指针undefined。要想this指向当前组件,需要在调用事件方法时绑定this。<button onClick={this.sendMsg.bind(this)}>按钮普通方法</button&g原创 2020-11-29 22:39:15 · 141 阅读 · 0 评论 -
React 组件、数据渲染
一、声明组件,创建组件文件下面是使用es6的 class 类来声明组件,也可以使用函数式创建(这里不做介绍,见官方文档)import React, { Component } from 'react';//组件的类声明class Home extends Component{ render(){ return <div>我是组件</div>; }}//组件暴露export default Home;组件里面有多个元素的时候注意:在原创 2020-11-29 20:29:43 · 518 阅读 · 0 评论 -
Less、scss、stylus 对比
都有变量、混入、函数、嵌套、继承、颜色函数等的概念。一、关于声明变量Less使用@变量名:值Scss使用$变量名:值Stylus使用 变量名=值,$可加可不加二、关于作用域Scss没有全局作用域的概念,在Sass样式中定义变量,调用变量是没有全局变量一个概念存在,因此在Sass中定义了相同变量名时,在调用之时千万要多加小心,不然会给你的样式带来错误。Less和Styuls中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到原创 2020-11-26 22:50:12 · 1109 阅读 · 0 评论 -
关于网页的基本性能优化
一、网页优化1、静态资源压缩借助构建工具(webpack、gulp)适当压缩图片、脚本及样式等网页静态资源。2、CSS雪碧图、base64内联图片将站内小图标合并成一张图,使用css定位截取对应图标;适当使用内联图片。3、样式置顶、脚本置底页面是一个逐步呈现的过程,样式置顶能更快呈现页面给用户;4、使用外链的css和js多个页面引用公共静态资源,资源复用减少额外的http请求。5、避免空src的img标签空src的图片依然会发起http请求。6、避免在HTML中缩放图片图片尽量按需求使原创 2020-11-26 18:04:26 · 328 阅读 · 0 评论 -
通过脚手架创建 React 项目
一、yarnyarn 类似于 npm/cnpm ,都是包管理工具,但是 yarn 是崭新的,经过重新设计的 npm 客户端,于2016年10月发布,相比于 npm,yarn 在运行速度上有显著的提升,安装时间变少,功能上也有很多改进。yarn 安装:cnpm install -g yarn安装完成之后检测版本号:yarn -v二、react 环境搭建1、安装脚手架:cnpm install -g create-react-app2、通过脚手架创建项目:项目创建完成之后会在项目目原创 2020-11-23 02:00:01 · 127 阅读 · 0 评论 -
console的常用方法
console.log("输出普通信息"); console.warn("输出警告信息"); console.info("输出提示信息"); console.error("输出错误信息"); console.debug("输出调试信息"); console.group("开始一组输出信息"); console.groupEnd("结束一组输出信息"); console.time("必须传入一个..原创 2020-11-20 22:05:33 · 210 阅读 · 0 评论 -
利用v-model实现父子组件传值——子父组件同步更新
v-model介绍v-model 是Vue的一个很大的特色,可以实现双向数据绑定。v-model本质上是语法糖,它负责监听用户的输入事件以更新数据。v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件:text 和 textarea 使用 value 属性和 input 事件;checkbox 和 radio 使用 checked 属性和 change 事件;select 字段将 value 作为 prop 并将 change 作为事件。如何巧妙利用 v-model实现父子组转载 2020-11-20 21:25:18 · 8498 阅读 · 1 评论 -
Vue使用 Element UI 和 mint-UI——0808
一、Element UI——PC端1、 安装2、 引入element UI,并给vue使用——下边是全部引入,也可以按需引入3、 引入css文件4、 配置 element UI 的字体解析规则5、使用插件二、mint-UI ——手机端1、安装2、引入mint-ui——可以全局引入、可以按需引入下边是全局引入:3、 引入css文件4、 使用在当前组件里边注册,之后就可以使用了...原创 2020-10-24 12:19:41 · 830 阅读 · 0 评论 -
Vuex ——0808
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(全局数据状态管理)。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1、安装vuex:cnpm install --save-dev vuex2、在src 根目录下新建Vuex文件夹,该文件夹下新建 vuex.js 文件,做全局状态管理。内容如下:import vue from 'vue';import Vuex from 'vuex';vue.use(Vuex);let CONST_原创 2020-10-24 01:57:03 · 120 阅读 · 0 评论 -
使用mockjs——0808
mockjs官方文档1、安装mockjscnpm install --save-dev mockjs2、在src根目录下新建 mock.js 文件,内容如下://引入import MockData, { Random } from 'mockjs';//可以设置超时时间 可选MockData.setup({ timeout: 1000});const url = "http://www.maodou.com";//拦截ajax后,返回固定的数据MockData.mo原创 2020-10-22 21:56:15 · 133 阅读 · 0 评论 -
Axios、axios拦截器、fetch-jsonp ——0807
一、axios——vue数据请求插件用来请求 cross 跨域的 api 接口的插件。1、axios的使用1、安装axios:cnpm install --save-dev axios2、引入并使用全局引入并关联、使用main.js里边:import Axios from 'axios'Vue.prototype.$axios=Axios;组件里边使用://组件挂载完成之后进行数据请求mounted(){ this.$axios .get("") //原创 2020-10-22 19:16:57 · 255 阅读 · 0 评论 -
vue-router——08.07
Vue Router 是Vue.js的官方路由器。学习Vue Router之前,先了解路由中的三个基本的概念 route, routes, router。1、 route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。2、 routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 =&原创 2020-10-22 16:34:34 · 242 阅读 · 0 评论 -
vue组件生命周期、vue实例的计算属性和侦听器——0807
一、实例的生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。1、钩子函数触发的时间beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created :实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数原创 2020-10-21 21:07:02 · 162 阅读 · 0 评论 -
Vue动画——0805
1、原创 2020-10-21 13:17:19 · 125 阅读 · 0 评论 -
vue 过滤器、自定义指令——0805
一、过滤器过滤器的作用: 处理数据。过滤器可以用在两个地方: 双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由 “|”(管道符)指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>过滤器是 JavaSc原创 2020-10-20 20:22:52 · 194 阅读 · 0 评论 -
vue组件——0804
一、什么是组件组件是可复用的 Vue 实例,且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。每用一次组件,就会有一个它的新实例被创建。一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则,组件被复用时,组件中的数据就会互相影响。data: function () { return { count: 0 }}二、组件的注册为了能在模板中使用,组件必须先注原创 2020-08-20 17:34:33 · 288 阅读 · 0 评论 -
vue 数据绑定、数据渲染、事件——0801
一、数据绑定原创 2020-08-06 16:26:55 · 472 阅读 · 0 评论 -
vue 项目文件及相关配置——0801
1、完整版:README.md 命令文件。package-lock.json 默认配置文件,自带的包工具。package.json 项目配置文件,包含项目基本信息、安装的第三方包工具版本信息等。index.html 项目的网页入口文件,默认设置,不需要操作。.postcssrc.js 配置解析文件的,不需要操作。.gitignore 写后缀名的,不需要操作。.editorconfig 不需要操作。static 静态资源管理文件,一般用来放网页中静态的css或静态的图片,就可以用路径直接拿原创 2020-08-03 20:13:44 · 322 阅读 · 0 评论 -
vue 项目环境安装——0801
安装Nodejs地址:http://nodejs.cn/检测Nodejs是否安装成功:cmd (在电脑上直接搜索) 里边输入 node –v 检测版本号,如果检测不出来,并且电脑是第一次安装Nodejs ,需要在控制面板配置环境变量。vue 集成开发环境必须借助npm 远程下载包 https://www.npmjs.com/ , 开发不使用npm ,使用的cnpm。可以在淘宝镜像查找cnpm安装命令(百度搜索 淘宝镜像),在cmd里边输入安装命令下载。registry=https:..原创 2020-08-02 15:45:53 · 158 阅读 · 0 评论 -
使用 Echarts
一、使用步骤:1、获取 Echarts(1)在Echarts官网选择需要的版本下载。Echarts官网根据开发者功能和体积上的需求,提供了不同打包的下载,如果在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。Echarts官网地址: https://echarts.baidu.com/index.html(2)直接使用CDN。(3)通过 npm 获取 echarts,npm install echarts - -save。(4)在 ECharts 的原创 2020-07-27 16:16:37 · 324 阅读 · 0 评论 -
jQuery 筛选(过滤、查找、串联)——0715
一、过滤 //获取第n个元素 参数为正数,从前往后找;参数为负数,从后往前找 console.log($("ul>li").eq(0)); //从0算起 console.log($("ul>li").eq(-1)); //从-1算起 console.log($("ul>li").first()); console.log($("ul>li").last()); //根据类名称过滤,返回true false co原创 2020-07-22 00:28:33 · 231 阅读 · 0 评论 -
jQuery CSS操作——0715
一、CSScss() 获取或设置元素的样式属性。一次设置一个样式属性时,参数为“属性,值”;设置多个样式属性时,参数为一个对象;获取一个样式属性,参数为属性名;获取多个,参数为一个数组。 //一次设置一个属性 jQuery里边可以链式操作 连点 $("#box").css("width", "200px").css("height", "300px").css("border", "1px solid #000"); //一次设置多个 $("#box").css(原创 2020-07-19 14:11:58 · 211 阅读 · 0 评论 -
jQuery 属性操作(属性、css类、HTML、文本、value值)——0715
一、属性操作(1)attrattr() 获取或设置元素的属性值获取: 获取匹配的元素集合中的第一个元素的属性的值,参数为属性名。 $(".info").attr("value");设置: 设置每一个匹配元素的一个或多个属性。 设置的属性在 dom元素标签中可以显示,也可以在控制台输出属性值。参数可以写成以下三种形式:key,value || key,fn || properties“名:值”对象。要注意的是:回调函数的 index 参数为对象在这个集合中的索引值,val参数为这个对原创 2020-07-18 01:31:59 · 189 阅读 · 0 评论 -
jQuery 选择器——0715
jQuery选择器匹配到的是一个元素集合。由于jQuery 可以隐式迭代,所以可以一次操作多个dom,但如果获取配到的元素的属性,默认获取到的是第一个的。下边是 jQuery 选择器的用法示例:(1)基本 console.log($("*")); console.log($("button")); //element console.log($(".btn")); //class console.log($("#anniu")); //id con原创 2020-07-17 00:08:53 · 116 阅读 · 0 评论 -
jQuery 基本概念和语法——0715
一、什么是 jQuery?jQuery是一个轻量级的"写的少,做的多"的 JavaScript 库。优点:写得少、做得多;强大的元素选择器(使用的是css1-css3 所有选择器);简化了dom 操作;优化了事件机制;jQuery库包含以下功能:HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities除此之外,Jquery还提供了大量的插件。二、如何引入 jQuery?可以使用原创 2020-07-16 21:50:14 · 235 阅读 · 0 评论