🙉Vue常见封装🙉
关注
分享
扫一扫
Vue组件封装分享
张清悠
学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
展开
-
教你两分钟在Vue中使用富文本编辑器quill-editor
一、富文本编辑器是什么？富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。二、在Vue中配置1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill（Vue-Quill-Editor需要依赖）npm install quill --save三、使用方法<template> <div> <!-- 富文本编辑器 -原创 2020-09-15 17:07:14 · 620 阅读 · 0 评论 -
element ui 上传图片之后跳转、刷新、保存，预览和删除丢失问题
一、话不多说先看实际效果二、直接上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-07-08 11:51:35 · 1851 阅读 · 5 评论 -
Vue封装常用的插件例如：“返回顶部、弹出层、吸顶效果”
前言：来了，来了，好久没有更新博客了，成为真正意义上的落魄码农了，临近过年回老家了好久，忽然感觉代码真的好陌生，唉，还是头发掉呀，捡了捡之前的技术点，弄不好还给学的那么辛苦的我了，新年来临之际祝大家：“前程似锦，头发多多。不负自己，勇往直前。”加油，每一位在奋斗的程序员们，废话不多说先上效果返回顶部插件弹出层插件吸顶效果以上代码在gitee服务上存储地址如下：https://gitee.com/pan_love/packaging落魄在线的码农弄的一些皮毛小插件，希望这些插件对于陌生的你原创 2021-02-06 22:34:56 · 358 阅读 · 0 评论 -
Vue封装吸顶的效果
废话 不多说直接上代码组件<template> <div class="home"> <div ref="header" class="header-bg" :class="headerFixed ? 'issFixed' : ''"> Header </div> <div style="height: 500px">111</div> <div style="height: 3原创 2020-09-29 11:40:20 · 335 阅读 · 0 评论 -
Vue封装Switch组件
封装组件快速开发项目，同时提示自己编写能力子组件<template> <div> <span class="weui-switch" :class="{ 'weui-switch-on': isChecked }" :value="value" @click="toggle" style="position: relative" > <div v-if="原创 2020-09-29 11:35:03 · 425 阅读 · 0 评论 -
Vue封装全局Toast轻提示
新建一个组件Toast.vue<template> <transition name="fade"> <div v-show="visible">{{message}}</div> </transition></template><script>export default { data () { return { visible: false, message:原创 2020-09-27 21:51:54 · 1580 阅读 · 0 评论 -
Vue封装弹出层
views创建文件代码如下<template> <div class="zk-box"> <div class="zk-flex zk-pd"> <div class="zk-btn" @click="alerts">测试提示框</div> <Eject type="alert" @took="okfall" :showstate="showa"> <span slot="t原创 2020-09-24 21:48:19 · 663 阅读 · 0 评论 -
简简单单封装Vue返回顶部组件
第一步在components里面创建top.vue上代码<template> <div class="totop"> <div class="btnTop" v-if="btnFlag" @click="backTop()"> <img src="../assets/logo.png" alt="" class="imga" /> //自定义图片 </div> </div></templa原创 2020-09-24 20:32:15 · 426 阅读 · 0 评论