- 博客(30)
- 收藏
- 关注
RSS订阅原创 微前端（qiankun）项目开发及部署配置
例：部署在10.0.xxx.xxx环境下，即 xxx.xx.com，项目包分别在 /home/app/micro_base/ 和 /home/app/micro_base/app_child/在 vue.config.js 文件的 devServer 中加上。目录： /usr/local/nginx/conf/vhosts/在nginx配置文件 xxx.conf文件中添加如下配置。接着在入口文件 main.js 中引入并调用即可。然后在 mian.js 文件最上方引入。devServer中加上。
2023-11-01 14:00:03
1094
原创 分屏拖动组件(PhScreenDrag)
技术栈：vue2一、核心功能支持拖动调节左右两侧盒子宽度二、布局设计采用 左-中-右 三列布局设计左：左侧盒子显示内容中：拖动竖线（鼠标悬浮时显示）右：右侧盒子显示内容三、组件参数属性 Attributes属性名说明类型默认值width宽度，单位仅支持 px 、vwstring——leftBoxWidth左侧盒子默认宽度，单位仅支持 px 、vwstring——max最大阈值，即单个盒子最大宽度占比，最大值 1number /
2023-04-23 16:56:54
373
原创 VUE2,基于 el-tree 组件基础上封装的 省市区/县 选择器
vue2,在 el-tree 组件基础上封装的 省市区/县 选择组件。
2022-09-21 10:47:52
2321
9
原创 实现复制功能
template <div> <span style="margin-right: 15px">点击复制一下</span> <SwitcherOutlined @click="handleCopy('点击复制一下')" style="cursor: pointer" /> </div> <input type="text" style="height: 0; overflow: hidden" id="copy" v
2021-08-17 11:18:57
148
原创 一个做展开/收起动作（加过渡效果）的组件（vue3+ts+antd的图标）
提示：用哪个组件库就把icon换成哪家的图标就行了效果图expand组件<template> <div class="expand" :style="'width:' + width + 'px'"> <div class="expand-header"> <div class="expand-header-title">{{ title }}</div> <!-- ant-Design 的图标
2021-08-13 14:49:56
1052
原创 js限制输入框输入只能输入8个字或16个字母数字（1个汉字等于2个字母/数字）
首先输入框限制只能输入字母、数字、汉字 （我这里用了iview的input组件）template<Input v-model="changeValue" class="changeValue" placeholder=" 请输入昵称" @on-keyup="changeValue = changeValue.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')" />scriptdata(){ return{ changeValue:'' }}
2021-06-28 17:51:03
1792
原创 vue 实现div列表（宽高固定）上面删，下面加，加过渡效果,竖向文字跑马灯，横向文字跑马灯
效果图<template> <div class="container"> <div class="module"> <div class="listModule" style="width:820px" ref="slider"> <div :class="item.num1 % 2 == 0 ? 'tableList1':'tableList2'" v-for="(item,index) in tableL
2021-06-23 14:46:02
494
原创 固定宽高的div，内部有竖向滚动条，滚动到底部加载更多数据(分页加载)
懒，css,js,html主要代码都在这上面了<div class="pageNav" ref="pageNav" @scroll="orderScroll"></div> orderScroll(e){ let c = this.$refs.pageNav.scrollTop let h = this.$refs.pageNav.scrollHeight if(this.finshed == false){ if(h - c == 200){
2021-06-08 20:59:18
342
原创 横向滚动，滚动到指定位置(for循环渲染的数据)
效果图template<div class="selectTime" id="selectTime"> <div class="selectItem" :id="'selectItem' + index" v-for="(item,index) in momentList" :key="index"> <div class="time">{{ item.timeStartS }}</div> <!-- 一
2021-05-31 09:58:19
698
原创 vue 将一个多维数组转成一维数组
数据data(){ return{ newList:[] list:[ { id:1, name:一级， children:[ { id:2, name:二级， children:[ { id:3, name:三级， children:[] } ] } ] } ] }}methods:{ asyn
2021-04-26 11:17:50
1365
原创 vue 树结构类型数组深度遍历查询(模糊查询),一般用于 输入框和tree树形控件结合时使用
<input type="text" v-model="inputSearch" @input="search" />测试数据data(){ return{ inputSearch:'',//与输入框双向绑定的搜索参数 showList:[],//展示的数据 allList:[ { id:1,parentId:0,name:'根目录' }, { id:2,parentId:1,name:'目录1-1' }, { id:3,parentId:2,name:'目
2021-04-25 16:25:44
1807
原创 js按照 某种关联(如id和parentId) 将一维数组分割成多维数组,且知道当前条数据在第几维（判断当前深度）
原数组（随便拿点测试数据）data(){ return{ dataList:[ { id:1,parentId:0,name:'根目录' }, { id:2,parentId:1,name:'目录1-1' }, { id:3,parentId:2,name:'目录2-1' }, { id:4,parentId:3,name:'目录3-1' }, { id:5,parentId:1,name:'目录1-2' }, ] }}切分时因为要一个children来承载
2021-04-25 11:34:18
1007
原创 vue 导出文件(下载文件)，分需要token校验和不需要token校验两种情况
下载文件需要通过 标签实现header 中需携带 token 校验// 导出exportFile(){ var xhr = new XMLHttpRequest(); var url = this.baseUrl + '/cloudnotes/partyMembers/export?orgId=' + this.userInfo.orgId xhr.open('get', url, true); xhr.responseType = "blob"; // 返回
2021-04-21 09:27:03
1376
原创 vue写一个通讯录页面
要求：通讯录用户以名字首字母开头进行分类，点击侧边栏首字母滚动到指定首字母开头的用户上效果图首先写侧边导航栏部分template 部分<div class="navList"> <div class="navItem" v-for="(item,index) in navList" :key="index" @click="onClickTo(item)">{{item}}</div></div>data 部分navList:['A'
2021-03-31 14:01:48
1453
原创 封装el-upload，实现可上传视频、播放视频、编辑视频、移除视频，上传进度条展示
效果图完整子组件代码<template> <div> <el-upload :action="action" list-type="picture-card" :on-success="handleSuccess" :file-list="fileLists" :on-progress="handleProgress"
2021-02-02 15:35:53
2548
5
原创 封装 el-upload，实现可上传图片、预览图片、编辑图片、删除图片功能
父组件template<el-card> <div>上传图片子组件</div> <el-form label-width="100px"> <el-form-item label="图片："> <uploadImg :limit="5" :fileList="fileList" @submitImg="getImgLis
2021-02-01 17:10:48
1782
原创 vue项目中，将后台返回的时间戳转换为日期格式
template<div>{{switchTime(scope.row.publish_time)}}</div>js方法// 将时间戳转换为时间日期格式 switchTime(Stamp){ let timeStamp = Number(Stamp) var time = new Date(timeStamp); var y = time.getFullYear();
2021-02-01 09:28:15
778
原创 vue 绕圆形旋转
效果图tenplate<div class="module_box"> <div class="box"> <i><span></span></i> </div> <div class="box2"> <i><span></span&
2021-01-11 11:19:12
2084
2
原创 vue 实现循环div拖拽变换位置
效果图(两张图看效果吧，没录屏)首先安装插件 vue-class-component 和 vue-property-decoratornpm install --save vue-class-componentnpm install --save vue-property-decorator完整代码 （可直接复制运行看效果）<template> <div class="test_wrapper" @dragover="dragover($event)">
2021-01-06 11:51:49
575
2
原创 vue封装axios
新建 request.js 文件import axios from 'axios'//让ajax携带cookieaxios.defaults.withCredentials = true;export function request (config) { // 1.创建axios的实例 const instance = axios.create({ headers: { 'Content-Type': 'application/json,charset=utf-8',
2020-12-24 15:48:21
79
原创 vue实现下拉框 模糊搜索+不区分大小写 (用到了el-select)
效果图<el-form-item label="国家" prop="country"> <el-select v-model="dataForm.country" style="width:300px" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMetho
2020-12-23 15:13:51
5551
原创 使用autoprefixer做css兼容
安装 Autoprefixer （指定2.2.0版本的，3.0版本以上在使用时无效，不太会用，点击 卸载 那里可以切换版本安装）在 settings.json 中加上下面的浏览器配置"autoprefixer.browsers": [ "> 1%", "last 2 versions", "not ie <= 8", "ios >= 8", "android >= 4.0",
2020-12-23 10:57:00
1369
1
原创 vue 批量导入 + 过滤excel文件（用了el-upload）
完整代码（这做成了一个子组件）<template> <div> <el-upload ref="upload" action="/" :on-change="handleChange" :onexceed="handleExceed" :show-file-list="false" :auto-upload="false"> <el-button type="success" class="excel-btn">Excel
2020-12-18 11:59:02
576
原创 el-table有树结构以及多选，实现全选/取消全选时同时也选中/取消选中子列表
效果图完整代码<template> <div> <el-button size="mini" type="primary" @click="idShow = true">展示选中的列表id</el-button> <el-dialog :visible.sync="idShow" width="30%"> <div>{{idList}}</div>
2020-12-17 14:33:28
2196
原创 element日期时间选择器+自定义外部选择时间范围快捷键
效果图template代码<template> <div> <el-form class="dataForm" label-width="100px"> <el-form-item label="同步时间："> <el-date-picker v-model="date" type="dat
2020-12-16 14:22:18
708
1
原创 el-input+el-tree+搜索
效果图代码<template> <div > <div v-clickoutside="closeTree"> <el-input v-model="inputValue" @focus="projectOrgFun" @keyup.enter="search"> <el-button slot="append" icon="el-icon-search" @click
2020-12-12 15:02:11
2202
原创 el-input+el-tree组合可选父级或子级目录
效果图完整代码<template> <div> <div v-clickoutside="closeTree"> <div @click="inputFocus"><el-input v-model="inputValue" :style="'width:' + width + 'px'"></el-input></div> <div cla
2020-12-12 14:42:28
490
原创 vue 纯前端登录验证码
效果图父组件中随机生成一串字符转，数字+字母mounted(){ this.createCode()},methods:{ createCode() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 4; i++ ) text += possible.c
2020-12-12 14:15:19
492
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人