• 技术文章 >web前端 >uni-app

    uni-app中怎么下载插件

    奋力向前奋力向前2021-09-07 19:05:36原创138

    方法:1、下载组件,解压到uni-app根目录;2、在指定页面中导入组件,语法“import 组件名 from "组件文件地址"”;3、在components选项中定义组件;4、在template节点按照组件使用说明,调用组件并传值。

    本教程操作环境:windows7系统、uni-app2.5.1版,DELL G3电脑。

    本文以badge(数字角标) 为例,说明如何从插件市场下载并导入使用组件。

    1、下载组件

    从插件市场badge详情页,点击“下载”按钮,下载完成后,解压到uni-app根目录。

    2、导入组件

    假设page-a.vue页面需要用到badge,则在page-a.vuescript节点下导入badge组件,如下:

    import uniBadge from "@/components/uni-badge/uni-badge.vue"

    3、定义组件

    components选项中定义badge组件,如下:

    export default {  
        data() {  
            return { /* ... */ }  
        },  
        components: {  
            uniBadge  
        }  
    }

    若从插件市场下载使用多个组件,则每个组件均需在components选项中定义,并以逗号分隔。

    4、使用组件

    template节点按照组件使用说明,调用组件并传值,如下:

    <uni-badge text="1"></uni-badge>  
    <uni-badge text="2" type="success" @click="bindClick"></uni-badge>

    完整代码示例如下:

    <template>  
        <view>  
            <!-- 页面其它组件 -->  
            <uni-badge text="1"></uni-badge>  
            <uni-badge text="2" type="success" @click="bindClick"></uni-badge>  
            <!-- 页面其它组件 -->  
        </view>  
    </template>  
    <script>  
        import uniBadge from "@/components/uni-badge/uni-badge.vue"  
        /* import 导入的其它组件 */  
    
        export default {  
            data() {  
                return { /* ... */ }  
            },  
            components: {  
                uniBadge,  
                /* 其它组件定义 */  
            }  
        }  
    </script>

    推荐学习:Uni-App从入门到实战教程

    以上就是uni-app中怎么下载插件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:uniapp
    上一篇:浅析uni-app中设置导航栏和修改默认端口的方法 下一篇:uniapp怎么实现小程序页面的自由拖拽功能
    线上培训班

    相关文章推荐

    • 介绍uni-app之字体库、自定义组件、打包和新闻实战• uni-app中怎样生成二维码• uni-app开发H5端和原生H5开发怎么选择• vant和uni-app是什么框架• 浅析uni-app中设置导航栏和修改默认端口的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网