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>