自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 el-table-column列表中展示图片

le-table列表中展示图片,后台返回图片key值,动态拼接图片路径。

2024-01-28 12:18:04 1309 1

原创 van-picker下拉框添加搜索和分页功能

以下为 在data()方法中设置要传的值。

2023-04-19 17:30:12 1849

原创 van-field实现自定义图标

1.在在阿里巴巴图标库https://www.iconfont.cn/中找到需要的icon加购物车。代码中class-prefix的值和name的值拼接起来要和下图中的class名一致。3.把以下四个文件放到assets中。2.在购物车中下载代码。

2023-03-24 16:26:25 1682

原创 vue项目打包成.exe桌面应用

整理一下本人实现vue项目打包成桌面应用的流程一、新建文件夹,使用git下载# giteegit clone https://gitee.com/wallace5303/electron-egg.git# githubgit clone https://github.com/wallace5303/electron-egg.git二、进入到electron-eggcd electron-egg-> npm install三、把你的项目打包成dist文件,生成的dist文件把 el

2022-05-30 15:06:28 1585 6

原创 百度地图使用笔记

<div id="content1"></div>var map = new BMap.Map('content1'); // 创建Map实例添加点标注var location = new BMap.Icon(require("@A/images/location.png"), new BMap.Size(46, 36)); // 自定义图标var point = new BMap.Point(aObj.bd_lng, aObj.bd_lat)var marker

2021-08-10 17:48:14 283

原创 vue设置每个页面title

