美文网首页
使用jq加c3动画,封装的一个vue模态框组件

使用jq加c3动画,封装的一个vue模态框组件

作者: youth_MrZhou | 来源:发表于2018-05-15 21:03 被阅读0次

    先给大家上效果图



    目前很多移动端都有此等模态框的出现,目前vue也有很多的组件库,比如滴滴打车ui、饿了么旗下的ui、mint ui等等,但是如果我们使用ui组件,也会很麻烦,下载安装,加上要引入很多的东西,有时候也会出现错误。我本人也使用过很多的框架,最终还是没有很满意的,修改起来也麻烦。本人封装的这个很简单的一个模态框使用起来很方便,你只需要在vue文件安装jq,引入文件即可,下来我来说下使用方法。

    1、首先我们要在自己vue文件内安装jq:

    npm install jquery

    安装以后不需要去管它,不需要引入什么!

    2、下面我们在.vue页面引入我们页面排版样式,class类不可修改,如果修改就要修改css文件内的类名,会麻烦的。确定按钮的功能自己给事件做功能即可。

    <template>

        <div class="hello">

            <div class="Geyclick">点击</div>

            <div class="Modality">

            <div class="ModalityBlack"></div>

            <div class="ModalityMain">

                <p class="ModalityMainp">简单vue模态框</p>

                <div class="ModalityMainbut">

                    <button class="ModalityAdd">取消</button>

                    <button class="ModalityOpen">确定</button>

                </div>

            </div>

            </div>

            </div>

    </template>

    3、然后我们下载css和js文件并且引入页面内,我们从百度网盘内下载:

    链接:https://pan.baidu.com/s/1uyG5QawjOSV3rXyuC22z9w    密码:lsjq

    4、然后在文件内引入css和js文件即可

    <script>

        import ' js文件路径 '

    </script>

    <style>

        @import ' css文件路径 '

    </style>

    为了考虑大家需要修改js或css代码,所以我没有压缩文件,可以随意修改样式。此文档是为新手准备,手机端布局的兼容性已为大家配置好,可直接调用。

    如有需要可以加QQ或微信互相交流:QQ:848350511    微信:a13717840919

    相关文章

      网友评论

          本文标题:使用jq加c3动画,封装的一个vue模态框组件

          本文链接:https://www.haomeiwen.com/subject/rnledftx.html