VUE
关注
分享
扫一扫
文章平均质量分 56
vue学习博客
July twelve
这个作者很懒，什么都没留下…
展开
-
[Vue.Draggable]拖拽后不占位置
[Vue.Draggable]拖拽后不占位置，并有变色效果原创 2023-03-08 16:28:16 · 1069 阅读 · 0 评论 -
[Vue2]el-table+sortablejs实现列拖动，解决拖拽后列宽不变和无法改变问题
Vue 2el-table+sortablejs实现列拖动，解决拖拽后列宽不变和无法改变问题原创 2023-02-13 15:54:23 · 6287 阅读 · 4 评论 -
vue2 嵌套组件
做了以下小功能点：1. 包裹组件向被包裹组件传递参数`form`和`rules`2. 被包裹组件反向传递校验函数，包裹组件的`getCheck`获取被包裹组件的`check`3. 外部使用`validate`方法，进行两层组件的值校验原创 2022-09-29 15:16:55 · 470 阅读 · 0 评论 -
【JS】使用wavesurfer播放网络音频（Vue）
使用wavesurfer播放网络音频原创 2022-07-29 10:42:14 · 2255 阅读 · 0 评论 -
【Echart】实现Y轴不等距显示
【Echart】实现Y轴不等距显示效果图实现代码const list = { arr1: [55, 75, 93, 87, 100], arr2: [89, 80, 83, 74, 95]};const filtration = (arr) => { return arr.map((e) => { if (e <= 80) { return e * 0.625; } else { const _top = e - 80;原创 2022-03-26 10:13:04 · 1380 阅读 · 0 评论 -
【Vue2】element中el-dialog可拖动指令
main.js// 可拖动指令import drag from '@/directive/el-drag-dialog/index.js'Vue.use(drag)directive/el-drag-dialog/index.jsimport drag from './drag'const install = function(Vue) { // Vue.directive('el-drag-dialog', drag) Vue.directive('drag', drag).原创 2022-02-16 10:33:04 · 999 阅读 · 0 评论 -
【Vue3】使用element-plus进行基础的表单校验
<script setup>import { ref, reactive } from 'vue'// 表单元素const dom = ref(null)// 校验规则const rules = { name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]}// 绑定数据const form = reactive({ name: ''})// 测试方法const onSubmit = () =&原创 2021-09-15 11:34:08 · 6009 阅读 · 0 评论 -
【Vue】使用vue-devtools调试
【Vue】使用vue-devtools调试2021年8月26日效果插件版本使用gitee（github没外网太慢）https://gitee.com/mirrors/vue-devtools操作步骤clone项目使用yarn install安装依赖使用yarn run build打包加载已解压的扩展程序注意需要安装yarn（好像）需要按钮webpack不要用npm,用这个报错了好几次，换淘宝镜像，换cnpm都不管用，我看文档上推荐用yarn，就换了..原创 2021-08-26 11:42:48 · 189 阅读 · 0 评论 -
【Vue】【Element】在表格表单中，不同行进行不同校验
目标：如图所示，每行根据不同的返回数据，最大值不同，获取数据如下json// 模拟数据[ { id: 1, name: '', num: 0, max: 10 }, { id: 2, name: '', num: 0, max: 14 }]代码<template> <div> <el-form ref="ruleForm"> <el-table..原创 2021-07-19 14:10:07 · 3388 阅读 · 2 评论 -
【Vue】【Element】使用一个方法，打开弹窗并接收返回值
使用一个方法，打开弹窗并接收返回值示例父组件<template> <div> <el-button @click="open1">打开弹窗1</el-button> <el-button @click="open2">打开弹窗2</el-button> <module-1 ref="module1" /> <module-2 ref="module2" /> &l原创 2021-07-08 11:49:01 · 3286 阅读 · 2 评论 -
【报错】【Vue】：jeecg Boot前端项目启动报错 missing script: dev。目的：使用VScode启动jeecg前端项目
2020年1月13日 16:25:59使用工具VScode 1.40.1node.js npm出现问题截图问题missing script: dev解决方法打开package.jsonscripts中没有dev，只有serve所以启动改为npm run serve启动成功截图...原创 2020-01-13 16:32:23 · 1830 阅读 · 2 评论 -
Vue--我的便携封装
基于eladmin使用，有些引用如果有问题，可以评论说明（有些引用我就是没贴）混入表格查询基本功能import Pagination from '@/components/Pagination'/** * 混入--分页表格 * 暴露参数： * loadTime * => 默认为true,在当前页面有时间选择框时,获取一个月内为默认选择时间 * 暴露方法： * fetchListCallBack() * => 查询列表完成触发,获取返回的res,表格加载数据已拦截 * f原创 2021-01-29 10:45:54 · 78 阅读 · 0 评论 -
Vue--文件下载
/** * 下载文件 * @param {String} url 文件地址 * @param {String} filename 文件名称 */export function downFile(url, filename) { var blob = new Blob([url], { type: 'application/vnd.ms-excel;charset=utf-8' }) // 针对于IE浏览器的处理, 因部分IE浏览器不支持createObjectURL if原创 2020-12-24 11:42:02 · 138 阅读 · 0 评论 -
Vue--超超超小的vue
目录结构new-vue├── public│ └── index.html├── src│ ├── app.vue│ └── main.js└── package.json文件index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2020-11-10 15:55:48 · 100 阅读 · 0 评论 -
Vue--动态引入
0.前提被引入文件同目录下cs.js文件1.使用default动态引入被引入export default { name: '张三'}引入import staticQuote from './cs' // 静态引入export default { created() { console.log(staticQuote, '静态引入,staticQuote') const dynamicQuote = require('./cs')原创 2020-11-09 14:25:53 · 499 阅读 · 0 评论 -
Gitee Pages 部署
1.修改.gitignore将打包文件上传2.修改路由设置，改为hash模式const router = new VueRouter({ mode: 'hash', routes})3.创建.spa文件这个文件是Gitee Pages部署需要的，内容是空4.修改（没有就创建）vue.config.js其中vue-demo是库的名字const path = require('path')const resolve = dir => { return path.join原创 2020-10-31 21:08:50 · 1451 阅读 · 1 评论 -
Vue--子组件之间相互调用及传值
引用了element做按钮组件父组件创建子组件公用的空vue变量,为pubVue,并传给需要互相传参/互相调用方法的两个子组件<template> <div> <btn-tools :pubVue="pubVue" /> <table-list :pubVue="pubVue" /> </div></template><script>// 组件引用import TableList .原创 2020-10-28 14:12:45 · 4715 阅读 · 1 评论 -
Vue--watch监听属性改变
方法一监听监听formData的CompanyCode属性,分别用changeCompanyCode方法监听watch: { 'formData.CompanyCode': 'changeCompanyCode'}实现/** * 监听--changeCompanyCode */changeCompanyCode() { const con = this.clientList.find(item => item.CompanyCode === this.formDat原创 2020-10-26 17:19:55 · 559 阅读 · 0 评论 -
Vue--使用全局混入
Vue–使用全局混入main.jsnew Vue({ el: '#app', router, store, render: h => h(App)})// 全局混入import { common } from '@/mixins'Vue.mixin(common)@/minix/index.js// 全局公共方法import common from './common'export { common}@/minix/common.js/** * 全原创 2020-10-23 10:54:48 · 2108 阅读 · 0 评论 -
Vue--解决build静态资源后无法直接访问问题
问题原因，打包之后访问路径错误，index.html打开是空白，F12报错找不到引用文件，一看引用在了根目录（文件所在盘，如：C盘、E盘）解决步骤1，修改使用路由方式将路由从history换成hashconst router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes});步骤2，修改使用配置文件// vue.config.jsmodule.exports = { // 解决原创 2020-07-08 23:21:24 · 6528 阅读 · 3 评论 -
Vue--vue项目部署--3.服务器一键更新部署，超超超简单版本
Vue–vue项目部署–3.服务器一键更新部署本地Windows10运行服务器Linux运行设置自动部署（本篇）文章目录Vue--vue项目部署--3.服务器一键更新部署1.环境、工具2.修改文件目录3.引入scp2库4.文件修改详细1.products.js文件：数据库连接信息2.index.js文件：上传服务器运行js3.package.json修改：新增指令5.学习博客注：1...原创 2020-04-05 13:18:35 · 1702 阅读 · 0 评论 -
Vue--vue项目部署--2.Linux系统使用nginx运行vue项目
Vue–vue项目部署–2.Linux系统使用nginx运行vue项目本地Windows10运行服务器Linux运行（本篇）设置自动部署文章目录Vue--vue项目部署--2.Linux系统使用nginx运行vue项目1.环境、工具2.基本步骤3.详细步骤1.服务器安装nginx2.上传项目文件dist（可重命名）3.下载上传ssl证书（nginx版）4.服务器配置`conf`配置文件...原创 2020-04-04 16:23:50 · 1000 阅读 · 0 评论 -
Vue--vue项目部署--1.本地Windows10运行，使用nginx运行vuecli
vue项目部署–本地Windows10运行本地Windows10运行（本篇）服务器Linux运行设置自动部署文章目录vue项目部署--本地Windows10运行1.环境、工具2.步骤概述1.环境、工具工具版本npmnodevue-cliVScode（编辑代码）sublime_text（编辑配置文件）nginx（项目运行）...原创 2020-04-04 12:50:33 · 3131 阅读 · 1 评论 -
Vue--vuecli4使用axios，及解决跨域问题
Vue–vuecli4使用axios，及解决跨域问题使用版本vue-cli 4.1.2VScode 1.42.0问题一、配置问题（根据此配置，可避免跨域问题）我配置访问后台路径时，发现vue-cli4已经没有了config/index.js文件，只有一个vue.config.js所以根据博客1.2.会出现找不到在那里配置的情况，博客6.说明，可以在vue.config.js配置...原创 2020-03-23 23:57:48 · 5378 阅读 · 3 评论