- 博客(60)
- 资源 (5)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 css动画（图片触碰变大）
img{ transition-property: all; transition-duration: 0.5s; transition-timing-function: ease; transition-delay: 0s; }img:hover{ transform: scale(1.2); }
2021-01-28 09:54:41
1275
原创 video.js的使用（视频切换，时间为递增）
安装 $ npm install video.jsmain.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video使用<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid" controls width="100%" heigh.
2021-01-22 15:41:12
939
原创 Vue element中使用UEditor富文本编辑器--vue-ueditor-wrap
一、安装依赖：首先在前端项目Terminal中执行以下命令：如果你没安装yarn就用npm（第一条命令），安装过yarn就用(第二条命令)：简单测试安装yarn与否，可以在Terminal输入yarn命令，如果提示yarn不是内部命令就是说明你还未成功安装yarn，这时你可以选择用npm命令安装，如果npm也不是内部命令，那就说明你node.js可能也没装。npm i vue-ueditor-wrap# 或者 yarn add vue-ueditor-wrap二、下载ueditor并将其复制到
2021-01-12 16:34:37
1877
原创 js-cookie插件的用法，获取请求头和token
一、安装npm install js-cookie --save二、先在src文件夹中创建util文件夹再在util文件夹中创建auth.js文件三、引用import Cookies from 'js-cookie'const TokenKey = 'token'四、一般使用在cookie中取出// Read cookie:Cookies.get('name'); // => 'value'Cookies.get('nothing'); // => undefine
2021-01-08 10:18:17
2891
原创 axios请求及响应拦截
对axios进行基础配置在src文件中创建util文件夹封装request.js文件import axios from 'axios'; // 该处引入axios模块//封装好的请求token看下另外一篇文章import { getToken } from '@/utils/auth'// 构建axios实例const instance = axios.create({ baseURL: process.env.BASE_API, // 该处url会根据开发环境进行变化（开发/发布）
2021-01-08 10:00:22
574
翻译 vue路由刷新不影响地址
（官方推荐）使用provide / inject组合控制的显示vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器，不受层级结构的限制。修改app.vue<template> <div id="app"> <router-view v-if="isRouterAlive"/> </d
2021-01-04 15:50:53
317
原创 路由跳转动画
从下往上淡出.page{ position: absolute;left:0;right: 0;}.page-enter-active { transition: all 1.2s ease;}.page-leave-active { transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);}.page-enter, .page-leave-to{ left:0;right: 0; transform: translat
2020-12-26 13:49:59
163
原创 nuxt使用 多图轮播
导入加载。。。在plugins文件夹中创建vue-awesome-swiper.js文件import Vue from 'vue'if (process.browser) { const VueAwesomeSwiper = require('vue-awesome-swiper') Vue.use(VueAwesomeSwiper)}在assets中导入下载swiper-bundle.min.css_swiper-bundle.min.js_文件文件内加入<div cla
2020-12-24 17:21:35
1131
1
原创 路由跳转动画（淡入淡出）
需要在 < router-view> 标签的外部添加 < transition> 标签< router-view> 标签必须为双标签< router-view>< /router-view><transition :name="transitionName"> <router-view></router-view> </transition>过渡的css类名：v-ente
2020-12-17 15:46:59
982
转载 vue横向滚动导航栏
直接上代码<div class="navBox"> <ul class="ul"> <li class="li" :class="{'li-activate': navIndex == index}" v-for="(item, index) in navList" :key="index" @click="handleNavClick(index)"> {{item}} <div :class="
2020-12-17 11:39:08
2896
原创 关闭eslint
找到.eslintrc.js文件module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/essential", "eslint:recommended", "@vue/prettier" ], parserOptions: { parser: "babel-eslint" }, rules: { "no-console": pro
2020-12-17 09:08:43
617
原创 多图轮播
安装插件npm install vue-awesome-swiper cnpm inatall vue-awesome-swiper引入全局引入import vueSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' //引入样式组件方式import { swiper, swiperSlide } from "vue-awesome-swiper"; require("swiper/dist/
2020-12-16 10:27:30
195
原创 vue手风琴轮播图（组件）
<template> <!--手风琴组件--> <div class="accordion"> <div class="or-container"> <div class="box" :class="eleindex ==index?'eleactive':''" v-for="(ele,index) in piclist" :key="index" @mouseenter="enter(index)" @mouseleave
2020-12-15 11:45:35
1128
1
转载 javascript效果：手风琴、轮播图、图片滑动【转载】（有同文了，主要是写给自己看的）
手风琴：纯css：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ l
2020-12-15 11:19:54
963
原创 react的基本用法
react中一切都是以对象来表示的1.先npm install react react-dom 两个2.在js中导入两个包import React from 'react'import ReactDOM from 'react-dom'3.通过调用React.createElement()创建虚拟dom元素 至少要有三个参数参数1：创建的元素的类型，字符串，表示元素的名称参数2：是一个对象或null，表示 当前这个DOM元素的属性参数3：子节点（包括 其他 虚拟DOM 获取文本子节点）
2020-10-03 18:57:09
554
翻译 Array对象
创建 Array 对象的语法：new Array();new Array(size);new Array(element0, element1, ..., elementn);参数参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。Array 对象属性co
2020-10-03 11:27:39
179
原创 js数组迭代方法
1 .every()对数组的每一项运行给定函数，如果该函数对每一项都有返回true，则返回true。接受三个参数（项目值，项目索引，数组本身）var txt = “”;var numbers = [45, 4, 9, 16, 25];numbers.forEach(myFunction);function myFunction(value, index, array) { txt = txt + value + “”;}//true2 .filter()对数组中的每一项运行的函数，返回
2020-10-02 20:58:06
176
原创 创建基本的webpack4.x项目
1.先创建一个文件夹2.运行npm init -y快速初始化项目3.在项目根目录新建src源代码目录在src中新建index.html页面新建index.js（入口文件）4.运行npm install webpack webpack-cli -D全局运行npm install cnpm -g5.新建webpack.config.js文件//向外暴露一个打包的配置文件 因为webpack是基于node构建的；所以webpack支持所有的node API 和语法module.ex
2020-10-02 15:57:58
126
原创 模板引擎
模板引擎的使用前引入template.js文件链接: art-template安装.<script src="lib/template-web.js"></script>//在模板引擎中type为text/html 也必须有个id值<script type="text/html" id="templete"> <h1>{{title}}</h1> //标准语法 判断value是否存在 {{if value}} ... {{/if
2020-10-02 15:12:28
137
vue有没有取消排序的网格拖拽组件
2021-10-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人