码上流星&洒下星辰
前端领域新星创作者、技术传递力量、传承布道精神、期待你我共同进步
展开
-
如此丝滑的按钮交互效果确认不来看看嘛
【代码】如此丝滑的按钮交互效果确认不来看看嘛。转载 2023-06-09 14:50:31 · 144 阅读 · 0 评论 -
实现无需登录即可访问第三方页面
在公司自己的产品通过兑换码激活链接后调取后端联合登录接口,实现免登录的方式直接跳转到第三方产品的页面中。原创 2023-04-11 16:22:39 · 833 阅读 · 0 评论 -
如何在线上环境关闭(vue/小程序)项目中的console.log
【代码】如何在线上环境关闭(vue/小程序)项目中的console.log。原创 2023-04-06 14:40:30 · 1133 阅读 · 1 评论 -
vue项目中封装截取页面参数的js文件
【代码】vue项目中封装截取页面参数的js文件。原创 2023-03-29 14:20:46 · 140 阅读 · 1 评论 -
解决el-input禁用特殊字符后输入汉字自带拼音的bug
【代码】解决el-input禁用特殊字符后输入汉字自带拼音的bug。原创 2023-03-26 18:14:43 · 400 阅读 · 0 评论 -
vue+element实现表单提交(正则验证表单项+限制特殊字符)
【代码】vue+element实现表单提交(正则验证表单项+限制特殊字符)原创 2023-03-23 17:50:55 · 536 阅读 · 0 评论 -
vue创建项目流程
.安装node.js环境可以去官网下载安装包:https://nodejs.org/安装好后,可以输入node -v npm -v成功的话会显示相应的版本号2.安装vue-cli VUE脚本架工具npm install -g vue-cli#回车,等待安装vue -V#若出现vue信息说明成功3.用vue-cli构建项目vue init webpack vuedemo(这个可以是全路径+项目名称)#这里需要进行一些配置,默认回车即可原创 2021-05-28 15:46:10 · 319 阅读 · 6 评论 -
解决Invalid Host/Origin header,[WDS] Disconnected!报错
第一步:第二步:第三步:重新启动dev即可原创 2023-03-21 14:00:21 · 2214 阅读 · 0 评论 -
项目请求地址自动加上了本地ip的解决方式
一般情况下来说都是一些粗心大意的问题导致的原创 2023-03-02 10:47:00 · 626 阅读 · 0 评论 -
vue项目通过hbuilderx打包为apk
1.vue项目npm run build 得到dist文件夹dist文件夹内容示例新建5+APP项目空的5+APP项目文件夹情况将dist文件夹下的内容粘贴(并覆盖)到5+APP下后原创 2022-06-28 17:09:27 · 510 阅读 · 0 评论 -
vue项目编译时报错:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
全局安装 第二步:打开终端,执行:原创 2022-06-28 17:15:54 · 1127 阅读 · 1 评论 -
vuex中拿不到state中值的问题(state是undefined)
【代码】vuex中拿不到state中值的问题(state是undefined)原创 2022-09-22 18:25:53 · 3250 阅读 · 0 评论 -
vue实现前端人机验证
vue插件实现前端人机验证原创 2022-07-06 18:33:27 · 1382 阅读 · 1 评论 -
vue项目配置rem移动端适配
一、项目介绍脚手架CLI:@vue/cliVue版本:2.6.11移动UI组件库:Vant#2.10.14CSS预处理器:sass二、配置lib-flexible插件下载插件npm i -D lib-flexible导入:在src/main.js中使用import 'lib-flexible'三、项目配置安装postcss-px2rem和postcss-loader插件依赖npm i -D postcss-px2rem postcss-loader提示: 如果项目使用了第三方原创 2022-05-10 14:51:38 · 1145 阅读 · 0 评论 -
Vue仿制外卖点餐界面的左右侧菜单联动:点击左侧使右侧滚动到对应位置,右侧滚动时选中左侧对应选项
首先安装依赖yarn add better-scrollyarn add stylus-loader@3.0.2 --save-dev示例图片<template> <div> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item" v转载 2022-05-06 15:46:33 · 2394 阅读 · 1 评论 -
vue中使用Mock
mock是当前端工程师搭建好了页面只差数据,但是后端还没完成接口开发时候使用的前端虚拟数据mock的特性前后端分离增加单元测试的真实性(通过随机数据,模拟各种场景)简单实用(符合真实的接口)数据类型丰富(支持生成的文字,字符串,日期,邮箱,boolean,颜色,图片等)方便扩展(支持自定义类型函数)Mock.js地址.........原创 2022-04-28 19:01:43 · 1554 阅读 · 0 评论 -
手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件//'@/utils/common.js' 文件 function throttle(bindObj, fn, delay) { bindObj.$$prevTime = Date.now() return function(...args) { const nowTime = Date.now() if(nowTime - bindObj.$$prevTime > delay) { fn.apply(this原创 2022-04-28 12:24:57 · 1188 阅读 · 1 评论 -
el-table-column prop使用三元运算符(动态展示数据)
prop需要是一个变量,以中英文翻译为例,当中英文都是后端返回时,前端应如何处理?下面字段name为后端返回的中文名称,key为英文名称。<el-table-column label="名称"> <template slot-scope="scope"> <span v-if="language=='zh_CN'">{{scope.row.name}}</span> <span v-else-if>{{s转载 2022-04-26 17:39:35 · 1619 阅读 · 0 评论 -
如何解决vue/react打包上线之后路由页面刷新就丢失的问题
location /{ try_files $uri /index.html; index index.html index.htm index.php;}通过服务器的nginx配置进行url重写到程序入口index.html,代码如上原创 2021-07-26 14:58:59 · 1135 阅读 · 3 评论 -
vue嵌套路由(默认显示第一个children路由)
App根组件中必须加router-viewrouter文件中import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/home/Home.vue";import Detail from "../views/home/detail.vue";import Detail1 from "../views/home/detail1.vue";Vue.use(VueRouter);const原创 2022-04-20 16:00:00 · 4705 阅读 · 0 评论 -
vue实现动态路由俩种方式
创建文件目录在router文件中引入一级路由以及详情页路由import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/home/Home.vue";import About from "../views/about/About.vue";import Detail from "../views/home/detail.vue";import Detail1 from "../views原创 2022-04-20 11:31:29 · 4895 阅读 · 0 评论 -
Vue中常用的组件传值方式
父传子1. 子组件在props中创建一个属性,用以接收父组件传过来的值2. 父组件中注册子组件3. 在子组件标签中添加子组件props中创建的属性4. 把需要传给子组件的值赋给该属性5. 浏览器输出子传父1. 在子组件中创建一个按钮,给按钮绑定一个点击事件子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件2. 在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法原创 2022-04-18 19:51:40 · 687 阅读 · 4 评论 -
vue封装年月日时分秒
<template> <div> <div > <p v-html="formateTimeStamp(date)"></p> </div> </div></template><script>export default { data: function () { return { date: new Date().getTim原创 2022-03-31 14:45:39 · 1108 阅读 · 0 评论 -
vue+element实现分页器效果(带搜索功能)
不同数据下分页的效果<div class="block"> <span class="demonstration">页数较少时的效果</span> <el-pagination layout="prev, pager, next" :total="50" page-size:"100"> </el-pagination></div><div class="block"> <原创 2021-11-26 15:19:32 · 1013 阅读 · 1 评论 -
vue实现复制功能
使用插件:clipboard.js,官网地址:http://www.clipboardjs.cn/1 通过npm安装clipboard.js npm install clipboard2 在需要使用到复制功能的组件中引入:import ClipboardJS from 'clipboard';3 需要被复制的元素标签上要加一个id;然后在复制按钮加一个data-clipboard-target指向元素标签;最后添加一个点击事件<div id="content"> dajiwdh原创 2021-11-25 16:41:56 · 801 阅读 · 1 评论 -
vue项目中使用scss出错解决方法
vue 使用scss报错 this.getOptions is not a function通过npm安装sassnpm install node-sassnpm intall sass-loader上面命令安装的是最新版的,出现错误的原因就是安装最新版的导致getOptions()不兼容解决方案就是卸载sass-loader,安装低版本,命令如下npm uninstall sass-loader //卸载npm install sass-loader@8.0.0 //安装8.0.原创 2021-10-24 14:32:37 · 5347 阅读 · 1 评论 -
vue脚手架中创建自定义指令
局部自定义指令直接在组件内部创建<template> <div> <p v-upper-text="name"></p>转大写 <p v-lower-text="name"></p>转小写 </div></template><script> export default{ data(){ return原创 2021-10-20 19:36:50 · 582 阅读 · 1 评论 -
vue中的表单数据提交
```handlebars<template> <div> <form action="" @submit.prevent="handleSubmit"> <input type="text" placeholder="账户" v-model="username"> <input type="text" placeholder="密码" v-model="password">.原创 2021-10-20 16:26:10 · 6122 阅读 · 1 评论 -
vue简单实现查询排序功能
<template> <div> <input type="text" v-model="searchName" minlength="1" maxlength="10"> <ul> <li v-for="(item,index) in filterList" :key="index"> {{item.name}}--{{item.age}}原创 2021-10-20 14:36:13 · 879 阅读 · 1 评论 -
vue计算属性computed和监视器watch的使用
计算属性1) 在 computed 属性对象中定义计算属性的方法2) 在页面中使用{{方法名}}来显示计算的结果监视属性1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性2) 当属性变化时, 回调函数自动调用,在函数内部进行计算计算属性高级1) 通过 getter/setter 实现对属性数据的显示和监视2) 计算属性存在缓存, 多次读取只执行一次 getter 计<template> <div> 姓原创 2021-10-19 20:12:39 · 251 阅读 · 2 评论 -
vue项目报GET http://192.168.32.105:8080/sockjs-node/info?t=1623033929802 net::ERR_CONNECTION_TIMED_OUT
平时在写vue项目的时候经常会遇到这个问题,写着写着浏览器就会突然抛出下面这个报错(这个报错无关紧要,不影响开发,一般不要管他,有强迫症的小伙伴往下看)网上找到的原因是因为sockjs-node库创建了一个低延迟、全双工的浏览器和web服务器之间通信通道,当我们在项目运行的时候会自动调用这个接口,如果没有使用,就会一直报这个错误(企业中跟后端联调之后就不会有这个报错了)解决方法:1.在项目中打开node_modules包并找到/sockjs-client/dist/sockjs.js文件.原创 2021-06-07 10:57:24 · 8184 阅读 · 5 评论 -
如何修改element-ui组件的样式
常用俩种方式如下图所示,我要修改走马灯中的buttonstyle上面不能加scoped,否则就算你强制设置css(!important)也不会改变。所以我在下面又新创建了一个不带scoped的style用来修改element的组件样式还有一种方法是/deep/或者>>>/deep/ .title{color:red};>>> .title{color:black};...原创 2021-06-22 16:24:43 · 1385 阅读 · 7 评论 -
vue简单实现购物车的全部功能
在了解代码之前先给大家讲述一下以下购物车共有哪些功能,对你们有帮助的记得点赞哦!主要功能如下:增加商品信息修改商品信息删除单个商品删除多个商品清空购物车对商品单价进行降序排序根据商品名称实现查找实现商品数量加减全选反选实现勾选商品的总价计算效果图如下:由于功能比较多就不一个个讲了,我们先来讲几个主要功能的逻辑(增删改查),最后放全放部代码首先我们先来看增加商品功能//先来一个按钮绑定显示事件,点击添加后出现一个弹窗<butt原创 2021-07-01 14:45:44 · 1795 阅读 · 13 评论 -
vue+element+axios实现分页
之前更了一个react的分页效果,今天给大家发一个vue写的分页先在全局main.js中引入element并使用 import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";Vue.use(ElementUI);然后在html中使用element-ui中的分页组件//绑定函数//通过数据的length渲染当前页的数据条数<el-pagination @size-change="han原创 2021-06-10 21:22:13 · 1573 阅读 · 4 评论 -
vue+axios+element+ui实现手机发送验证码及校验验证码功能
1.首先布局,使用element表单输入框,标签上面相应的绑定了一些事件以及校验规则,下面逻辑代码中有注释 <div class="wrap"> <el-form class="loginForm" :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-position="top"> <el-form-item label="手机号" prop="phone"> <el原创 2021-06-15 11:58:55 · 2391 阅读 · 5 评论 -
vue+Qrcode实现动态生成二维码(图片格式,点击下载可保存本地)
1.首先安装插件依赖npm install qrcodejs2 --save-dev 或者 yarn add qrcodejs2 --save-dev2.安装完成之后在项目中引入 import QRCode from 'qrcodejs2'3.然后再页面中写个标签用来渲染他<template> <div id="qrcode" ref="qrcode" ></div> //img标签会导致二维码渲染不到页面上,所以此处用了原创 2021-06-16 09:18:24 · 1645 阅读 · 7 评论 -
vue动态生成二维码,扫码登录
首先找到对应的的三个接口1.二维码获取key接口接口说明:调用此接口可生成一个key2.二维码生成接口接口说明:调用此接口传入上一个接口生成的key可生成二维码图片的base64和二维码信息,可使用base64展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码3.二维码检测状态接口接口说明:轮询此接口可获取二维码扫码状态,800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)调用上面三个接口时候务必要带上时原创 2021-06-16 14:41:04 · 1892 阅读 · 7 评论 -
使用vue插件实现全球地图,实现你环游世界的梦
首先第一步先安装依赖npm i vue-baidu-map或者yarn add vue-baidu-map安装完成之后在页面中写入一个div用来渲染地图插件<baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的百度地图ak" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom"原创 2021-06-22 17:04:08 · 1311 阅读 · 17 评论