weixin_46181037的博客

原创 vue3 + ts 导入.xlsx并读取数据

1、先安装插件 xlsx。

原创 vue3导入json文件并读取

【代码】vue3导入json文件并读取。

原创 vue3 + element-plus + ts 实现 table 的点击跳转，以及复制数据不跳转的问题

table 点击行跳转，复制数据不跳转的问题

原创 vue使用proxy来解决跨域问题

vue使用proxy来解决跨域问题

原创 vue封装axios

vue封装axios

原创 pc端侧边栏

文章目录一、效果图二、代码总结一、效果图首页面效果图其他页面效果图二、代码<template> <div> <div class="right_aside" id="menu" :style="{'top':(fromPages == 'activity' ? '45%' : fromPages == 'newActivity' ? newActivityTop : '')}"> <ul class="menu_list" v-i

原创 vue使用swiper

vue使用swiper一、安装swiper二、使用效果一、安装swipernpm i swiper@3.4.2 -S二、使用<!-- * @Author: your name * @Date: 2021-09-30 11:18:22 * @LastEditTime: 2021-09-30 13:02:18 * @LastEditors: DESKTOP-0USOKJQ * @Description: In User Settings Edit * @FilePath: \sp-s

原创 uniapp 实现类似淘宝的下拉筛选框

uniapp实现类似淘宝的下拉筛选框一、效果图二、代码实现总结一、效果图二、代码实现<template> <view class='productList'> <view class="pro_select_content"> <view class="select_item" @click="showSelectPopup(index)" v-for="(item,index) in 8" :class="selectTitleItem ==

原创 移动端购物车全选反选

移动端购物车全选反选使用的是uniapp开发小程序,其中使用了uniapp滑动操作组件效果代码<template> <view class="cartList"> <view> <view class="cart_list_operation"> <view class="cart_operation_left">购物车共有 5 件商品</view> <view class="cart_ope

原创 新安装的vscode如何配置环境

新安装的vscode如何配置环境1、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2配置bash"terminal.integrated.shell.windows": "D:\\software\\Git\\bin\\bash.exe", //该处的地址是你的git安装的地址 "terminal.integrated.automationShell.windows": "D:\\software\

原创 原生滚动条更改样式

原创 jq使用问题

