cube-ui的用法

cube-ui的用法1.安装:npminstallcube-ui-S2.修改.babelrc:(添加到plugins中去){"plugins":[["transform-m

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(0)


相关推荐

  • 7款开源Java反编译工具

    7款开源Java反编译工具今天我们要来分享一些关于Java的反编译工具,反编译听起来是一个非常高上大的技术词汇,通俗的说,反编译是一个对目标可执行程序进行逆向分析,从而得到原始代码的过程。尤其是像.NET、Java这样的运行在虚拟机上的编程语言,更容易进行反编译得到源代码。当然,也有一些商业软件,对其程序进行了混淆加密,这样我们就很难用工具反编译了。1、Java反编译插件——JadclipseJadClipse是J…

  • 微信模拟位置想在哪就在哪(GPS欺骗)

    微信模拟位置想在哪就在哪(GPS欺骗)微信模拟位置是通过位置欺骗,让微信误以为我们就在当前的位置进行周边好友的搜索与添加。这是一个很老的功能,为什么说很老呢?因为这是在android4.1的时候流行的一个功能,android在4.4推出后这个功能基本不能使用了!即使很老但是最近也碰到了这样的需求,不过针对特殊的群体,手机定制而来,就没有限制了!首先我们要知道怎么用:首先:我们从设置里找到开发者选项(开发者都知道):在这里就是,开发人

  • mac navicat激活码[最新免费获取]

    (mac navicat激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1STL5S9V8F-eyJsaWNlbnNlSWQi…

  • 信道容量计算公式_信道均衡算法

    信道容量计算公式_信道均衡算法信道带宽=符号率*符号数*(188/204)注释:符号率&lt–&gt频宽(下行欧标频宽8MHz,上行有1.6MHz,3.2MHz,6.4MHz三种频宽);符号数&lt–&gt调制方式(符号数=Log2~调制方式,如QAM64的符号数为6,2的6次方=64)=====================================================…

  • 运维面试题(1024水篇)

    运维面试题(1024水篇)NETWORK1请描述TCP/IP协议中主机与主机之间通信的三要素参考答案IP地址(IPaddress)子网掩码(subnetmask)IP路由(IProuter)2请描述IP地址的分类及每一类的范围参考答案A类1-26B类128-191C类192-223D类224-239组播(多播)E类240-254科研3请描述A、B、C三类IP地址的默认子网掩码参考答案A类255.0.0.0B类255.255.0.0C类255.255.255.04请描述预留给企业的私有

  • 《剑指offer》– 二叉树的下一个结点、对称二叉树、按之字性顺序打印二叉树、把二叉树打印成多行

    《剑指offer》– 二叉树的下一个结点、对称二叉树、按之字性顺序打印二叉树、把二叉树打印成多行

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号