![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
前端小问题
这个作者很懒,什么都没留下…
展开
-
vue通过js实现对一个元素的点击
一,给需要点击的元素加上ref;<!-- 调用摄像头 --> <input ref="inputResult" accept='image/*' type="file" capture="camera" style="display: none;"/>二,在你的函数中调用。这样你调用onSelect函数就实现了打开相机的操作了onSelect(item) { this.$refs.inputResult.click();//调用相机原创 2021-12-15 18:07:23 · 1445 阅读 · 0 评论 -
vue+vant实现上拉加载和下拉刷新列表
常见问题不在进行功能描述了<div class="list-item"> <van-pull-refresh v-model="loadMore.refreshing" @refresh="onRefresh"> <van-list v-model="loadMore.loading" :finished="loadMore.finished"原创 2021-11-29 16:28:42 · 875 阅读 · 0 评论 -
vue-cli环境安装node-sass问题
错误描述error in ./src/views/index/carNumber.vue?vue&type=style&index=0&id=27bb9816&lang=scss&scoped=true& Module build failed (from ./node_modules/postcss-loader/src/index.js):解析:这是说明你安装的node-sass版本过高了,需要降低版本重新安装解决方法:1,在package原创 2021-11-24 09:33:17 · 988 阅读 · 0 评论 -
vuex刷新页面数据消失解决方案(vuex-persistedstate)
1,第一步当然是安装插件安装vuex-persistedstate:npm install vuex-persistedstate -s2,当然是在你的store文件夹的index.js中引入插件import createPersistedState from ‘vuex-persistedstate’3,当然是配置了,可以直接在你的store文件夹的index.js中配置.plugins:[createPersistedState({storage:window.sessionSt原创 2021-11-02 18:13:49 · 546 阅读 · 0 评论 -
从零开始的创建vue-cli的全过程[完整版 mac版] 部分内容转载自(㭌(mou)七)的博客
mac版本安装的同学们如果安装不上,可能是权限问题.在命令前面添加tudo如下:npm install --global vue-cli 改写成 sodu npm install --global vue-cli 然后会让你输入密码,也就是你电脑的登录密码,获取全局安装的权限1,原文地址https://www.cnblogs.com/pyjblog/articles/14349370.html一、安装Node环境1.下载地址:https://nodejs.org/en/ 安装过转载 2021-10-27 18:19:48 · 183 阅读 · 0 评论 -
vue修饰符汇总
一,事件修饰符。<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符原创 2021-09-29 10:59:06 · 160 阅读 · 0 评论 -
element中给select添加全选的option
一,元素中的数据<el-select v-model="my_stars" placeholder="国家" multiple collapse-tags > <el-option label="全球" value="全球"></el-option> <template v-for="(item, index) in languages"> <el-option原创 2021-01-27 09:55:29 · 1039 阅读 · 0 评论 -
element中table数据渲染(一个列表两个数据源混合渲染)
一,这里是元素。2,这里属数据构造,因为我们需要用到国家数据,而国家的数据和列表的其他数据是分开的两个对象,要在一个table中使用这个是对国家进行数据修改3,4,效果原创 2021-01-04 19:52:08 · 7051 阅读 · 0 评论 -
vue中安装的cli脚手架使用es6之后会自动过滤格式不正确会显示黄色警告解决办法
直接注释掉这部分代码就可以,但是需要重新npm run dev原创 2020-12-31 15:51:51 · 297 阅读 · 0 评论 -
vue中使用正则表达式同时添加判断如果有汉字将数据清空
<el-input v-model.trim="model.faceEffectName" @change="isEnglishString" placeholder="输入英文名字,用于腾讯识别文件夹名"></el-input> isEnglishString() { var englishString = this.model.faceEffectName.replace(/[^A-Za-z0-9]/g,'空') console.log(engli..原创 2020-12-23 13:58:22 · 991 阅读 · 1 评论 -
关于element的form中打开初始化以及二次打开该组件数据没有清空的bug解决方法
一,问题描述。1,在使用vue+element开发的时候,有时候需要进入该组件就对该form表单就对这个表单进行数据清空,也就是我们常说的那种初始化。<el-form size="small" :model="model" :rules="rules" label-position="left" label-width="120px" ref="createForm"> <el-form-item label="冻结类型" prop="typeId">原创 2020-12-10 15:01:37 · 1445 阅读 · 0 评论 -
element-ui中关于select无法回显的问题记录
问题描述:给的是value的值,没有正常显示lable中的值,是因为当select中只赋值了value没有赋值lable的值时,系统会默认将value和lable共用。我们在绑定数值时value=“1” 是绑定的字符串,所以下面重新将value 赋值为2,同时lable也默认成2,就显示了2.方法:使用**:value=“1”**就可以回显。<el-select v-model="moreForm.isVip" placeholder="奖励会员" style="width:100%">原创 2020-10-27 14:14:13 · 1414 阅读 · 0 评论 -
echart手动计算y轴标尺最大值及间隔和去除y轴因为数据过大超出图表显示范围
问题描述:1,y轴的数据因为过大,超出了图标显示范围。2,自动计算y轴的最大最小值,并更改坐标中两个标示数字的间距大小问题1图片显示:解决方法:这里我主要写一些echart的参数配置以及计算,vue里面的东西涉及的并不多问题一的解决方法:因为你是用了多个y轴,所以要给每一条数据都标示他是按哪个坐标轴来显示的如下图, yAxisIndex: 1, 指定是这条数据中是以 **yAxis【】**中的下标为1的对象所代表的的坐标轴为基准的。yAxis【】第一个对象是图标左侧的y轴,第二个对象是右侧的y轴原创 2020-10-23 10:40:12 · 2665 阅读 · 0 评论 -
全局设置按钮权限(通过vuex)
一,安装vuex,这里不再讲解。二,在store的index文件夹中添加全局的store,并将其挂载到全局实例上去。import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { user: { userId: localStorage.getItem('userId'), username: '', login: f原创 2020-10-10 17:34:50 · 595 阅读 · 0 评论 -
element中列表(table)中套用上传图片(upload)的图片回显
首先是看效果:0,下面是完整的代码元素:<template> <el-table :rules ='rules' :data="getGiftListTableData" border style="width: 100%"> <el-tab原创 2020-09-11 19:52:36 · 4361 阅读 · 0 评论 -
element-ui中select下拉菜单中visite-change的使用,只在select中的option显示和隐藏时调用
一,元素@visible-change=‘getGiftListTable’ 需要写到select标签中<el-select v-model="model.giftIds" value-key="giftId" placeholder="礼物特效" multiple @visible-change='getGiftListTable'> <el-option v-for="item in giftList" :key="item.giftId" :labe原创 2020-09-01 18:31:26 · 7216 阅读 · 2 评论 -
element-ui中表格中嵌套上传图片
实现效果描述:将列表中每一行的两张图片保存到一个对象中,再将所有对象保存到数组中,点击提交时一起提交。实现方法:一,元素中action="/" :http-request="(file)=>{return imggreySuccess(file ,scope.row)}"这两句很重要,将上传的文件和列表的这一行的数据通过函数传过去,可以在函数中接收到数据,file就是上传的图片的数据文件<el-table :data="getGiftListT原创 2020-09-01 18:25:29 · 3677 阅读 · 4 评论 -
vue中子组件向父组件传参
一,跟非兄弟组件之间的传参一样。发送自定义事件 subbtn。subbtn只能全部是小写字母。this.$emit("subbtn", [beforString, this.GiftListArrey]);第二,在父组件中接受。subbtn事件绑定了一个函数getConditionData <app-activity-condition-edit @subbtn='getConditionData'></app-activity-condition-edit>第三,函数原创 2020-08-27 10:28:03 · 141 阅读 · 0 评论 -
vue中通过路由实现面包屑功能
1,先在router。js中添加注册一个地址,path:是你以后跳转的时候使用的路径,这里是自定义的,只需要在使用的时候与其对应。{ path: '/canteenstatisdayDetial', component: _import('modules/canteen/canteenstatisdayDetial/canteenstatisdayDetial'), name: 'canteen...原创 2020-08-20 19:39:52 · 3074 阅读 · 0 评论 -
vue-cli中怎样使用rem进行布局
rem布局的原理就是获取手机屏幕宽度,将屏幕宽度平均分配成多少份,每一份的宽度将其赋值给最大的document的fontsize。resize();window.onresize = function () { resize();}function resize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth; if (deviceWidth >= 750) {原创 2020-08-20 09:15:37 · 363 阅读 · 0 评论 -
vue自定义指令
一,概念。// 注册Vue.directive('my-directive', {//这里面都是自定义指令的生命周期。 bind: function () {}, //绑定 inserted: function () {}, // 插入 update: function () {}, // 更新 componentUpdated: function () {}, unbind: function () {}})二,例子// 注册一个全局自定义指令 `v-focus`当页面翻译 2020-08-13 10:54:46 · 176 阅读 · 0 评论 -
vue父组件调用子组件的函数和父组件向子组件传参
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title>父组件向子组件传值</title> </head> <body> &l...原创 2020-01-15 10:49:52 · 550 阅读 · 0 评论 -
vue中怎样在父组件中调用子组件中的函数
解释:我们可以将子组件通过ref保存到全局ref中,通过ref调用一,首先需要引入你需要的组件。这里不再说了,如果需要请点击下面链接。[添加链接描述]https://blog.csdn.net/weixin_43989837/article/details/107510334(https://blog.csdn.net/weixin_43989837/article/details/107510334)二,在父组件的组件引用的元素中 添加ref属性如下。 <!-- 编辑多语言弹出框 -->原创 2020-08-11 08:55:44 · 628 阅读 · 0 评论 -
vueX学习1.0vuex的使用方法 白话解释(会这些就够了)
一,大概构架。strore对象中包含以下属性以及方法:–state,存在的状态,这里是存放数据的,所有的数据都在这里存放。(个人理解为全局变量)。–getters,用来获取state中的数据。–mutation,用来更新状态的一些逻辑写在这里,虽然一些js逻辑在他里面,但是你不能直接操纵mutation,但是可以通过actions操控他。(个人理解就像是一个函数容器,跟methods相似)–actions,actions操控mutation。同步用conmit,异步用dispatch;–modu原创 2020-07-28 12:59:37 · 155 阅读 · 0 评论 -
vue学习1.5 vue脚手架中的config配置
// const path = require('path');module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'', */ // 项目部署的基础路径转载 2020-07-23 17:47:43 · 183 阅读 · 0 评论 -
vue1.4 配置禁止上传到Git仓库的文件
当我们使用git管理项目时,我们的项目中经常会安装一些来自npm以及cnpm的一些组件插件,这些东西占用空间比较大,上传到git库所用的时间让人难受,所以我们需要配置一下,在我们每次提交的时候自动过滤掉这些文件夹。这里配置了node_modules以及他下面的几个文件夹的内容都不会上传到git库。...原创 2020-07-23 17:44:03 · 625 阅读 · 0 评论 -
vue学习1.3 安装并使用axios进行数据请求
一,安装axios模块。首先需要打开控制台,cd到项目文件夹二,安装完成之后需要将axios组件引入需要使用的页面。import axios from 'axios'三,请求使用。(官方文档http://www.axios-js.com/zh-cn/docs/)get请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); })原创 2020-07-23 17:38:54 · 102 阅读 · 0 评论 -
vue1.2 watch和computed计算属性使用
一,computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择watch原创 2020-07-22 15:23:07 · 120 阅读 · 0 评论 -
vue学习1-1 怎样使用自己写好的组件
一,自己书写组件。<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div></template><script>export default { name: 'App'}</script><style>#app { font-family: 'Aveni原创 2020-07-22 12:24:20 · 251 阅读 · 0 评论 -
vue父组件向子组件传参
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title>父组件向子组件传值</title> </head> <body> &l...原创 2020-01-20 14:07:16 · 425 阅读 · 0 评论 -
element-ui的el-table-column组件使用时开始时间小于结束时间
一,元素书写 <el-date-picker :picker-options="dataForm.pickerOptionsStart" //在data种添加了两个变量,通过:picker-options将其与组件进行绑定。 v-model="dataForm.startdate" format="yyyy-MM-dd" value-format="...原创 2020-04-20 19:50:38 · 501 阅读 · 3 评论 -
vue中通过函数传参数
一,通过点击事件本身的js特性传参。<view class="center_menu"> <view class="menu_item" v-for="item in menus" @click="toAddress(item.address)"> <image :src="item.icon" mode="aspectFill" ><...原创 2020-03-18 11:50:40 · 9652 阅读 · 0 评论 -
vue中下载文件
一,使用js进行下载。因为vue是在本地启动的 一般情况会在打开的页面上自动添加自己的本地地址,所以需要在打开地址上添加一个请求协议,“http获者https”。var hrefUrl ='http://'+'192.168.1.253/121/12.xlsx'; window.open(hrefUrl);二,使用a标签直接下载。<a href="下载文件的的地址" downloa...原创 2020-03-14 09:53:52 · 507 阅读 · 0 评论