cube-ui的用法

cube-ui的用法,第1张

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/585702.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存