在main.js里添加一下代码:Vue.directive('wechat-title', { inserted: function (el,binding) { document.title = binding.value }})路由中添加metaroutes: [ { path: '/', name: 'Home', component: Home, meta:{ title:'在这里设置标题'

2021-06-11 11:23:43 110

原创 jq插件实现简单分页

pagination.js文件(function($){ $.fn.pagination = function(options){ var args = $.extend({ pageCount: 15, // 总页数 currentPage:1, // 当前页 backFn:function(){} },options); ms.init(this,args,options); }; var ms = { init:function(obj,a

2021-04-14 16:28:05 222

原创 正则验证密码规则

密码设置<input type="password" v-model="password" />var patrn=/(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}/;if (!patrn.exec(password)){ console.log('密码应由数字及大小写字母组成')}else{ }exec() 方法用于检索字符串中的正则表达式的匹配。...

2021-03-15 16:33:26 228

原创 日历

待完善…<template> <div class="container"> <div class="top"> <span @click="preMonth"><</span> <span class="year">{{year}}年{{month}}月</span> <span @click="nextMonth">></span> &l

2021-03-11 10:57:29 93

原创 vue中动态拼接的html中点击方法触发

let infoWindow = “<div onClick = 'goDetail()'>查看详情</div>”methods:{ goDetail(){ console.log('xiangqing') },}连接两者:created(){ let _this = this window.goDetail=_this.goDetail;},

2021-03-11 10:12:50 515 3

原创 vue中只在页面循环显示列表中的一部分数据

开始是这样写的,但是v-if和v-for不可以同时使用,v-for的优先级更高,会遍历列表中所有数据,降低性能// 不建议使用这种方法<li class="li li1" v-for="(item,index) in searchList" :key="index" v-if="index >6"></li>使用计算属性处理需要的列表<li class="li li1" v-for="(item,index) in secondList1" :key="ind

2020-12-17 17:39:07 4895

原创 echarts图表字体自适应

以设计图宽度为1920px为例// 写在了公共方法,也可直接写在页面方法中export default{ fontSize(res){ let docEl = document.documentElement, clientWidth = window.innerWidth||docEl .clientWidth||document.body.clientWidth; if (!clientWidth) return; let fontSize = 10 * (clientW

2020-12-16 15:34:06 402

原创 js中的this指向

函数的this指向 看调用、不看声明一、普通函数调用①函数名() this->windownfunction fun(){ console.log(this) //window} fun() //相当于window.fun()二、事件处理函数调用oDiv.onclick = function(){} this->添加事件的元素对象的方法 ,对象.方法调用this 指向该对象let obj={ name:'丢丢', age:"18", spe

2020-11-13 11:08:01 160 1

原创 路由钩子

1.全局路由钩子beforeEach,afterEach的用法每次切换路由都会触发全局的钩子函数,写在router.js文件中router.beforeEach() 进入之前触发router.afterEach() 进入之后触发const router = new Router({ routes:[{ path: '/dashboard', name: 'dashboard', component: () => import( /* webpackChunkName: "

2020-11-04 09:55:42 354 3

原创 伪元素清除浮动的方法

一、给父元素加伪元素after或before<ul> <li>1</li> <li>2</li> <li>3</li></ul><style> ul::after{ content:'', display:'block', clear:'both' } li{ float:left; }</style>二、父元素overflow设置成hidden或者a

2020-11-02 17:43:12 314

原创 vue中的竖向滚动条实现方法

<template> <view> <view class="search-input-box"> <view class="search-scroll" :class="{aniamtedTop}"> <view class="search-list" v-for="(item,index) in searchList"> {{item.content}} </view> </view

2020-08-18 17:12:10 4055 2

原创 消除a标签之间的默认间隙

在a标签的父元素加上font-size:0;即可

2020-08-18 16:05:33 515 1

原创 对vuex的理解

新建一个store.js文件import vue from 'vue'import Vuex from 'vuex'vue.use(Vuex)let defaultCity = '北京'defaultCity = localStorage.city export default new Vuex.Store({ state:{ cityName: defaultCity }, mutations:{ changeCity(

2020-08-12 09:28:15 83 1

转载 小程序圆形进度条组件

circle.jsComponent({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { draw: {//画板元素名称id type: String, value: 'draw' }, per:{ //百分比 通过此值转换成step type: String, value: '', observer: fun

2020-08-07 15:54:15 648

原创 小程序中onlooad和组件执行顺序导致组件无法获取到动态数据

页面的onLoad执行是在所有组件初始化完成之后的。所以就会出现动态数据父传子时页面无法正常加载下面是使用圆形进度条时遇到的问题:页面使用:<view class="circle"> <circle draw='circwewle1' per = '{{pre}}' r = '80'/> </view>pre是进度百分比1-100 需要根据动态获取的数据赋值页面js:data: { pre:''},onLoad: function (op

2020-08-07 15:34:32 328

原创 vue使用filter过滤器优化价格格式

filter中的jsmoneyFilter.js:export function toMoney(money){ if(money){ money = money.toFixed(2) }else{ money = 0; money = money.toFixed(2) } return money;}vue文件使用:// template:<p>¥{{price | moneyfilter}}</p>// script: import {toM

2020-08-04 13:49:22 566 1

原创 props传值时无法在mounted处理的解决方法

遇到的问题:父组件传值,在子组件中不能用mounted处理export default{ props:['floor1'], data(){ return { floor1_0:'', floor1_1:'', floor1_2:'', } }, mounted(){ console.log(this.floor1) //打印出的不是所传的值 this.floor1_0 = this.floor1[0]; }}因为pr

2020-07-29 16:46:38 2421

原创 小程序组件传值,绑定组件的方法

创建组件Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { articleTitle: String, //文章标题 counts: { //浏览次数 type:Number, value:0 }, }, data:{}, // 私有数据,可用于模板渲染

2020-07-28 17:24:22 492

原创 获取手机验证码倒计时

wxml<view class="phoneContainer"> <input type="number" maxlength="11" disabled="{{disabled}}" placeholder="手机号" value="{{phoneNumber}}" class="phoneNumber" bindinput="getPhone"/></view><view class="codeContainer"> <input t

2020-07-24 22:14:24 122

原创 小程序获取input中的值

wxml中:<input class='inp' bindinput='getName' value='{{name}}' />js中:data: { name:''},getName(e){ this.setData({ name: e.detail.value })},

2020-07-14 17:13:57 332

原创 vue中computed、watch和methods的区别和用法

vue中computed、watch和methods的区别和用法computed和watch

2020-07-14 15:24:51 551

原创 小程序登录,前端获取openid

小程序登录,前端获取openid获取code获取openid获取基本信息获取codewx.login({ success(res) { } })使用wx.login()获取到用户临时登录凭证获取openidwx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_t

2020-07-13 14:26:54 694

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除