vue.js
奘倥城
行则将至,做则必成
展开
-
基于vue的图片裁剪vue-pic-clip
1:安装npm install vue-pic-clip2:使用main.js里面import VueClip from 'vue-pic-clip'Vue.use(VueClip)3:组件内//图片上传<template> <vue-clip style="height:160px;width: 120px;" :accept="option.accept" v-model="option.img"原创 2020-05-26 21:54:12 · 462 阅读 · 0 评论 -
基于Vue实现元素拖拽效果
1:先理解clientY pageY screenY layerY offsetY的区别1:clientY 指的是距离可视页面左上角的距离2:pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)3:screenY 指的是距离屏幕左上角的距离4:layerY 指的是找到它或它父级元素中最近具有定位的左上角距离5:offsetY 指的是距离它自己左上角的距离2:思路1:onmo...原创 2020-04-21 15:25:26 · 1084 阅读 · 2 评论 -
(element-ui)v-for动态数据循环表单验证的处理
1.功能需求标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?...原创 2020-04-09 10:48:41 · 1839 阅读 · 0 评论 -
干货!!!Vue 导航守卫
全局守卫每次路由跳转都会被触发router.beforeEach((to, from, next) => { //全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用 //数据校验时,非常有用if(to.fullpath==="/home"){next('/login')} console.log("全局---------------------") ...原创 2020-03-25 13:44:12 · 83 阅读 · 0 评论 -
vue跨域
一、后台更改header1:header('Access-Control-Allow-Origin:*');//允许所有来源访问 :2:header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 二、使用JQuery提供的jsonp (注:vue中引入jquery)methods: { getData () { var se...原创 2019-09-10 21:45:01 · 83 阅读 · 0 评论 -
树形控件zTree在Vue中的使用
zTree使用1:zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定义样式,足以满足大部分业务的开发。第一步先导入css及js文件css是在main.js内做了全局的引入。第二步在页面创建ztree Div第三步初始化ztree<template> <div> <div cl...原创 2020-03-04 10:48:37 · 1651 阅读 · 0 评论 -
最全的Vue学习干货!!!
Vue基础# 直接取值{{ 属性 }}# 需要解析标签,防止XSS、CSRF攻击<div v-html=""></div># 表达式<img v-bind:src="imgSrc"></img>或者简写<img :src="imgSrc"></img>#定义数据相关data:{}#定义v-on绑定的时间函...原创 2020-02-07 18:08:50 · 276 阅读 · 1 评论 -
vue-cli3 添加loading组件
1:创建loading.vue<template> <div class="loading" v-show="isShowLoading"> <img src="../../common/image/loading.gif" alt=""> <!-- <p class="desc">{{title}}&...原创 2020-01-11 11:21:31 · 885 阅读 · 1 评论 -
在vue中同时跑两个服务配置和跨域问题的配置
1:同时跑两个服务配置: 1:cnpm i concurrently -D 2:在package.json中。"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","server": "nodemon server.js","dev": "concurrently \"npm run s...原创 2020-01-11 11:21:07 · 2123 阅读 · 0 评论