记录一个小问题，拿到的返回数据performance_list = [ { id:'1001', title:'测试1', titleIcon:'./images/index_3_title.png', swiperImgList:[ './images/index_3_ban.png', './images/sss.png', './images/index_

原创 Echarts多列柱状图时，鼠标滑过显示百分比

多列柱状图时，鼠标滑过显示百分比前言一、效果图二、实现方法1.在series中直接使用tooltip（适合单个柱状图）2.在tooltip中设置（适合多个柱状图）总结前言最近在弄echarts图表，遇到了同一个图表展示多个柱子，并且鼠标滑过的时候显示对应的个数以及百分比。我只展示了我写的js部分，具体的引入使用请参考官网 Echarts官网 一、效果图二、实现方法1.在series中直接使用tooltip（适合单个柱状图）代码如下（示例）：<script>import *

转载 H5网页开发分享朋友、朋友圈

H5网页开发分享朋友、朋友圈一、代码一、代码wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signat

转载 uniapp实现纵向导航栏

uniapp的swiper组件实现纵向导航栏一、效果图二、代码实现总结一、效果图二、代码实现<template> <view class="content"> <swiper class="swiper" style="height: 100%;" :autoplay="false" vertical='true' circular='true'> <swiper-item> <image style="width:100%

原创 uniapp使用picker

uniapp使用picker前言一、uniapp简介二、picker简介三、使用1.实现效果图2.代码如下总结前言一、uniapp简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uniapp官网二、picker简介从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，

原创 Ant Design vue使用组件select设置default-value

Ant Design vue使用组件select设置default-value一、效果图二、代码1、将default-value设置为固定的值2、动态将default-value设置为数据的第一个总结一、效果图二、代码设置 key 和 default-value 的值相同1、将default-value设置为固定的值<!-- html代码 --><a-select :key="DefaultValue" :default-value="DefaultValue" style

原创 vue使用antd表格自定义分页

vue使用antd表格自定义分页效果图代码效果图代码<template> <div class="home"> <a-table :pagination="pagination" :columns="Projectcolumns" :data-source="Projectdata" :bordered='true' > <template slo

原创 vue使用antd表格组件进行跳转

vue使用Antd表格组件跳转的两种方式第一种：点击行进行跳转第二种：点击详情进行跳转第一种：点击行进行跳转点击行内的任何一处都可以进行跳转，直接上代码；<template> <div class="home"> <div style="background:#ECECEC; padding:30px"> <a-card :bordered="false" style="width: 100%"> <a-t

原创 select跟echarts联动

效果图下拉框切换值，对应的下边图形跟着变换，效果图如下直接上代码<template> <div> <div class="scale"> <a-row :xs='1' style="margin-top:20px;width:100%;height:62px;display:flex;justify-content: space-between;align-items: center;"> <d

原创 echarts图表中的legend显示百分比

ECharts图表图例显示百分比效果图代码效果图代码<template> <div ref="industryCharts" style="width:450px;height:270px" :style="{display:industryShow}"></div></template><script>import * as echarts from 'echarts';export default { data()

原创 hosts文件

hosts文件的编辑先找到hosts文件的位置，一般是在C:\Windows\System32\drivers\etc目录下面2.找到hosts文件之后我们还要知道怎么打开hosts文件，因为hosts文件没有默认的打开程序，所以我们一般可以选择使用记事本打开hosts文件，当然了如果我们的电脑中安装有专业的编程软件的话，如Macromedia Dreamweaver、EditPlus等，也可以使用这些软件打开。我这里使用的是记事本打开的3.下面就是hosts文件的修改方法：也就是在文本的最后一

转载 vue组件之间的几种通信方式

（1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础 父传子 通过属性(props)：props可以设置成对象的形式，也可以设置成数组的方式，设置成数组就不可以设置类型和必填功能； 子传父 通过事件派发（$emit）：事件派发遵循：谁派发，谁监听的原则（2）ref 与 $parent / $children 适用 父子组件通信 ref：如果在普通的 D...

原创 call、apply、bind三者之间的异同

对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。如：func.call(f...

原创 在GitHub上将源码设置成静态网页时遇到的问题

无法选中GitHub pages 中 source 中的 master branch/docs folder 选项解决办法：你可以将你 build 后的 build 文件改名为docs ，再上传到GitHub上，便可以勾选，设置成网页后出现如下报错解决方法：上边报错是由于你的项目未进行打包使用的是 public 文件作为了docs文件所致，解决方法就是将项目进项打包即可打包后的部署路径...

原创 GitHub上的开源项目设置成静态网页展示

先在GitHub上打开想生成静态页面展示的项目，选中settings修改GitHub Pages 中的Source选项，如下图，完成上述步骤就可以实现源码转换成为静态网页了，这个是我的一个项目的静态网页地址https://18737597075.github.io/react-management-system/...

原创 let、var、const的区别

let与var的区别1）、let的变量名不能重复，但var可以2）、let没有声明提升（存在暂时性死区）<script type = "text/javascript"> let a = 10; if(true){ console.log(a);//暂时性死区 能感知到局部变量a的存在，就是不能用 let a = 20; } 输出结果：报错 Cannot a...

原创 原型和原型链

当我们创建一个对象时 let obj = { age: 25 }，我们可以发现能使用很多种函数，但是我们明明没有定义过它们，对于这种情况你是否有过疑惑？当我们在浏览器中打印 obj 时你会发现，在 obj 上居然还有一个 proto 属性，那么看来之前的疑问就和这个属性有关系了。其实每个 JS 对象都有 proto 属性，这个属性指向了原型。接下来让我们再看看 proto 里面有什么吧。...

原创 数组去重的几种方法

//数组排序方法去重 function norepeat(arr){ for(var i = 0;i < arr.length-1; i++){ for(var j = i+1;j < arr.length ; j++){ if(arr[i] == arr[j]){ arr.splice(j,1) j--; //避免漏取 ...

原创 this指向问题

我们先来看几个函数调用的场景function foo() { console.log(this.a)}var a = 1foo()const obj = { a: 2, foo: foo}obj.foo()const c = new foo()接下来我们一个个分析上面几个场景对于直接调用 foo 来说，不管 foo 函数被放在了什么地方，this 一定是 w...

原创 Taro创建小程序项目

简介Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编...