cube-ui的用法

全栈程序员-站长 • 2022年8月3日下午6:00 • 未分类 • 阅读 8

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

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>