在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示： 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 <template><textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea> </template> <script> import "codemirror/theme/ambiance.css"; import "codemirror/lib/codemirror.css"; import "codemirror/ad...
前言 项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码 正文 <script> var map,marker; export default {data(){return{arriveCoor:[108.947025,34.2613255],//坐标点arrive:"",//位置信息}},mounted() { mapDraw(this.arriveCoor),mapCoor(this.arriveCoor)},methods:{mapDraw(arriveCoor){map = new AMap.Map(map-location, { //map-location是嵌地图div的idresizeEnable: true, //是否监控地图容器尺寸变...
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级。当然,菜单不能写死，因为菜单也许不止两级,所以我们需要递归来实现。根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码: 请求数据格式 [{name: "首页",id: -1,icon: "el-icon-picture-outline-round",url: "/index",children: []},{name: "按钮",id: 20,icon: "el-icon-me...
因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下： drawer.vue<template><div class="drawer"><div :class="maskClass" @click="closeByMask"></div><div :class="mainClass" :style="mainStyle" class="main"><div class="drawer-head"><span>{{ title }}</span><span class="close-btn" v-show="closable" @click="closeByButton">X</span></div><div class="drawer-body"><slot/>...
表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容： <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"><el-table-column type="index" align="center" fixed></el-table-column><el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column><el-table-colu...
vue通信方式有很多，项目中用的比较多的的有 pros、vuex、$emit/$on 这3种，还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。很多时候我们都是只会使用api，而懂得原理以及实现，但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的。所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下。这也是自己学到大佬的的东西后并...
后台方法的参数必须是@RequestBody修饰的。 前台关键代码: axios ( {method : post,url : api.exportPlayTime , // 请求地址data : {choose : type,begindate : startDate,enddate : endDate},responseType : arraybuffer,observe: response,} ).then ( ( res ) => {const fileName = ""+filename+".xlsx"let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});...
交错过渡效果花里胡哨，华而不...真香基于vue的，需要你对 vue 的 transition 和 transition-group有过使用和了解。 transitionvue的文档对 transtion 组件已经有了很详细的 分析 了。 这里说一下我的理解： transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。 这个合适的时机是： beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)enter dom 插入页面之后的 下一帧(对应下图的...
本文代码仅针对 Vue CLI 3.x 生成的项目有效，但是在第二步配置的时候，可以直接配置 webpack.externals，所以本引入思路是通用的，并不局限于该项目 资源AMap 准备-入门教程 引入 AMap在 public/index.html 文件 </body> 前引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>配置 Webpack项目根目录新建配置文件 vue.config.js，填入内容： module.exports = {confi...
定义一个banner.js文件，代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) {//实例化时，可传的参数this.whiteList = [container,controller,size,imgs,size,grid,index,fnTime,boxTime,type];//容器将包容控制器this.container = .banner;...
当vue单页面需要替换参数并刷新页面时，这个时候使用this.$router.push或this.$router.replace会发现路由改变了，但是页面上的数据并没有实时刷新。在网上找到了以下几种方法，亲测可用：this.$router.go(0)在具体页面中，先通过this.$router.push或this.$router.replace替换路由，随后调用this.$router.go(0)，页面就会强制刷新，但是该强制刷新与F5刷新效果类似，页面会有空白时间，体验感不好；provide/inject首先在app.vue页面...
小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽， 全局指令我是写在main.js中 Vue.directive(drag, {inserted: function (el) {el.onmousedown=function(ev){var disX=ev.clientX-el.offsetLeft;var disY=ev.clientY-el.offsetTop;document.onmousemove=function(ev){var l=ev.clientX-disX;var t=ev.clientY-disY;el.style.left=l+px;el.style.top=t+px;};document.onmouseup=function(){document.onmousemove=nu...
下面给出一个效果图，我今天要说的就是实现下图这种多个倒计时很多时候我们做只有一个倒计时的情况比较多，比较简单只需要一个定时器setInterval，算出来赋赋值就好， 但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了 拿我自己的vue项目举个例<!-- template --><div v-for="(item,index) in list" :key="index" class="act_item"><h1>{{ item.title }}</h1><img :src="item.pic" alt=""><div class="act_info"><h...
Emotion 一个用于vue的表情输入组件 https://gitee.com/jiangliyue/vue_expression_input_module index是使用示例，emotion是组件代码（这里用的是微信表情包的地址，大家可根据需要修改） 下载安装启动项目查看效果 npm installnpm run dev Emotion文件夹下Emotion文件说明 实现原理是根据字段对在线表情包图片进行匹配替换 代码中 img 标签的地址即为表情图片地址，可自己根据需求替换mounted () {const name = this.$el.innerHT...
后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。左边为菜单，分为两级，右边为图表显示区域，有增删改查的按钮。 表的结构 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;-- ---------------------------- -- Table structure for t_auth_rule -- ---------------------------- DROP TABLE IF EXISTS `t_auth_rule`; CREATE TABLE `t_auth_rule` (`id_pk` bigint(20...