Vue
今天星期八
这个作者很懒,什么都没留下…
展开
-
vue + elementui 中 使用了 懒加载的 tree(<el-tree></el-tree>),点击按钮重置tree
【代码】vue + elementui 中 使用了 懒加载的 tree(),点击按钮重置tree。原创 2023-05-10 15:14:14 · 3116 阅读 · 3 评论 -
npm install 时,报错 electron@13.6.9 postinstall: `node install.js`
npm install 时,报错 electron@13.6.9 postinstall: `node install.js`原创 2022-12-15 09:42:38 · 3875 阅读 · 1 评论 -
node安装指定版本 (LTS 长期稳定版本,Current 最新版本)
node安装指定版本 (LTS 长期稳定版本,Current 最新版本)原创 2022-12-15 09:36:58 · 3342 阅读 · 0 评论 -
npm install 安装时i,报错 phantomjs-prebuilt@2.1.16 install: `node install.js`
phantomjs-prebuilt@2.1.16 install: `node install.js` 出错原创 2022-12-15 09:29:27 · 3073 阅读 · 0 评论 -
运行 npm install 时,卡在 loadDep:@babel/types: sill install loadAllDepsIntoIdealTree 不动
npm install 时,一直停留在loadDep:@babel/types: sill install loadAllDepsIntoIdealTree 不动,如何解决?原创 2022-12-15 09:15:03 · 1260 阅读 · 1 评论 -
vue 项目中使 实现粒子动态 背景图
在vue中,实现粒子动态背景图的效果首先安装 插件npm install vue-particles --save-dev在main.js 文件中进行引用注册// 动态粒子import VueParticles from 'vue-particles' Vue.use(VueParticles)在页面中直接使用 <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber原创 2022-04-08 16:06:25 · 2195 阅读 · 0 评论 -
vue 中 watch 监听方法的写法
实现效果描述 :监听form表单中一个值的变化,清空某个值 watch:{ 'form.callPoliceSort':function(newValue){ // 监听form表单中callPoliceSort字段值的变化,变化了将需要清空的值进行清空 console.log('newValue',newValue); this.form.callPoliceType = ''; this.form.callPoliceClass = '';原创 2022-03-25 17:15:52 · 6967 阅读 · 0 评论 -
element-ui 中 若依后台默认删除提示框样式修改
vue + element-ui +若依框架,默认的删除弹窗如何修改样式代码如下:需要自定义弹窗的样式/** 删除按钮操作 */handleDelete(row) { const ids = row.id || this.ids; this.$confirm( '是否确认删除排班表中警员编号为"' + row.policeCode + '"的数据项?', "提示", { customClass: "message-logout", } )原创 2022-03-25 14:53:27 · 4490 阅读 · 0 评论 -
vue 中 自定义组件,并在页面中进行注册使用
vue 中自定义组件(components),并在页面中进行引入注册使用一、首先进行组件自定义,写在components 中二、在需要显示的页面中进行使用先引用 (驼峰名命名法)在component 中进行注册在页面中进行使用...原创 2022-03-25 10:41:59 · 1807 阅读 · 0 评论 -
element-ui 中的 table 去除默认的边框
element-ui 中table 边框如何去除/* 去除表格的边框 */.table_box /deep/ td.el-table__cell { border: none;}.table_box /deep/ th.el-table__cell { border: none;}.user_box /deep/ .el-table::before { left: 0; bottom: 0; width: 100%; height: 0;}注:此处的 .tabl原创 2022-03-25 10:19:44 · 4746 阅读 · 0 评论 -
element-ui中修改 el-table 的样式,头部样式的修改(附效果图)
element-ui 中 表格的默认样式修改原创 2022-03-25 10:00:37 · 2441 阅读 · 0 评论 -
element-ui + vue 实现查看大图(旋转+缩放+全屏)
vue 中实现查看大图的功能(包括缩放,旋转,全屏展示等)<div class="demo_image__preview avatar" v-for="(p,k) in JSON.parse(item.letterOfAdmission)" :key="k"> <el-image style="width: 100%; height: 100%" :src="p.url" :preview-src-list="getPreviewImgList(JSON.p原创 2021-12-29 11:59:45 · 1940 阅读 · 0 评论 -
element-ui 中 使用 treeselect 如何限制只可以选择子节点 ?
element-ui 中 使用 treeselect 如何限制只可以选择子节点?<el-form-item label="指定支部" prop="spare1" v-if="form.noticeObject == '指定支部'"> <treeselect v-model="form.spare1" :options="deptOptions" :normalizer="normalizer" :disable-branch-nodes="tr原创 2021-09-01 15:17:39 · 2077 阅读 · 2 评论 -
elementUi 中如何修改 textarea 的默认高度?
elementUi 中如何修改 textarea 的默认高度?在element-ui 框架中,textarea 的默认高度为 :rows="2"想修改高度的话,直接修改 :rows = “3” 或 :rows = “4” 即可<el-input v-model="form.desc" type="textarea" :rows="5" placeholder="请输入内容" />...原创 2021-06-01 17:13:32 · 8665 阅读 · 0 评论 -
vue 项目打包时报错 npm run build
解决npm run build 时报错的问题解决办法npm run build:prod --report最后,打包完成。原创 2021-05-28 11:21:52 · 416 阅读 · 0 评论 -
如何解决页面刷新时白屏的问题?
如何解决页面刷新时白屏的问题?this.isRouterAlive = falsethis.$nextTick(function () { this.isRouterAlive = true; //写对应的调用接口代码})原创 2021-05-28 11:13:59 · 937 阅读 · 0 评论 -
在vue中实现微信的分享至好友、分享至朋友圈的功能
如何在Vue 中实现微信分享至好友/朋友圈的功能 ?官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html实现方法:在vue 页面初始化时created(){code…} 进行 codeing调用接口实现create(){ this.getShareInfo(); // 页面初始化调用此方法;}methods:{ getShareInfo(){ // 实现如下: //原创 2021-05-27 17:18:59 · 1269 阅读 · 0 评论 -
如何在vue 中实现网页授权,获取用户的openid?
如何在vue 中实现网页授权,获取用户的openid?可参考微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html也可以参考我下面代码中写的思路:授权分为两种:静默授权、用户手动点击同意进行授权以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直原创 2021-05-25 17:28:08 · 4348 阅读 · 2 评论 -
vue中通过router路由进行跳转的页面,写的定时器无法清除,该如何解决?
如何清除定时器?例如:在vue页面中写了一个定时器,并且离开当前页面,在**beforeDestory()**方法中进行了清除,但是定时器并未清除,还在继续执行,这种情况该如何解决? data() { return { timer : null } }created(){ this.currTime = 0; this.timer = setInterval(() => { this.currTime++; },原创 2021-05-25 17:08:42 · 1899 阅读 · 2 评论 -
隐藏element-ui 中时间日期选择器中的 ‘此刻’ 按钮
如何隐藏下图中的按钮(避免在不可选择当天的情况下点击’此刻’的按钮)实现方法如下:首先创建静态css文件-// index.css 文件// 隐藏整个按钮(此刻和确定).el-picker-panel__footer { display: none;}// 隐藏 ‘此刻’ 按钮.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn { display: none;}在main.js 中全原创 2021-03-25 09:07:10 · 3071 阅读 · 0 评论 -
element-ui 中日期时间选择器限制时间的可选范围
vue element-ui 中日期时间选择器限制可选范围通过Picker Options 中的 disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean 来进行设定<el-form-item label="活动开始时间" prop="starttime"> <el-date-picker clearable size="small" style="width: 200px" v-model="form.starttime" ty原创 2021-03-25 09:05:25 · 1301 阅读 · 0 评论 -
解决在vue页面中引入组件,下次点击新增时样式不清除的问题
解决样式不清除的问题<el-form-item label="xx" prop="cvhImgs"> <my-upload :fileList="form.cvhImgs" @changeImages="changeImagesDw" v-if="hackReset"></my-upload> <!-- 此方法是自己封装的 --></el-form-item>通过 v-if 进行清除首先在data 中定义原创 2021-02-01 09:05:35 · 341 阅读 · 0 评论 -
vue中 解决 element-ui中通过v-if动态切换 <el-input />和 <editor />的样式,不清除的问题
通过 (:key=“1” )-----------(:key=“2”) 进行切换清除样式 <el-form ref="form" :model="form" :rules="rules" label-width="160px"> <el-form-item label="参数键值" prop="configValue" v-if="form.remark == '0'" :key="1"> <el-input v-model="form.configValue原创 2021-02-01 08:57:31 · 1746 阅读 · 0 评论 -
element -ui 中 table 中的行可选可不选的写法
js 写法checkboxInit(row,index){// console.log('row',row.isConfirm); if (row.isConfirm == '1')//这个判断根据你的情况而定 return 0;//不可勾选 else return 1;//可勾选 },在table 中的写法※ 记得在单选框的这一列进行添加选择方法。<el-table-column type="selection" width="100" align="center"原创 2021-01-19 10:19:26 · 244 阅读 · 0 评论 -
vue实现全局时间过滤器
import Vue from ‘vue’//全局过滤器Vue.filter(‘dateFmtTime’, input => {if (!input) return “–”input = input.toString().length < 13 ? input * 1000 : input;var date = new Date(input);var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 1原创 2020-10-24 11:19:55 · 356 阅读 · 0 评论 -
前端项目集(踩坑)
小程序标签(空格分隔): 小程序三目运算符:<view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>要给轮播图设置圆角,不滚动的时候还好,一但滚动圆角就无效了。给最外面盒子加上“overflow: hidden” 就好了vue element-ui 后台管理element-ui dialog弹窗默认的点击空白处也就是非弹窗区会关闭,有时候不太合适,所以要设置为不可关闭。它本身自原创 2020-08-28 11:25:52 · 313 阅读 · 0 评论 -
vue 嵌套路由,router-link-active的问题
效果在点击主路由的时候,会有一个active的样式但是在点击了子路由之后:一开始我是用vue里面router-link-exact-active来做的在子路由点击的时候,要保证此时当前的激活路由还处于active状态,显然如果用router-link-exact-active 来做的话 ,就不能实现了。即在你点击子路由的时候,主路由的active样式就消失了,router-link-...原创 2019-11-17 23:36:00 · 1906 阅读 · 2 评论 -
vue cli 4 快速搭建项目
搭建项目流程1⃣️ 准备工作:node -vnpm -vvue -V2⃣️ 进入一个项目,创建项目命令如下:vue create project-one3⃣️ 在这里我选择手动配置:4⃣️ 选择你需要的配置项通过⬆️ ⬇️箭头选择你要配置的项,按空格是选中/取消,按 a 是全选,按 i 是反选。配置说明:? Check the features needed fo...原创 2019-10-24 15:24:25 · 197 阅读 · 0 评论 -
graphQL(四)——GraphQL案例(二)
如何在Vue中使用Apollo ?在vue组件中使用 apollo在你的应用程序中安装了vue-apollo 之后,所有的组件都可以通过apollo 这特殊选项来使用。在一个 .vue 文件中:<template> <div>My component</div></template><script>export de...原创 2019-10-24 09:36:47 · 347 阅读 · 0 评论 -
Vue中组件传值(父组件向子组件传值+子组件向父组件传值+兄弟组件传值)
父组件向子组件传值具体代码如下:父//父<template> <div> <value-header :detail=detail></value-header> </div></template><script>import ValueHeader from "...原创 2019-09-29 08:35:03 · 157 阅读 · 0 评论 -
node+express搭建服务器,连接mongoDB写接口
以分类管理为例,编写接口接着上次的讲解路由模块化以及配置路由,在上节都讲过了,如有不清楚,可以点开上次的进行学习。先在数据库中创建集合,并在集合中添加数据通过接口进行添加数据router.get('/test',function(req,res){ Category.insertMany([ { "category_id":"001...原创 2019-07-26 08:35:56 · 980 阅读 · 0 评论 -
VsCode 用脚手架快速搭建项目
VsCode 搭建项目用脚手架node -vnpm -vnpm install -g vue-cli如果报错Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ 点击链接vue init web pack test? Project name test? Project descr...原创 2019-07-04 09:53:47 · 3810 阅读 · 0 评论 -
mac 安装 npm install -g vue-cli报错
npm install -g vue-clinpm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)npm WARN checkPermissions Missing write access to /usr/local/lib/node_modul...原创 2019-07-04 09:37:35 · 5110 阅读 · 2 评论 -
splice()方法
splice()方法用于从当前数组中移除一部分连续的元素,还可以在移除的位置进行元素的插入。该方法以数组的形式返回被移除元素的新的数组。语法:array.splice( startDelete, deleteCount,添加的元素)// arr.splice(1),这样的话就只会返回原数组的第一个下标的元素,因为第一个参数代表的就是 数组中移除元素操作的 起点,之后的全部都会被删除。e...原创 2019-04-04 09:39:07 · 2299 阅读 · 0 评论 -
在浏览器上安装VueDevtools工具
首先需要安装的就是vue devtools这里我们推荐从github上进行安装1.GitHub下载地址:https://github.com/vuejs/vue-devtools2.下载vue-devtools完成后打开命令行选择进入vue-devtools文件夹,使用命令 npm install 对其进行编译3.编译通过后npm run build 4.通过后,打开v...原创 2019-03-22 17:33:08 · 436 阅读 · 1 评论 -
Vue项目搭建流程
1、全局安装脚手架(1) 3.X版本1 npm install ‐g @vue/cli // 回车(2) 低版本1 npm install ‐g @vue/cli‐init // 回车 (推荐两者都安装,先安装新版本,再安装低版本)2、检测是否安装成功1 vue ‐v (以上操作只执行一次即可)3、通过cmd创建项目文件夹先通过命令行进入你想创建文件夹的目录,比如创建到e盘等根目...原创 2019-03-19 09:22:58 · 203 阅读 · 0 评论 -
Vue项目中遇到的问题(总结)
Vue项目中遇到的问题:使用vue读取本地json文件: 需要安装vue-resource插件,然后使用它的$http.get来读取json文件 json文件应该是必须放在static目录下npm install vue-resource在main.js文件中添加:...原创 2019-03-06 13:37:25 · 4642 阅读 · 0 评论 -
Vue主要问题
Vue主要问题用Vue搭建一个项目:https://blog.csdn.net/junshangshui/article/details/803764891.Vue的生命周期以及对Vue的认识每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩...原创 2019-03-06 13:06:25 · 717 阅读 · 0 评论