vue.js
文章平均质量分 60
如光不息丶
这个作者很懒,什么都没留下…
展开
-
vue动态添加按钮及对应事件
这里的按钮用的是element的button<div class="btn" v-for="(btn, index) in buttonList" :key="index"> <el-button :type="btn.type" @click="btnEvent(btn.btnEvent)" :icon="btn.icon" > {{btn.name}} </el-button></div>//定义按钮原创 2022-05-25 09:35:16 · 3064 阅读 · 0 评论 -
VUE3 移动端 滑动模块的实现
需要实现的需求如下直接上代码HTML:<div class="container" id="container"> <div class="controlDiv" id="controlDiv"> <div class="centerCircle" id="centerCircle" @touchstart="start" @touchmove="move" @touchend="end"原创 2021-11-18 09:17:41 · 1106 阅读 · 0 评论 -
VUE3中实现点击按钮刷新页面
这里要先了解一下provide和injectprovide : 向子组件以及子孙组件传递数据。接收两个参数,第一个参数是 key,即数据的名称;第二个参数为 value,即数据的值inject : 接收父组件或祖先组件传递过来的数据。接收一个参数 key,即父组件或祖先组件传递的数据名称下面我们通过依赖注入(provide和inject)实现自定义页面刷新事件原理: 给app.vue中router-view绑定v-if事件,在函数中控制v-if的值在短时间内由true到false再到true,从而使原创 2021-05-04 14:47:02 · 5287 阅读 · 1 评论 -
VUE3.X中使用vue-clipboard3实现一键复制功能
该方法同时适用于移动端以及PC端安装:npm install --save vue-clipboard3在需要的组件中引入并使用:<template> //我这里用了vant组件库的button按钮,你可以根据自己需要将click绑定在需要的元素上 //clickBtn(value)中的value为需要复制的原始数据 <van-button square text="复制" type="success" class="delete-button" @click='cli原创 2021-04-14 15:43:15 · 4726 阅读 · 0 评论 -
vue+ElementUI(el-pagination)+express实现分页功能(前后台)
前台部分1、安装elemenUI、axios:npm i element-ui -Snpm install axios --savenpm install vue-axios --save在main.js中引用:import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //样式文件单独引入Vue.use(ElementUI); #全局注册import axios from "ax原创 2020-12-22 17:49:39 · 765 阅读 · 3 评论 -
vue通过vue-fullpage实现全屏滚动
1、安装vue-fullpage插件:npm install --save vue-fullpage.js2、main.js中引用:import 'fullpage.js/vendors/scrolloverflow';import VueFullPage from 'vue-fullpage.js';Vue.use(VueFullPage);3、使用:<template> <div> <full-page :options="opt原创 2020-12-22 16:53:32 · 5823 阅读 · 14 评论 -
Express通过multer中间件实现多图片上传功能
Multer是一个Node.js中间件,用于处理 multipart/form-data 类型的表单数据,主要用于文件上传,注意:Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。Multer会自动添加一个body对象及file或files对象到 express框架的request 对象,fifile或fifiles对象包含表单上传的文件信息。通过表单上传文件时需要注意的是表单的提交方式只能是POST。1、安装multer中间件npm install multe原创 2020-12-22 16:40:36 · 868 阅读 · 0 评论 -
vue中使用v-viewer实现图片预览查看功能
1、安装v-viewernpm install v-viewer --save2、在main.js中配置如下:import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { defaultOptions: { zIndex: 999 }})3、在需要使用图片查看的文件中使用如下://images是一个数组,用来存放需要预览的图片的路径<viewer :images=原创 2020-12-22 15:33:20 · 904 阅读 · 0 评论 -
解决VUE刷新页面后页面title失效问题
1、在 router/index.js 中,使用meta属性的title设置好每个路由对应的title值{ path: '/ihlist', name: 'IHList', component: IHList, meta: { // 页面标题title title: '韶关市非物质文化遗产共享平台' } },2、安装监听标题插件npm install vue-wechat-title --save3、在原创 2020-12-22 15:28:43 · 2330 阅读 · 1 评论 -
vue-quill-editor+ElementUI(el-upload)实现自定义图片上传
对于vue-quill-editor的安装和基本用法不了解的可以看我另一篇文章,这里就不赘述了,直接进入正题:https://blog.csdn.net/weixin_42088314/article/details/109767214当插入图片时由于vue-quill-editor的默认操作是将图片转为base64编码,所以当图片比较大,提交后台时参数过长,导致提交失败或者无法存进数据库等情况。于是我们就需要自定义图片上传来实现需求。解决思路1、使用elementUI的el-upload来上传原创 2020-12-22 11:30:10 · 1622 阅读 · 5 评论 -
VUE中实现父组件向子组件动态传值
1、父组件传值:<div class="editor"> <qul-editor :intrd="content"></qul-editor></div>( :intrd=“content”)为需要传递的值,其中content是data中的数据。2、子组件接收并监听数据是否发生改变:<div>{{content}}</div>//接受父组件传递的数据props:{ intrd: String},data(原创 2020-12-18 10:45:59 · 2593 阅读 · 0 评论 -
vue+express+ElementUI实现单图片上传至服务器
一、初始化后台项目这里通过手动创建项目,你也可以通过脚手架创建。创建一个文件夹font-server,执行以下初始化命令npm init -ynpm install expres body-parser //安装express和body-parsernpm install multer --save //Multer 是一个node.js中间件,主要用于上传文件。在font-server目录下新建文件app.js,新建文件夹upload、api。在api文件夹下新建文件upLoadImg.j原创 2020-12-09 09:30:57 · 1241 阅读 · 0 评论 -
vue使用Vue-Quill-Editor富文本编辑器(附加工具栏title、图片大小修改功能)
本来是想用tinymac富文本编辑器的,不过参考网上的教程弄了很久都没有解决图片预览的问题。所以就改用了Vue-Quill-Editor,发现这个使用起来还是很方便的。下面上教程:1、安装Vue-Quill-Editornpm install vue-quill-editor -s2、封装Vue-Quill-Editor组件自行创建一个quEditor.vue文件,写入下面代码:<template> <div> <quill-editor v-model原创 2020-11-18 15:29:19 · 1858 阅读 · 18 评论 -
VUE项目中引入视频插件(video.js)
1、安装video.jsnpm install video.js2、在main.js中引入// 引入video.js插件import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video3、完成以上步骤后就可以直接使用啦 <template> <div> <!-- vjs-big-play-centered可使播放按钮居中,原创 2020-11-10 21:12:16 · 1752 阅读 · 0 评论 -
vue项目中引入外部字体(超详细)
1、创建一个conmon文件夹,再在其下创建一个fonts文件夹,用于存放字体文件,此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例,“FZQKBYSJW.ttf”为所下载的字体文件。2、再在fonts文件夹下创建一个"font.css"文件,并写入样式(如下图)。@font-face { font-family: "fzqkbysjt"; src: url('FZQKBYSJW.ttf') format('truetype'); font-weight: normal; f原创 2020-11-10 20:46:35 · 4275 阅读 · 6 评论 -
VUE中实现点击按钮刷新页面的方法
VUE中实现点击按钮刷新页面的方法vue中provide和inject 用法通过依赖注入实现页面刷新源码片段:vue中provide和inject 用法首先我们需要先了解一下vue中的依赖注入provide 和 inject概念:作用:用于父组件向子孙组件传递使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间原创 2020-11-03 10:58:14 · 11842 阅读 · 4 评论