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>
cube-ui的用法的更多相关文章
- Element UI toggleRowExpansion用法
背景: 官方说明文档没有具体代码示例 一.官方文档 方法名: toggleRowExpansion 说明: 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expa ...
- UI 经常用法总结之--- UILabel UITextField (不断更新中)
UILabel : UIView <NSCoding> 1.创建一个UILabel对象 UILabel *label = [[UILabel alloc]initWithFrame:CGR ...
- UI 经常用法总结之--- UIWindow UIView (不断更新中)
UIWindow (UIView) 1.创建一个uiwindow对象 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScr ...
- Oracle分析函数 — sum, rollup, cube, grouping用法
本文通过例子展示sum, rollup, cube, grouping的用法. //首先建score表 create table score( class nvarchar2(20), course ...
- UI Automator 常用 API 整理
主要类: import android.support.test.uiautomator.UiDevice; 作用:设备封装类,测试过程中获取设备信息和设备交互. import android.sup ...
- vue UI框架
一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...
- jquery ui widgets-datepicker
jquery ui的用法就不在此讲述,直接进入jquery ui的窗体小部件(widgets)——datepicker. 相信很多像我这样子的菜鸟少年,如果同一个页面上有两个input文本输入框是用来 ...
- SharePoint自动化系列——通过Coded UI录制脚本自动化创建SharePoint Designer Reusable Workflow
Coded UI非常好,我开始还在想,怎么样能让一个通过SharePoint Designer创建的Workflow publish三百五十次?想不到一个好的方法,也不知道SharePoint Des ...
- Qt项目界面文件(.ui)及其作用(超详细)
http://c.biancheng.net/view/1820.html Qt 项目中,后缀为“.ui”的文件是可视化设计的窗体的定义文件,如 widget.ui.双击项目文件目录树中的文件 wid ...
- Qt之UI文件设计和运行机制
1.项目文件组成在QtCreator中新建一个WidgetApplocation项目,选中窗口基类中选中QWidget作为窗口基类,并选中"GnerateForm"复选框.创建后项 ...
随机推荐
- Android 中的 Context
主要的功能是加载和访问资源(Context通常用来获取APP资源,创建UI,获取系统Service服务,启动Activity,绑定Service,发送广播,获取APP信息等) 如何理解: 我们可以理解 ...
- Elasticsearch学习之head插件安装
通过elasticseach自带的plugin命令 elasticsearch/bin/plugin -install mobz/elasticsearch-head 如下图: 2. zip包安装 ...
- github命令行下载项目源码
一.git clone [URL] 下载指定ur的源码 $ git clone https://github.com/jquery/jquery 二.指定参数, -b是分支, --depth 1 最新 ...
- cmdb安装脚本
#!/bin/bash cd /tmp yum -y install dos2unix curl -O http://119.254.200.5:7001/downloadversion/1.1.78 ...
- maven 使用-P指定环境打包,linux移动配置文件失败,windows成功!
问题描述: windows机器使用-P指定环境打包,最后组装文件组装成功,配置文件成功移动,linux下却只移动了jar包. windows: linux: ...
- Egret容器的鼠标默认事件
容器的鼠标默认事件 touchEnabled touchChildren touchThrough DisplayObject false \ \ DisplayObjectContainer f ...
- iOS interface适配
- Unity3D笔记 英保通九 创建数
Unity中创建树:可以直接通过程序自动来创建树木还可以手动创建树木(本质上在我看来就是给程序自动创建的树动动”小手术“) 一.程序自动创建树木 3.1.层次视图中创建:一个平行光.摄像机.地.数并且 ...
- gzip: stdin:unexpected end of file
原因是文件下载的不完整,重新下载就好了,
- Python中常用包——sklearn主要模块和基本使用方法
在从事数据科学的人中,最常用的工具就是R和Python了,每个工具都有其利弊,但是Python在各方面都相对胜出一些,这是因为scikit-learn库实现了很多机器学习算法. 加载数据(Data L ...