weixin_44356647-CSDN博客

原创全局自定义指令，限制只能输入数字

1、在utils中新建一个testInput.js文件，testInput中的代码如下：// 注册全局自定义指令//保留整数function inputPDInt(e, data, name = false) { // e.target 存在，说明e 是$event，否则e直接是相应的值，如在element UI中的输入框中$event代表的是输入的值 let num = e.target ? e.target.value.replace(/\D/g, "") : e.replace(

2020-11-12 17:18:45 269

原创 element UI 修改Checkbox复选框绑定值的默认选中值的类型

在单一的el-checkbox元素中定义v-model绑定变量，v-model默认绑定的值为boolean，即选中时为true，当我们不想让其选中时为true，那么我们就需要用到true-label参数。// 如，我希望选中是的值是1，未选中时的值是0 <el-checkbox :true-label="1" :false-label="0" v-model="checked"> 会员包邮 </el-checkbox> // 此时，选中时checked==1，取消时chec

2020-10-21 12:15:22 2535

原创图片预览及formData批量上传图片

图片预览<img :src="imageUrl" />beforeUploadImg(file, list) { // 选择图片后触发的函数 let raw = file.raw; var reader = new FileReader(); //创建文件读写 reader.readAsDataURL(file.raw) //将图片转换成base64 let _this = this; reader.onload = function() { // 给imageUrl进行赋值

2020-06-01 15:14:25 280

原创微信网页开发JSSDK获取地理位置wx.getLocation的使用，及开发时遇到的问题（invalid signature）

最近做的一个微信网页项目，用的是vue，但因为项目中需要实现定位，获取用户的经纬度，因此使用了微信公众号的JSSDK中的wx.getLocation，具体可看官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html.1、首先安装 jssdknpm install weixin-js-sdk --s...

2020-05-06 17:56:57 13206 3

原创 css文字样式

1、文字排版direction -- 文字排版取值：ltr：left to right rtl：right to leftunicode-bidi: bidi-override注：两个属性配合使用2、文本溢出text-overflow: //设置文字超出时是否出现省略号取值：ellipsis 省略号 clip 无省略号（默认值）注：配合overflow：hidd...

2020-04-20 11:14:41 68

原创两个元素层叠时，解决上层标签盖住下层标签事件问题

在项目中有两个元素定位到同一个地方，形成层叠状态，但是又不想上层元素覆盖下层元素的事件，可通过给上层元素设置如下css样式，解决这个问题pointer-events: none;...

2020-04-20 11:04:15 940 1

原创 vue项目中mixins的使用，实现功能复用

在项目中如果有几个组件中都有相同的功能，可以考虑把其抽出来，减少重复代码的编写；在需要用到的地方通过使用混入 (mixins)，来把公共代码引入。1、创建一个js文件，如project_method.js，用于编辑公共方法；/* 如几个组件中都有的方法，就可以抽出来放在这 */export default { methods:{ getData() { console.log(...

2020-04-07 14:18:01 285

原创 vue项目中优雅的使用svg图

在项目中优雅的使用svg格式的图片。具体操作步骤：1、创建SvgIcon.vue文件// An highlighted block<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg></templat...

2020-04-07 12:32:08 947

原创 axios二次封装，api的统筹管理

对axios进行二次封装，统筹管理api，项目中配合async await使用。1、在src/api下创建request.js文件，对axios进行封装。// request.js代码import axios from 'axios'import {throwErr} from '@/utils/throwErr.js' //utils 捕捉服务端http状态码的方法import st...

2020-04-07 11:17:37 197

原创 element UI Table表格多选中通过row-click实现点击某一行的任意位置都能选择

在使用element UI Table表格的多选时，默认是点击复选框才能选中或取消选中，但希望不管点击这一行的哪个位置都能实现这个效果；// el-table部分代码片段，主要是 @row-click="handle"<template> <div> <el-table ref="multipleTable" :data="tableData" toolti...

2020-04-03 17:18:26 4411 4

原创 vue项目中，通过axios请求下载文件

在vue项目中，实现文件下载效果，后端返回文件流，前端通过axios发起请求实现下载文件效果。// 文件下载代码片段import $axios from 'axios'export default{ methods：{ exportCoup(){ $axios({ method: 'post', url: '/activity/getCoupons',//后端提供...

2020-04-03 16:30:24 705

原创 vue项目中创建全局组件

在项目中需要用到一个确认删除的弹窗，因为有多个地方需要用到这个提示框，不想每次用的时候都要引入一次这个弹窗组件，因此把它做成了一个全局组件；这里使用了element UI的dialog来实现的弹窗效果。操作步骤如下：1、在components中创建一个sysTips.vue组件//sysTips.vue代码<template> <div class="confirmDe......

2020-04-03 16:00:27 1035

原创 Vue使用filter实现全局使用时间戳格式转换方法

Vue使用filter编写全局时间戳格式转换方法在项目中有很多地方需要对时间戳进行转换，为了方便使用，通过全局使用vue的过滤器filter来实现全局调用时间戳格式转换的方法。vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html.实例具体步骤：1、在utils文件夹中创建filters.js文件，编辑时间戳转换成日期的方法。...

2020-04-03 14:28:39 453

weixin_44356647的博客