vue
C。阳
前端大白
展开
-
vue 中watch 的那些骚操作
watch用法大全场景1:立即执行watch 是在监听属性改变时才会触发,有些时候,我们希望在组件创建后 watch 能够立即执行export default { data(){ return { name:joe } }, watch(){ name(){ handler:sayName, imediate:true }, methods:{ sayName(){ console.log("this.,name") } }原创 2021-04-19 15:36:26 · 138 阅读 · 0 评论 -
vue2.0原生分页功能
基于vue的分页功能,包括跳转记忆功能等html:<!-- --><template> <div class="newsCenter" :style="footer" ref="newsCenter" id="newsCenter"> <div class="bc"></div> <div class="title f-22-600 p-t-20 t-a-c m-b-20">新闻中心</div>原创 2020-09-01 10:35:34 · 531 阅读 · 0 评论 -
vue+ts实现的原生分页功能
由于项目需求,需要一个分页功能,没有合适的轮子,只好自己造一个了。1.html方面 <div class="pagination m-t-40 m-b-40"> <div class="pag-item tip"> <span>第{{currentPage}}/{{totalPage}}页</span> </div> <div class="pag-item first" @click="page('原创 2020-07-16 18:17:51 · 896 阅读 · 0 评论 -
移动端适配-(postcss-pxtorem)
基于vue+vant的移动端适配(rem)1.下载lib-flexible --savenpm i lib-flexible --save2.在main.js中引入lib-flexiblemain.jsimport 'lib-flexible/flexible'3.设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, u原创 2020-07-09 09:37:24 · 2743 阅读 · 0 评论 -
vue-cli 4.0中区别开发环境和生产环境
vue-cli 4.0区分不同的开发环境场景,官网表单提交功能中,由于测试环境和生产环境的ip不同,需要的clientid不同,测试在每次部署测试环境的时候都需要我手动修改ip,很是麻烦,所以区分下不同的环境打包。1.新建三个不同的文件来区分不同的环境,例如我这里是开发(development)、测试(test)和生产(production)在根目录下创建三个文件例:.env.developmentNODE_ENV = 'development'//指定当前环境模式VUE_APP_CURR原创 2020-07-01 18:22:09 · 3768 阅读 · 0 评论 -
原生弹框2(vue)
html、css、js<template> <div class="about"> <button id="modal" @click="appear">点击弹窗</button> <div class="container" id="modalContent" v-show="status"> <...原创 2020-03-19 17:28:18 · 505 阅读 · 0 评论 -
wangeditor的使用
1.安装npm install --save wangeditor2.页面中使用<template> <div id="wangeditor"> <div ref="editorElem" style="text-align:left;"></div> </div></template><sc...原创 2019-11-30 17:57:36 · 170 阅读 · 0 评论 -
基于axios的请求封装
1.由于项目越来越大,没有进行封装复用,引起的代码就会冗余,所以今天就来封装一下请求。1.安装:npm install axios2.简单使用, params:{ id:1 } }) .then(data=>{}) .catch(err=>{}) axios.post("url",{ })但是由于只是简...原创 2019-08-14 21:41:03 · 655 阅读 · 0 评论 -
基于vue filter封装的时间格式转换
1.新建filter.js文件夹用来写转换的脚本import Vue from "vue";export default { dateFormat(dateTime, fmt) { if (dateTime) { let date = new Date(); //ios new Date()需要把'-'转换成'/' if (typeof date...原创 2019-11-13 12:55:33 · 453 阅读 · 1 评论 -
基于vue封装的正则表达验证
由于公司项目用到的表格比较多,考虑用到了vue+element开发,其中注册的表单填写,以及表格的增删改查用到了比较多的正则验证,element 也有自己封装的必填校验,以及简单的正则,但是这并不能满足我们公司的需求,所以特此封装了自己的插件来调用。1.首先封装一个js进行囊括正则。formValidation.jsconst formValidation = { mobile: ...原创 2019-11-08 12:49:08 · 2213 阅读 · 0 评论 -
基于axios封装2
一、下载axios插件npm install axios -S二、利用promise封装一个http请求(http.js)import axios from "axios";import api from "./api"; //请求前缀的地址import router from "@/router";import { Message } from "element-ui";// i...原创 2019-11-07 14:53:43 · 133 阅读 · 0 评论 -
vue中post请求传值后台为null的解决方法
关于后台传值那些问题:在完成注册功能的时候遇到了一些问题,原因如下: ``` 在向后台发送post请求的时候,后台不能接收到前端的传值(后台接收到的值全部为null)解决方法:1.设置请求头header为 “content-type”: “application/x-www-form-urlencoded”2.使用qs转换格式config.data = qs.stringify(...原创 2019-10-28 18:46:38 · 10493 阅读 · 0 评论 -
本地json模拟请求
新建data-api.js文件data-api.jsexport let http = { get: function(url, config = {}) { return loadData(url); }, post: function(url, data, config = {}) { return loadData(url); }};async fun...原创 2019-10-28 13:44:25 · 388 阅读 · 0 评论 -
关于vue.config.js的配置
由于vue3.x的改动,项目中少了很多的配置,比如就没有了build和config文件。但是我们又需要配置下host的地址,以便于内网访问方便。所以我们需要在根目录下创建一个新的文件夹vue.config.js// vue.config.js配置说明,官网地址:[链接](https://cli.vuejs.org/guide/webpack.html) // 这里只说一部分,具体配置参考文...原创 2019-07-31 22:18:13 · 1139 阅读 · 0 评论 -
基于element ui的换肤功能
由于公司邮件系统是基于element ui写的,现在需求要写一个换肤功能,经过多次百度参考,予以完成,记录下来以供参考。基于element ui 的换肤功能前言:我们要对css文件的所有选择器添加命名空间如我们给所有的加上.custom-1b1e24原css文件:.header{height:100px;}.content{color:#fff;}=>输出.custom-1...原创 2019-08-18 17:22:26 · 2236 阅读 · 3 评论 -
基于vue的三级联动select框
由于项目需要,ui又没有相似的插件,只能使用select原生完成一个select框,期间在于同事的帮忙完成,特来写一下实现思路。1.由于项目原因,数据是放在了本地的json数据,我们先来看一下数据格式。就是正常的父子数据。2.html页面 <div> <select name="province" @change="getCity($event)" v-m...原创 2019-10-24 16:41:05 · 2905 阅读 · 0 评论