- 博客(37)
- 收藏
- 关注
RSS订阅原创 uniapp | 日历时间选择器，可配置选天、半天(上下午)、小时
参考钉钉的交互，可配置按天、半天或者小时选择的日历时间选择器通过 format 配置选天或选小时通过绑定值 defaultVal 的 isHalf 配置是否为选半天(上、下午)t-picker组件模板<template> <u-popup v-model="show" mode="bottom" @click="colse()"> <view class="t-pop" @tap.stop> <view class="pop-main">
2023-07-19 17:52:16
3290
2
原创 使用发布订阅模式封装处理postMessage浏览器通信
统一规则、消息处理策略来维护消息通信，参考发布订阅模式实现on监听和emit触发，便于消息事件的跟踪及维护。
2023-05-02 15:48:14
660
原创 vue3 | el-table表格二次封装
2.列的显示隐藏控制，默认根据接口数据是否有返回绑定prop对应的字段，来实现列的权限控制显隐，也可通过外部传tableHeader来自行控制。1.统一样式，通过slot插槽而非json配置项的形式，来兼容原有table的template写法，方便改造。
2023-04-30 16:38:23
2401
原创 vue3 | 弹窗Dialog组件封装
只暴露提供一个入口函数—show()，保持组件内部封闭性。数据交互尽量通过 show 方法来传递，减少外部状态依赖。固定的配置项参数才考虑用 props。
2023-04-27 16:20:37
5746
原创 vue3 | table选择组件封装，含单选、多选、跨页选择功能(vue3+element)
单选时通过样式类 “hidden-checkbox-all” 隐藏checkbox全选框。
2023-04-27 14:24:52
2517
原创 vue引入图片url变量
1.引入方式普通引入<template> // 普通引入 <img src = "../assets/images/01.jpg"> // webpack编译处理后: <img src = "/img/01.f0afc36d.jpg"><template>变量引入<template> ...
2020-04-26 21:05:00
6201
1
原创 hover动画的元素关系使用场景
CSS hover 在网页设计中是极为常用的一个 CSS 效果，那么如何通过#a元素的hover实现#b元素的hover样式控制呢？hover基本用法：#a:hover{ color: red;}情景一：两个是兄弟元素#a:hover+#b{ color: red;}情景二：两个是父子元素#a:hover #b{ color: red;}情景三：...
2020-04-26 21:02:38
326
原创 vue-cli3打包项目使用CDN的方式引入框架文件
1.在vue.config.js中使用chainWebpack添加externals配置module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // #region 忽略生成环境打包的文件 var...
2020-02-27 15:30:32
3028
原创 element表格在前端对全部数据进行排序
1.对全部数据进行排序，需要对el-table绑定sort-change监听<el-table :data='tableData' @sort-change='sort_change'>sort-change绑定方法具有参数：column，这是一个对象：column: { prop: 'xxxx', // el-table-column中的prop order: 'x...
2019-11-24 19:02:22
4181
3
原创 表格分页展示+搜索功能
1.html部分使用了element的组件<template> <div> <!-- 表格 --> <el-table :data="search(input_box)"></el-table> <!-- 分页栏 --> <el-pagination :total="pa...
2019-11-24 19:01:48
638
原创 使用Promise实现异步执行并解决回调地狱
1.基础要点Promise 对象是一个 构造函数，可以 new Promise() 得到一个 Promise 的实例。Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作。Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）。在 Promise 构造函数的...
2019-11-24 19:01:15
507
原创 H5全屏滚动活动页插件
1.fullpage 全屏插件全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理，比较麻烦。fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。github 官网 https://gi...
2019-11-24 19:00:40
1400
原创 解决ios端需双击的问题 以及 点击事件延迟触发问题
解决ios端需双击的问题以及点击屏幕大约延迟300毫秒后才会触发点击事件(应立即响应用户的点击事件)方法1：使用fastclick.js安装：$ npm install fastclick -S引入：import FastClick from 'fastclick';添加js代码：if ('addEventListener' in document) { docume...
2019-11-05 17:28:58
1381
原创 vue导航跳转报错
报错信息：Navigating to current location (“/…”) is not allowed （不允许导航到当前位置"/…"）在控制台中看到的错误是新的promise api的一部分:在此之前，如果没有回调提供给router.push，错误只会发送给全局路由器错误处理程序。现在，因为推送和替换都会返回一个承诺，如果没有捕获到导航失败(任何取消导航的操作，如next(fal...
2019-11-05 17:27:11
1265
原创 vue项目中使用 echarts 统计图
1.安装echarts依赖$ npm install echarts -s2.main.js全局引入// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.创建一个存放图表的容器<div id="chartbox"></div>4.绘制图表export de...
2019-11-05 15:36:16
2893
1
原创 时间格式转换方法
将 毫秒级 转换为 年月份1.函数转换function dateFormat(timestamp) { var date = new Date(timestamp ); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth()+1 < 10...
2019-11-05 15:35:10
315
原创 利用 scoped 穿透修改子组件或第三方ui组件样式
父组件添加scoped后，将无法修改子组件或第三方ui组件(element、iview)样式，通过v-html创建的dom内容也不受作用域内的样式影响，可用scoped穿透解决：<style scoped>/* style的样式穿透使用 >>> */外层 >>> 第三方组件 { 样式}.a >>> .b{ ...
2019-11-05 15:32:57
223
原创 利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置
<keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，它自身不会渲染一个 DOM 元素。使用 <keep-alive> 组件后即可使用 activa...
2019-11-04 12:38:24
2073
原创 前端数据分页展示方法原理
对数据数组使用 slice() 方法v-for="item in data.slice((currpage - 1) * pagesize, currpage * pagesize)"data(){ return { currpage: 1, //当前页码 pagesize: 10, //每页展示数目 }}切换页面时动态传值更改 currpage 即可...
2019-11-04 12:37:52
549
原创 vue-preview 缩略图片查看器插件
功能：手机端点击图片查看大图使用方法：1.装包：$ cnpm i vue-preview -s2.main.js引入import VuePreview from 'vue-preview'Vue.use(VuePreview)3.组件 <div class="thumbs"> <vue-preview :slides="数组数据list...
2019-11-04 12:36:37
239
原创 原生js获取、设置、删除属性
1.获取属性element.getAttribute('属性名')； //返回指定元素属性名的属性值 element.getAttributeNode('属性名')； //返回指定元素的属性名和属性值 element.attributes['属性名']；//返回指定元素的属性名和属性值 2.设置属性element.setAttribute(name,value); //添加指定的属性，...
2019-11-04 12:36:06
321
原创 axios的基本使用
1.安装$ npm install axios -s2.main.js引入import axios from 'axios' //axios不需要Vue.use()引入Vue.prototype.$axios = axios //可以通过this.$axios在组件中调用axios，而不需在每个组件中单独import引入axios包 3.发送请求GET请求// 为给定 ...
2019-11-04 12:35:33
212
原创 常用杂碎知识点
1.vs code 常用快捷键中途换行：Ctrl+Enter换到上一行开始：Ctrl+Shift+Enter移动行：alt + up/show选中当前行：Ctrl + L复制当前行：shift + alt +up/down删除当前行：shirt + ctrl + k剪切当前行：Ctrl + X查找：Ctrl + F替换：Ctrl + H同时选中相同字符批量更改：Ctrl + D...
2019-11-04 12:33:29
319
原创 vue控制滚动条位置
应用场景：滚动条复原、页面加载完成后滚动到指定位置。1.在router.js中添加如下代码export default new Router({ routes:[], scrollBehavior (to, from, savedPosition) { if(savedPosition){ return savedPositi...
2019-11-04 12:32:39
7372
原创 弹性布局flex
弹性布局，又称“Flex布局”，可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。父容器属性#fu-box{ displa...
2019-11-04 12:31:40
161
原创 vue-cli脚手架的基本命令和使用
Vue-CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，并带有合理的默认配置，用于快速启动新项目的开发。vue-cli 3.0版本全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：npm uninstall vue-cli -g1.安装$ npm install @vue/cli -g2.创建项目$ vue creat...
2019-11-04 12:31:07
1259
原创 JavaScript的变量提升
变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。如何理解变量提升？我们习惯将 var a = 3 看做一条声明，其实这是两条语句的简写：var a 和 a ...
2019-11-04 12:30:21
138
原创 webpack的安装和基本命令
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。1.安装全局安装：$ npm i webpack -g （如需指定版本：$ npm i webpack...
2019-11-04 12:29:09
213
原创 git的相关操作和使用
Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或大或小的项目。1.公钥状态查询：$ git status创建公钥：$ ssh-keygen -t rsa -C "邮箱"查询公钥：$ cat /home/admin/.ssh/id_rsa.pub2.配置$ git config --global 参数`有了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置...
2019-11-04 12:28:26
144
原创 h5本地存储方式localStorage和sessionStorage
现代浏览器普遍开始支持H5本地存储：localStorage、sessionStorage，用来代替cookie的一部分存储功能，它比cookie存储量更大，更实用！localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）localStorage和sessionStorage都具有相同的操作方法，例...
2019-11-04 12:27:30
223
原创 原生js获取css属性值
获取css属性值的方法1.obj.style：使用方法：obj.style.left这个方法js只能获取在html标签中的写在style属性中的值（style="…"）即行内样式，而无法获取定义在样式表里面的属性。2.window.getComputedStyle()：使用方法：window.getComputedStyle(obj,false).leftIE中使用的是obj.cu...
2019-11-03 23:59:20
1060
原创 Web Worker后台运行js代码
web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。使用方法1.body： <div id="numdiv"></div> <button id="start">开始计数</button> <button id="stop" >停止计数</button>2.js代码：&...
2019-11-03 23:41:30
728
原创 Hexo博客框架的搭建与使用
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。博客搭建1.环境准备：安装node.js和git2.安装hexo框架：$ npm i hexo-cli -g3.项目初始化：$ hexo init4.本地端口浏览：（hexo s）$ hexo server5.生成静态文件：（...
2019-11-03 23:40:07
251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人