chaosama的博客

<template> <div id="app"> <transition :name="transitionName"> <router-view /> </transition> </div></template><script>export default { name: 'App', data(){ return{ transit.

老规矩，先看效果，点击地图上的小红点会出现这个白色的对话框，然后确认报警信息的4个按钮在这之前如果你没搭建好百度地图的话就需要看一下：https://blog.youkuaiyun.com/chaosama/article/details/103238413<div style="height: 520px;width: 100%;" id="container"></div>data(){ return{ alarmList:'' }},moun

官网：echarts官网先安装npm install echarts --save到main.js引入import echarts from 'echarts'Vue.prototype.echarts = echarts然后就能使用了<div id="myEcharts" :style="{width: '400px', height: '400px',fontSize:'25px'}"></div>mounted() { ...

项目基础配置使用vue-cli生成自适应方案核心： 阿里可伸缩布局方案lib-flexiblepx转rem：px2rem，它有webpack的loader px2remnpm i lib-flexiblenpm i px2rem-loader然后到main.js引入lib-flexibleimport 'lib-flexible'接下来需要配置px2rem-loader，找到build/utils.js，在const cssLoader={}后面添加const px2re...

创建个common.js//校验银行卡号，银行卡校验规则(Luhn算法)function validateBankNo(value) { if (value == "" || !isPositiveInteger(value)) return false; var wei = [], sumOdd = 0, sumEven = 0, length = va...

直接看样子吧,点那个相机可以上传照片，然后在下面显示，可以根据自己的要求更换图片的位置、删除（当然，没做拖拽）单纯改变数组位置，界面是不能刷新的，因为js不检测数组变化，但是会检测数组长度变化html <div class="container"> <div class="c-card-ico"> <d...

标题很大气吧，其实就是请求返回数据的时候，前端根据后端返回而提示用户的信息。那玩意代码虽然不多，但是写多了很烦有没有。所以呢，分享一个方法创建一个common.js的js公共方法文件夹function hint (res) { //在这里做提示处理，当然 alert(res.msg) if(res.code===1){ //code等于1的时候就返回上一层 ...

data(){ return{ scroll:'' }},mounted:{ window.addEventListener('scroll',this.handleScroll)},method(){ handleScroll(){ this.scroll = document.documentElement.scr...

先说结论<el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="sub" @onCancel="cancel"></el-popconfirm>饿了么UI的文档并没有给出事件，所以就去源码里面找一下，也就是node_modules里的element-ui文件夹，找到packages/popconfirm组件...

Object.assign(this.$data, this.$options.data())

1、先到百度地图申请你的ak，然后将“地址白名单”设置为一个*号，否则本地环境测试的时候会报错。2、本地测试的话，就到index.html加入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>等到上生产环境则需要将其...

store.js主要思路是登录的时候把数据传到sessionStorage与state,记得传sessionStorage和取值都需要转json，否则是字符串store.js存sessionStoragemutations: { Login (state, res) { state.userInfo = res.data.data sessionS...

在开始前，我们先开科普下父子组件的关系，简单来说：谁被引入，谁就是子组件；谁引入，谁就是父组件。所有的组件都可能是子组件，比方说你爸爸可以有3个儿子(子组件)，同时你爸爸也是你爷爷的N个儿子之一，而你，也可以有N个儿子。具体的话可以找下各位大佬的父子组件关系贴，这里不多赘述直接开始。Refund.vue文件通过props:["lists","goDetails"]来接收父组件传过来的lis...

还是先看效果图，点击选择就自动触发事件了，不用再点上传其实代码挺简单的：先是写了一个img一个input，然后把input隐藏掉(visibility: hidden，display是直接不加载要注意)，然后图片点击事件时重写input的click事件，然后使用监听当input的值发生改变时，change触发上传事件。就ok了本地图片不显示的话就qualificationCerti...

先定义好一个样式h3Bold .h3Bold{ font-weight:bold }然后绑定一个class就完成了<h3 :class="{h3Bold:list.readStatus===0}">{{list.title}}</h3>顺带一提:style也是可以实现的哦<h3 :style="list.readStatus==...

这篇是纯看各种帖子回来的，因为各大帖子都不是很全，我这里汇总下1、安装babel-polyfillnpm install babel-polyfill --save-dev2、在入口main.js文件引入：import 'babel-polyfill'3、用官方脚手架vue-cli的话修改webpack.config.jsapp: ['babel-polyfill', '....

src/assets：自己的图片啊什么的都放这，这里的东西会被进行打包过。static：用来存放引入的js或者css文件，不过因为现在多数用npm安装库，所以这个文件夹有点少用到推荐src/assets...

keep-alive是 Vue 内置的一个组件，使被包含的组件保留状态，或避免重新渲染。1、用法的话是这个样子<keep-alive>　　<router-view>　　　　<!-- 这里是会被缓存所有的视图组件 -->　　</router-view></keep-alive>2.1、上面的用法会缓存全部组件，如果只...

普通做法就是<li v-if="list.refundStatus==0">申请中</li><li v-else-if="list.refundStatus==1">服务商同意退款</li><li v-else-if="list.refundStatus==2">服务商拒绝退款</li>但是嘛，这样写的话多几次你...

主路由Address.vue<template> <div> <router-view/> </div></template>子路由AddressList.vue<template> <div> <router-link to="/Address/M...

先看样子吧到components里面建一个pay.vue文件<template> <el-dialog title="扫码支付" width="300px" :close-on-click-modal="false" :visible.sync="dialogFormVisible"> <div v-if="!status"> <...

从0开始搭建一个vue项目为毛要写这个呢，主要是闲得蛋疼和不想接手一些一涉及把线下接口改到线上接口就要全部vue文件各种找(url全局)，和vuex的store.js里面放完全部的数据，一页一千多行的见过没。其实这章主要讲如何让项目好管理点和防止接手人拿刀上你家喝茶，是摆脱菜鸡通往初级的必经之路。1、vu...

比如说一个组件 <div class="swiper"> <van-swipe :autoplay="3000" :loop="true" indicator-color="#fff"> <van-swipe-item v-for="(image, index) in SwiperImg" :key="index" @click="goto...

其实就是非简单请求现象，其实就是一个解决跨域问题后的一个遗留问题，先看现象为毛呢，这个就得先从啥是“非简单请求”开始说起，其实就是header里边带了自定义数据后，浏览器会默认你这个请求为“非简单请求”，会向后端先行发送一个“options”类型的请求，只有这个请求被通过了，跨域问题就解决了。(顺带说一下，application/json也会触发这个玩意，所以跨域嘛，是必须的，基础增删查改...

本方法是使用代理的方式避过跨域，简单来说就是浏览器请求服务器会跨域，但服务器请求服务器就不会。只适用于开发环境，线上接口与该项目不在同一域名下的话就会出现请求接口错误的问题(所以说啊，跨域还是后端该解决的一个问题)废话不多说，直接上：到config文件夹的index里面设置proxyTable: { '/apis': { target: 'http...

老规矩，先看样子，并且点击可获取该行的数据template部分<div class="group"> <img class="leftImg" src="../../assets/logo.png"> <div class="marquee_box"> <ul class="marquee_list" :class="{m...

先看效果记得带key，虽然提升不大，但是至少警告栏少了<template> <div class="service-class p30"> <div class="sc-list"> <div class="sc-item" v-for="(img,index) in images" :key="img.id" v-...

第一种：静态图片无法加载的问题，加require第二种，cdn里的图片无法加载出来，emm~~~~我通常都是先复制链接到浏览器查看，很多时候是被删掉了

原来以为是不同网络不穿透的问题，后来发现是固定了process.env.PORT为localhost了，在config文件夹里面的index.js把dev里面的host改为当前ip就OK了dev：{host: '172.16.1.125',port: 8080,}缺点就是本地也不能localhost访问了，需要输入ip地址还能访问...

以下代码可以放在同一个js文件里面登录过期重定向// http response 响应拦截器 登录过期重定向axios.interceptors.response.use(response => { switch (response.data.code) { case 104: alert('登录已经过期，请重新登录') setTimeout(...

由于store会随着项目大起来的话，再写在同一个js里面的话，维护起来会非常困难，至少，会很头疼。所以可以考虑这样部署到src文件夹新建一个store文件夹，新建一个Index.js(模块名根据你的需要起)const Index = { state: { active: 0, communitieName: '' }, mutations: { // 添加...

在路由里面加上这句mode: 'history'export default new Router({ mode: 'history', routes: [{ path: '/', redirect: 'Index' }]}]但是这个需要后端的配合https://blog.youkuaiyun.com/weixin_41224029/article/details/8...

公司要从注册界面手动加上一个参数给我，我负责返回去给他们，不带的时候也能正常进入注册界面，类似于推荐人分享那样。不过嘛，咱只是个小前端，咱不知道，咱也不敢问，大佬让做什么就做什么。url例子：http://172.16.1.140:8080/#/Invite?refererCode=123this.refererCode = this.$route.query.refererCode...

首先，先看下这个玩意qrcode ，不管怎么说，先 npm installqrcode,然后引入import QRCode from "qrcode"然后到去写下组件定义个画布<div> <canvas id="QRCode"></canvas></div>下面是喜闻乐见的JS时间data () { ...

1、点击组件直接router-link跳转<div> <router-link to="/Property/Devices">跳转</router-link></div>2、js跳转this.$router.push('/Property/Devices')3、路由传参this.$router.push({name...

该贴只说前端部分，后端人员绕路哈。先调用统一下单接口后1、微信部分，后端会返回一个url给你，"mweb_url":"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx********************&package=162****"直接跳转就行了。(最后提醒句：提示服务商参数缺失的话...

List 列表没啥好说的，只是用van-list包裹需要刷新的div，设置好动态pageSize，记得在onload事件加上异步，否则 ，瞬间给你刷新到了9999999<template> <div class="top"> <div v-if="!openData.length">暂无开门记录~</div> &lt...

方法1、api.jsconst LoginURL = 'http://***.***.*.**:9090'export default { LoginURL,}然后到main.js去挂载import global_ from '@/api'Vue.prototype.global = global_需要用到的页面console.log(this.global....