vue
vue实战
卡姿兰大长腿
专注于前端,全栈开发
展开
-
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-08-24 13:18:04 · 162 阅读 · 0 评论 -
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-08-22 15:23:55 · 1450 阅读 · 0 评论 -
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-08-22 15:23:11 · 367 阅读 · 0 评论 -
指令权限
//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-08-22 15:20:46 · 261 阅读 · 0 评论 -
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-08-22 15:20:02 · 896 阅读 · 0 评论 -
vuedraggable实现列表拖动
<template> <div class="dndList"> <div :style="{width:width1}" class="dndList-list"> <h3>{{ list1Title }}</h3> <draggable :set-data="setData" :list="list1" group="article" class="dragArea"> <d原创 2020-08-22 15:18:14 · 332 阅读 · 0 评论 -
vue-splitpane页面分割
<template> <div class="components-container"> <split-pane split="vertical" @resize="resize"> <template slot="paneL"> <div class="left-container" /> </template> <template slot="paneR">原创 2020-08-22 15:17:42 · 1689 阅读 · 0 评论 -
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-08-22 15:17:11 · 143 阅读 · 0 评论 -
Tui-editor(Markdown编辑器)
export default { minHeight: '200px', previewStyle: 'vertical', useCommandShortcut: true, useDefaultHTMLSanitizer: true, usageStatistics: false, hideModeSwitch: false, toolbarItems: [ 'heading', 'bold', 'italic', 'strike',原创 2020-08-22 15:15:54 · 772 阅读 · 0 评论 -
element-ui实现表格拖动排序
<template> <div class="app-container"> <!-- Note that row-key is necessary to get a correct row order. --> <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="wi原创 2020-08-22 15:15:04 · 1307 阅读 · 0 评论 -
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-08-22 15:14:24 · 1134 阅读 · 1 评论 -
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-08-21 12:49:37 · 129 阅读 · 0 评论 -
vue driver.js页面分步引导
Driver.js基本用法<template> <div class="app-container"> <aside> {{ $t('guide.description') }} <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a> </aside> <el-but原创 2020-08-21 12:48:53 · 454 阅读 · 0 评论 -
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-08-21 12:47:31 · 1183 阅读 · 0 评论 -
vue CodeMirrorr+json-lint实现Json编辑器
<template> <div class="json-editor"> <textarea ref="textarea" /> </div></template><script>import CodeMirror from 'codemirror'import 'codemirror/addon/lint/lint.css'import 'codemirror/lib/codemirror.css'imp原创 2020-08-21 12:47:00 · 2405 阅读 · 0 评论 -
element-ui表格导出Excel文件
安装如下包npm install xlsx file-saver -Snpm install script-loader -S -D//AutoWidthOption<template> <div style="display:inline-block;"> <label class="radio-label">Cell Auto-Width: </label> <el-radio-group v-model="autoWi原创 2020-08-21 12:46:06 · 508 阅读 · 0 评论 -
vue-router动态路由的实现权限控制
一、 addRoutes权限控制场景: 对登陆成功后的用户可能会有不同的身份权限, 看到的系统菜单以及功能不一样, 这个时候需要用到 动态路由的方式来处理路由结构:|— initRoutes 默认是可以看到的路由,是所有用户都可以看到的路由菜单|— asyncRouetes 需要登陆后确认权限才能看到的路由1.1 初始路由initRoutesimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter)原创 2020-08-21 12:42:59 · 1975 阅读 · 1 评论 -
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里配置:"scripts":原创 2020-08-21 12:36:02 · 509 阅读 · 0 评论 -
vue.config.js配置详解
let path = require('path')function resolve (dir) { return path.join(__dirname, dir)}module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path a原创 2020-08-21 12:27:29 · 370 阅读 · 0 评论 -
vue-cli脚手架的使用
vue-cli脚手架https://cli.vuejs.org/zh/guide/installation.html简介版本:2.xvue-cli是一个vue脚手架,可以快速构造项目结构vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple示原创 2020-08-21 12:25:17 · 75 阅读 · 0 评论 -
手搭脚手架vue-cli
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display原创 2020-08-21 12:11:31 · 130 阅读 · 0 评论 -
vue-router路由的权限控制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display原创 2020-08-20 01:35:08 · 509 阅读 · 0 评论 -
vue-router路由的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300; text-decoration:none; } */ .active{ font-size原创 2020-08-20 01:34:35 · 89 阅读 · 0 评论 -
slot插槽(内容分发)的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app">原创 2020-08-20 01:34:00 · 99 阅读 · 0 评论 -
非父子组件相互传参(发布订阅)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <!-- A组件和 B组件向C组件原创 2020-08-20 01:33:29 · 70 阅读 · 0 评论 -
父子组件相互传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件</title> <script src="https://cdn.jsdelivr.net原创 2020-08-20 01:32:57 · 105 阅读 · 0 评论 -
模板template的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用模板</title> <script src="https://cdn.jsdelivr.net/np原创 2020-08-20 01:32:24 · 163 阅读 · 0 评论 -
组件component的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式</title> <script src="https://cdn.jsdelivr.net原创 2020-08-20 01:31:55 · 292 阅读 · 0 评论 -
vue 动画transition的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <script src="https://cdn.jsdelivr.net/npm/v原创 2020-08-20 01:31:20 · 101 阅读 · 0 评论 -
vue 简单小结-元素拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习:自定义指令实例(元素拖动)</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app div{ width: 100p原创 2020-08-20 01:30:50 · 108 阅读 · 0 评论 -
自定义指令directive
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> &原创 2020-08-20 01:30:02 · 76 阅读 · 0 评论 -
数据监听watch
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视数据的变化:$watch</title> <script src="https://cdn.jsdeli原创 2020-08-19 11:36:19 · 108 阅读 · 0 评论 -
实例属性的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue实例的属性和方法</title> <script src="https://cdn.jsdelivr原创 2020-08-19 11:35:44 · 95 阅读 · 0 评论 -
vue-resource的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue-resource</title> <style> .current { background-color: #ccc; } </style> <script src="js/vue.js"></script> <原创 2020-08-19 11:35:09 · 75 阅读 · 0 评论 -
计算属性computed的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app">原创 2020-08-19 11:34:41 · 94 阅读 · 0 评论 -
vue组件生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期学习&原创 2020-08-19 11:34:08 · 71 阅读 · 0 评论 -
axio的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcdn原创 2020-08-19 11:33:32 · 699 阅读 · 0 评论 -
filter过滤器的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> /** * 自定义全局过滤器 */ Vue.fil原创 2020-08-19 11:32:57 · 101 阅读 · 0 评论 -
v-text,v-html,v-once,v-pre,v-cloak的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = function () { let原创 2020-08-19 11:32:27 · 87 阅读 · 0 评论 -
class和style的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class和style</title> <script src="https://cdn.jsdelivr原创 2020-08-19 11:31:48 · 620 阅读 · 0 评论