- 博客(38)
- 收藏
- 关注
RSS订阅原创 growingio平台埋点（web端）
一、集成SDK请将以下的页面代码放置到需要分析的页面中的 和 标签之间，即可完成最新 Web JS SDK 页面代码的添加。请注意使用 您创建Web应用所在项目的项目ID 替换代码中的 your projectId 、your dataSourceId、your host。<!-- GrowingIO Analytics code version 2.1 --><!-- Copyright 2015-2021 GrowingIO, Inc. More info availa
2022-03-03 19:43:56
2461
1
转载 Vue3实现数据响应式
3）toRefs():toRefs函数可以定义转换响应式中所有属性为 响应式数据，通常用于结构reactive定义的对象，转换响应式对象中所有属性（也可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的。在vue3中setup默认返回的普通数据不是响应的，如果希望数据是响应式的，有4种方式，今天我就来和大家介绍一下这4种方式。toRef()是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。ref主要是用于定义基本数据类型的数据并保证响应式能力，也可以用于对象或数据。
2021-12-16 15:39:02
2024
原创 vue3.0 封装通用分页组件
目的：封装一个统一的分页组件。分页的本质：分批次查询数据（基于页码page和每页条数pagesize）,后端接收到分页参数后，会基于这些参数查询数据库，然后基于数据库进行分页：基于SQL语句（select * from user limit n, m）效果图1.封装组件src/components/pagination.vue<!-- 此组件需全局注册使用 --><template> <div class="pagination"> <.
2021-09-24 15:30:23
489
原创 vue3.0 message消息提示组件
目的：用于主动操作后的反馈提示element-ui 组件参考组件功能分析：固定顶部显示，有三种类型：成功，错误，警告。显示消息提示时需要动画从上滑入且淡出。组件使用的方式不够便利，封装成工具函数方式。1.封装组件src/components/mesage.vue<template> <!-- vue动画：从上滑入且淡出 --> <Transition name="down"> <!-- style 绑定的是样式 -->
2021-09-23 20:25:56
7629
1
原创 vue3.0封装实现面包屑组件
目的： 封装一个高复用的面包屑组件，适用于多级场景。认识 render 选项和 h 函数。参考element-ui的面包屑组件：1.准备xtx-bread.vue组件// 注：此组件需全局注册使用// 基于jsx方式实现<script>// import { h } from 'vue'export default { name: 'XtxBread', render () { // 用法 // 1. template 标签去除，单文件组件 //
2021-09-18 20:03:02
439
原创 vue3.0实现复选框组件的封装
大致步骤：实现组件本身的选中与不选中效果实现组件的v-model指令改造成 @vueuse/core 的函数写法<!-- 组件基本样式 --><template> <div class="xtx-checkbox" @click="changeChecked()"> <i v-if="checked" class="iconfont icon-checked"></i> <i v-else class="ic
2021-09-18 16:11:50
475
原创 vue3.0实现图片懒加载
目的： 当图片进入可视区域内去加载图片，且处理加载失败（默认图片），封装成指令。1.了解IntersectionObserver（）参考链接：IntersectionObserver// 创建观察对象实例// const observer = new IntersectionObserver(callback[, options])const observer = new IntersectionObserver(([{isIntersecting}], observer) => {
2021-09-16 19:52:21
639
原创 vue3.0实现ajax请求懒加载
目的：实现当组件/DOM元素进入浏览器可视区域再发送Ajax请求加载数据。我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。1.安装@vueuse/corenpm i @vueuse/[email protected]// 安装依赖包的时候要注意版本，有时最新版本会与项目之间有冲突2.理解 useIntersectionObserver 的使用，各个参数的含义// const { st
2021-09-16 09:10:55
1002
转载 js防抖和节流的实现
这两种函数算是应用场景比较广泛的函数了，那么如何实现它呢？什么是防抖？什么是节流？举例来说，比如要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。实现这两种方法的核心其实都是setTimeout方法。1、函数防抖(debounce)实现方式：每次触
2021-09-15 17:24:56
1318
转载 JavaScript手动实现call()方法
思路1. 给目标对象创建一个属性，将要调用的方法绑定到这个属性上2.通过arguments取出除第一位之外的所有参数放到一个数组里，然后通过展开运算符给要执行的函数或方法传参3.直接运行刚刚创建的属性4.删除这个属性5.这样就间接绑定了this的指向，并实现了call原文Function.prototype.mycall = function(obj){ // 给Function的原型对象上加上mycall方法 obj = new Object(obj) || window || gl.
2021-09-13 21:07:47
483
原创 Vue3中computed函数的基础使用
computed函数，是用来定义计算属性的，计算属性不能修改1.基本使用–只读<template> <div> <div>计算属性</div> <hr> <div>今年：{{age}}岁了</div> <div>明年：{{nextAge}}岁了</div> </div></template><script>// 按
2021-09-12 20:47:29
1170
原创 Vue3中vuex的基本使用
/ useStore()方法创建store对象，相当于src/store/index.js中的store实例对象。拆分后代码如下（src/store/modules/global.js）拆分后代码如下（src/store/modules/user.js）// Vue3中store类似于Vue2中this.$store。// Vue3中store类似于Vue2中this.$store。// 触发mutations，用于同步修改state的信息。拆分后代码如下（src/store/index.js）
2021-09-12 18:39:22
12675
4
原创 axios在vue项目中的基础应用封装
基于axios封装一个请求工具，在调用接口时使用。思路：创建axios实例封装通用的请求方法配置相关的参数，统一处理请求参数请求拦截器：处理请求头token响应拦截器：1、处理后端返回的数据；2、处理token的失效问题注意：对象的键可以是动态的变量（ES6的规则）一、安装axiosnpm i axios yarn add axios二、新建 src/utils/request.js 模块代码如下// 通用接口调用模块import axios from 'axios'
2021-09-12 16:21:32
98
原创 字符串中插入千位分隔符
我们知道，假设有1000000人民币（或其他货币），普遍来说，使用分隔符将它进行分割 。结果变成这样 1,000,000。同理，有1234908653人民币，使用分隔符进行分隔之后1,234,908,653在字符串中插入千位分割符，它的结果和对人民币进行分隔符分割的结果是一样的，思路也一致。function thousandSign(number) { let str = String(number) let remainder = str.length % 3 // 计算字符串除3的余数
2021-09-09 19:17:43
1373
原创 给定一个URL地址，将?后的信息转换为json格式
假定有一个URL file:///android_asset/hrfile/html/review/reveiw_cc.html?id=1111&sessionid=ssssssssssssssss&domain=http://10.0.100.110:8080/jeesite/a/需要将?后面带参数的东西获取到，并转换成json格式，可以采用以下的办法:let href = 'file:///android_asset/hrfile/html/review/reveiw_cc.ht
2021-09-09 18:41:22
366
原创 Vue项目中的多语言切换支持
多语言支持vue项目中的多语言支持使用的是vue-i18n 参考文档目标1.实现elementUI中英文切换功能，感受中文切换的效果2.自定义内容多语言配置一、安装依赖包npm i [email protected]二、 ElementUI多语言配置Element：参考文档新建src/lang/index.js示例代码// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插
2021-09-01 21:00:05
1544
原创 RBAC(Role-Based Access control)权限模型--基于角色的权限分配解决方案
一、背景为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。其权限模式如下:三个关键点:用户： 就是使用系统的人（员工）权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）角色：不同的权限点的集合如何给用户添加功能给用户分配角色，给角色分配权限点系统中的权限点可以随意添加吗？不能。必须是程序员已经开发出来的功能！！
2021-08-31 18:39:21
1367
原创 Vue 项目excel导出功能
一、思路前端主导（工作大量在前端）二、新建文件夹及文件新建src/vendor/export2Excel.js示例代码：示例地址/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges
2021-08-28 11:15:20
602
原创 Vue 项目excel导入功能
Vue项目中excel导入功能实现一、安装必要的插件npm install xlsx -S 二、引入UploadExcel组件并注册为全局src/components/UploadExcel/index.vue组件<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="hand
2021-08-25 19:14:09
1137
转载 elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。如图示：图1-正常状态下的按钮图2-鼠标悬浮或点击后的按钮我们所期望的是，在按钮点击后，恢复到正常状态（即图1）。因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。搜索到的
2021-08-20 21:53:16
5122
1
原创 JS中变量的存储方式 -- 栈和堆
栈空间和堆空间JS变量都存储在内存中，而内存给变量开辟了两块存储空间，分别为栈（stack）空间和堆（heap）空间栈空间：存放JS基本数据类型，通过按值访问，可以直接操作保存在变量中的实际值。堆空间：存放JS引用数据类型，通过对象的引用访问，不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。在了解栈和堆之前，我们先来了解一下js中的基本数据类型和引用数据类型js中的数据类型分成两大类：基本数据类型和引用数据类型。基本数据类型指的是简单的数据段，引用数据类型指
2021-08-18 17:23:01
2541
1
原创 Vue3/Vue2中全局组件的注册使用
Vue中全局组件的注册我们经常会在利用Vue开发的项目中，多次重复使用某一段代码结构，这就需要我们把它封装成公共组件，注册在全局进行多次复用。Vue 官方提供的常规方法在Vue项目中src/components路径下补充创建 文件夹名（xxx）/ index.vue，在此vue组件中写入自己需要服用多次的代码结构在src/main.js文件中import Vue from 'vue'// 引入封装的复用的组件 注意xxx组件名应采用大驼峰命名法，例如：PageToolimport xxx
2021-08-17 20:18:48
5645
1
原创 Element-UI框架的使用（四）-- Tree树形控件
Tree 树形控件Element-UI: Tree 树形控件用清晰的层级结构展示信息，可展开或折叠。一、 基本使用代码结构<!-- data 要展示的数据(Array) --><!-- props 配置选项(Object) --><!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 --><el-tree :data="data" :props
2021-08-16 19:56:19
2212
原创 Element-UI框架的使用（三）-- Form 表单
Form 表单由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据一、基本使用在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"&
2021-08-14 10:46:33
6606
原创 Vue项目中svg-icon组件的基本使用
一、基本了解首先，我们先了解一下什么是SVG格式 百度百科：SVG格式SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码
2021-08-11 20:08:06
6310
4
转载 js数组常用方法
1.join( ) （数组转字符串）数组转字符串，方法只接收一个参数：即默认为逗号分隔符（）。 let arr = [1,2,3,4]; console.log(arr.join()); //1,2,3,4 console.log(arr.join(":")); //1:2:3:4 console.log(arr); //[1,2,3,4],原数组不变join()实现重复字符串 function repeatStr(str, n) { return new Array(n + 1).j
2021-08-08 20:36:58
220
原创 VUE跨域问题解决--代理服务器（开发环境）
一、跨域问题（一） 跨域请求是非常常见的现象，那么是由什么原因造成的呢，例如，在A地址（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，如果A地址和B地址在： 协议 域名 端口 有一部分不相同，则说明该请求是跨域的。跨域请求的本质是违背了浏览器的同源策略。附：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
2021-08-07 20:42:07
620
原创 Element-UI框架的使用（二）-- pagination-翻页组件
参考官方文档基本使用<!-- layout中的关键字有自己的含义 --><!-- total用来设置数据的总条数 --><!<el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
2021-08-07 17:41:59
1149
原创 数组转树形结构（嵌套结构）
现有如下数组结构const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马', pid: '01', job: '技术leader' }, { id: '05',
2021-08-05 20:33:21
213
原创 JS中数组与对象的互相转换
一、数组转对象// 数组const arr = [ { label: '男', value: 0 }, { label: '女', value: 1 }]转成如下格式// 预期对象 obj ===> {0: '男', 1:'女'}代码实现function f(arr) {// 数组的reduce方法,使数组的obj初始值为{}，将数组中每一个对象所需的值，// 分别作为对象中的键与值 return arr.reduce((obj, item) => {
2021-08-05 17:55:57
15805
原创 Element-UI框架的使用（一）
一.基于vue-cli脚手架创建前端项目（PC端）（一）创建项目// 全局配置vue-clinpm i -g @vue/cli// 创建项目vue create element-demo（二）运行项目cd element-demo // 进入项目目录npm run serve // 运行命令(3) vs code 编辑器打开项目文件夹，进入代码编辑环境二.将Element-UI添加到项目中参考官方文档 安装Element-UInpm i element-ui -S // 安装
2021-08-04 21:01:35
573
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人