vue
关注
分享
扫一扫
文章平均质量分 63
榴莲不好吃
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
全能的vue表单校验插件，开箱即用
将提示展示到“我想飞一会”标签上原创 2025-06-13 17:56:22 · 81 阅读 · 0 评论 -
gulp打包vue3+jsx+less插件
在根目录下添加gulpfile.js文件，package.json添加命令npm run gulp。原创 2023-10-20 15:54:40 · 816 阅读 · 0 评论 -
vue2.0,vue3.0 v-model数据双向绑定
【代码】vue2.0,vue3.0 v-model数据双向绑定。原创 2022-09-27 10:18:42 · 450 阅读 · 0 评论 -
vue实现审批流
审批流在工作成是很常见的一个功能模块,下面是一个审批流的基本样子,我们怎么用代码实现呢,我选择用vue来写的,1.首先可以将下图拆分成多个模块条件节点模块,操作节点模块,结束模块,分支模块等,2.每一层都可以添加条件模块,且条件模块是一样的,所以此处是需要递归实现的我的模块拆分如下目录:代码结构如下:完整案例展示戳这里....................................原创 2022-06-14 09:22:02 · 20247 阅读 · 28 评论 -
vue,移动端滚动条触底加载更多
文章目录配置参数核心滚动源码配置参数const scrollProps = { threshold: { default: 0, type: Number }, hasMore: { default: false, type: Boolean }, loadMoreFn: { default: () => { }, type: Function }, el: { default: null, type: String },}参数说明:threshold:到达底部多少距离的时原创 2022-05-25 15:56:02 · 2708 阅读 · 0 评论 -
vue+tsx+slot
Vue + tsx 使用 slot 没有被替换的问题,slot 没有被替换的问题原创 2022-04-20 16:29:35 · 2964 阅读 · 2 评论 -
vue3.x+vuex 后台系统设置按钮权限
vuex，设置storeimport { createStore } from 'vuex'export default createStore({ state: { buttonPermission: { add: true, edit: false, delete: true } }, mutations: { }, actions: { }, modules: { }})编写指令：import store from原创 2022-02-20 13:24:24 · 456 阅读 · 0 评论 -
v-inline-date,类似携程,飞猪,带价格的时间选择
vue-select-date安装使用选择日期安装npm i -S vue-select-date使用<selectdate :startDate="startDate" :endDate="endDate" :current="current" :dateJson="dateJson" :dateType="dateType" @selectDate="selectDateEvent" ></selectdate><scri原创 2021-07-08 11:30:06 · 679 阅读 · 0 评论 -
vue给div添加自定义的v-on事件,非组件
作为前端开发人员，有时候正在度假，.net开发人员一个电话打过来，非让修改一些东西，这时候随便借一个电脑，装一个visual studio是不现实的，那么我们要如何做呢？首先安装dotnet-core64位下载地址：https://dotnet.microsoft.com/download/dotnet-core/thank-you/sdk-3.1.101-windows-x64-inst...原创 2020-02-13 17:46:04 · 946 阅读 · 0 评论 -
uni-app 自带的picker封装一个日期-时间选择器
首先看下最终效果安装dayjsnpm i -S dayjsimport dayjs from 'dayjs';// 设置数据const dateArr = []for(let i = 0;i<50;i++) { // 默认50天 const itemDate = dayjs().add(i,'day'); const d = itemDate.day(); let week = ''; if(d === 0){ week = '日' } if(d === 1){ week =原创 2021-06-16 11:26:29 · 7780 阅读 · 9 评论 -
vue,uni-app双向滑动,小程序,区间slider,range
简介有些项目涉及到价格选择,需要用到区间滑动,s-region-slider是基于uni-app开发的slider, 脱离了原生的slider,使用纯view+css+js开发的插件;兼容说明s-region-slider 在pc、H5-mobile、微信小程序、支付宝小程序、字节跳动小程序均已测试通过，其他平台没做过测试,如使用的时候碰到问题,可提出反馈,作者会及时调整。导入import sllRegionSlider from '@/pages/s-region-slider/s-region原创 2021-05-20 15:01:29 · 6406 阅读 · 19 评论 -
vue-cli3项目改造成nuxt
先用官方的命令，新建一个nuxt项目npm init nuxt-app <project-name>由于我们使用自己的axios所以不选择@nuxt/axios建好后，目录如下现在我们为了保持和vue的风格类似，所以需要改造下改造目录在根目录新建src文件夹，将文件夹都剪切到src中，如下图配置nuxt.config.js在nuxt.config.js 文件中添加 srcDir: “src/”,这样，目录就调整好了。配置eslint将原先项目里面的eslint里的原创 2020-11-19 15:14:22 · 3724 阅读 · 0 评论 -
发布angular指令，vue指令，js文件到npm的流程
<a href="tel:400-600-9666">拨打电话</a>点击拨打电话，系统会弹出拨打电话的弹出层。原创 2018-01-15 13:11:56 · 12636 阅读 · 0 评论 -
vue-tv-focusable
文章目录简介下载使用1.设置元素可获取焦点2.设置焦点的样式3.指定焦点移到到某一个元素上4.自定义焦点移动其它1.提一下初始化2.监听焦点状态简介tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以最简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。下载npm i tv-focusable使用1.设置元素可获取焦点<div v-focusable>可获取焦点的元素</div><div>不可获取焦点的原创 2020-10-13 09:20:54 · 12546 阅读 · 87 评论 -
vue给div添加自定义的v-on事件,非组件
vue通常都是在父子组件中,v-on和emit配对使用,我们都知道v-on:click是可以直接使用的.如下:<div @click="getNumber"></div>那如果,我想加个@left事件(如下),按键盘的左箭头的时候打印一个随机数,需要怎么做呢?<divref="left"@left="getNumber">left</div>methods: { getNumber() { console.log(Math....原创 2020-09-29 16:38:02 · 3583 阅读 · 0 评论 -
vue-cli3 使用cdn减小打包体积
拿element-ui为例吧；安装element-ui后打包出来的体积为800多kB，即使使用了官方的按需加载，打包下来的体积也有700kB为了减小打包体积我们可以使用cdn引入模式注意：因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式负责会报错index.html引入<head> <meta charset="utf-8"> <meta http-equiv=".原创 2020-08-14 14:47:50 · 2125 阅读 · 0 评论 -
vue-cli3 多入口,多环境打包
本篇文章讲解如何进行多入口打包以及多环境打包.1.多入口打包假设我们的项目,分为手机端商城和pc端后台管理,手机上是用户访问,pc上是自己的后台管理,后台管理使用elementUI框架,H5不使用任何框架.打包的时候,pc和h5分开打包.本机运行的时候pc和h5也是分开的2.多环境打包一个项目想要正式上线,首先需要本地开发没问题后,发到测试线上给测试人员测试,测完没问题再发到预发布环境(类似正式环境)上,最后没问题了才发到正式线,这个过程中每个环境连的接口地址都不一样,这是肯定不能每打包一原创 2020-06-09 18:17:34 · 4721 阅读 · 0 评论 -
vuex-module-decorators详解
安装 npm install -S vuex-module-decorators安装成功后就可以使用啦,先看下stateimport { Module, VuexModule } from 'vuex-module-decorators'@Moduleexport default class Vehicle extends VuexModule { wheels = 2}命名空间const moduleA1 = { namespaced: tr...原创 2020-05-29 11:25:43 · 21351 阅读 · 7 评论 -
vue-property-decorator的简单介绍,一看就会
identifier!如果编译器不能够去除null或undefined，你可以使用类型断言手动去除。 语法是添加!后缀：identifier!从identifier的类型里去除了null和undefined：function fixed(name: string | null): string { function postfix(epithet: string) {...原创 2020-05-21 13:57:21 · 58404 阅读 · 8 评论 -
利用vue的install开发一个简易全局注册的alert组件
首先新建一个alert组件<template> <div class="layer-alert-bg"> <div class="layer-alert"> <div class="fj-title">{{ title }} <button class="fj...原创 2020-01-02 18:55:25 · 776 阅读 · 0 评论 -
vue 给老项目添加单元测试
由于之前的项目为了赶进度，所以去掉了测试这块，近段时间空下来就开始给项目添加单元测试，参考目前官方的vue的测试，1.利用vue init webpack my-project新建一个vue工程，然后将下面的文件拷贝到我们的项目中，(注意：该版本的vue使用的测试是chai断言库)2.我们要在package.json文件中安装以下依赖（将下面的依赖贴到package.json中然后执行 npm...原创 2019-12-02 11:13:00 · 1465 阅读 · 0 评论 -
vue 单元测试报错之 undefined is not a constructor (evaluating 'expect(vmComponent.count).toBe(1)')
下面是按照vue官方的例子,写的测试,// MyComponent.spec.js import Vue from 'vue'import MyComponent from '@/components/MyComponent.vue'describe('MyComponent', () => { // 检查原始组件选项 it('has a created hook',...原创 2019-12-02 09:33:44 · 3659 阅读 · 1 评论 -
axios http配置
axios全局配置axios.js文件/** * http配置 */// 引入axios以及layer中的loading和message组件import axios from 'axios'// 获取CancelTokenconst CancelToken = axios.CancelToken;const source = CancelToken.source();/...原创 2018-07-06 11:02:52 · 11575 阅读 · 0 评论 -
vue 更改NODE_ENV，根据不同环境打包到不同的文件夹下
下面拿vue项目做个改动1.安装cross-envcnpm icross-env -D2.package.json配置不同环境下打包的命令{... "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build":...原创 2018-05-24 17:14:32 · 20239 阅读 · 2 评论 -
vue中 关于$emit的用法
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件：<template> <div class="train-city"> &l............原创 2017-11-21 18:02:16 · 814192 阅读 · 77 评论 -
vue 插槽slot
插槽：v-slot组件： class="v-slot"> 我是一个小插槽 name="a">sssssqqq name="b">aaaa query页面： class="index"> index slot="a">我是a插槽 slot="b">我是b插槽 结果：原创 2017-12-21 10:42:58 · 632 阅读 · 0 评论 -
vue+axios路由拦截
const router = new Router({ routes: [ {path: '/', redirect: '/login'}, {path: '/login', name: 'login', component: login}, { path: '/manage', name: 'manage', component: manage, ...原创 2018-07-06 11:11:24 · 10523 阅读 · 0 评论 -
vue-router 之 keep-alive 渲染
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。<keep-alive> <component> <!-- 该组件将被缓存！ --> </component></keep-alive>propsinclude - 字符串或正则表达，只有匹配的组件会被缓存exc...原创 2018-12-04 17:06:44 · 4464 阅读 · 1 评论 -
通过$emit和$on,vue实现兄弟组件通讯
首先在src目录下建一个config文件夹,文件夹里面放一个eventroot.js文件,再建两个组件(兄弟组件),目录如下:eventroot.js里面new出来的空的vue实例,代码如下import Vue from 'vue';export default new Vue;didi.vue代码:<template> <div class="...原创 2018-12-03 15:03:19 · 1060 阅读 · 0 评论 -
vue实现表格列位置的拖拽
首先我们看下最终的交互效果:此功能是针对vue项目的表格拖拽,以自定义指令的形式来完成交互的.主要原理的dom节点的交换;交互思路:1.首先要获取当前点击的th,并且在页面创建一个大小内容和th一模一样的div.并设置当前div的样式始终随着鼠标.2.将页面上所有的th的宽度保存到一个数组中(thWidthArr),获取保存下来当前点击的th的index(direction...原创 2018-12-27 14:18:40 · 7562 阅读 · 1 评论 -
利用vuex ,开发一个登录功能
在一个大型项目中肯定是要用到vuex的,今天使用vuex,做一个用户登录,登陆后获取审批列表的功能.这两块分为两个模块所用到的数据分别放在login-store文件夹,approver-store文件夹下;以下如果有不合理或者错误的地方，也希望各位老司机不吝赐教，有机会多交流。话不多说,开始!一、安装vuex:cnpm install vuex -S二、构建核心仓库 stor...原创 2019-03-25 15:55:01 · 1744 阅读 · 0 评论 -
vue 打包完后的项目配置接口地址
1.在根目录新建一个environment.js文件.(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' &...原创 2019-06-25 13:13:05 · 9819 阅读 · 0 评论 -
cordova创建vue项目
注(非常重要):首先要下载java JDK和android SDK,百度下这么安装和配置环境变量,如果需要用到真机调试的,再安装个Android Studio具体配置可以参考官网(https://cordova.apache.org/docs/zh-cn/8.x/guide/platforms/android/index.html)此文章就以cordova+vue来举例使用t...原创 2018-12-03 13:33:34 · 461 阅读 · 0 评论 -
vux scroller在iOS13上，一停止滑动就跳到顶部
今天客户反馈的问题，说在最新版的iOS上（iOS13），滑动列表，滑完就会跳到顶部，然后去查了下vux的文档，没有解决办法，百度了一大堆，也没有相关问题，只能看下源码到底是哪除了问题。bug出现的原因：经过一层层的查找，终于发现是ios13上面获取transform的结果跟老版本的结果不一样// 老版本：'matrix(1, -2.4492935982947064, 2.44929...原创 2019-10-11 15:45:25 · 13447 阅读 · 26 评论