大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168149.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...