Vue
关注
分享
扫一扫
haoqi好奇
五年程序员，精通前端和Java，可以定制开发，卫星：qingcreek(推荐)，Q:2434705794
展开
-
el-element el-table表格内编辑，单元格编辑
【代码】el-element el-table表格内编辑，单元格编辑。原创 2022-09-13 10:05:27 · 1097 阅读 · 1 评论 -
vue升序降序按钮功能实现
需求：默认升序，悬浮按钮变色，点击按钮下标跟随变化。html <div class="right" @click="change(item,index)" v-for="(item, index) in btnList" :key="index">{{item.lable}} <div class="box-icon"> <div class="u原创 2022-05-19 11:36:52 · 2135 阅读 · 0 评论 -
vue3实现pdf文件预览，分页，放大缩小
很多pdf插件不支持vue3，或者是没有集成翻页放大缩小功能，故写此分享。1. 安装依赖npm i vue-pdf-embed -Snpm i vue3-pdfjs/esm -S<template> <div> <div class="div"> <el-button @click="prev">上一页</el-button> <el-button @click="next">下一页原创 2022-04-07 14:42:08 · 8031 阅读 · 13 评论 -
vue中同时引入两个echarts组件无法自适应图表，resize无效
在父组件引入多个子组件（里面都是echarts图表）的时候，window.onresize()方法只会对最后一个组件里的图表产生效果，主要原因是组件加载顺序导致的，所以我们将window.onresize监听放到父组件去执行父组件（图利为vue3写法，可自行换成vue2）：const line = ref();const bar = ref();onMounted(() => { setTimeout(function () { // 监听屏幕变化，重置组件图表 wi原创 2022-03-31 11:59:50 · 3187 阅读 · 3 评论 -
H5验证码倒计时，兼容iphoneX等机型锁屏倒计时
登录注册获取验证码需要倒计时；一般都选择setTimeout和setInterval 定时器；在web页面也没有问题，安卓手机也没问，但有IOS用户反应某些需要用到用户登录注册倒计时点击后锁屏再次开屏时间暂停了。html <span v-show="timeTrue == true" @click="acquire">获取验证码</span> <span v-show="timeTrue == false" >原创 2022-02-11 09:45:32 · 685 阅读 · 0 评论 -
js监听表单内容，点击返回表单内容不为空时提示取消或返回
// 表单数据类型示例// formData: {// name: '',// describes: '',// coefficient: '',// logoPath: '',// appTypeIds: [],// subjectArr: [],// },// true 提示， false直接返回 var flag = Object.values(this.formData).some( item => { if (ite.原创 2021-03-22 14:05:39 · 358 阅读 · 1 评论 -
vue多个商品选择与列表显示
// mock数据classRoom: [{ "id": "598", "name": "初中课程全套", "now_price": "0.01", "price": "880.00", "classroomCourse": [{ "id": "2434" }], "course": [{ "id": "504", "name": "初一语文", "is_free": 1 }, { "id": "629", "name": "初一初学.原创 2020-11-18 15:06:42 · 2103 阅读 · 0 评论 -
uni-app(vue)中使用Vuex的action封装和发送请求
1.封装请求可参考我之前的文章2.创建一个文件 api.js 封装具体的请求// 导入封装的请求import request from '@/utils/request.js'// 导出export function reqDataList(id){ // 资讯列表 return request({ url: 'mv1/list?id=' + id, method: 'get' })}3.vueximport {reqDataList} from '@/api.原创 2020-09-04 09:30:35 · 3434 阅读 · 0 评论 -
vue监听浏览器返回
监听返回mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate...转载 2020-04-26 09:52:33 · 4827 阅读 · 1 评论 -
vue-json-editor json编辑器
1.安装插件npm install vue-json-editor --save2.使用<template> <div> <p>vue-json-editor</p> <vue-json-editor v-model="json" :show-btns="true" // 是否显示保存按钮...原创 2020-03-19 09:58:00 · 21393 阅读 · 32 评论 -
uni-app 封装请求接口，promise封装请求
1. 在根目录下创建Utils.js 文件（内容如下）let apiReq={ req(obj){ var method = obj.method || "GET"; // 请求方式,默认为GET var url = obj.url || ""; // 请求路径 var data = obj.data || {}; // 请求数据 var header = obj.hea...原创 2020-01-17 11:28:07 · 10916 阅读 · 10 评论 -
uni-app 页面滑动距离后出现回到顶部按钮，回到顶部
html<view class="top" :style="{'display':(flag===true? 'block':'none')}"> <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons></view>jsdata...原创 2019-12-13 17:24:50 · 7763 阅读 · 7 评论 -
删除uni-app顶部标题栏默认返回按钮
1.找到项目根目录下的pages.json文件2.在pages数组中找到你要删除页面顶部栏返回键的对象3.在对象style下加入"app-plus": { //uni-app项目对应节点名称为"app-plus" "titleNView": { "autoBackButton":false } }...原创 2019-12-10 11:09:58 · 6024 阅读 · 3 评论 -
elementUI 表格 prop属性 如何通过判断转换值
1.去掉el-table-column 上原本的prop属性2.scope.row.属性值 <el-table-column label="等级" width="50px"> <template slot-scope="scope"> <span v-if="scope.row.oType === 1"> ...原创 2019-12-02 15:23:20 · 5752 阅读 · 0 评论 -
使用EelementUI时出错Uncaught TypeError: Cannot read property 'disabled' of null
这个是因为在页面中使用了el-dropdown，但是在这个标签里面没有设置它的子元素，所以会报错，在el-dropdown中添加el-dropdown-menu标签就好原创 2019-11-23 10:51:48 · 2466 阅读 · 0 评论 -
Vuex数据管理，组件数据一一对应
需求：我们点击拍照后将拍好的照片放入vuex的state里面管理，给其他的组件调用（此处以组件A，和组件B命名）1.组件A：我们拿到图片数据源，并且在点击拍照的同时创建一个当前时间，将图片源和时间以对象的形式提交vuex。var url = canvas.toDataURL();var date=new Date().toLocaleTimeString()this.$store...原创 2019-11-11 11:57:48 · 359 阅读 · 0 评论 -
Vue 当data中没有数据的时候不渲染该元素
需求：一个Img标签，当imglist数组中有数据的时候渲染imglist中的数据，当用户点击按钮的时候显示url数组中的数据。步骤一：使用三元表达式。但会出现一个bug,首次进入页面imglist中没有数据的话页面会报错。解决方案v-if判断当imglist.length>0也就是最少有一条数据的时候才渲染该dom <img :src="flag?imglist[...原创 2019-11-11 11:27:17 · 3120 阅读 · 0 评论 -
html2canvas截图拍照，结合element小图大图预览
cnpm i html2canvas -S //安装html2canvascnpm i jquery -S //安装jqueryscript标签内引用import html2canvas from "html2canvas";import $ from "jquery";视频区域（所需要截图的区域，博主的区域是canvas的一个帧视频区域，你可以用一张图片代替） &l...原创 2019-11-07 13:58:50 · 622 阅读 · 0 评论 -
vue+elementui搭建后台管理界面-登录
1 node环境安装从node官网下载安装包2 vue-clinpm install vue-cli -g3 新建项目vue init webpack vue-project可保持默认，一路回车完成后cd vue-project npm run dev4 安装并引入 elementuinpm install element-ui --save...转载 2019-10-29 16:52:10 · 11592 阅读 · 0 评论 -
Vue中JavaScript钩子transition圆点半场动画（加入购物车）
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-08-18 20:37:13 · 436 阅读 · 0 评论 -
Vue的npm方式安装，vue脚手架安装，node.js安装，创建vue.js项目
第一步下载和安装node.js，进入node.js中文网，下载电脑对应的版本下载.msi格式安装包，下载完成后点击运行一直下一步完成安装安装完成后打开命令提示符，输入node -v回车，查看到有版本号的出现既是安装成功第二步，安装vue继续在命令提示符 中输入npminstallvue 回车第三步，安装Vue脚手架：命令提示符中继续输入：...原创 2019-01-14 15:36:07 · 380 阅读 · 0 评论 -
vue项目中引入Bootstrap,Jquery
转载于https://blog.csdn.net/Take_up/article/details/77711848注意：1.eslint 检查 步骤可以省略 2.bootstrap文件要放入正确路径文件下原创 2019-01-19 19:11:22 · 187 阅读 · 0 评论 -
Vue项目启动出现Error:Cannot find module 'array-includes'解决方法
解决办法：1.删掉项目中的node_modules文件夹，2.执行npmcacheclean或者cnpmcacheclean命令清除掉cache缓存，3.然后cnpminstall和npmrundev就可以在这台电脑运行你的项目...原创 2019-03-11 10:31:14 · 18970 阅读 · 1 评论 -
Vue组件切换和动画，使用Vue提供的component元素实现组件切换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画实现组件切换</title> <script src="lib/vue.min.js"></script> <style type="text/css"&...原创 2019-08-18 21:39:53 · 473 阅读 · 0 评论 -
Vue中Component全局组件和私有组件的定义和使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>私有组件定义</title> <script src="lib/vue.min.js"></script> </head> <body> ...原创 2019-08-18 22:29:02 · 1367 阅读 · 2 评论 -
Vue中router使用命名视图实现经典布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>router经典布局</title> <script src="lib/vue.min.js"></script> <script src="lib/vue-...原创 2019-08-20 11:11:23 · 443 阅读 · 0 评论 -
vue项目在手机上预览不出来，修改package.config文件没有效果
解决方案：方案一打开你的电脑防火墙，把公用网络防火墙关闭方案二将你目前使用的网络设置为专用网络原创 2019-08-25 20:33:04 · 1110 阅读 · 5 评论 -
vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go .microsoft
创建Vue项目出错，提示vue : 无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=1351701. 以管理员身份运行PowerShell2. 执行：get-ExecutionPolicy，回复Restricte...原创 2019-08-21 21:08:06 · 29276 阅读 · 6 评论 -
Vue中transition-group对列表进行增加删除，transition动画效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画</title> <script src="lib/vue.min.js"></script> <style> .text{ marg...原创 2019-08-18 19:36:51 · 930 阅读 · 0 评论