- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 闲来无聊，从0搭建vue3.0cli步骤及问题经验分享。
六、关键点安装node-sass出现报错太多，本人每次测试新建项目都报错，根据经验最简单的来说，需要node版本和node-sass版本对应，这里的对应是指node’想安装node-sass成功的话需要这么干，并不代表已有的node-sass无法运行。不过在node-sass4.14.1安装成功的情况下，node切换为18.6.0依旧可以运行项目，只不过没法用node18.6.0去安装node-sass4.14.1而已，实测运行是没问题的。注意点，版本对照也只是笼统的，安装成功还是要针对到某一个版本。...
2022-07-21 00:44:54
272
原创 axios二次封装成promise,并且区分各种不同参数格式，json,键值对，文件格式。接受文件流等设置。配合跨越代理下开发和生产环境不同url配置，并有promise链式调用等参考。
实际项目请求封装。
2022-03-12 08:15:23
1435
1
原创 js组合继承
//写一个自己的类，返回去重后的对象数组和最大的id的值。(方法自己选择，推荐学习下es6的class，extends方法)，这里我们就用组合继承的方式来写//纯属个人喜欢这种组合方式(不过复制了两次父类方法，略显重复，不打紧)，当然用寄生组合自然更好一点（避免复制两次），似乎没必要let _arr = [{ id: 1 },{ id: 2 },{ id: 3 },{ id: 1 },{ id: 2 },{ id: 4 },]; //需要去重的对象数组//定义父类function pa
2022-03-02 09:30:57
194
原创 自写一个类似el-message的消息提示全局组件
首先说明一下这个组件一共三大部分组成第一部分：组件部分。第二部分：应用页面部分。第三部分：main.js引入use ()注册部分组件部分我分为了三部分页面部分，dialog.vue样式部分，dialog.scss注册js部分，dialog.js直接看代码：首先看dialog.vue<template> <div v-show="dialog.visiable ? dialog.visiable : false" class="dialog_conta
2021-03-04 20:21:51
534
2
原创 echarts图表渐变色 、及X轴滚动条样式处理
由于项目中运用echarts可能较多。因此对同一种类型的echarts进行一个封装，页面调用根据传入不同的状态生成不同样式，例如横向柱状图和纵向柱状图。话不多说上代码父页面checkOptionData:function(){ let xDate=["1","2","3",'4','5','6','7']; let y1=[100,600,200,100,100,100,100]; let y2=[200,100,300,100,100,10
2020-12-09 20:43:52
1998
3
原创 vue+element 封装 el-table和el-pagation
通常项目里很多组件是可以公用的，这里使用el-table和el-pagation做示例进行了封装。分三个模块1.el-pagation组件。2.el-table组件。3.使用组件的页面直接上代码分页器的<template> <div class="block" style="background:white;position:absolute;bottom:20px;right:20px;"> <el-pagination align='ri
2020-08-25 21:07:37
585
原创 原生js实现飞机大战小游戏（初版），后面会更新改进
项目中各种框架使用太多，最近想复习一下基础的原生js，借用以前写的案例回顾一些知识点。框架用起来很顺手，但是个人最求往后期深度发展，这些基本的js知识决不能丢掉。后面会出更多的有关js的案例，顺便自己也复习回顾一些东西。本次案例是一个飞机大战小游戏。（以前写的东西不是很成熟，最近有时间，我会改进一下写法）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></
2020-08-23 21:11:11
314
原创 vue结合sass进行主题切换（完整简单示例展示）
包含两个scss文件，一个存主题样式，一个控制主题切换测试页面<template> <div> <p>测试 <button @click="toggleTheme(1)">蓝色</button> <button @click="toggleTheme(0)">红色</button> </p> </div></template>&
2020-07-09 18:10:04
847
1
原创 饿了么分页器封装完整代码示例（单页面多次调用同一个组件：分页器）
父级组件页面<template> <div class="jichu_table" style="width:100%;height:calc(100% - 36px)"> <template> <!-- 表格一 --> <el-table border :data="tableDataone" element-loading-spinner="el-icon-loading"
2020-07-08 18:35:31
1164
原创 el-table cell换行小技巧
<el-table-column align="center" label="描述" min-width="15%"> <template slot-scope="scope"> <span v-html="scope.row.message" size="small"></span> </template> </el-table-column>
2020-07-08 15:42:00
2949
原创 vue使用中的一些小窍门
1.设置src为@，在webpack.base.conf.js中修改resolve中的aliasresolve: { extensions: ['.js', '.vue', '.json','.scss'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },2.设置打包图片限制大小，在webpack.base.conf.js中修改resolve中的module中的lim
2020-06-11 10:23:26
139
原创 自定义指令（这里使用element ui 弹窗自定义拖动作示例）
直接上代码命名一个自定义指令js文件，这里用element ui的弹窗拖动作为例子命名为directives.jsimport Vue from 'vue'; // directives.js// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', {//dialogDrag就是指令名称，后续使用加入v-dialogDrag使用 bind(el, binding, vnode, oldVnode) { // 获取拖拽内容头部 const
2020-06-08 11:07:06
641
原创 vue使用install函数把组件做成插件方便全局调用(封装公用组件)
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template> <script> export default { }</script> <style scoped
2020-06-08 10:42:40
1349
2
原创 reduce方法数组去重，对象数组根据多个不同字段去重（单个多个通用封装写法，识货的拿走）
例：let data = [ { id: 201801, name: '张三', age: 15, }, { id: 201804, name: 'John', age: 18, }, { id: 201802, name: '李四', age: 18, }, { id: 201801, name: '张三', age: 15, }, { id: 201805...
2020-04-30 10:47:16
528
原创 树结构筛选，配合查询下拉框（下拉框数据全部来源于树结构）
:trigger-on-focus="false"设置此属性可设置在输入查询条件后再执行下拉条件。<el-autocomplete clearable :trigger-on-focus="false" v-model="filterText" :fetch-suggestions="querySearchAsync" ...
2020-04-30 10:05:21
487
原创 通过递归取出树结构所有对应数据
<el-tree v-show="true" class="filter-tree" :props="defaultProps" accordion node-key="LABEL" :default-expanded-keys="[mydata]" :data="treedata2" :inde...
2020-04-30 09:48:01
879
原创 el-table设置单元格合并功能
<el-table :row-key="getRowKeys" :data="YYFXTJtableData.slice((YYFXTJpagination.YYFXTJcurrentPage-1)*YYFXTJpagination.YYFXTJpageSize,YYFXTJpagination.YYFXTJcurrentPage*YYFXTJpaginati...
2020-04-16 09:37:48
480
原创 如何在axios拦截器中加入路由拦截，例如超时登录后进入login页面
router.js文件import Vue from ‘vue’import Router from ‘vue-router’import vm from ‘…/main’import { path } from ‘./path’Vue.use(Router)const routes = []path.forEach((item, i) => {routes.push({ p...
2020-03-29 18:13:00
732
1
原创 vue中使用rem
js文件rem.js!(function(n) {var e = n.document,t = e.documentElement,i = 1920,d = i / 100,o = ‘orientationchange’ in n ? ‘orientationchange’ : ‘resize’,a = function() {var n = t.clientWidth || 19...
2020-03-29 18:10:38
431
原创 vue项目运用websocket
需要浏览器支持 export default {name: “App”,data() {return {route: “”,msg:‘事中任务-全部’,user:‘管理员’,isusercome:false,show:false,};},beforeMount() {//取当前浏览器地址，用户刷新依旧进入此页面this.route = locat...
2020-03-29 18:04:19
433
原创 限制登录或提交按钮等，不能短时间内连续点击
data() {return {now:’’,};},if(!this.now){this.now=new Date().getTime()}else{let time=new Date().getTime()if(time-this.now>3000){this.now=time}else{return false}}。。。业务代码...
2020-03-29 18:01:06
520
原创 正则限制输入框输入，只能输入0-100的正整数，输入其他字符全部清空
οninput=“if(value>100){value=100}else{value=value.replace(/[^\d]/g,’’)}if(value.indexOf(0)==0){value=0}”
2020-03-29 17:58:17
7084
3
原创 el-tree懒加载,并加入搜索功能（后台搜）
},computed: {},watch: {gettreeData(val) {}//设置输入框输入时自动过滤，无需点击搜索按钮// filterText(val) {// this.KaTeX parse error: Expected 'EOF', got '}' at position 31: …r(val); // }̲ ...
2020-03-25 10:54:42
5665
2
原创 postmessage跨域监听（微服务）
postmessage传送代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
2019-12-27 15:00:03
387
原创 vuex分模块后实时监听状态值变化
vuex实现同时监听两个值的变化，并且需要进行实时判断比较这两个变化的值 不多数直接上代码第一个页面进行设置这两个值methods: { ...mapActions('a',['setDkxoid','setdocumentid']) set(){ this.setdocumentid(123) this.setoid(456)}第一个页面设置的同时，另一...
2019-12-23 17:27:24
1358
原创 vue项目部署上线后，在地址栏直接输入路由路径，会先进入默认第一页，无法直接进入指定路径
百度找了一些解决方法，有修改nginx配置啥的，有路由修改为hash模式啥的，个人能力有限没能成功，最后大佬提供了一个思路，最后解决的这个难题，在其他系统应用完美运行，感谢大佬！！！通过location.hash方式先取出你输入的路径，是#之后的路径内容，进入到默认页面后继续定位到指定页面，虽然有点治标不治本的意思，但是解决了当前的难题。还真是不错下面为App.vue中的修改后的代码<...
2019-10-17 10:16:56
3728
1
原创 vue+vuex模块化后实现兄弟组件监听公共值变化。
详细点说，就是vue项目中有两个兄弟组件，它们公用一个值例如oid，该oid存放于vuex中。业务需求为：在组件一中通过事件修改vuex中的该oid，当该oid有变化时即触发组件二中的axios请求（该id作为参数）。我在项目中vuex是分了两个模块a和b。再多说一句哈哈，用了vuex，路由传参都可以被代替了，还算是比较好用的。先看vuex a模块中的代码，要实现该业务逻辑需要用到getters...
2019-09-19 14:56:41
1699
1
原创 jq制作插件，均匀分布日期的进度条插件制作（可以拖动，可以按需设置初始化位置，起始和截至时间，定时移动进度）
jq插件制作（进度条，可传普通参数或是回调函数都可以）先来一张图直观看一下效果吧通常jq的插件包含两个文件，一个是它的css文件，还有一个就是js文件了。通常有两种方式写插件.fn.extend和.fn.extend和.fn.extend和.extend具体区别就是调用方式不同我用的是.fn.extend为了避免运用插件时css标签命名的冲突，通常设置的名称都比较特殊或很长或。。。这里...
2019-08-13 17:41:38
618
3
原创 vue2.0项目运用axios拦截器加webpack跨域代理
vue+axios拦截器+webpcak跨域代理，axios自定义封装，加入拦截器便于统一管理例如页面loading效果。首先看一下我的项目目录结构，基础班还未完善，大佬勿嫌项目目录在request.js文件中引入axios，qs（qs为了处理请求格式问题，依照项目需要，此处不细说），我在自定义axios请求头中加入了token，值存放于vuex模块A中管理，所以也引入了store来获取这个...
2019-08-13 16:29:12
435
vue2,vue-cli3 PC版项目模板，公司项目如有需要可直接套用此模板，下载即可运行，无需另外下载。可先查看本人所传视频。
2022-09-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人