vue add cube-ui是什么意思?

vue add cube-ui是什么意思?,第1张

这行命令的意思是把cube-ui脚手架安装到当前项目

1、cube-ui 是基于 Vue.js 实现的精致移动端组件库,由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。

2、在vuecli创建的项目中使用的方法是:

cd vue-cube

vue add cube-ui

1.基础用法

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

             @file-click="fileClick"     //缩略图

          >

2.自定义样式  

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

          >

              <cube-upload-file

                    v-for="(file, i) in files1"

                   :file="file"

                    :key="i"

                     @click="fileClick"        //缩略图

              ></cube-upload-file>

              <cube-upload-btn :multiple="false">

                  <img src="~@/icons/camera.svg" />

                    <span>证件正面</span>

              </cube-upload-btn>

         </cube-upload>

自定义样式实现缩略图关键为该css样式,提交图片后会自动显示该样式

 /deep/ .cube-upload-file-status.cubeic-right::after {

        width: 165px

        height: 110px

        border-radius: 0

        background-color: #fff0  

    }

以下为公用方法

        uploadSuccess1(res) {  

            this.imgs = []

            this.imgs.push(res.url)

        } 

         fileClick() {

                    this.$createImagePreview({   //cube-ui  自带图片预览

                        imgs: this.imgs

                    }).show()

        },


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/258.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-01-28
下一篇2023-01-28

发表评论

登录后才能评论

评论列表(0条)

    保存