vue
关注
分享
扫一扫
vue相关知识
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年10月24日 vue element-ui树形表懒加载数据无法更新问题
第一步：在element中得table加入:load=“load”<el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" row-key="Id" @selection-change="onSelectChange原创 2020-10-24 08:24:37 · 307937 阅读 · 0 评论 -
(精华)2020年8月25日 vue element-ui上传图片到oss阿里云
using Microsoft.AspNetCore.Builder;using Microsoft.Extensions.DependencyInjection;using Microsoft.Extensions.Hosting;using Microsoft.OpenApi.Models;using Volo.Abp;using Volo.Abp.AspNetCore.Mvc;using Volo.Abp.Autofac;using Volo.Abp.Modularity;using原创 2020-08-22 22:16:28 · 481452 阅读 · 0 评论 -
(精华)2020年8月1日 vue vue-treeselect树形选择器的使用
npm install --save @riophae/vue-treeselect<template> <el-dialog title="添加表单" :visible.sync="visible"> <el-form ref="form" :rules="rules" :model="entity" label-position="left" label-width="70px" sty原创 2020-08-01 08:57:30 · 544465 阅读 · 2 评论 -
(精华)2020年7月19日 vue 实时通信websocket的封装
import webSocket from '../webSocket.js';export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)原创 2020-07-19 17:55:30 · 561199 阅读 · 1 评论 -
(精华)2020年7月19日 vue 缓存页面的强制更新
页面缓存后，页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。<template> <div </div></template><script>export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console原创 2020-07-19 09:06:28 · 561496 阅读 · 2 评论 -
(精华)2020年7月19日 vue 手写vue底层源码
MYvue.js 主要作用监听属性变化class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 this.observe(this.$data); this.$el = options.el; //包含Watcher创建 new Complie(optio原创 2020-07-19 09:03:45 · 561224 阅读 · 2 评论 -
(精华)2020年7月19日 vue vue-router(手写版)
import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'goods', compone原创 2020-07-19 09:02:08 · 561249 阅读 · 2 评论 -
(精华)2020年7月19日 vue vuex的使用和vuex辅助函数的使用
vuex的基本使用store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = { count:6, country:'中国'};//定义gettersvar getters = { count(state){ return state.count }, isEvenOrOdd(state){ return原创 2020-07-19 08:59:48 · 560551 阅读 · 3 评论 -
(精华)2020年7月19日 vue element-ui日历实现日程安排和区间查询
首先在template加如下代码<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day">原创 2020-07-19 08:55:13 · 561999 阅读 · 1 评论 -
(精华)2020年7月18日 vue clipboard复制剪切
//（1）引入文件 此处是我的js文件所在的位置，根据自己情况正确引入文件<script src="<%=basePath%>js/blackCard/clipboard.min.js" type="text/javascript"></script> //（2）：设置需要复制的值（我这获取的是后台返回的姓名与手机号码） <td><button class="btn" data-clipboard-text="${vipCustom.name}原创 2020-07-16 10:32:26 · 559987 阅读 · 0 评论 -
(精华)2020年7月18日 vue window.print()实现下载pdf的功能
<template> <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF"> <div class="article__heading"> <div class="article__heading__title"> {{ article.t原创 2020-07-18 15:46:03 · 563582 阅读 · 1 评论 -
(精华)2020年7月18日 vue Jszip实现文件压缩成zip导出
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="UTF-8"/> <script type="text/javascript" src="js/jszip.min.js"></script> <script src="js/FileSaver.js"></script>原创 2020-07-16 11:33:25 · 562271 阅读 · 0 评论 -
(精华)2020年7月18日 vue xlsx实现上传Excel文件组件封装
<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"&g原创 2020-07-18 15:19:14 · 563200 阅读 · 1 评论 -
(精华)2020年7月18日 vue element-ui实现tab组件封装
<template> <el-table :data="list" border fit highlight-current-row style="width: 100%"> <el-table-column v-loading="loading" align="center" label="ID" width="65" element-loading-text="请给我点时间！" >原创 2020-07-18 09:41:22 · 564150 阅读 · 1 评论 -
(精华)2020年7月18日 vue element-ui实现表格可编辑
<template> <div class="app-container"> <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="ID" width="80"> <template slot原创 2020-07-18 09:05:35 · 563251 阅读 · 1 评论 -
(精华)2020年7月18日 vue element-ui实现动态表格
固定表头, 按照表头顺序排序<template> <div class="app-container"> <div class="filter-container"> <el-checkbox-group v-model="checkboxVal"> <el-checkbox label="apple"> apple </el-checkbox>原创 2020-07-18 08:32:43 · 562983 阅读 · 0 评论 -
(精华)2020年7月17日 vue vuedraggable实现看板拖动
<template> <div class="board-column"> <div class="board-column-header"> {{ headerText }} </div> <draggable :list="list" v-bind="$attrs" class="board-column-content" :set-data="setData"原创 2020-07-17 15:09:16 · 564421 阅读 · 1 评论 -
(精华)2020年7月17日 vue 实现element-ui的select可拖拽
<template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <slot /> </el-select></template><script>import Sortable from 'sortablejs'export def原创 2020-07-17 14:54:39 · 564900 阅读 · 4 评论 -
(精华)2020年7月17日 vue element-ui实现弹窗拖拽
export default { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.cssText += ';cursor:move;' dragDom.style.cssText += ';top:0px;'原创 2020-07-17 14:36:53 · 563739 阅读 · 1 评论 -
(精华)2020年7月17日 vue 实现回到顶部
<template> <transition :name="transitionName"> <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class=原创 2020-07-17 14:32:25 · 562882 阅读 · 0 评论 -
(精华)2020年7月17日 vue 实现顶部元素浮动
<template> <div :style="{height:height+'px',zIndex:zIndex}"> <div :class="className" :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}" > <slot>原创 2020-07-17 14:13:52 · 563219 阅读 · 0 评论 -
(精华)2020年7月17日 vue dropZone拖动文件上传
<div class="form-group"> <label class="title">真人照(最多只能传一张)</label> <div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓</div><input type="hidden" name="file_id" ng-model="file_id" id="file_id"/>原创 2020-07-16 10:54:24 · 560724 阅读 · 1 评论 -
(精华)2020年7月17日 vue vue-image-crop-upload头像上传
npm install vue-image-crop-uploadnpm install –save-dev babel-polyfill<template> <div id="app"> <button class="btn" @click="toggleShow">设置头像</button> <my-upload @crop-success="cropSuccess" @crop-upload-success原创 2020-07-17 14:00:58 · 564326 阅读 · 12 评论 -
(精华)2020年7月17日 vue Tinymce富文本编辑器
dynamicLoadScriptlet callbacks = []function loadedTinymce() { return window.tinymce}const dynamicLoadScript = (src, callback) => { const existingScript = document.getElementById(src) const cb = callback || function() {} if (!existingScrip原创 2020-07-17 12:01:24 · 563602 阅读 · 0 评论 -
(精华)2020年7月17日 vue 指令权限
//permission.jsimport store from '@/store'function checkPermission(el, binding) { const { value } = binding const roles = store.getters && store.getters.roles if (value && value instanceof Array) { if (value.length > 0) {原创 2020-07-17 11:07:54 · 562793 阅读 · 1 评论 -
(精华)2020年7月17日 vue echarts的使用
Bar<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport resize from './mixins/resize'const anim原创 2020-07-17 09:46:50 · 563289 阅读 · 3 评论 -
(精华)2020年7月17日 vue mixins的使用
以echarts折线图为例<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport resize from './mixins/resize'原创 2020-07-17 09:33:39 · 563378 阅读 · 0 评论 -
(精华)2020年7月17日 vue vuedraggable实现列表拖动
简单的拖动使用<template> <div> <draggable @start="start" @end="end"> <p v-for="d in list" :key="d.id">{{d.name}}</p> </draggable> </div></template><script>import draggab原创 2020-07-16 14:30:04 · 563126 阅读 · 0 评论 -
(精华)2020年7月17日 vue vue-splitpane页面分割
npm install vue-splitpaneimport splitPane from 'vue-splitpane'Vue.component('split-pane', splitPane);<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical"> <template slot="paneL"> A </template原创 2020-07-16 13:50:16 · 564339 阅读 · 1 评论 -
(精华)2020年7月16日 vue vue-count-to数字滚动插件
<template> <countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo></template><script>import countTo from "vue-count-to";export default { components: { countTo }, data() { return { startVa原创 2020-07-16 13:43:35 · 563182 阅读 · 0 评论 -
(精华)2020年7月17日 vue Tui-editor(Markdown编辑器)
<template> <div id="editorSection"></div></template><script>import Editor from "tui-editor"; /* ES6 */import "tui-editor/dist/tui-editor.css"; // editor's uiimport "tui-editor/dist/tui-editor-contents.css"; // editor's原创 2020-07-16 13:37:21 · 564458 阅读 · 1 评论 -
(精华)2020年7月18日 vue element-ui实现表格拖动排序
<template> <ul class="list" id="list"> <li v-for="(item,index) in items"> <p> <b>{{item.nm}}</b> <em>{{item.enm}}</em>原创 2020-07-16 13:35:25 · 563357 阅读 · 3 评论 -
(精华)2020年7月16日 vue screenfull.js实现全屏和退出全屏的功能
<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div></template><script>import screenfull from 'screenfull'export default { name: 'Screenfull', da原创 2020-07-16 12:00:22 · 563279 阅读 · 1 评论 -
(精华)2020年7月16日 vue NProgress页面加载进度条
import App from './App'import VueRouter from 'vue-router'import router from './router' //你的路由文件//引入nprogressimport NProgress from 'nprogress'import 'nprogress/nprogress.css' //这个样式必须引入Vue.use(VueRouter)// 简单配置NProgress.inc(0.2)NProgress.configur原创 2020-07-16 11:48:23 · 562103 阅读 · 2 评论 -
(精华)2020年7月17日 vue driver.js页面分步引导
Driver.js基本用法import Driver from "driver.js";import "driver.js/dist/driver.min.css";import steps from "@/utils/defineSteps"; //用来存放引导的步骤...(){ return { driver:null }},mounted() { this.$nextTick(function () { this.driver =原创 2020-07-16 10:48:19 · 560348 阅读 · 0 评论 -
(精华)2020年7月16日 vue Fuse.js模糊搜索引擎
<template> <div class="hello"> <el-input v-model="title" placeholder="请输入内容"></el-input> <ul> <li v-for="item in result"> 标题： {{item.item.title}} <br /> 作者： {{item.item.autho原创 2020-07-16 11:13:49 · 560950 阅读 · 0 评论 -
(精华)2020年7月17日 vue CodeMirrorr+json-lint实现Json编辑器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>测试</title> <link rel="stylesheet" type="text/css" href="../fonticon/css/codemirror.css"/> <link rel="stylesheet" hr原创 2020-07-16 10:38:32 · 560265 阅读 · 0 评论 -
(精华)2020年7月18日 vue element-ui表格导出Excel文件
安装如下包npm install xlsx file-saver -Snpm install script-loader -S -D<template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> <el-table :data="tableData" style="width: 100%" id='out-table'原创 2020-07-16 11:08:05 · 560245 阅读 · 0 评论 -
(精华)2020年7月14日 vue vue-router动态路由的实现权限控制
一、 addRoutes权限控制场景： 对登陆成功后的用户可能会有不同的身份权限， 看到的系统菜单以及功能不一样， 这个时候需要用到 动态路由的方式来处理路由结构：|— initRoutes 默认是可以看到的路由,是所有用户都可以看到的路由菜单|— asyncRouetes 需要登陆后确认权限才能看到的路由1.1 初始路由initRoutesimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRout原创 2020-07-14 22:25:41 · 564134 阅读 · 0 评论 -
(精华)2020年7月13日 vue axio.js封装和环境配置
一、 axios的封装1.1在src根目录 新建providers文件 ，以及添加几个主要的 文件|—providers|-----util.js 工具函数|-----api.js 接口地址|-----axios.js 封装axios的文件mkdir providerstouch util.js api.js axios.js1.2 配置工作环境 （dev,test,build）安装：yarn add cross-env -D在package.json里配置："scrip原创 2020-07-13 23:14:47 · 562125 阅读 · 0 评论