- 博客(42)
- 收藏
- 关注
RSS订阅原创 数字滚动变化-指令形式
/ mounted 时，binding.oldValue 为 undefined。// 恢复为原来的值，不恢复的话会闪一下。// 目标值与原值一样则不进行任何操作。// 计算每次改变的值。
2023-08-02 16:30:51
362
原创 自定义navigationBar组件
app.jsApp({// 状态栏高度 const {wx . setStorageSync('statusBarHeight' , statusBarHeight + 'px') // 胶囊数据 const {== 0) {// android 一般为 48, ios 一般为 40 wx . setStorageSync('navBarHeight' , platform === 'android'?
2022-12-15 16:03:44
208
原创 vue项目使用全局sass、less，以使用变量
vue项目使用sass、less一、使用sass在项目根目录创建vue.config.js，并写入以下内容module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/sass/index.scss";`, } } },}例如// index.scss$red: #FF3B30在项目中就可以愉快的使用<style
2022-01-25 18:07:11
1079
原创 Array.flat方法
Array.flat方法作用用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。语法/** * @params { Number } num 需要将数组拉平的层数，默认是1 */array.flat(num)实例[1, 2, 3, [4, 5]].flat(); // [1, 2, 3, 4, 5][1, 2, [3, [4, 5]]].flat(); // [1, 2, 3, [4, 5]][1, 2, [3, [4, 5]]].flat(2);
2021-11-29 16:13:35
357
原创 作用域插槽简单应用
作用于插槽简单应用Parent.vue<template> <div class="content"> <Child :data="data" :columns="columns" > <template slot="name" slot-scope="{ row }"> 姓名：{{ row.name }} </template> <temp
2021-11-19 11:07:49
374
原创 懒加载处理，不要再傻傻监听页面滚动
懒加载处理利用浏览器原生提供的构造函数 IntersectionObserver， 不要再傻傻监听页面滚动一、IntersectionObserver简介1. 语法let observer = new IntersectionObserver(callback, option);/* callback 是当被监听元素的可见性变化时，触发的回调函数 option 是一个配置参数，可选，有默认的属性值*/2. callback 参数目标元素的可见性变化时，就会调用观察器的回调函数ca
2021-11-08 16:59:22
488
2
原创 Array.sort方法
Array.sort方法作用对数组的元素进行排序排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序.使用数字排序，你必须通过一个函数作为参数来调用注意： 这种方法会改变原始数组！。语法array.sort(function ())实例默认排序let arr = ["Banana", "Orange", "Apple", "Mango"];arr.sort(); // [ Apple, Banana, Mango, Orange ]数字排序
2021-09-27 10:48:31
1406
原创 为什么不建议用`index`做`key`？为什么不建议用随机数做`key`？
为什么不建议用index做key？为什么不建议用随机数做key？<template> <div> <!-- 用index做key --> <div v-for="(item, index) in list" :key="index">{{ item.name }}</div> <!-- 渲染为 <div key=0>张三</div> <div k
2021-09-24 17:43:28
480
原创 在哪个生命周期内调用异步请求？
在哪个生命周期内调用异步请求？可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是，在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：能更快获取到服务端数据，减少页面 loading 时间SSR 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性......
2021-09-18 16:20:00
1346
原创 使用canvas画二维码
使用canvas画二维码需要使用 qrcode 依赖具体代码如下<template> <div> <canvas ref="code"></canvas> </div></template><script>import QRCode from 'qrcode'export default { mounted() { let code = 'xxxxx
2021-08-31 14:33:08
421
原创 全局注册组件
全局注册组件1. 直接在main.js注册import List from "@/components/List";Vue.component('List', List);2. 使用 Vue.use在合适的位置创建globalComponents.js2.1 单个注册// globalComponents.jsimport List from "@/components/List";// 导出对象export default { install(Vue) { Vue.c
2021-08-25 10:10:42
230
原创 Vue使用Swiper插件
Vue使用Swiper插件这里直接封装，方便后边使用Swiper.vue<template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></
2021-08-24 18:06:13
253
原创 JS中数据类型的判断
JS中数据类型的判断typeoftypeof 对于基本数据类型(除了null外)，都可以显示正确的数据类型typeof 对于引用数据类型(除了function外)，都显示Objectconsole.log(typeof 1); // numberconsole.log(typeof 'str'); // stringconsole.log(typeof true); // booleanconsole.log(typeof undefined); // undefinedc
2021-08-17 10:13:45
79
原创 向数组指定位置添加内容
向数组指定位置添加内容/** * 向数组指定位置添加内容 * @param { Array } arr 原数组 * @param {*} data 要添加的内容 * @param { Number } index 需要添加的位置 * @returns */function addData(arr, data, index) { if (index === -1 || index > arr.length) { console.log('请输入正确的下标'); re
2021-08-09 16:24:10
642
原创 display: none、visibility: hidden 和 opacity: 0 之间的区别
display: none、visibility: hidden 和 opacity: 0 之间的区别共同点都是隐藏不同点1. 是否占据空间display: none 隐藏后，不占位置visibility: hidden: 隐藏后，仍然占据位置opacity: 0: 隐藏后，仍然占据位置2. 子元素是否继承display: none: 不会被子元素继承，父元素都不存在了，子元素也不会显示出来visibility: hidden: 会被子元素继承，通过设置子元素vis
2021-07-22 11:14:05
192
原创 vue-cli3 配置及iview定制主题
vue-cli3 配置及iview定制主题官网vue.config.js配置module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } },}1. 变量覆盖方式首先在项目根目录中创建my-theme目录，然后在my-theme下创建index.less，并写入下面内容：@import '~view-design/src/st
2021-07-17 10:43:42
467
原创 vue 实现懒加载请求数据
<template> <div class="test-box" ref="box"> <div class="aaa"></div> <div class="test" ref="test" v-for="(item, index) in list" :key="index" :style="`background-color: ${item.color};`"
2021-07-12 16:34:20
1869
原创 数组去重的常用算法
数组去重1. 利用ES6 set去重function fn(arr) { return Array.from(new Set(arr)) // 简写形式 return [...new Set(arr)]}let arr = [1, 2, 3, 4, 5, 5, 5, 4, 3, 2, 1];console.log(fn(arr)); // [1, 2, 3, 4, 5]2. 利⽤for嵌套for，然后splice去重（ES5中最常⽤）双层循环，外层循环元素，内层循环时⽐较值
2021-07-09 10:45:56
184
原创 将时间格式化为几天前/几月前
/** * 将时间格式化为几天前/几月前 * @param { Number } timestamp 时间戳 * @param { String } unit 时间戳单位 秒/毫秒 */function formatTime (timestamp, unit = '毫秒') { let createTime; if (unit === '毫秒') { createTime = new Date(timestamp) } else { createTime = new D
2021-07-06 09:27:57
132
原创 vue-cli 构建新的打包环境
项目配置package.json文件{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", // 新增, 名字自定义，注意不要使用 server/build/test, 这是创建项目时默认的 "custom": "vue-cli-service build --mode custom" },}以 vscode为例此时npm脚本列表里会多出一个 c
2021-07-03 11:22:30
181
原创 vue 跳转至当前路由，并刷新页面
携带不同参数跳转至当前路由，刷新页面并获取该参数借助空页面实现例如：由 /detail?id=1 跳转至 /detail?id=2detail.vueexport default { methods: { test() { this.$router.push({ path: '/empty', query: { router: '/detail?id=2' } }) } }, c
2021-05-12 15:50:42
6317
原创 Taro / 小程序 获取 DOM 元素的位置
介绍需要用到Taro.createSelectorQuery() 方法, 由于该方法获取DOM需要一定的时间，直接使用会获取到null，所以封装成Promise对象函数封装/** * 获取元素位置 * @param {*} elements 需要查找的元素的名称(类名、id) * @returns 查找元素的位置的集合，传入字符串则为对象，传入数组，则为数组 */export const getElementsSite = (elements) => { const query =
2021-04-26 18:15:55
2278
原创 vue 使用代理解决跨域问题
简介使用代理，则前端不需要再配置baseURL，因为请求全部走的前端服务(代理)开发环境在前端配置// 在根目录创建vue.config.js文件module.exports = { // 请求单个 devServer: { proxy: '开发环境后台地址' }, // 请求多个 devServer: { proxy: { '自定义前端请求前缀': { target: '开发环境后台地址', pat
2021-04-25 16:37:39
841
原创 vue 生产/开发 环境变量配置
当前内容适用于vue-cli 3.0创建文件在根目录创建 .env.development 和 .env.production文件配置文件这里以配置接口地址为例.env.development文件VUE_APP_BASEURL = 开发环境接口地址.env.production文件VUE_APP_BASEURL = 生产环境接口地址使用变量配置axiosconst _axios = axios.create({ baseURL: process.env.VUE_AP
2021-04-25 16:30:33
124
原创 vue build之后，可以在本地浏览使用
vue build之后，可以在本地浏览使用本地无法浏览的根本原因，是build之后，文件的引入路径错误导致的，只需要在build时修改路径即可// vue.config.js, 如果没有本文件，请在根目录创建module.exports = { publicPath: process.env.NODE_ENV === 'production'? './' : '/', outputDir: 'dist', // build 时生成的生产环境构建文件的目录（默认） assetsDir: 's
2021-04-23 10:56:51
337
原创 文本超出使用省略号
话不多说，直接上代码.overstep { /* 单行文本*/ /*超出部分不可见外能不能添加...，固定三项*/ overflow: hidden; /*超出部分不可见*/ text-overflow: ellipsis; /*隐藏部分的文字用...，但是这个想要实现，还*/ white-space: nowrap; /*还 设置宽度为非自动，即设置空格不换行*/ /* 多行文本 */ /* 溢出隐藏 */ overflow : hidden; /*
2021-04-06 10:20:08
197
1
原创 Array.reduce方法
作用计算数组元素相加后的总和语法/** * @params { Function } (必填), 用于执行每个数组元素的函数 * @params { * } total (必填), 函数的第一个参数, 初始值, 或者计算结束后的返回值 * @params { * } currentValue (必填), 函数的第一个参数, 当前元素 * @params { Number } currentIndex (非必填), 函数的第一个参数, 当前元素的索引 * @params { Array } a
2021-04-02 10:39:14
5780
原创 Javascript中深拷贝的几种实现方法
JS中深拷贝的几种实现方法1. 递归的方法function deepClone (obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "object") { for (var key in obj) { // obj
2021-04-01 09:09:30
126
原创 IE9 及以下版本不支持 placeholder属性
JQuery解决方法(function () { // 浏览器不支持placeholder属性 if (!('placeholder' in document.createElement('input'))) { // 遍历每一个用到placeholder的input 和 textarea $('input[placeholder], textarea[placeholder]').each(function () { var that = $(this) .
2021-03-31 15:39:53
155
原创 IE8 及以下版本css3部分属性不兼容
用的最多的就是 边框阴影(box-shadow)、圆角(border-radius)、渐变色(linear-gradient)解决方案1：在head中添加标记标签，强制IE使用高版本<head> <meta http-equiv="X-UA-Compatible" content="IE=edge,11,10,9"></head>解决方案2：使用官方脚本，统一处理css3不兼容IE8 及以下版本div { width: 500px; h
2021-03-31 15:36:41
186
原创 Taro UI vue 事件绑定传入自定义参数
由于该UI组件的事件都是用v-bind(:)绑定的，所以传入自定义参数需要用到函数返回函数的形式<AtInputNumber :width="200" :min="0" :max="10" :step="1" :value="value" :onChange="handle1"></AtInputNumber><AtInputNumber :width="200" :min="0" :max="10" :step="1" :v
2021-03-31 15:25:19
871
原创 Taro + vue 绑定小程序原生事件
Taro + vue 绑定小程序原生事件// 在对应的页面里// 上拉刷新Taro.Current.page.onPullDownRefresh = function() {}// 触底加载Taro.Current.page.onReachBottom = function() {}// 分享Taro.Current.page.onShareAppMessage = function() {}// 监听用户下拉动作Taro.Current.page.onPullDownRefres
2021-03-31 15:17:58
767
原创 json-server使用基础
json-server的使用安装npm install -g json-server创建目录在合适位置创建一个文件夹，尽量是英文创建 db.json在文件夹中创建一个db.json，并进行编辑json中写入数据{ "books": [], "users": []}当db.json中有以上数据时，json-server会提供以下接口books 相关接口GET /books 获取所有信息GET /books/:id 获取单个信息POST /books 新增数据PATC
2020-09-27 14:20:06
138
原创 AJAX 请求解决跨域问题 与 函数封装
AJAX简介：Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术什么是AjaxAjax 即Asynchronous JavaScript and XML (异步的Javascript 和 XML)Ajax 不是新的编程语言，而是一种使用现有标准的新方法Ajax 不需要任何浏览器插件，但是需要用户允许Javascript 在浏览器上运行Ajax 是一种用于创建快速动态网页的技术传统网页(不使用 Ajax)，如需更新内容，必须重载整个页面一个简单的
2020-07-30 19:36:19
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人