.安装: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>


cube-ui的用法的更多相关文章

  1. Element UI toggleRowExpansion用法

    背景: 官方说明文档没有具体代码示例 一.官方文档 方法名: toggleRowExpansion 说明: 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expa ...

  2. UI 经常用法总结之--- UILabel UITextField (不断更新中)

    UILabel : UIView <NSCoding> 1.创建一个UILabel对象 UILabel *label = [[UILabel alloc]initWithFrame:CGR ...

  3. UI 经常用法总结之--- UIWindow UIView (不断更新中)

     UIWindow (UIView) 1.创建一个uiwindow对象 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScr ...

  4. Oracle分析函数 — sum, rollup, cube, grouping用法

    本文通过例子展示sum, rollup, cube, grouping的用法. //首先建score表 create table score( class  nvarchar2(20), course ...

  5. UI Automator 常用 API 整理

    主要类: import android.support.test.uiautomator.UiDevice; 作用:设备封装类,测试过程中获取设备信息和设备交互. import android.sup ...

  6. vue UI框架

    一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...

  7. jquery ui widgets-datepicker

    jquery ui的用法就不在此讲述,直接进入jquery ui的窗体小部件(widgets)——datepicker. 相信很多像我这样子的菜鸟少年,如果同一个页面上有两个input文本输入框是用来 ...

  8. SharePoint自动化系列——通过Coded UI录制脚本自动化创建SharePoint Designer Reusable Workflow

    Coded UI非常好,我开始还在想,怎么样能让一个通过SharePoint Designer创建的Workflow publish三百五十次?想不到一个好的方法,也不知道SharePoint Des ...

  9. Qt项目界面文件(.ui)及其作用(超详细)

    http://c.biancheng.net/view/1820.html Qt 项目中,后缀为“.ui”的文件是可视化设计的窗体的定义文件,如 widget.ui.双击项目文件目录树中的文件 wid ...

  10. Qt之UI文件设计和运行机制

    1.项目文件组成在QtCreator中新建一个WidgetApplocation项目,选中窗口基类中选中QWidget作为窗口基类,并选中"GnerateForm"复选框.创建后项 ...

随机推荐

  1. C 预处理

    http://baike.baidu.com/link?url=0mwKZRcxHuNHa_TiwXgpQPS2S-YbOGCUJVSgZ9sb-qe-G-x4oIDZpWuZqiVNBsMYA4HT ...

  2. 关于GDI+的一些使用基础设置

    一.新建一个MFC的单文档工程,例如工程名字叫GDIPLUSTEST1. 二.在工程的stdafx.h头文件中添加入 #include "gdiplus.h" using name ...

  3. UIImageView的contentMode属性

    UIViewContentMode 都有哪些值: typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFil ...

  4. PHP 函数引用传值

    <?php /* * @1 $arr = array_fill(1,100,'bbb'); echo memory_get_usage()."<br>"; fun ...

  5. 异常:Servlet class X is not a javax.servlet.Servlet

    使用Maven命令 mvn archetype:create 创建了一个简单的web项目.导入Eclipse运行时,报这样的异常信息: Servlet class X is not a javax.s ...

  6. String.Split()函数 多种使用实例

    我们在上次学习到了 String.Join函数(http://blog.csdn.net/zhvsby/archive/2008/11/28/3404704.aspx),其中用到了String.SPl ...

  7. 字符乱码 导致 ORA-12899: value too large

    问题场景: 1.创建测试表 create table t01(name varchar2(30)) 2.插入数据 SQL> insert into t01 (name) values('所有分销 ...

  8. webstorm启动报错

    环境: 在重装完系统的电脑上第一次安装webstorm, 问题: 解决”failed to load jvm dll“的报错问题: 解决方案: 安装Microsoft Visual C++ 2010 ...

  9. Artech的MVC4框架学习——第四章Model元数据的解析

    总结: 第一Model元数据是针对 数据类型的一种表述信息. 第二Model元数据作用:控制数据类型本身及其成员,通过相应的特性,在view中 为绑定的数据(Model)实现模版化的html呈现. 第 ...

  10. CentOS 6.4 php环境配置以及安装wordpress

    1. nginx php-rpm 包升级 sudo rpm -Uvh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6- ...