2020年08月_卡姿兰大长腿

原创 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 169

原创 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&gt

2020-08-22 15:23:55 1472

原创 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 368

原创指令权限

//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 265

原创 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 945

原创 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 360

原创 vue-splitpane页面分割

<template> <div class="components-container"> <split-pane split="vertical" @resize="resize"> <template slot="paneL"> <div class="left-container" /> </template> <template slot="paneR"&gt

2020-08-22 15:17:42 1722

原创 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 158

原创 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 779

原创 element-ui实现表格拖动排序

<template> <div class="app-container">  <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 1330

原创 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 1160 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 154

原创 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 478

原创 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 1214

原创 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 2441

原创 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 534

原创 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 2023 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 542

原创 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 432

原创 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 85

原创手搭脚手架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 137

原创 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 527

原创 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 110

原创 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 126

原创非父子组件相互传参(发布订阅)

<!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 95

原创父子组件相互传参

<!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 129

原创模板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 168

原创组件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 300

原创 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 128

原创 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 114

原创自定义指令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 82

原创数据监听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 116

原创实例属性的使用

<!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 102

原创 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> &lt

2020-08-19 11:35:09 81

原创计算属性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 120

原创 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 76

原创 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 727

原创 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 126

原创 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 113

原创 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 646

空空如也

空空如也