vue
qq614756883
这个作者很懒,什么都没留下…
展开
-
elementUI多级联动el-cascader动态加载数据
elementUI多级联动el-cascader动态加载数据实现原创 2022-08-27 08:53:13 · 571 阅读 · 1 评论 -
vue中input输入框触发功能父子组件传值
字数限制输入框原创 2022-06-28 09:26:19 · 1203 阅读 · 0 评论 -
多行文本域
限制200个多行文本域原创 2022-06-27 17:09:43 · 468 阅读 · 0 评论 -
上传 多张 单张 图片、视频
根据项目需要封装原创 2022-06-09 17:26:07 · 137 阅读 · 0 评论 -
数组字串常用方法
123原创 2022-06-01 10:55:41 · 141 阅读 · 0 评论 -
Vue 计算属性与监听属性
首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <script> new Vue({ el: "#app1", data: { message: 'xiaoqi' } })原创 2022-05-30 09:48:02 · 338 阅读 · 0 评论 -
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 · 106 阅读 · 0 评论 -
防抖、节流
防抖所谓防抖,就是指触发事件后在 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 · 52 阅读 · 0 评论 -
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 · 6191 阅读 · 0 评论 -
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 · 222 阅读 · 0 评论 -
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 · 991 阅读 · 0 评论 -
自定义公共组件
子组件:<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 · 163 阅读 · 0 评论 -
拍照后转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 · 248 阅读 · 0 评论 -
动态文字向上滚动广播中奖信息代码
<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 · 123 阅读 · 0 评论 -
滚动数据展示
<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 · 129 阅读 · 0 评论 -
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 · 68 阅读 · 0 评论 -
省市区
<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 · 78 阅读 · 0 评论 -
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 · 303 阅读 · 0 评论 -
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 · 224 阅读 · 1 评论 -
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 · 555 阅读 · 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 · 2220 阅读 · 0 评论 -
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 · 320 阅读 · 0 评论 -
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 · 1099 阅读 · 0 评论