- 博客(32)
- 收藏
- 关注
RSS订阅
原创 微信小程序方法之间传参及api方法调用传参
点击aa、cc都会调用请求 请求的时候传个参数 在bb这个方法进行接收！wxml<view bindtap="aa" data-value="1234567890">点击1</view><text bindtap="cc" data-value="111111111">点击2</text>js aa(e){ this.bb(e) }, cc(e){ this.bb(e) }, bb(e){ console.
2020-10-15 17:57:58
3288
2
原创 前端用得上的框架组件，值得收藏！
框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用vue
2020-09-01 14:47:42
1193
1
原创 vue input 只能输入数字 且开头第一位数不能为0
vue input 只能输入数字 且开头第一位数不能为0HTML页面写一个@input事件<template> <div class="orderpayment_number"> <div>购买数量:</div> <div> <input type="text" placeholder="输入购买数量" v-model="number" @input="handleInput" /> <
2020-06-01 17:07:00
9222
2
原创 Vue项目开发 引用字体包
网上查找对应字体，下载字体包，然后放进项目中新建font.css文件引用字体包文件/* font.css文件代码 */@font-face { /*给字体命名*/ font-family: 'HaiPai'; /*引入字体文件*/ src: url('./HaiPaiQiangDiaoGunShiJian-2.otf'); font-weight: normal; font-style: normal;}main.js全局引用//引入字体im
2022-05-20 10:34:19
315
原创 vue相邻组件之间通信
vue相邻组件通信main.js注册import Vue from 'vue'import App from './App'Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。需要传递参数的页面通过$emit方法传递一个方法及需要传递的参数（对象、布尔值、数组、字符串、数组…）this.$bus.$emit('newlyadded',true)//传递方法和参数接收参数的页面通过$on来接收方法及参数，然后进行后续操作方式一
2022-03-16 16:47:18
1039
原创 Vue父子组件通讯
Vue父子组件通讯父传子：子组件定义props去接收值，子传父：通过this.$emit() 传给父组件，接收方式通过methods可接收;父组件<div class="box"> <h3>子组件</h3> <!-- 3.使用子组件标签 --> <!-- :data为赋值/绑定值 @data为事件 --> <sonpage :datalist="value" :datanumber="numberVa
2022-03-01 15:57:15
481
原创 vue浏览器消息提示
vue浏览器消息提示判断浏览器是否支持浏览器消息弹窗suportNotify() { if (window.Notification) { // 支持 console.log("支持" + "Web Notifications API"); //如果支持Web Notifications API，再判断浏览器是否支持弹出实例 this.showMess(event) } else {
2021-12-23 15:31:47
1716
原创 何如捕捉微信公众号文章 标题图
何如捕捉微信公众号文章 标题图在浏览器控制台 F12 Elements 查找JavaScript文件从下往上数10个 就是存放标题及图片的文件，喜欢图的可以直接浏览器打开下载效果图
2021-11-04 11:52:18
258
原创 vue 获取 一周 时间
页面结构 <div class="calendar_content"> <div @click="dateActive(index)" v-for="(day,index) in week"> <div>{{day.xq}}</div> <div :class="{ active:index==current}">{{day.ts}}</
2021-10-11 14:28:29
689
1
原创 vue 选择时间 显示天数及小时
使用element date-picker 作为时间控件 <el-date-picker v-model="form.date" @change="getdate" type="datetime" placeholder="选择完成时间"></el-date-picker>选择好时间后 把选中的值进行时间计算 //date-picker改变的时候 选取时间值 getdate(e) { this.form.duration = ''
2021-10-08 10:34:23
1026
原创 vue 输入天数 小时 显示日期
vue 输入天数 小时 显示日期监听用户输入 <el-input v-model="form.duration" @blur="durationchang(form.duration)" placeholder="请输入例如: 1天12时"></el-input>用户输入 进行数组分割计算durationchang(e) { var date1 = e.split('天')[0] console.log(date1) var
2021-10-08 10:26:04
321
原创 vue 使用DataV数据可视化组件
一、安装DavaV（前往官网查看安装步骤，这里不详细说了）DataV官方文档（查看组件详细配置）二、使用方式<!-- :config 组件配置 --><dv-percent-pond :config="datav" style="width:200px;height:100px;margin:20px auto;" />//需要用到的页面引用该该组件import countTo from 'vue-count-to'data() { return { //
2021-09-03 15:12:39
2056
原创 Vue element ui input 禁止输入空格
element ui input 禁止输入空格直接在v-model拼上.trim 就可以禁止用户输入空格<el-input v-model.trim="param.loginName" maxlength="15" placeholder="请输入您的账号">这样用户怎么输入都输入不了空格了 完美解决禁止输入空格的需求...
2021-08-25 12:02:55
1321
原创 小程序请求封装
小程序请求封装小程序app.js文件App({ globalData: { userInfo: null, apiHost: 'http://api:8888', } })创建一个独立的 request.js 文件request.js代码 注：（目前401表示未登录 200成功 500 接口请求错误）注释就不详细说了 我有点懒 能看得懂就看吧！ 上代码~//获取app.jsconst app = getApp();//获取app.js里的globalData
2021-08-20 16:23:46
156
原创 小程序编写类似微信朋友圈九宫格布局
效果图（目前数据都是自己写死的数据 到时是根据api返回显示的）总共分为 1张图 2张图 4张图 9张图 然后进行对应的样式布局代码：根据返回的数组长度进行判断 显示对应布局 例如 arr.length为9，那么就应该显示9宫格盒子布局 其它盒子不显示<view class="picture_box"> <!-- 单张图片 --> <view class="picture_list" wx:if="{{picturelist.length<2}}
2021-05-07 16:26:03
1110
2
原创 JavaScript 数组去重
方式1通过indexOf去重var arr = [1, 2, 3, 4, 6, 23, 13, 4, 5, 3, 4, 5, 5, 6, 7, 8, 9, 9, 8]; var result = []; arr.forEach(item => { if (result.indexOf(item) == -1) result.push(item) }) console.log(result);方式二通过filter去重var arr = [1, 2, 3, 4, 6,
2021-03-15 12:10:15
71
原创 JavaScript map函数 使用方式
js map 使用实例： var users = [ {name: "熊大", "email": "[email protected]"}, {name: "熊二", "email": "[email protected]"}, {name: "光头强", "email": "[email protected]"} ]; var emails = users.map(item=>{ return item.email })
2021-03-13 17:37:08
133
原创 js数组过滤重复数据
js数组过滤重复数据let arr = [1,2,3,4,4,1]let newArr = arr.reduce((pre,cur)=>{ if(!pre.includes(cur)){ return pre.concat(cur) }else{ return pre }},[])console.log(newArr);// [1, 2, 3, 4]
2021-02-04 17:48:37
3778
原创 Vue安装/使用boostrap-vue 插件
1安装详细可看boostrap-vue官网 npm install boostrap-vue --save2main.js引用boostrap-vueimport 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'//我这里是按需引用import { BootstrapVue,Button } from 'bootstrap-vue'Vue.use( BootstrapVue,Bu
2020-07-15 16:05:41
208
原创 VUE Animate Css动画库使用
Animate Css动画库使用1.使用CDN添加到您的网页中 <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>2样式用法 这个类 animate__animated必加、记住别忘了！加Animate前缀 animate__ <h1 class="animate__animated animate__fadeInDownBi
2020-06-17 11:49:00
338
原创 weui插件使用
weui文档地址：github地址1github地址21.安装npm i weui.js --savenpm i weui.js --save2.main.js引入import "weui";//引入weui插件import weui from "weui.js";//引入weui.js文件插件Vue.prototype.$weui = weui;3.项目使用 必须+this...
2020-06-01 17:15:52
547
原创 vue 使用element-ui Loading框加载
vue 使用element-ui Loading框加载在vue/cli项目上使用 在想要用到的事件上定义方法 代码片.//定义方法let loadingfunction startLoading() {loading = Loading.service({lock: true,text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' })}function endLoading() { loading.close()}在项目上调用方法 代码
2020-06-01 16:51:38
2303
原创 vue按需使用element-ui
1.npm安装element-uinpm i element-ui -S2main引入需要组件import Vue from 'vue';import {Button} from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(Button)...
2020-03-16 22:16:28
115
原创 vue使用weui插件loading组件
使用weui—loading组件1.npm安装npm weui --savenpm weui --save2.mian.js引入import "weui";//引入weui插件import weui from "weui.js";//引入weui.js文件插件Vue.prototype.$weui = weui;3在项目上使用methods: { go() { v...
2020-03-16 20:03:18
1042
原创 vue----移动端适配之px自动转换rem
vue移动端配置问题1.npm安装lib-flexiblenpm install lib-flexible --save2.main.js中引入import Vue from 'vue'import App from './App.vue'import 'lib-flexible'//引入Vue.config.productionTip = false如图显示3.安装pos...
2020-03-16 17:22:52
1058
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人