- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue 计算属性与监听属性
首先，来看一个字符串反转的例子： <div id="app1"> {{ message.split('').reverse().join('') }} </div> <script> new Vue({ el: "#app1", data: { message: 'xiaoqi' } })
2022-05-30 09:48:02
312
原创 vue过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>一 ...
2022-05-28 15:39:06
93
原创 防抖、节流
防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。代码实现/** * @desc 函数防抖 * @param fn 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行，false 表非立即执行 */const debounce = function (fn, wait, immediate = false) { let timer = null ret
2022-05-23 17:18:17
42
原创 自用table导出excl下载
downloadData() { var search = { ...this.saveForm, regionCode: this.searchValue.regionCode, // current: 1, // size: 1000, }; const loading = this.$loading({ lock: true, text: "下载中···", ...
2022-05-23 09:43:22
62
原创 手写轮播图
不废话直接上干货，图片地址换成自己的链接<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
2022-04-19 15:01:59
60
原创 Vue中子组件父组件相互调用的四种方法 props
子组件调用父组件的方法Vue中子组件调用父组件的方法，有三种方法：1. 直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export defaul
2022-04-10 20:25:48
5814
转载 Vue 封装全局提示组件
<template> <transition name="fade"> <div v-show="visible">{{message}}</div> </transition></template> <script>export default { data () { return { visible: false, message: '' } }.
2022-04-06 20:15:36
206
原创 vue子组件给父组件传值
<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { data () { return { //将msg传递给父组件 msg: .
2022-03-30 23:04:55
902
原创 自定义公共组件
子组件：<template> <view class="pop_bg" v-if="isShow"> <view class="pop_view"> <view class="pop_view_header"> <view></view> <view>{{title}}</view> </view> <view class="pop_view_con
2022-03-30 22:48:55
150
原创 JS判断数组中是否有重复值得三种实用方法
方法一: var ary = new Array("111","22","33","111"); var s = ary.join(",")+","; for(var i=0;i<ary.length;i++) { if(s.replace(ary[i]+",","").indexOf(ary[i]+",")>-1) { alert("数组中有重复元素：" + ary[i]); break;外语屋 } } 方法二: var ary = new A
2021-12-23 13:39:08
1191
原创 判断某变量是否为某数组中的一个值的3种方法
1.正则表达式js 中判断某个元素是否存在于某个 js 数组中，相当于 PHP 语言中的 in_array 函数。Array.prototype.in_array=function(e){var r=new RegExp(','+e+',');return (r.test(','+this.join(this.S)+','));};用法如下：var arr=new Array([‘b',2,‘a‘,4]);arr.in_array('b');//判断'b'字符是否存在于 arr 数
2021-12-23 13:35:09
1341
原创 JavaScript判断变量是否为数组的方法(Array)
1. typeof真的那么厉害吗？？var ary = [1,23,4];console.log(ary instanceof Array)//true;上面的办法并不能实时的检测出是否是数组，只能判断其类型，所以说typeof判断基本类型数据还是挺好的，但是不能准确测试出是否是数组（typeof的具体用法以后提及，现在回归正题）2.instanceof 判断var ary = [1,23,4];console.log(ary instanceof Array)//true;从输
2021-12-23 11:54:29
198
原创 拍照后转base64格式然后压缩base64
tirggerFile(event) { var that = this; var file = event.target.files; // (利用console.log输出看file文件对象) // let fileUrl = URL.createObjectURL(file [0]); // 获取文件url // console.log('fileUrlfileUrl',fileUrl); //图片转换成base64 var reader = new Fi...
2021-11-17 14:26:43
231
转载 html5在手机端调用摄像头
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>input file capture</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.
2021-11-16 16:01:48
2620
原创 动态文字向上滚动广播中奖信息代码
<template> <div class="roll-msg"> <div class="popup"> <div class="box"> <ul class="lb" :class="{marquee_top:animate}"> <li v-for="(item, index) in undergroundDataList" >{{item}}<...
2021-10-31 16:37:49
96
原创 滚动数据展示
<template> <div id="box"> <div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave" > <!-- <p v-for="item in items" :key="item.name">中奖...
2021-10-30 17:15:25
110
原创 vue时间封装引用
vue时间封装引用// 时间转换export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+.
2021-10-28 11:34:42
58
原创 定时无限循环数组
<!DOCTYPE html><html><head> <title></title></head><body><script type="text/javascript"> var curIndex1 = 0; //相片的索引从0开始 var timeInterval1 = 1000;//时间间隔(单位毫秒)，每隔3000毫秒进行下一张相片显示 var arr= [2.
2021-10-26 17:12:01
282
原创 小程序购物车
<van-tabs bind:click="onClick"> <van-tab title="购买"> <van-checkbox-group value="{{ checked }}" bind:change="onChange"> <view class="radio_stepper_box" wx:for="{{bookdata}}" wx:for-index="idx" wx:key="item"> <.
2021-07-22 08:55:44
58
原创 省市区
<template> <div class="tablesss" ref="boxss"> <div class="crumbs" ref="titlebox"> <el-breadcrumb separator="/"> <el-breadcrumb-item><i class="iconfont iconshouye1"></i> 省级子公.
2021-04-09 10:27:31
69
原创 Element UI级联地址省市区插件
安装npm install element-china-area-data -S使用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'import { provinceAndCityData, regionData, provinceAndCityDataPlus, reg
2021-03-23 14:04:41
278
原创 Element-ui组件库Table表格导出Excel表格
点击“点击导出”按钮后下载sheetjs.xlsx文件（导出文件）Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)npm install --save xlsx file-saver<template> <div class="table"> <!--给表格添加一个id，导出文件事件需要使用--> <el-table :data="table.
2021-03-11 15:13:57
188
1
原创 js更改对象中属性名的方法
let arr = [ { "id": 275, "name": "测试公司", "userList": [ { "id": 697, "userName": "11111" } ] }, { "id": 327, "name": "有限公司",
2021-01-07 00:24:28
1508
原创 vue配置 axios封装 拦截器 token请求头
import axios from 'axios';import Vue from 'vue';const serve = axios.create({ baseUrl:'/api', timeout:5000})serve.defaults.headers.post['Content-Type']='application/json';serve.interceptors.request.use(function (config) { var token = sessionStorage
2020-12-24 19:19:31
527
2
原创 vue 项目使用iview如何做到table嵌套table
1:首先看效果图2.这里是使用的table表单组件，组件里面有一个 table-expand 属性需要使用，所以需要引入，我是只有一个组件需要这个属性，所以直接在组件中引入3:在根据render函数的方式使用父组件代码<template> <Table :columns="columns10" :data="data9"> <template slot="action" slot-scope="{ row }">
2020-10-08 14:46:56
2111
原创 vue 倒数秒数 手机验证码
参考：参考链接Html<template> <div> <van-row class="header"> <van-col span="24"> <van-image :src="fang" alt class="img" @click="goupper" /> <h6>修改密码</h6> </van-col> </van-.
2020-08-08 16:37:07
292
原创 vue+vant 实现上拉加载 下拉刷新
先上js// 页面首次加载数据列表 getlist() { this.loading = true; this.apiGet("/order/order_list", { params: { order_status: Number(this.order_status), page: this.pagenum } }).then(res => { this.loadin
2020-07-28 16:39:34
1083
原创 vue海报制作
地址：https://github.com/sunniejs/vant-shop-demohttps://github.com/sunniejs/vue-canvas-posterhttps://github.com/sunniejs/vant-shop-demo自己简单做的没看懂跨域怎么做的<template><!-- 海报html元素 --><div> <img :src="image" alt=""> <vue-can
2020-07-24 18:14:51
484
原创 vue海报生成
<template> <div class="app-container"> <el-card class="operate-container" shadow="never"> <i class="el-icon-tickets" style="margin-top: 15px"></i> <span style="margin-top: 5px">活动管理</span> &
2020-07-20 16:34:18
729
原创 ElementUI中switch开关的使用--关于如何把文字显示在按钮上
先上图：拿走说一声：拒绝伸手党！！！！！先定义class： <el-switch class="tablescope" @change="handleStatusChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status"
2020-07-01 17:07:51
4089
13
转载 小程序分页加载onReachBottom上拉触底加载--小程序走过的坑
data: { limit: 11,//显示数据量 list: '', page: 1,//当前页 load: true, loading: false,//加载动画的显示 }, onReachBottom: function () { var that = this; if (that.data.load) {//全局标...
2020-05-07 11:16:20
904
原创 小程序生成海报最完整代码
/* pages/distribut/poster/poster.wxss */.canvas-image{ /* width: 90%; height: 900rpx; */ width: 690px;height:590px; margin:0 auto;}.haibao{ color:#fff; background:red; width:70%; ...
2020-04-30 18:05:28
2167
8
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人