1.安裝：npm install cube-ui -S
2.修改 .babelrc：(添加到plugins中去)
     { "plugins": [ ["transform-modules", { "cube-ui": { "transform": "cube-ui/lib/${member}", "kebabCase": true, "style": { "ignore": ["create-api", "better-scroll"] } } }] ] }
   3.在main.js
import Vue from 'vue'
import Cube from 'cube-ui' // 一般直接放在這個位置

Vue.use(Cube)

<template>
    <div class="MemberInfor">
        <div class="content">
            <cube-form :model="model" @validate="validateHandler" @submit="submitHandler">
                <cube-form-group>
                    <cube-form-item :field="fields[0]"></cube-form-item>
                    <cube-form-item :field="fields[1]"></cube-form-item>
                    <cube-form-item :field="fields[2]"></cube-form-item>
                    <cube-form-item :field="fields[3]">
                        <cube-button class="btn" @click="showDatePicker">{{model.dateValue || 'Please selectss'}}</cube-button>
                        <date-picker ref="datePicker" :min="[2008, 8, 8]" :max="[2020, 10, 20]" @select="dateSelectHandler"></date-picker>
                    </cube-form-item>
                    <cube-form-item :field="fields[4]"></cube-form-item>
                    <cube-form-item class="ss" :field="fields[5]"></cube-form-item>
                </cube-form-group>

                <cube-form-group>
                    <cube-button type="submit">Submit</cube-button>
                </cube-form-group>
            </cube-form>
        </div>

    </div>

</template>

<script> import { DatePicker } from "cube-ui"; export default { data() { return { validity: {}, valid: undefined, model: { inputValue: "kk", inputValues: "", radioValue: "man", dateValue: "", selectValue: "", checkboxGroupValue: ["Phone", "DM", "EDM", "SMS", "Share to LCLG"] }, fields: [ { type: "input", modelKey: "inputValue", label: "Surname", props: { placeholder: "請輸入姓名" }, rules: { required: true } }, { type: "input", modelKey: "inputValues", label: "Phone", props: { placeholder: "請輸入電話" }, rules: { required: true } }, { type: "radio-group", modelKey: "radioValue", label: "Gemder", props: { options: ["man", "woman"] }, rules: { required: true } }, { modelKey: "dateValue", label: "Date", rules: { required: true } }, { type: "select", modelKey: "selectValue", label: "AgeGroup", props: { options: ["A1", "A2", "A3"] }, rules: { required: true } }, { type: "checkbox-group", modelKey: "checkboxGroupValue", label: "SharetoLCLG", props: { options: ["Phone", "DM", "EDM", "SMS", "Share to LCLG"] }, rules: { required: true } } ] }; }, methods: { submitHandler(e) { alert( this.model.inputValue + "*****" + this.model.inputValues + "***" + this.model.radioValue + "***" + this.model.dateValue + "***" + this.model.selectValue + "***" + this.model.checkboxGroupValue ); }, validateHandler(result) { this.validity = result.validity; this.valid = result.valid; }, showDatePicker() { this.$refs.datePicker.show(); }, dateSelectHandler(date, selectedVal, selectedText) { this.model.dateValue = selectedVal; } }, components: { DatePicker } }; </script> <style lang="stylus"> .MemberInfor { background-color: #FFA07A; width: 100%; height: 1600px; .content { display: inline-block; width: 90%; height: 1500px; background-color: #fff; margin-top: 15px; } .cube-form-item { font-size: 15px; } .btn { background-color: #ffffff; color: #C0C0C0; } .cube-form_standard .cube-validator { padding-right: 90px; } .ss { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } } </style>

總結

以上是生活随笔為你收集整理的cube-ui的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。