web
一只敲码的猫~
初级选手
展开
-
自己开发组件更新到npm网站上 通过npm install 安装 保姆级别教程
总体说来Vue组件封装发布到npm仓库整体难度不大,主要是理解Vue的install方法以及打包相关知识,其实最重要的还是如何封装一个适用范围广,扩展性高的公用组件。在创建xwButton.vue文件这个就是我们自己封装的组件后期通过npm install 就可以引入使用了。注册一个账号,注意记住用户名、密码和邮箱,发布的时候可能会用到。更新后npm仓库里版本也跟着更新了这时说明我我们代码库更新成功了。进入官网查看我们的代码库,在我们项目中执行。文件会多一个我们开发代码库。npm官网上我们发布的包。原创 2023-12-02 16:01:37 · 1373 阅读 · 0 评论 -
npm ERR! code ERESOLVE 解决办法
npm ERR! code ERESOLVE 解决办法原创 2022-12-01 10:38:19 · 435 阅读 · 0 评论 -
vue3 调用子组件的方法
vue3 调用子组件的方法原创 2022-11-25 09:20:48 · 8239 阅读 · 0 评论 -
vue 组件递归方法
vue 组件递归方法原创 2022-11-22 19:47:29 · 1993 阅读 · 0 评论 -
vue 动态表单优秀案例
不同的下拉框 就会显示不同的表单,表单配置是灵活匹配的,还有就是 一定要知道都有哪些类型的数据做到兼容起来。原创 2022-11-22 19:44:56 · 1879 阅读 · 0 评论 -
旋转的指示牌
【代码】旋转的指示牌。原创 2022-11-22 18:24:46 · 169 阅读 · 0 评论 -
css实现波浪纹
* 用 transform: scale 不改变元素位置的特性,来固定动画所在位置,也就不用去更改元素宽高来形成扩散效果*//* 开启3D透视, 视距 里目标点 150 像素(距离越小,透视效果越明显, 距离越大,越接近俯视) *//* 扩散其实就是从透明,中心点缩放为0,到不透明,缩放为100% 的过程 *//* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 *//* 给第二个圆 一个延时动画,错开动画的时间轴,实现多重扩散效果 */// 中间插入两个关键帧,用于更改动画的视觉效果,原创 2022-11-22 18:22:16 · 967 阅读 · 0 评论 -
经纬度转换度分秒
【代码】经纬度转换度分秒。原创 2022-10-26 11:27:05 · 663 阅读 · 0 评论 -
vue 对象数组去重
【代码】vue 对象数组去重。原创 2022-09-17 09:03:25 · 212 阅读 · 0 评论 -
强制英文、中文换行与不换行 强制英文换行
【代码】强制英文、中文换行与不换行 强制英文换行。原创 2022-09-14 15:38:10 · 278 阅读 · 0 评论 -
前端 vue 函数节流 Throttle 函数防抖 debounce input 输入框 @input 事件处理 input 输入框 @input条件查询 性能优化
/** * 函数节流 * @param fn * @param interval * @returns {Function} * @constructor */ Throttle(fn, t) { let last; let timer; let interval = t || 500; return function() { let args = arguments; let now = +new Date..原创 2021-12-02 13:31:33 · 611 阅读 · 0 评论 -
制作 设置 谷歌Google 火狐Firefox 跨域 允许跨域设置的方法
插件传送门。原创 2021-11-30 10:41:21 · 2214 阅读 · 0 评论 -
iview table序号按照总数排序
table 里的columns序号参数配置如下,Page 是当前页,PageSize 每页条数。{ title: '#', align: 'center', width: 60, render: (h, params) => { return h('span', {}, params.index + (this.Page - 1) * this.PageSize + 1) }}原创 2021-11-27 10:14:51 · 362 阅读 · 0 评论 -
vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白
PDF 下载方法一这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法 api(id).then(res => { let blob = new Blob([res]); let objectUrl = URL.createObjectURL(blob); let link = document.createElement('a'); link.download = '我的pdf文件.p.原创 2021-11-19 16:11:13 · 7195 阅读 · 2 评论 -
vue js 把阿拉伯数转成汉字
numTohan: (num) => {// num='25' 转成 二十五 const dicHan = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] const unit = ['', '十', '百'] num = parseInt(num) const getWan = (temp) => { const strArr = temp.toString().split('').reverse() let newNum原创 2021-11-16 16:51:24 · 529 阅读 · 0 评论 -
vue 保留2位小数
保留小数,fractionDigits值写2就是保留两位小数。 toFixed(number, fractionDigits) { //number 保留小数数 //fractionDigits 保留小数位数 var times = Math.pow(10, fractionDigits); var roundNum = Math.round(number * times) / times; return roundNum.toFixed(fractionDigits); },.原创 2021-11-01 13:10:47 · 1085 阅读 · 0 评论 -
vue获取地址栏里的地址转换为json对象
地址栏的地址:http://localhost:8080/#/main?id=001&name=lasi格式化后的地址是一个json对象{ id:'001', name:'lasi'}/** * 通过 URL 地址获取参数 */function getUrlParam() { let href = window.location.href if (href.indexOf('?') > -1) { let paramStr = href.s原创 2021-09-06 09:11:51 · 705 阅读 · 0 评论 -
vue自定义指令poptip的弹窗的代码
自定义指令源码import Vue from 'vue'Vue.directive('poptip', { inserted: function (el, binding, vnode) { //获取元素的纵坐标(相对于窗口) function getTop(e) { var offset = e.offsetTop - e.scrollTop; if (e.offsetParent != null) offse.原创 2021-09-02 09:35:55 · 954 阅读 · 0 评论 -
css 闪烁
dom<div class="show-scroll"> <Icon type="ios-arrow-dropdown" /></div>css.show-scroll { width: 2rem; height: 2rem; .ivu-icon { width: 2rem; height: 2rem; font-size: 2rem; -webkit-animation: twinkling 2.1s infinite ease-in-原创 2021-08-30 14:07:03 · 317 阅读 · 0 评论 -
正则表达式常用的案例
var regulars = { year: { regExp: /^(19|20)\d{2}$/, message: "只能为年份(四位,1900-2099)" }, number: { regExp: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/, message: "只能为数字" },原创 2021-08-24 15:36:20 · 391 阅读 · 0 评论 -
vue项目搭建:通过指令下载swagger接口文件并导入到项目里
这里是引用cli.js#!/usr/bin/env nodeconst path = require('path');const fs = require('fs');const chalk = require("chalk");const figlet = require("figlet");const { program } = require('commander');const swagger = require('./swagger.js');let config .原创 2021-08-23 19:29:20 · 440 阅读 · 0 评论 -
文件夹里面的文件遍历提取 vue的require.context()和files.keys()的使用
let viewModules = {};const files = require.context('./module', true, /view\.vue$/);files.keys().forEach(key => { viewModules['main-' + key.replace(/(\.\/|\/view\.vue)/g, '').replace(/\//g, '-')] = files(key).default});原创 2021-08-23 11:23:41 · 1188 阅读 · 0 评论 -
ES6 关于时间的使用和推算
var valueTime = this.getTime(new Date()); console.log("valueTime", valueTime); var date = new Date(valueTime.replace(/-/g, '/')); let time3 = Date.parse(date); console.log("time3", time3); let aa = this.getTime(new Date(time3 - (10 * ..原创 2021-08-20 16:28:55 · 933 阅读 · 0 评论 -
iview 表格多选 保留选中状态 切换分页勾选状态保留
问题描述:iview 表格 添加复选框多选的功能,由于数据过大需要分页处理。每次切换分页后,之前选中的数据被清空了。解决办法代码不详细介绍啦。。。 复制粘贴就能搞定。。。<template> <div> <div class="table-div"> <Table :columns="columns" :height="49 * REMFontSize" :data="tableList" @on-select-all="selectA.原创 2021-08-14 12:38:41 · 1425 阅读 · 2 评论 -
控制div跳转到指定的位置的解决方案总结
页面涉及到保密问题,我这里就不给大家发页面效果图啦。这个是为了解决定位的问题。我的需求是这样的,一个大的页面,左边是数据列,右边是卡片列表,一个卡片一个卡片的,由于卡片很多,咱们给卡片定制了一个大的容器,容器有固定的高和宽。超出容器的卡片被隐藏掉,并且给容器加上上下滚动条。咱们点击左侧列表。右侧卡片和左侧列表相关的,就要把右侧某一个卡片高亮处理并将移动到咱们显眼的位置。方法1:scrollTop 滚动到某位置 document.getElementById("wrap_div").scrollTo原创 2021-07-08 16:22:15 · 413 阅读 · 0 评论 -
Echarts跟随容器自适应大小
Echarts跟随容器自适应大小浏览器缩放,echarts图表大小可以随着窗口变化而改变。可以兼容各种分辨率。dom层放置一个echarts图表容器,<template> <div ref="main_div" > <div id="ChartEcharts"></div> </div></template>JavaScript代码mounted方法里监听页面变化的方法。geth方法是获取页面高度的方法.原创 2021-06-29 13:14:52 · 2871 阅读 · 0 评论 -
通过id class ref 获取元素的高度和宽度
dom 结构<div id="id1" class="class1" ref="ref1" style="width: 100px; height: 100px;"></div>通过 id 获取高度宽度let widthid1 = document.getElementById("id1").offsetWidthlet heightid = document.getElementById("id1").offsetheight通过class 获取高度宽度原创 2021-06-27 11:53:25 · 7873 阅读 · 4 评论 -
后台数据全部返回前端element ui实现前端分页
dom<template> <div class="main-view"> <div class="btn-view"> <el-button size="mini" type="primary" @click="downloadClick">导出</el-button> </div> <div class="table-view"> <vxe-table .原创 2021-03-19 16:22:25 · 524 阅读 · 0 评论 -
日期格式化
formatTime({ cellValue, row, column }) { // cellValue日期 let t = new Date(cellValue) let format = 'yyyy-MM-dd HH:mm:ss' let tf = function(i) { return (i < 10 ? '0' : '') + i } return format.replace(/yyyy|MM|...原创 2021-03-15 13:39:26 · 151 阅读 · 0 评论 -
超全的 echarts 图表用例网站
echarts传送门原创 2021-02-18 10:04:07 · 1399 阅读 · 0 评论 -
正则表达 数字和小数 只能含有一个小数点 保留3小数 首位不能是小数点
html写法 <el-input maxlength="15" :oninput=" (val= oninputNumber(val)) " v-model.trim="val" /> script写法 data() { return { val: "", }; },methods: { oninputNumber(原创 2021-01-21 18:35:03 · 869 阅读 · 0 评论 -
element-UI 文件上传 组件化
这里是封装的上传按钮组件DOM写法<template> <el-upload action="#" :http-request="requestUpload" :show-file-list="showFileList" v-loading="loading" > <el-button :type="buttonType" icon="el-icon-upload2" :disabled="原创 2020-12-25 10:57:20 · 288 阅读 · 0 评论 -
js vue下载图片
图片需要转化成base64,然后在下载。 // 图片转化base64 getUrlBase64(url) { return new Promise((resolve) => { let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let img = new Image(); img.crossOrigin原创 2020-12-25 10:52:42 · 254 阅读 · 0 评论 -
vue 下载word等文档
// 下载 getdownloadInfo(row) { let url = row.reportUrl const fileName = url ; if ("download" in document.createElement("a")) { let downloadElement = document.createElement("a"); downloadElement.href =原创 2020-12-25 10:50:38 · 1765 阅读 · 0 评论 -
element-UI select下拉框 加搜索 拼音搜索 滚动加载新的数据
DOM 写法 <el-form-item label="样品名称" prop="sampleName" label-width="150" > <el-select v-model="queryParams.sampleName" p.原创 2020-12-25 10:38:44 · 337 阅读 · 1 评论 -
递归调用给树 追加元素js
现在想在部门树下面添加用户效果图部门数据结构[ { id: 100, label: "XX检测公司", children: [ { id: 101, label: "业务部门", children: [ { id: 103, label: "研发部门" },原创 2020-10-22 11:51:41 · 755 阅读 · 0 评论 -
js日期格式化 日期向过去推一周或者一个月
// 日期格式化 function getNowFormatDate(date) { // var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + mon.原创 2020-08-31 09:56:28 · 1605 阅读 · 0 评论 -
uniapp echarts 地图的散点图 兼容 app ios H5
献上效果图话不多说上代码dom层<template> <view class="box"> <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echartsmap" class="echarts"></view> </view></template>逻辑层<script>原创 2020-08-25 15:19:08 · 1201 阅读 · 9 评论 -
时间戳转换标准事件格式
// 时间戳转换 yyyy-mm-dd 或 YYYY-MM-dd hh:mm:ss function add0(m) { return m < 10 ? '0' + m : m } function format(shijianchuo) { //shijianchuo是整数,否则要parseInt转换 var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth().原创 2020-08-06 21:13:16 · 598 阅读 · 0 评论 -
node环境搭建JEECG前端框架环境搭建vue全家桶
前端技术文档含JEECG前端框架环境搭建一、前端环境安装1. 安装nodejs2. Yarn安装3. 配置nodejs镜像4. 安装脚手架vue-cli5. 最后验证是否安装成功二、geecg前端项目介绍1.学习必看的资料2.前端框架介绍(一)前端的组成和结构(Ant-design-vue + Vue + Webpack)(二) ES6(三) Vue全家桶3.jeecg前端项目启动4.全局配置文件...原创 2019-12-07 14:52:49 · 2619 阅读 · 0 评论