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

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

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

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

可以的给github仓库一个 star 吧

vue-ckq-layer

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

Installation

You can install it via NPM.

  npm i vue-ckq-layer --save-dev

  import 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>