vue
yuanliy
这个作者很懒,什么都没留下…
展开
-
swiper在vue中引用
swiper 在vue中引用转载 2022-07-14 14:45:31 · 1011 阅读 · 0 评论 -
encodeURIComponent---转换uri编码,防止解析地址出问题
encodeURLComponent转载 2022-06-14 11:58:09 · 892 阅读 · 0 评论 -
cropperjs(裁剪)
<template> <div class="hello"> <p>预览</p> <div class="before"></div> <button style="margin: 30px auto" type="error" @click="sureSava" >裁剪</button> <div class="container"> &l转载 2021-09-13 16:09:22 · 591 阅读 · 0 评论 -
Vue粒子特效(vue-particles插件)
npm install vue-particles --savemain.jsimport VueParticles from 'vue-particles' Vue.use(VueParticles) 在需要的组件使用<template> <div id="login"> <vue-particles class="login-bg" color="#39AFFD" :particleOpacity转载 2021-08-31 17:34:30 · 546 阅读 · 0 评论 -
在Vue项目中获取当前日期的农历(阴历)
参考链接:https://blog.csdn.net/weixin_44483624/article/details/115455486插件:npm install --save chinese-lunar-calendarvue使用<script>import { getLunar } from 'chinese-lunar-calendar'export default { data() { return { getLunarDay: '', year: new转载 2021-08-25 16:47:46 · 1060 阅读 · 0 评论 -
vue实现获取当前日期时间并实时刷新
参考链接:https://www.cnblogs.com/zhao0831/p/12841652.html功能需求:获取当前系统时间,在页面上显示:年月日时分秒,并且实时刷新,和系统时间保持一致第一步:在data 里面声明变量data() { return { nowDate:null, //存放年月日变量 nowTime:null, //存放时分秒变量转载 2021-08-25 16:44:57 · 946 阅读 · 0 评论 -
Vue 实现输入框新增搜索历史记录功能
参考链接:https://www.jb51.net/article/171994.htm插件:npm install good-storage -S在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先得到当前的存储数据情况,将关键字存到数组中,判断如果数组中有相同的数据,则把重复的数据删除,将新的关键字存入到前面)cache.js/*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索的key _s转载 2021-08-25 16:39:35 · 1869 阅读 · 1 评论 -
图片懒加载
官网地址:https://www.npmjs.com/package/vue-lazyload借鉴地址:https://www.jianshu.com/p/73a7c92064e9安装npm i vue-lazyload -S引入// main.jsimport VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)配置参数//static目录下的图片引用Vue.use(VueLazyload,{ error:'/static/转载 2021-08-25 16:30:48 · 119 阅读 · 0 评论 -
实现页面以pdf的形式展示和html以pdf形式导出
vue-pdf的使用相关链接:https://www.cnblogs.com/lodadssd/p/10297989.html之前的博客写过,所以这一次我就不废话,直接贴代码<!-- * @Descripttion: your project * @version: 1.0 * @Author: Aidam_Bo * @Date: 2021-08-23 15:29:15 * @LastEditors: Aidam_Bo * @LastEditTime: 2021-08-25 11:0原创 2021-08-25 14:40:09 · 235 阅读 · 0 评论 -
表情符号(Emoji)在Web中的使用
相关网站https://emojipedia.org/复制直接粘贴在html中在 HTML 中使用表情符号对应的Unicode编码如果有的环境之下直接复制粘贴过来的表情符号放置在 HTML 的标签元素中,浏览器客户端无法正常显示(即直接指定的表情符号不起作用)需要对该Unicode编码做一些转换,使用 &#x 来替代 U+1F467 编码中的 U+ ,即 U+1F467 更换成 👧...原创 2021-08-19 18:01:00 · 560 阅读 · 0 评论 -
echarts中存在的_echarts_instance_属性--echarts刷新作用
$("#theme_btn").click(function () { var theme = $("#theme").val(); //echarts的渲染逻辑是这样的: //如果未实例化则进行实例化过程,在此期间会在div容器生成一个_echarts_instance_属性,该属性就是当前echarts的ID,然后进行后边的渲染操作,当我们刷新已经实例化的echarts图表时,echarts会先匹配该div容器上的_echarts_instance_属原创 2021-08-19 11:02:01 · 5051 阅读 · 0 评论 -
vue better-scroll
https://www.jianshu.com/p/a9262b6a5156官网http://ustbhuangyi.github.io/better-scroll/doc/npm install better-scroll --saveimport BScroll from 'better-scroll'<div class="wrapper"> <!-- better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略原创 2021-08-15 17:54:52 · 129 阅读 · 0 评论 -
vue数据滚动
cnpm install vue-seamless-scroll --saveimport vueSeamlessScroll from 'vue-seamless-scroll'//注册组件components: { vueSeamlessScroll }, <template> <vue-seamless-scroll :data="arr" class="seamless原创 2021-08-15 17:50:13 · 380 阅读 · 0 评论 -
Vue中的移动端事件插件vue-touch
vue-touch包括单击、双击、长按、缩放等手势事件npm安装npm install vue-touch@next --save//main.js中引入:import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})用法如下://html代码<template> <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright"原创 2021-08-15 17:32:16 · 1568 阅读 · 0 评论 -
Vue中的移动端css适配方案
1.flexible主要是用来响应式改变根元素的字体大小安装命令 npm install lib-flexible --save在main.js里面导入命令import 'lib-flexible'要把index.html里面的<meta name='viewport'>标签删除;因为会自动添加2.安装postcss-plugin-px2rem安装命令 npm i --save postcss-plugin-px2rem创建一个名为vue.config.js的文件写原创 2021-08-15 17:20:01 · 396 阅读 · 0 评论 -
vue和jQuery数字滚动动画插件
安装npm install vue-count-to例子:<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo></template><script> import countTo from 'vue-count-to'; export default { components: { countTo },原创 2021-08-15 17:03:28 · 314 阅读 · 0 评论 -
vue-carousel-3d----立体3d滚动效果
https://wlada.github.io/vue-carousel-3d/// 安装npm install -S vue-carousel-3d// 使用的俩种方式// 方式一全局注册import Vue from 'vue'import Carousel3d from 'vue-carousel-3d'Vue.use(Carousel3d)// 方式二组件局部注册import { Carousel3d, Slide } from 'vue-carousel-3原创 2021-08-09 20:47:41 · 1732 阅读 · 0 评论 -
vue-pdf
相关链接https://www.cnblogs.com/lodadssd/p/10297989.html <pdf :src="pdfPath" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount = $event"原创 2021-08-09 20:29:55 · 60 阅读 · 0 评论 -
其他上下翻页
<p class="rbd-pdf-pagination"> <a-button type="link" @click="currentPage = 1" :disabled="currentPage == 1" > 首页 </a-bu...原创 2021-08-09 20:16:57 · 55 阅读 · 0 评论 -
动态滚动条
//滚动条import PerfectScrollbar from "perfect-scrollbar";import "perfect-scrollbar/css/perfect-scrollbar.css";export const PScrollbar = (className) => { return new PerfectScrollbar(document.querySelector(`.${className}`));};import { PScrollbar } f原创 2021-08-09 18:55:57 · 136 阅读 · 0 评论 -
改变fontSize
页面调用 <a-row :gutter="0"> <a-col :span="24"> <a-radio-group v-model="fontSizeValue" @change="onFontSizeChange"> <a-radio :value="12"> 小 </a-radio> <a-radio :value="14原创 2021-08-09 18:23:04 · 325 阅读 · 0 评论 -
利用ant desgin vue 里面的layout布局
<template> <a-layout class="rbd-layout-task-center"> <a-layout-sider class="rbd-ant-layout-sider" theme="light" v-model="collapsed" collapsible :collapsedWidth="60" > <a-menu :selec原创 2021-08-09 18:11:29 · 1254 阅读 · 0 评论 -
利用vuex实现控制字体大小的改变
思路:利用vuex实现控制字体大小的改变store.jslocalStorage.getItem避免再次打开页面后字体大小发生改变,两个方法用于控制两种字体大小const FZ = 'FZ'const FZ1 = 'FZ1'export default new Vuex.Store({ state: { fontSize:localStorage.getItem(FZ) || '14px', fontSize1: localStorage.getItem(FZ1) || '20原创 2021-08-09 17:32:13 · 546 阅读 · 0 评论 -
灵动的展开和收起
主要实现当数据不超过6个时候不展示展开和收起。超过6个且是处于未展开的状态下,则展示前6个数据。实现思路:1.当所要循环的数量大于6,则出现展开收起<div v-if="listData.length > 6" v-on:click="changeFoldState"> <span>{{brandFold?'展开':'收起'}}</span> </div>2.利用计算属性实现。首先判断是否是展开的状态,如果原创 2021-08-09 17:13:49 · 107 阅读 · 0 评论 -
stylus-loader报错---*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style
报错*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“sourceMap”:true}!.转载 2021-02-21 12:48:37 · 223 阅读 · 0 评论 -
vue创建一个项目
vue创建一个项目一、安装npm1.下载并按指示安装node.js2.R+win 打开命令行程序,输入node -v查看安装是否成功,输入npm -v3.可以使用淘宝镜像来运行。$ npm install -g cnpm --registry=https://registry.npm.taobao.org二、项目初始化1.安装vue-clicnpm install vue-cli -g2.查看vue-cli是否成功,检查vue3.选定路径,新建vue项目,这里我是在桌面上新建转载 2021-02-20 22:34:56 · 61 阅读 · 0 评论