- 博客(20)
- 资源 (4)
- 收藏
- 关注
原创 vue.js实现搜索框搜索功能
一、布局(基于html、css、vue.js)1、搜索框:(1)、template部分<template><div> <div class="search"> <input v-model="keyword" type="text" class="searchInput" placeholder="搜索城市 "> </div></div></template> (2)
2020-08-26 22:45:27 12859
转载 JS几大常用的包管理工具对比:NPM、NRM、CNPM、YARN
一.什么是包?在模块化开发中, 在一个模块(一个文件中)尽量只完成一个特定的功能但是有些比较复杂的功能可能需要由多个模块组成,例如: jQuery选择器相关的代码在A模块, CSS相关的代码在B模块, …我们需要把这些模块组合在一起才是完成的jQuery那么这个时候我们就需要一个东西来维护多个模块之间的关系这个维护多个模块之间关系的东西就是"包"简而言之: 一个模块是一个单独的文件, 一个包中可以有一个或多个模块二.JS包的管理在NodeJS中为了方便开发人员发布、安装和管理包, Node
2020-11-16 21:50:01 1329
原创 关于vue-quill-editor样式失效问题
在使用vue-quill-editor的时候,遇到前四个功能全失效的情况,即加粗、倾斜、下划线、删除线失效,其原因其实是全局css,我的reset.css是设置了strong(加粗)、em(倾斜)、u(下划线)、s(删除线)默认样式,导致失效,只要对全局css做修改即可。其他样式失效也可能是这个原因,可作为参考,如代码块没有背景色,在全局css对pre添加背景色即可。...
2020-10-09 21:50:38 3371 3
原创 vue-quill-editor代码块高亮问题
vue-quill-editor默认代码块没有高亮效果,如图:而没有高亮区别显示的代码是没有灵魂的,接下来呢,引入highlight.js使代码高亮,有关highlight.js,可浏览 highlight.js官网首先,依然是安装与引入1、安装npm install highlight.js 2、引入在需要的组件引入import hljs from 'highlight.js'在需要的组件引入或在main.js全局引入代码高亮样式,我选的是dracula.css,还有许多其他样式
2020-10-09 21:48:47 2358
原创 vue-quill-editor快速使用
第一步1、首先当然是安装vue-quill-editor包npm 安装 vue-quill-editornpm install vue-quill-editor --save2、常规操作,接下来向Vue项目里引入vue-quill-editor在main.js里引入vue-quill-editor和样式import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/di
2020-10-09 21:41:23 580
原创 git提示this.$message is not a function怎么办?
在vue文件里找到main.js组件,加上以下代码,重新运行即可:import ElementUI from 'element-ui'Vue.use(ElementUI)
2020-08-27 17:48:33 542
原创 电脑上找不到命令提示符怎么办?
方法一:输入win+r弹出运行界面,在搜索框输入cmd,回车即可方法二:win+x找到Windows PowerShell(管理员 (A)
2020-08-27 17:45:54 2688
原创 如何优雅解决单行溢出隐藏和多行溢出隐藏
1、单行溢出隐藏: overflow: hidden; text-overflow: ellipsis;//多出部分以省略号形式隐藏 white-space: nowrap;/* 禁止换行 normal可以换行 */text-overflow: ellipsis;多出部分以省略号形式隐藏,还可以有其他形式隐藏,如clip,自定义string,可参考溢出隐藏2、多行溢出隐藏:display: -webkit-box; word-break: break-all;-webkit
2020-08-27 17:36:39 2340
原创 vue.js解析lrc格式歌词文件
效果图如下:1、布局部分(1)、template部分<div class="detail"> <div class="song-title"> <p ref="song">{{song}}</p> <p ref="singer">{{singer}}</p> </div> <div class="wrapper"> <
2020-08-27 17:05:22 2048 2
原创 vue.js实现点击单句歌词播放
所实现的功能是:点击单句歌词后,对本句进行播放,并且高亮显示,相应的进度条到达一定的位置。可参考vue.js歌曲播放进度条与歌词滚动同步 ,和vue.js实现歌词高亮滚动与播放同步。效果图:1、布局部分(1)、template部分<audio ref="player" autoplay ></audio>//歌词<div class="detail"> <div class="song-title"> <p ref="song
2020-08-27 17:05:02 547
原创 vue.js歌曲播放进度条与歌词滚动同步
实现的是拖动或点击进度条,歌词随之滚动到指定位置,做到与歌曲播放同步。进度条可参考vue.js实现歌曲播放进度条 ,歌词滚动可参考 vue.js实现歌词高亮滚动与播放同步效果图: vue.js歌曲播放进度条与歌词滚动绑定 1、布局部分(1)、template部分<audio ref="player" autoplay ></audio>//歌词部分&
2020-08-27 16:50:13 3181 1
原创 vue.js实现歌词高亮滚动与播放同步
按照惯例,先上效果图:1、布局部分(1)、template部分<audio ref="player" autoplay ></audio><div class="detail"> <div class="song-title"> <p ref="song">歌名</p> <p ref="singer">歌手</p> </div> <div class="w
2020-08-27 16:43:43 3248 8
原创 vue.js实现点击、拖动进度条播放歌曲事件
进度条可参考本人已写的进度条链接:效果图: vue.js实现点击、拖动进度条播放歌曲事件 进度条:<audio ref="player" autoplay ></audio><div class="bar"> <div class="progressbar" @click="playMusic" ref="runfatbar"&g
2020-08-27 16:37:09 1506 2
原创 vue.js实现歌曲播放进度条
进度条效果图:1、template布局部分:<audio ref="player" autoplay ></audio>//进度条<div class="bar"> <div class="progressbar" @click="playMusic" ref="runfatbar"> <div class="greenbar" ref="runbar"> <span class="yuan"><
2020-08-27 16:36:15 2222 5
原创 vue.js实现返回顶部功能
通常类似淘宝下拉表单界面都非常长,再通过手动上拉返回顶部就非常麻烦,所以可以做个类似淘宝的返回顶部的箭头按钮。效果图:当下拉至一定高度,返回顶部图标便会出现,点击返回顶部箭头按钮后,实现自动平缓上拉,类似于better-scroll。 vue.js实现返回顶部箭头的出现与隐藏 1、template布局部分<div class="goTop iconfont" title="
2020-08-27 16:20:42 1091 1
原创 vue使用vue-seamless-scroll实现上下自动滚动
效果图: vue使用vue-seamless-scroll实现上下自动滚动 一、使用:1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save2、在组件引入vue-seamless-scrollimport vueSeamlessScroll from 'vue-seamless-scroll'compone
2020-08-26 18:50:15 2363
原创 vue实现全局数据传输
vue中的数据传输大致分为三种:父组件向子组件传递数据、子组件向父组件传递数据、和非父子关系的组件之间的数据传递。在这里所要讲的是没有父子关系的组件之间的数据传递,用传统的ajax实现较为麻烦。所以采用eventBus总线传递数据。eventBus原理可参考eventBus一、使用:1、首先,在static路径下创建个js文件夹,里面创建一个eventBus.js文件import Vue from 'vue'export const EventBus = new Vue()2、在需要的两个组
2020-08-26 18:25:17 893
原创 vue.js使用better-scroll实现滚动
better-scroll是一个页面滚动插件,通常在子容器高度超过固定的父容器高度时使用。一、适用的页面结构:<div ref="wrapper" class="wrapper"> <ul class="content"> <li v-for="(item,index) of ms" :key=item.index>{{item.c}}</li> </ul></div>注意:父容器固定高度,并设置ove
2020-08-26 17:22:31 526
React所需的三个js文件3--babel.min.js.zip
2020-11-24
React.js所需三个js文件2--react-dom.development.v17.js
2020-11-24
React.js所需的三个js文件1--react.development.v17.js
2020-11-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人