一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input><el-col :span="10" class="mt10"><el-upload class="upload-demo" :file-list="fileList2" :action="domain" :before-upload="beforeAvatarUpload" :data="form":on-remove="handleRemoveQrgLogo" :on-success="handleAvatarSuccess" list-type="pic...
1. 引用vue.js <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script><meta charset="utf-8"><title>JS Bin</title> </head> <body><div id="root"><input type="text" v-model="inputValue"><button @click="handlerAdd">提交</button><ul><li v-for="(item,index) of lists" :key="index" @click="handlerDel(index)">{{item}}</li></ul></div><script>new Vue({el: #root,data: {inputValue: ,lis...
做的产品证书管理系统使用的是VueJs和ElementUI，现将遇到的一些知识点记录一下。 VUe全局变量的实现全局变量专用模块Global.vue是以一个特定模块来组织管理全局变量，需要引用的地方导入该模块即可。使用方法如下： 将全局变量模块挂载到Vue.prototype里，在程序入口的main.js里加下面代码： import Global from ../components/Global.vue Vue.prototype.global = Global挂载后，在需要引用全局变量的模块时，不需要再导入全局变量...
Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。 typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。 Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越?受大家的关注了。 安装typescript npm install -g typescript tsc...
vue弹窗组件的样子我们先看一下，我们要实现出来的弹窗组件长什么样子：呐，我们要用vue组件实现的弹窗就是这个样子，跟我们用js插件实现的效果一样，下面我们开始讲述怎么实现一个通用的vue弹窗组件。 实现vue弹窗组件需要的知识是vue组件，当然最基础的是vue的知识，我假设大家是有一定vue功底的，然后你还需要了解： 1、vue的事件系统，vue组件间的单项数据流，props从父组件向子组件传递数据，子组件通过事件emit向父组件传递事...
业务需求：将heatmap引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style>.heatmap {width:1900px; height:1900px;}</style><script src="js/heatmap.min.js"></script><script src="js/jquery.js"></script> </head> <body> <input id=xxx type=hidden value=""><input id=yyy type=hidden value=""> <input id="array" type="button" valu...
什么是vue插件? 从功能上说，插件是为Vue添加全局功能的一种机制，比如给Vue添加一个全局组件，全局指令等； 从代码结构上说，插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数，还可以接收一个可选的参数，用于配置插件：var myplugin = { install:function(Vue, options){ ... } } 从意义上来说，正如jQuery的$.fn使jQuery有了一个庞大的生态一样，Vue的插件机制使Vue形成了一个生态系统，你可以...
本文介绍了Vue 实现展开折叠效果的示例代码，分享给大家，具体如下：效果如见：1.html代码<!DOCTYPE html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js文本段落展开和收拢效果</title><script type="text/javascript" src="//www.gxlcms.com/ajaxjs/jquery-1.6.2.min.js"></script> </head> <body><div id="container"> <div id="wrap"><div><h1>这一段文字是可以折叠展开的，点击下面...
因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处 搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种 flow-chart 代码写法繁琐，不是json就可以解决，效果也比较丑,PASS darge-d3 github :https://github.com/dagrejs/dagre-d3 效果图下载里面的demo,改一下json就可以了 // States var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", "CANCELED", "ABOLISHED" , "DELETED",...
最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下代码如下:<el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: createAt, order: descending}" @sort-change="sortChange">如图所示,表格最前面有一个复选框 代码很简单<el-table-column type="selection" width="65"></el-table-column>删除按钮的代码如下:代码如下:<el-b...
因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。 进入正题，先看下效果图： 其实js做这个效果还是挺简单的，因为在css中我们可以设置一个元素的 position: fixed; ，这样它就可以固定在那里，这样不管页面怎么滚动，它的位置都不受影响，所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可...
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。 以bootstrap-vue中的Alert组件为例，分一下几步进行： 1、定义一个vue文件实现对原组件的再次封装 main.vue <template><b...
在实现省市二级联动时，如果省份和城市写在一个数组对象中。可以根据，点击某个省份时获取到目标省份的id 是否同 数组中的某个对象id一致 来判断 iView中的on-change事件 on-change事件：即选中的Option变化时触发，默认返回 value。（value在这里只支持String和Number类型）1、html部分<template><Form ref="formValidate" :model="formValidate" :rules="ruleValidate"><FormItem prop="province" label="省份"><Select v-model=...
一、在webpack-dev-conf.js文件中：1、在const portfinder = require(‘portfinder)后添加如下内容 const express = require(express) const app = express() //请求server var appData = require(../mock/goods.json) //加载本地数据文件 var apiRoutes = express.Router() app.use(apiRoutes) //通过路由请求数据2、找到devServer,在里面加上before（）方法 devServer: {clientLogLevel: warning,historyApiFallback: {rewrites:...
前言笔者最近在学习使用react，提到react就绕不过去redux。redux是一个状态管理架构，被广泛用于react项目中，但是redux并不是专为react而生，两者还需要react-redux建立一座桥梁。同时，redux架构规定只能发送同步action，要想发送异步action就需要结合中间件如redux-thunk、redux-saga等，所以说要想搞定redux还真是不容易啊，光名词就这么多。笔者以前也接触过一点vuex，vuex对笔者这样的菜鸡相对友好，但是vuex是和vue配套的，...