vue
小四是个处女座
这个作者很懒,什么都没留下…
展开
-
vue 监听 取消监听
vue 监听的用发原创 2023-03-05 16:21:33 · 2983 阅读 · 1 评论 -
前端应用本地 json 数据
前端引入本地公用数据,方便多次调用。节省时间。原创 2023-01-12 10:00:09 · 1101 阅读 · 0 评论 -
vue this.$emit 的两种传值方式
父子传参一直使用自定义事件的方式,没有使用过修饰符原创 2022-12-09 15:35:00 · 1365 阅读 · 0 评论 -
前端 vue 开启全屏 退出全屏完整代码
前端vue 开启全屏 关闭全屏完整案例代码原创 2022-12-05 10:44:38 · 359 阅读 · 0 评论 -
avue 富文本avue-form ,avue-crud 及独立使用的详细介绍
介绍如何在 avue-form avue-crud 及独立使用 avue 里的富文本,且可上传图片。原创 2022-10-21 17:14:29 · 3055 阅读 · 4 评论 -
return 的使用 及字段拼接 完整的页面布局逻辑实现
车辆信息展示,挂车配置,信息渲染原创 2022-09-23 12:14:56 · 173 阅读 · 0 评论 -
vue 过滤器
全局注册时是 filter 没有 s , 而组件过滤器是 filters,是有 s 的,虽然写的时候没有 s 也不报错,但是过滤器是没有效果的。当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用 <el-table-column class-name="status-col" label="Status" width="110" align="center"> <template slot-scope="scope">原创 2022-09-23 11:46:27 · 169 阅读 · 0 评论 -
审核流程图 实现流程逻辑
审核流程图,他填充数据可用原创 2022-09-23 11:43:34 · 405 阅读 · 0 评论 -
vue项目里的公共函数
vue项目里的公共函数。原创 2022-08-30 16:13:41 · 405 阅读 · 0 评论 -
UNIAPP 复选框 数据回显
为true 选中需要做判断 当前答案 是否包含在答案列表中。uniapp 表单 复选框 数据回显。原创 2022-08-25 14:06:38 · 2055 阅读 · 0 评论 -
前端常用的 css 样式小技巧
css 布局常用小技巧原创 2022-08-05 09:52:45 · 125 阅读 · 0 评论 -
uniapp 隐私弹框配置 androidPrivacy
uniapp 隐私弹框配置 androidPrivacy,只是适配与安卓原创 2022-06-27 11:53:28 · 1211 阅读 · 0 评论 -
前端 vue pdf 预览功能
vue 前端 pdf 预览原创 2022-04-26 17:57:33 · 1648 阅读 · 1 评论 -
vue 项目 完整的swiper使用案例
安装命令vue npm install swiper@5.2.0 --save-devnpm install vue-awesome-swiper@4 --save-dev`html <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item, index) in listImg" :key="index"> <img :src="原创 2022-04-25 16:20:02 · 1939 阅读 · 0 评论 -
vue 表单验证集合
引入校验文件文件import { isMobile } from '@/common/validate.js';使用handleInter() { let _this = this; let flag = isMobile(_this.codeFrom.phone); if (!flag) { uni.showToast({ title: '手机号码不正确!', icon: 'none' }); return;原创 2022-01-24 15:18:24 · 729 阅读 · 1 评论 -
elemen 完美去除 上传列表
elemen 完美去除 上传列表不会闪 <el-upload style="display: inline-block; margin-left: 10px" ref="upload" action="/api/blade_basic/whitelistentry/importFile" :data="{ isCovered: 1 }" :on-success="uploadSuccess"原创 2022-01-10 17:10:39 · 535 阅读 · 0 评论 -
avue 富文本框怎末使用
avue 富文本原创 2022-01-10 11:24:08 · 714 阅读 · 0 评论 -
vue 动态拼接路由 完整简洁
import Vue from "vue";import Router from "vue-router";import Home from "@/pages/Home/home.vue";import jgcx from "@/pages/jgcx/jgcx.vue";import zxts from "@/pages/zxts/zxts.vue";import notice from "@/pages/notice/notice.vue";import noticeList from "@/原创 2021-11-25 17:53:39 · 2363 阅读 · 0 评论 -
简单实用的 vue 展开 合并
{{ item.moneyName }}原创 2021-09-02 16:09:12 · 273 阅读 · 0 评论 -
完整的 uniapp 表单验证 案例
<uni-forms-item label="年龄" name="age" required> <!-- <input class="input" v-model="personnel.age" type="text" placeholder="请输入年龄" /> --> <uni-easyinput type="text" v-model="personnel.age" placeholder="请输入年龄" ...原创 2021-08-26 18:26:41 · 12264 阅读 · 5 评论 -
简洁的vuex 工作流成
定义一个js文件在main.js 里引入import store from './store/index';store.jsimport Vue from "vue"import Vuex from "vuex" Vue.use(Vuex);export default new Vuex.Store({ state:{ 设定自己需要存储的变量 list:{ name:'' ", aex:" " , max:'“ ”,原创 2021-07-28 11:22:24 · 200 阅读 · 1 评论 -
vue ref作用详解
ref 有三种用法: 1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素<div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div>this.$refs.p 2、ref 加在子组件上,用this.ref.name 获取到的是组件.原创 2021-07-28 11:19:05 · 707 阅读 · 0 评论 -
v-for 还可以这样用
解构赋值li v-for="{ name, id } in users" :key="id"> {{ name }}</li>循环数组<li v-for="(movie, index) in [ 'Lion King', 'Frozen', 'The Princess Bride']"> {{ index + 1 }} - {{ movie }}</li>循环对象<li v-for="(va...原创 2021-07-28 10:18:46 · 70 阅读 · 0 评论 -
avue 树型展示
<template> <basic-container> <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList" :before-open="bef.原创 2021-07-13 17:51:08 · 2432 阅读 · 6 评论 -
x-www-form-urlencoded 如何处理
x-www-form-urlencoded 是post 提交方式的一种请求方法 getData() { 对象格式转换 var formData = new FormData(); formData.append("id", this.propsData.id); lookData(formData).then( (res) => { console.log("山地车",res) this.tableD原创 2021-07-07 09:45:18 · 1307 阅读 · 0 评论 -
avue 联动使用
<template> <basic-container> <avue-crud :data="data" :option="option" v-model="form" @on-load="onLoad" ></avue-crud> </basic-container></template><script>const baseUrl = "htt原创 2021-06-03 16:32:58 · 3603 阅读 · 2 评论 -
最详细的avue属性及使用详细介绍
avue属性及使用详细介绍官方文档<template><!-- 基础组件 --> <basic-container> <!-- <el-button @click='exportHandle'>导出</el-button> --> <avue-crud 设置表格属性 :option="option" 用来存取页面的值 v-model="form"原创 2021-06-03 16:31:40 · 33441 阅读 · 10 评论 -
vue 添加 删除 动态验证
<template> <div> <div> <el-form-item v-for="(item, i) in form.prolist" :key="i" :prop="'prolist.' + i + '.name'" :rules="{ required:.原创 2021-06-03 11:20:03 · 301 阅读 · 0 评论 -
vue 将数字转成中文大写
/** * 将数字转成中文大写 * @params num */export function toChinesNum(num) { let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零" let unit = ["", "十", "百", "千", "万"]; num = parseInt(num); let getWan = (temp) =原创 2021-05-16 22:49:40 · 1443 阅读 · 1 评论 -
节流,防抖
基于wue使用throttle.js文件节流/** * 节流 * @param {function} fn 触发的函数 * @param {number} interval 间隔时间 */export function throttle(fn, interval) { var last; var timer; var interval = interval || 200; return function () { v原创 2021-05-16 22:48:59 · 105 阅读 · 1 评论 -
vue 全局过滤器 时间格式 转换
vue 项目要求将时间戳转成规定的时间格式可以借助 moment.js 完成,现要确定自己的数据是时间戳安装命令npm install moment --savemain.jsimport moment from 'moment'设置过滤器 规定时间格式Vue.filter('formatDate', (value) => { return moment(value).format('YYYY-MM-DD')})// 时间戳转化Vue.prototype.$mom原创 2021-05-13 16:23:58 · 267 阅读 · 1 评论 -
uniapp 路由跳转及传参
遇到这问题,相信你已经搭建好uniapp项目了,下面是代码文件结构先在pages.json页面配置跳转路由 { "path": "pages/details/index", "style": { "navigationBarTitleText": "我是详情页", "navigationBarTextStyle": "black" } }home原创 2021-04-29 18:10:17 · 957 阅读 · 0 评论 -
element 动态导航渲染及数据案例
element 导航实现基于elemenet实现使用前请确保已成功引入html 部分<!--侧边栏菜单--> <el-menu background-color="inherit" text-color="#fff" active-text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">原创 2021-04-28 17:28:16 · 306 阅读 · 0 评论 -
nprogress 详细教程及代码
官网地址https://ricostacruz.com/nprogress/安装命令$ npm install --save nprogress使用方法NProgress.start()NProgress.done()在axios 拦截时使用import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 创建axios实例s// 创建请求时可以用的配置选项let instance = axios.create(原创 2021-04-26 17:27:12 · 606 阅读 · 0 评论 -
微信小程序 如何正确安装 u i 框架
本文以 vant 为例进行安装使用安装命令npm i vant-weapp -S --production在开发者工具里进行设置点击设置里的 构建 npm在点击右上角详情,打开本地设置勾选使用npm 模块在json相关文件引入页面效果...原创 2021-04-26 09:51:50 · 1779 阅读 · 5 评论 -
安装scss 报错 TypeError: this.getOptions is not a function 解决方案
安装scss 报错 TypeError: this.getOptions is not a function是因为 版本过高sass-loader 版本过高就回报错处理方法先卸载 npm uninstall -D sass-loader 在安装相应版本npm install -D sass-loader@10.1.1原创 2021-04-24 14:33:37 · 1756 阅读 · 0 评论 -
地区 经纬度 json 数据
{ municipalities: [{ n: "北京", g: "116.395645,39.929986|12" }, { n: "上海", g: "121.487899,31.249162|12" }, { n: "天津", g: "117.210813,39.14393|12" }, { n: "重庆", g: "106.530635,29.544606|12" } ], provinces: [{ n: "安徽",原创 2021-04-23 15:03:28 · 1240 阅读 · 0 评论 -
前端考试答题,下一题,上一题
<template> <div class="box"> <div class="wrap"> <p class="title">教育培训</p> <el-row class="top"> <el-col :span="3" :offset="1"> <img src="@/assets/img/fh.png"原创 2021-03-12 20:18:21 · 1234 阅读 · 0 评论 -
vue 路由拦截登录及路由守卫
路由守卫:router.beforeEach((to,from,next) => { // to: 即将要进入的路由对象 // from: 即将要离开的路由对象 // next():是一个函数,在路由拦截中一定要注意调用next()进入下一个步骤,要确保进入next // next()- 进入下一个钩子函数,next(false) - 中断当前路由导航, next({path: '/luyou',replace: true})||next({path: '/luyou'}) - 中断当前导原创 2021-02-22 17:48:31 · 1167 阅读 · 1 评论 -
axios 请求方法及并发请求
异步请求的特点:请求之后页面不动,刷新页面局部,多个请求互不影响,同时进行多个。基本知识点:1.基于promise的http库。可以y用在浏览器和nopde.js中,2.官方下载链接http://www.axios-js.com/3. 安装命令:npm install axiosget请求 axios.get(请求接口及参数).then((res)=>{ 请求成功响应}).catch((err)=>{ 请求失败响应})post 请求 axios.po原创 2021-02-20 15:50:37 · 1248 阅读 · 0 评论