脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过