现在我们先只看看已经实现的功能，下次再发布如何从写组件到发布npm,和其中遇到的一些坑

都是实现一些简单的功能，代码量很小，其中还结合网上的一些比较优秀的代码，如果发现自己的一小部分代码也在里面，不要骂我偷哈。

当然你也可以访问github仓库：点击这里进入仓库进行下载。

可以的给github仓库一个 star 吧

vue-ckq-layer

一个基于vue2.0的弹窗组件(PC)
不存在外部字体以及图片等文件，动画使用css3实现，空间很小

Installation

You can install it via NPM.

  npm i vue-ckq-layer --save-devimport ckq from 'vue-ckq-layer'Vue.use(ckq)

如果你使用的是 vue cli, 可以在main.js 中添加以下代码

  import ckq from 'vue-ckq-layer';Vue.use(ckq);

Usage

layer

layer为一个消息提示框，默认2秒钟消失

Parameter	Type	Description
message	string	提示内容
time	number	消失时间

eg:

    this.$ckq.layer('这是一个message')若想改变消失时间this.$ckq.layer({message: '这是一个message',time: 3000})

confirm

confirm在保留页面的情况下会弹出一个对话框。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过title属性来显示任意标题，通过width属性来修改显示区域的宽度。

Parameter	Type	Description
visible	Boolean	是否显示弹窗,支持 .sync 修饰符
width	String	弹窗的宽度
ok	obj	确认按钮事件
cancel	obj	取消按钮事件

eg:

  <ckq-confirm title="信息" :visible.sync="confirmVisible" v-on:ok="ok" v-on:cancel="cancel">这里是内容</ckq-confirm>

Loading

局部式加载loading

Parameter	Type	Description
visible	Boolean	是否显示

eg:

    <ckq-loading :visible="loadingVisible"></ckq-loading>

ckq-editDiv

可编辑性div contenteditable='true', 模拟表单v-model ，

Parameter	Type	Description
isCanEdit	Boolean	是否可编辑
content	String	内容
input	String	动态改变的值
minHeight	String	默认可编辑div高度（px）,默认 '50'

eg:

    <ckq-editDiv :minHeight="50" :canEdit="isCanEdit" :value='contInfo.content' v-on:input="changeText"></ckq-editDiv>

撸VUE弹窗组件 + 可编辑div 组件相关推荐

神了！！看完这篇文章我不仅学会了手撸vue三开关组件，还搞懂了父子组件传值
神了!!看完这篇文章我不仅学会了手撸vue三开关组件,还搞懂了父子组件传值引子前置知识什么是vue组件父子组件传值父传子子传父 model选项的引入三开关组件(three-switch) ...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞使用vue-content-menu定制可编辑树结构editableTree
好吧吐槽一下,公司决定之后的技术栈都是vue了,我又从React转战回来了.干巴爹好的生活方式,是和一群志同道合的人,一起奔跑在理想的路上!回头有一路的故事,低头有坚定的脚步,抬头有清晰的远方. 首 ...
vue点击input框出现弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
【独立版】智慧城市同城V4_2.1.4全开源全插件VUE版，修复房产信息组件后台资料编辑中会显示其他平台小区的问题
源码介绍 [独立版]智慧城市同城V4_2.1.4全开源全插件VUE版,修复房产信息组件后台资料编辑中会显示其他平台小区的问题!智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信息. ...
vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
vue组件穿方法_vue组件间通信六种方式（完整版）
[51CTO.com原创稿件] 前言组件是 vue.js强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...
Vue使用wangEditor 封装成独立组件实现富文本编辑器
1.使用npm安装: npm install wangeditor 2.将编辑器封装一个组件,创建editor.vue组件: <template><div id="edit ...

撸VUE弹窗组件 + 可编辑div 组件