cube-ui的用法

cube-ui的用法

.安装：npm install cube-ui -S

.修改 .babelrc：(添加到plugins中去)

     { "plugins": [ ["transform-modules", { "cube-ui": { "transform": "cube-ui/lib/${member}", "kebabCase": true, "style": { "ignore": ["create-api", "better-scroll"] } } }] ] }

   .在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: %;

    height: 1600px;

    .content {

        display: inline-block;

        width: %;

        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>