- 博客(102)
- 收藏
- 关注
RSS订阅
1原创 vue 时间过滤器filters全局使用
1.创建filters>filter.js2.创建filters>index.js3.main.js4.使用方法
2022-07-13 02:07:12
161
原创 input表单限制数字长度保留两位小数
1.html代码 <el-input type="number" placeholder="请输入" @input="(value)=>{limitInputLength(value, 10000000)}" v-model.trim="orderFullPrice"></el-input>2.js代码 data（）{ return{ orderFullPrice:'' } } //限定文本输入框的长度(整数) limitInpu
2022-05-20 21:07:57
292
原创 @femessage/upload-to-ali 上传图片
1.安装 yarn add @femessage/upload-to-ali 2.配置vue.config.js const Dotenv = require('dotenv-webpack') module.exports = { configureWebpack: { plugins: [new Dotenv()] } }3. 4.代码演示<template> <div> <UploadToAli @loaded=.
2022-05-14 21:56:16
213
原创 elementul form表单追加验证
<template> <div> <el-form> <el-form-item class="form-item col10" prop="xiangouShezhi" label="限购设置:" label-width="100px" > <el-radio-group class="col5" v-model="formData.xiangouShezhi" :disabled="isDisabled()"
2022-04-27 09:47:55
144
原创 正则数字取整和小数点后最后两位小数
let value = 12.4let patt = new RegExp(/^\d+$/)console.log(patt.test(value )); //12
2022-04-22 19:11:12
726
原创 js 导出文件
//转换成Blob数据并下载 convertRes2BlobAndDownload: function(data) { const filename = 'export-'+new Date().getTime()+'.xls'; //type 限制文件类型 application/octet-stream const blob = new Blob([data], { type: 'application/octet-stream' }); //.
2022-04-02 11:35:38
1270
原创 倒计时 / 多少月、天、时、分前
//倒计时时分秒 getTime() { //当前时间 var startTime = new Date(); //结束时间 var endTime = new Date('2022/3/30 21:00:00'); var countDown = (endTime.getTime()-startTime.getTime()); //获取小时数 var
2022-03-30 20:46:33
203
原创 JavaScript如何从字符串中提取数字
total() { let mealData = '123JMXJM寂寞进程' let tot = '' let numArr = '' let num1 = '' mealData.forEach((item) => { numArr = item.num.match(/\d+/g) num1 = numArr.join('') tot = Number(num1) * Number(ite.
2022-03-05 12:39:35
494
原创 js放大镜
<template> <div class="spec-preview"> //移动图片位置区 图片400x400 <img :src="skuImageList" /> <div class="event" @mousemove="handler"></div> //大图展示区 <div class="big"> <img :src="skuImageList" ref="
2022-01-11 00:52:30
268
原创 vue2中使用Swiper5
npm 下载npm i swiper@5引入模块和css样式import Swiper from "swiper";import 'swiper/css/swiper.css'实例<template> <div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item
2022-01-08 14:39:20
1334
原创 Object.assign对象合拼的方法
**1.不使用Object.assign方法 ** searchParams: { //产品相应的id category1Id: "", //产品的名字 categoryName: "", //搜索的关键字 keyword: "", //排序:初始状态应该是综合且降序 order: "1:desc", //第几页 pageNo: 1,
2021-12-05 23:33:05
208
原创 lodash实现防抖与节流
npm下载$ npm i --save lodashimport _ from "lodash";节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，吧频繁 触发变为少量出发 changeIndex: _.throttle(function(index) { //操作的内容 this.index++ //点击+1两秒后挥执行一个 }, 2000),防抖：前面的所有的触发都被取消，最后一次执行在规定的时间才会触发，页就是说如果连续
2021-12-05 12:04:43
579
原创 mescroll.js 的下拉刷新和上拉加载 tab切换
1. 执行npm命令安装mescroll : npm install --save mescroll.js2. 引入mescroll组件 : import MescrollVue from 'mescroll.js/mescroll.vue’<template> <div> <nav-bar /> <demo-section> //全引入Vant-Ul组件 才能使用van-tabs <van-tabs
2021-12-03 19:07:26
643
原创 Vue.set()和this.$set()介绍
Vue.set()和this.$set()介绍在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}mounted
2021-12-03 18:53:24
631
原创 vue 前端跨域代理 / 封装api
1.封装好的接口 创建api文件//对于axios进行二次封装import axios from "axios";//底下的代码也是创建axios实例let requests = axios.create({ //基础路径 baseURL: "/api", //请求不能超过5S timeout: 5000,});export default requests;2.代理配置，创建vue.config.js//当请求的接口带有/api代理服务就会寻找真实服务要数据modu
2021-12-03 18:23:49
929
原创 vue中引入路径时src默认是@
1.创建一个jsconfig.json2.再写下面的配置配置完后每次引入路径时输入@都会有提示//{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"]}
2021-12-03 10:56:51
365
原创 按时间日期排序
var data = [ { name: '时间1', time: '2017-08-18 13:23:21' }, { name: '时间2', time: '2018-03-18 19:23:22' }, { name: '时间3', time: '2019-03-24 19:23:20' }, { name: '时间4', time: '2017-05-16 19:23:19' }, { nam
2021-11-26 13:44:56
289
原创 mescroll-vue下拉上拉刷新的使用
1. 执行npm命令安装mescrollnpm install --save mescroll.js2. 引入mescroll组件import MescrollVue from 'mescroll.js/mescroll.vue'3.注册组件components: { MescrollVue },4. 页面示例代码<template> <div> <!-- 这个是不带tab切换的xaila上拉刷新--> <!--
2021-11-19 15:08:49
1988
原创 vue-signature-pad在vue中实现电子签名
首页需要下载依赖包npm install --save vue-signature-pad这里使用的是全局引用组件在main.js中import Vue from "vue";<--引入-->import VueSignaturePad from "vue-signature-pad";<--注册组件->Vue.use(VueSignaturePad);在页面中使用组件<vue-signature-pad id="signature" width=
2021-11-18 17:01:34
3623
原创 使用lodash.cloneDeep实现深拷贝
安装npm i --save lodash//将使用的lodash引入使用的组件中 import _ from 'lodash'//使用_.cloneDeep深拷贝（变量） const from = _.cloneDeep(this.addForm)
2021-10-01 21:58:53
620
原创 vue文本编辑器 vue-quill-editor
安装npm install vue-quill-editor --save引入//复文本编辑器import VueQuillEditor from 'vue-quill-editor'//引入css样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'注册组件Vue.use(VueQuillEditor, /* { defaul
2021-10-01 21:19:19
93
原创 vue-cli 全局axios使用
配置请求的前缀// main中引入import Vue from 'vue'import axios from 'axios'// axios全局配置Vue.prototype.$http = axios// 配置请求的跟路径前缀axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'组件中使用this.$http.get(请求参数) 返回的是promise async getGoodsList(){
2021-09-26 11:33:18
80
原创 vue-cli全局格式化时间 过滤器
main.js中全局配置Vue.filter('dateFormat',function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth()+'').padStart(2,'0') const d = (dt.getDate()+'').padStart(2,'0') const hh = (dt.getHours()+'').padStart(2,'0'
2021-09-26 11:24:42
89
原创 axios各种请求方式传递参数
get delete 的传递参数方法不同get请求方式将需要入参的数据作为 params 属性的值，最后整体作为参数传递delete请求方式将将需要入参的数据作为 data 属性的值，最后整体作为参数传递get方式Axios.get('demo/url', { params: { id: 123, name: 'Henry', sex: 1, phone: 13333333 }})delete方式A
2021-09-26 10:12:06
171
原创 vue-table-with-tree-grid树形表格组件
安装npm i vue-table-with-tree-grid -S导入模块到main.js中全局配置// 导入树形表格组件import ZkTable from 'vue-table-with-tree-grid'// 注册树形组件Vue.component('tree-table', ZkTable)详细说明：链接:vue-table-with-tree-grid...
2021-09-24 17:03:48
148
原创 element-ui表格 table的显示展开行属性 type=“expand“
<el-table :data="tableData"> <!-- 表格展开列 --> <el-table-column type="expand"></el-table-column></el-table>
2021-09-22 20:09:01
1088
原创 关闭对话框就会触发的事件@close+重置表单
<el-button size="small" type="primary" icon="el-icon-edit" @click="dialogVisible = true"></el-button> <!-- 修改用户信息 --> <el-dialog title="修改用户" :visible.sync="dialogVisible...
2021-09-19 14:07:41
685
原创 vscode中一键生成react代码块以及快速补全react代码
vscode扩展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7安装成功后使用rcc
2021-08-27 22:41:32
131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人