- 博客(55)
- 收藏
- 关注
RSS订阅原创 uniApp 自定义分享到微信、朋友圈
新建组件share-posters在项目中index.html文件中引入jWeixin在父组件中使用。
2023-03-16 13:48:22
2148
3
原创 uniApp picker-view自定义选择省市区
新建组件pick-adress在项目中新建config文件夹 创建address.js文件在父组件中使用。
2023-03-16 11:46:03
2388
5
原创 vue element-ui响应式布局（记录）
此时你会发现vant组件的尺寸会小一半，那是因为vant官方是用375设计稿，你用的是750，动态判断就好。下面代码的作用主要是用来判断读取的是否是ui组件库ant-design-vue的文件，如果是，视口的宽度就设置为375,其他的文件则按照ui稿的宽度750。实现方法：通过 postcss-px-to-viewport 来自动将我们开发时的px单位计算转换为vw/rem视口单位,完成响应式布局。配置好文件以后，重启项目就行，也可以不用重启，编译一下就行，可以测试一下。在app.vue中配置一下。
2023-02-17 15:05:08
3034
1
原创 vue element-ui 年月日时间筛选 选择范围年加一年，月加一个月 获取时间戳
遇到一个筛选时间范围的功能，选择类型不同范围都加一，选择天 结束天数加一天；选择月，结束月加一个月，选择年 年份结束时间为加一年的结束时间，时间范围控制在一年内筛选数据。记录一下，觉得有意思。[在这里插入图片描述](https://img-blog.csdnimg.cn/4fc5b514f4864f2ba8c0003fbbb3a4ab.png。utils.js 文件中。
2023-02-10 11:37:44
1548
原创 web pc 页面禁止鼠标右键查看元素已经禁止f12查看源代码
以上三种事件，如果只想单纯的禁用鼠标右键，和复制粘贴，还可以将它们直接写到HTML中的body上面或者：禁止网页内容复制．粘贴：在body中加入以下代码 或者：body中加入如下的代码,鼠标的左右键都失效（没试过）onselectstart事件禁用网页上选取的内容（没试过）oncontextmenu事件禁用右键菜单（亲测有效）在body后面加入以下代码（没试过）oncopy事件禁用复制（没试过）
2023-01-30 11:22:08
494
原创 el-cascader 数据回显
最近做一个后台管理系统菜单权限控制，选择菜单用到了element-ui 的组件el-cascader，只保存了最后一级菜单的id,编辑回显的时候就显示出了问题，回显一直是错的，在网上搜索了很久没找到合适的，自己写了一个，记录一下。
2023-01-11 10:42:52
3587
原创 vue npm 报错 /src/styles/element-variables.scss
通过修改sass变量、class，全局修改element-ui样式。1.安装sass2.判断情况当 node 版本低于 14 时，安装以下两个版本，“node-sass”: “4.14.0”,“sass-loader”: “7.1.0”当 node 版本为16x 时，安装以下两个版本“node-sass”: “6.0.1”,“sass-loader”: “10.2.0”2.新建一个样式文件例如 element-variables.scss，写入以下内容：找到需要修改的样式，复制到element
2022-12-03 10:41:29
2866
原创 vue 拖拽 排序
根据https://blog.csdn.net/weixin_38404899/article/details/90642209这篇文章所得<template> <!-- 拖拽交换位置效果 --> <transition-group tag="div" class="container"> <!-- 循环出三个颜色不同的div --> <div class="item" v-for="(item,index)
2022-03-15 10:11:40
1737
原创 前端开发长用到的网站 搭建环境用到都网站
主要是记录一下，以免用到时找不到1.、压缩图片 ：https://tinify.cn/2、查询身份证 : http://sfz.uzuzuz.com/?region=520102&birthday=19900307&sex=1&num=5&r=363、下载m3u8格式视频文件 ： http://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html4、uniapp 使用echarts.js ： https://d
2021-05-26 11:28:06
132
原创 vue +less动画轮播banner
<template> <div class="banner" > <div class="bg" ref="bg"> <transition name="fade"> <div class="imgs" v-for="(item, i) in banner" v-if="i===mark" :class="isSwitch ? 'animation':''" :style="i == mark ? 'opacity
2021-05-21 11:41:21
204
原创 vue element-ui tree,筛选出所有父节id回显
遇到一个后台只返回一个数节点的id,需要回显选择树节点，搜索了很多方法，所以在这里记录一下使用方法，筛选的树结构 data "data":[ { "id":10, "pid":0, "level":1, "fullName":null, "cateName":"环评类", "sort":1, "pic":"",
2021-05-21 11:34:07
498
原创 uniapp中拍摄图片/录制视频并保存到本地设备(记录)
<template> <view> <view class="uni-padding-wrap"> <view v-if="imagePath !== ''"> <image mode="widthFix" :src="imagePath" /> </view> <button type="primary" @click="saveImage">拍摄图片并保存到本地</button&g.
2021-04-16 16:50:29
2331
原创 js大数字转换，将大额数字转换为万、千万、亿等
记录一下大额数据转换，bigNumberTransform (value) { const newValue = ['', '', ''] let fr = 1000 let num = 3 let text1 = '' let fm = 1 while (value / fr >= 1) { fr *= 10 num += 1 // console.log('数字', value / fr, 'num:', num)
2021-04-13 11:34:20
1712
原创 uniapp使用scroll-view与swiper制作顶部导航栏+内容切换
原文：https://blog.csdn.net/weixin_42204597/article/details/103829871在这里记录一下
2021-04-09 16:41:05
931
原创 canvas中globalCompositeOperation属性值所代表的的值表达含义及样式
CANVAS属性记录 一：globalCompositeOperation的属性CanvasRenderingContext2D.globalCompositeOperation Canvas 2D API的 属性设置在绘制新形状时要应用的合成操作的类型。1.1 Type类型1.2 source-over这是默认设置，并在现有画布内容的顶部绘制新形状1.3 source-in新图形仅在新图形和目标画布重叠的位置绘制。其他一切都是透明的。 const canvas = this.$re
2021-03-15 15:57:03
1166
1
原创 vue+canvas 小球连线——碰壁折返
学习案例，记录一下<template> <div> <canvas ref="myCanvas" width="800" height="600" id="myCanvas"></canvas> </div></template><script>export default { data () { return { } }, mounted () { this.onBullConnect
2021-03-11 10:55:40
948
1
原创 vue + canvas画布鼠标出发画不同颜色圆
<template> <div class="demo"> <div class="canvas1"> <canvas class="myCanvas" width="800" height="500" ref="myCanvas"></canvas> </div> </div></template><script>export default { name: '.
2021-03-10 16:38:54
661
原创 vue iview 获取验证码倒计时封装js
1、在uilts文件中新建一个新的js文件命名为sendVerifyCodeexport default { data() { return { disabled: false, text: "获取验证码" }; }, methods: { sendCode() { if (this.disabled) return; this.disabled = true; let n = 60; this.t
2021-03-06 14:59:10
368
原创 vue simpleStep 步骤条
根据 https://blog.csdn.net/CSDN877425287/article/details/113197605 博客所得<template> <!--步骤条-组件--> <div id="step-group" :style="{'--height': totalHeight+unit,'--width':totalWidth+unit,'--stepBorderColor':stepBorderColor}"> <div cl
2021-03-05 17:13:51
672
原创 拖拽上传功能的实现及原理
代码块<template> <div class="management"> <h3 class="manage-title">附件简历管理</h3> <ul class="pdf-list"> <li class="list-item" v-for="item in fileList" :key="item.att_id"> <div class="enclosure-name.
2021-02-26 09:26:39
644
原创 uniapp element-china-area-data 三级联动
首先下载 element-china-area-datanpm i element-china-area-data<template> <view class="block"> <view class="title"> 居住地 </view> <view class="muster"> <picker class="pickerList" mode="multiSelector"
2021-01-28 11:58:09
1182
2
原创 vue 文件拖拽上传
<template> <div id="app"> <div class="content"> <div class="drag-area" @dragover="fileDragover" @drop="fileDrop"> <div v-if="fileName" class="file-name">{{ fileName }}</div> <div v-else cl.
2020-12-30 11:08:06
2392
原创 图文切换类似轮播
<template> <div class="home"> <el-row :gutter="20" type="flex" justify="center"> <el-col :span="20"> <div id="father" class="grid-content bg-purple"> <div id="swiper-box" class="swiper-box" :st.
2020-12-25 12:03:27
93
1
原创 vuejs 实现模块上移下移 实现排序
<template> <div class="right-item-main"> <div class="phone-number-bar"> <span class="phone-binding">常用语</span> </div> <ul class="common-words"> <li class="common-words-list" v-for="(it.
2020-11-25 09:35:52
940
原创 vue-cli3项目将样式单位批量修改为rem
1, 配置安装1npm i lib-flexible --save 安装2npm i postcss-px2rem --savepostcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。2, 引入lib-flexibleimport 'lib-flexible'注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 pu
2020-11-02 17:18:44
377
原创 Vue 项目中Axios配置不同的baseURL,请求不同的域名接口
最近使用 Vue2.0开发项目,开发过程遇到一个问题，由于项目需要拆分成多个小的模块,接口地址来源不一致。每个模块有不同的接口地址。而模块之间公用的接口就出现在同一项目请求多个接口地址问题。于是在网上看了问题解决办法，都不太实用，所以在这里记录一下我的解决办法，各个项目差异性导致每个项目有不同间距办法，这里的办法经供参考，欢迎多多留言，一起成长。。。。。。Vue2.0 项目中Axios配置不同的baseURL,请求不同的域名接口准备工作1, 准备一个utls.js 文件(路径自己存放,我放到@/conf
2020-10-17 17:04:06
8241
1
原创 vue cli3.0快速搭建项目详解（记录一下）
本文章原地址https://www.cnblogs.com/coober/p/10875647.html本人记忆能力不怎么好，所以记录在自己的博客中，便于查阅；这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：CLI：@vue/cli全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）CLI .
2020-10-17 15:39:23
132
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人