VUE
关注
分享
扫一扫
山岗下的星空
这个作者很懒，什么都没留下…
展开
-
基于elementUi封装的表单组件
前言：本文章是vue中因为公司的项目页面牵扯到大量的表单，从而诞生，组件的源代码我会放到文章最后，文章写的可能不好，但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率，有问题可以及时探讨QQ：1582340991功能提交校验，输入文本框校验，单个禁用，全局禁用，日期的区间选择，下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏，远程搜索框，插槽使用示例小demovue页面的配置参数释义data获取参数值fields动态配置表单jsall-disable原创 2021-12-10 17:22:43 · 1877 阅读 · 1 评论 -
vue中bpmn-js的使用（创建，编辑，使用）
引用npm install bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle --save使用创建,编辑（包含左侧工具栏和右侧工具栏）<template> <div class="containers"> <div class="canvas" ref="canvas"></div> <div id="properties-panel"></div>原创 2021-06-28 17:18:54 · 7577 阅读 · 7 评论 -
Vue中点击按钮回到顶部（滚动效果)
HTML<div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div></div>CSS.footer .gotop { text-align: center; position: fixed; right: 50px; bottom: 30px; cursor: pointer; padding: 10px; bord转载 2021-06-24 23:07:49 · 1856 阅读 · 0 评论 -
一些赋值方法
新数组名 = 旧数组名.map(iterator => {return {新字段名1: iterator.旧字段名1新字段名2: iterator.旧字段名2}})原创 2021-04-29 10:06:28 · 277 阅读 · 0 评论 -
多个数组中相同位置的元素拿出来组成一个新的数组
代码let arr1 = [1, 2, 3, 4]let arr2 = [11, 22, 33, 44]let arr3 = ['哈哈', '呵呵', '嘿嘿', '嘎嘎']let arr = arr1.map((v, i) => ({name: arr3[i], list: [arr1[i], arr2[i]]}))console.log(arr)效果原创 2021-03-19 10:46:45 · 640 阅读 · 0 评论 -
vue数据可以打印，但是无法更新视图
问题还原代码：// 生成帐号合并信息generateInfo() { this.userList.forEach(item => item.des = `${item.name}_${item.sex}_${item.age}`);},// this.userList为数组 des为文字合并 打印出来了，但视图上并没有解决办法1.generateInfo() { this.userList.forEach(item => this.$set(item, 'd原创 2021-03-04 14:55:31 · 390 阅读 · 1 评论 -
vue登陆页添加enter点击事件
VUE的created的生命周期中直接粘贴，submitForm()更换为自己的事件即可created(){ const _self = this; document.onkeydown = function(e){ let key = window.event.keyCode; if(key === 13){ _self.submitForm();原创 2021-03-01 15:44:45 · 523 阅读 · 0 评论 -
自动填写表单
情景：遇见表单多的页面的时候每次填写都很费劲，此方法就可以自动填写组件 debug/index.vue<template> <div id="debug" v-if="isDebugging"> <div class="all" v-if="isUnfold"> <h3>测试工具台 <el-button size="small" @click="isUnfold=fals原创 2021-02-23 15:55:28 · 1394 阅读 · 0 评论 -
Vue的动态样式修改
Vue的动态样式修改1.利用计算属性，computed写入（多种情况）// 判断input的的padding-right的长度(70,50,10) inputStyle () { return (item) => { const style = {}; if (item.percentageStyle) { styl原创 2021-02-22 18:19:23 · 598 阅读 · 0 评论 -
elementUIinput模糊查询
<template> <div id="app"> <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false"原创 2021-01-19 11:25:01 · 644 阅读 · 0 评论 -
js修改对象数组里的对象属姓名
js修改对象数组里的对象属姓名data为数组name替换descurl替换code_url let data = [ {desc: '超清', thumb: '1', code_url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}, {desc: '高清', thumb: '1', code_url: 'https://media.w3.org/2010/05/sintel/tr原创 2020-12-25 11:11:14 · 586 阅读 · 0 评论 -
vue改变原数组的某一个属性
let a=[{ name:"1",id:1},{ name:"2",id:7},{ name:"3",id:4}]let b=a.map(item=>{ if(item.name==='1'){ item.name="cheng" }else if(item.name==='2'){ item.name="zzzz" }})console.log(a)console.log(b)原创 2020-11-01 19:43:34 · 617 阅读 · 0 评论 -
title的显示(随笔)
created() { this.modify(); document.title = '实名认证'; },原创 2020-10-22 11:13:46 · 153 阅读 · 0 评论 -
VUE登录,注册以及前后台的增,删,改,查
基础文件,mongodb自己配置这是前后台的基本配置文件以及视频,不懂得可以观看下,如视频不能正常播放,请及时留言联系网盘地址1.注册1.1前台1.1.1 写前台页面<template> <div> <h1>注册</h1> <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"> <e.原创 2020-08-08 17:56:40 · 1390 阅读 · 0 评论 -
中央事件总线数据不更新问题
新建until下的js文件,new Vueimport Vue from "vue"export default new Vue错误写法触发<template> <div> <button @click="fun()">兄弟通信</button> </div></template><script>import Bus from "@/until/indexBus.js"ex原创 2020-07-25 11:53:10 · 421 阅读 · 2 评论 -
VUEX的使用---详解
传统vue是单向数据流。如果是兄弟组件之间传值兄弟组件间的状态传递无能为力我们经常会采用父子组件通过正向/逆向传值来对数据进行传递。以上的这些模式非常脆弱，通常会导致无法维护的代码。vuex只能用于单个页面中不同组件(例如兄弟组件)的数据流通。1.安装npm install vuex --save配置vuex文件创建在src中创建store文件夹–>与store.js2.引入4.创建store.js实例import Vue from 'vue'import Vuex..原创 2020-07-24 22:46:09 · 683 阅读 · 0 评论 -
Mock模拟数据的使用
在前端开发的过程中,有后台配合是很有必要的,但是后台数据还没有写好,那么我们需要自己提供或修改接口1.安装mokenpm i --save mokejs2.在src文件下创建相关文件和文件夹3.在mock文件下的index.js设置请求const MocKYaxu=require('mockjs') //MocKYaxu随便起名// 格式 : MocKYaxu.mock('自定义设置请求地址','post/get',调用的json库)MocKYaxu.mock('/xixi/d原创 2020-07-23 19:45:49 · 704 阅读 · 0 评论 -
Axios的异步请求和封装
1.下载axiosnpm i --save axios2.在src文件加下的main.js种添加import axios from 'axios'Vue.prototype.axios = axios3.我是GET请求, created() { //跨域 this.axios({ method: "get", url: "https://m.maoyan.com/ajax/movieOnInfoList?token=&opt原创 2020-07-23 17:59:13 · 760 阅读 · 0 评论 -
VUE的七种动态路由传参
params传参(4种)1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: 'details', component: () => import( '../views/Details.vue') },2.发送数据（1）编程式导航发送数据2种写法 1.this.$router.push("/路径/数据") 示例:this.$router.push('/details/我是从one页面过来的') 2.原创 2020-07-23 16:30:03 · 416 阅读 · 0 评论 -
自定义封装组件
1.在components中创建Title.vue组件<template>T <header> <i class="iconfont icon-back"></i> <span>111111111</span> </header></template><style lang="scss" scoped>header { z-index: 1; position:原创 2020-07-22 17:55:17 · 397 阅读 · 0 评论 -
自定义封装一个吸顶显示隐藏的小指令
效果视频1.定义一个自定义指令title <header v-title> <i class="iconfont icon-back"></i> <span>11111</span> </header>2.在该页面引入vueimport Vue from "vue";3.创建title指令,并测试一下Vue.directive("title", { inserted(el) {原创 2020-07-22 16:54:19 · 192 阅读 · 0 评论 -
Vue中关于Fetch和Axios的get,post请求
**fetch请求**<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>fetch</title> <meta name="description" content="">原创 2020-06-15 20:23:01 · 396 阅读 · 0 评论