cube-ui的用法
2024-04-20 05:44:25
.安装：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>
最新文章
- 快速查找sql server中的存储过程和视图
- Windows光标形状
- PHP下使用强大的imagick轻松生成组合缩略图
- Java的性能优化
- ePass1000 Full ActiveX Control Reference Manual Version 2.0
- wp8 --退出程序
- iTunes Connect TERMS OF SERVICE
- 常用的Linux终端
- [转]Install App to SD
- hdu 1081 矩阵最大连续子序列
- 浅谈Servlet(三)
- ubuntu 禁用快捷键
- 【第一篇】学习 android 事件总线androidEventbus之sticky事件的传递
- TCP协议详解
- try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后?
- [BZOJ]1063 道路设计(Noi2008)
- bzoj3124: [Sdoi2013]直径 树形dp two points
- poj1185 状态压缩经典题
- 重写Object的equals方法
- react 数据管理之state思想指南