canvas API 文档:https://www.canvasapi.cn/ 一.在html中使用canvas canvas 元素用于在网页上绘制图形.  在html中,使用 document.getElementById("myCanvas") 找到相应元素,然后继续下一步操作. 二.在vue中使用canvas <template> <div id="app"> <p>vue项目中测试canvas</p> <

前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下,我选择第二天重头来过,一定要找到什么原因... 结果!血的教训告诉我,记录教程的时候,一定要有实践基础,切不可敷衍了事,不然别人看你的文章只是在浪费时间. —————————— vue调用高德地图拢共分三步: 1.去高德开发者平台申请key: 2.安装vue-amap: 3.使用组件调用地图 1.注

基于canvas的数字/数字+字符验证码   SIdentify.vue 组件 <!-- 基于canvas的数字/数字+字符验证码 --> <!-- 调用格式 <s-identify @func="getMsgFormSon" :isRefreshCode="isRefreshCode" :identifyCodes="identifyCodes" //可选传,选传写法有要求 ></s-identify>

起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件mousedown,mousemove,mouseup,mouseleave. 第二在DIV标签内有img,canvas两个标签,一个负责图片展示,一个负责绘制矩形. 其中img与DIV标签的大小相当,canvas是根据DIV标签position定位的以保证鼠标事件在图片上绘制矩形不会有偏差. 以下就是组件的全

一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk引入有两种方式,一种是页面直接引入 <script type="text/javascript" src="http://w

<template> <div class="hello"> <!--touchstart,touchmove,touchend,touchcancel 这--> <button type="" v-on:click="clear">清除</button> <button v-on:click="save">保存</button> <ca

如图所示: 画布组件:dashboard.vue <template> <div> <canvas ref="canvas" v-if="change" id="canvas" width="600" height="400" style="width: 300px;height: 200px;"></canvas> </div>

整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙部分哦"></script> 2.在bulid/webpack.base.conf.js配置文件中配置BMap,在mod

这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾.当然童鞋们有更好的意见的请留言,一起学习进步. 本次demo实现的是简单的百度搜索页面,用到了vue和百度接口,采用了单页实现,没有使用vue-cli.最初,要用vue实现接口功能我很懵,就去找资料查阅,网上的资料乱七八糟,bug满篇.最后自己借鉴“前人”的经验,在修改了所有bug,又完善了一些用

最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:“@CrossOrigin“注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请指定RequestMapping中的method类型在试一下.

报错信息: 代码信息:调用一个tree组件,选择一些信息 <componentsTree ref="typeTreeComponent" @treeCheck="treeCheck" :isClearAllChecked=true :defaultProps="defaultProps"> </componentsTree> 选择之后返回选中数据信息,并且在父组件中给data中的数组(type.typeName)赋值: d

经过网上查找很多资料,发现很多只有vue+cordova的项目整合,但是vue使用cordova插件的文章很少,现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行过程记录下来: 先上项目结构目录 cordova项目创建 1.安装cordova环境这个这边就不描述了,网上很多教程2.创建cordova应用 cordova create app com.demo app cordova create 创建cordova项目 app为目录 com.demo命名空间

<template> <div id="header"> <!-- 调用变量 --> <h1>{{ msg }}</h1> <!-- 3:调用组件的方法 --> <p>{{ webInfo() }}</p> <p>{{ webArea() }}</p> <!-- 2:显示用户信息组件--> <vProduct></vProduct>

一创建一个 options.js 代码为: export const option1 = { bar: { title: { text: '珠海猪场' // 指定图表标题 }, credits: { enabled: false }, chart: { backgroundColor: 'black', type: 'bar' }, plotOptions: { column: { colorByPoint: true }, line: { dataLabels: { // 开启数据标签 ena

1.下载 Moment 网站: http://momentjs.cn/ 2创建一个vue的文本格式    admin.vue 3.定义给值 代码如下 <template> <div style="backgroundColor: black;">   <div> <div style="width: 40%; float: left"> <el-card class="box-card" st

html: <div class="paymentHtml" v-html="paymentHtml"></div> script: data() {        return {              paymentHtml:''        }      } 菜鸟第一次调用,不足之处请原谅.

this.$parent或者 this.$root 在子组件中判断this.$parent获取的实例是不是父组件的实例 在子组件中console.log(this.$parent)  在父组件中console.log(this) 看看console出来的两个实例是不是同一个 如果是同一个  就可以在子组件中通过this.$parent.属性名,this.$parent.方法名     来调用父组件中的数据或者方法 在lsd-contact-item中this.$parent获取到的父组件实例不是

1.配置proxyTable 3.调用接口,将接口地址替换为配置的‘/api’

我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/other/kuaidi/index.vue export const kdcompanyOptions=[ {value: "shunfeng", label: "顺丰"}, {value: "shentong", label: "申通"

有个挺好用的插件能很好地实现vue生成海报图,虽然有一定的限制,但基本需求还是能实现的 1.安装 npm i vue-canvas-poster --save 2.全局配置 // or Global Install import Vue from 'vue' import vueCanvasPoster from 'vue-canvas-poster' Vue.use(vueCanvasPoster) 或者按需引入 import vueCanvasPoster from 'vue-canvas-

this.$emit是父级向自己传值 第一步在父级页面创建自己页面的引用 <template> <div> <edit ref="edit" @refresh="search"></edit> //@refresh 这个命名可以自己改,edit是你子页面名字 ,search是我的方法名,ref就是我调用子页面弹窗的名字 </div> </template> <script> impo