great-vue

友情链接

great-generator、 great-jsutils、 great-ngform、 great-zorroutils、 great-vue

layout

import {layout} from 'great-vue';
Vue.use(layout);

<greatLayout>
  <great-layout-top>
    <h2 style="color:#fff;margin:0;padding:0;text-align: left;text-indent: 2em;">layout-top</h2>
  </great-layout-top>
  <great-layout-center>
    <great-layout-left>
      <h2>菜单栏</h2>
    </great-layout-left>
    <great-layout-main>
      <router-view/>
    </great-layout-main>
  </great-layout-center>
  <great-layout-bottom>
    layout-bottom
  </great-layout-bottom>
</greatLayout>

menu

<great-menu :menuList="menuList"></great-menu>

data(){
    return {
      menuList:[]
    }
  },
  mounted() {
    this.menuList = [
      {
        text:'布局示例',
        link:'#/',
        children:[
          {
            text:'layout01',
            link:'#/',
          },
          {
            text:'layout02',
            link:'#/layout02',
            children:[
              {
                text:'layout02-01',
                link:'#/',
              },
              {
                text:'layout02-02 ',
                link:'#/layout02',
              }
            ],
          }
        ]
      },
      {
        text:'卡片示例',
        link:'#/card'
      }
    ];
  }

modal

参数	说明	默认值	类型
content	显示的内容	无	文本、html片段、vue组件
Vue	当前Vue对象	无	Vue
title	标题	无	string
cancelText	取消按钮文本，传空则不显示	取消	string
okText	确定按钮文本，传空则不显示	确定	string
autoClose	点击确定、取消按钮后是否自动关闭模态框	true	boolean

• 示例：弹出一个普通文本

import { greatModalUtil } from "great-vue";
import Vue from "vue";
openModalHtml() {
    greatModalUtil.openModal({
      content:'这是一个普通文本',
      Vue,
    })
    .then((v) => {
      console.log(v);
    });
}

• 示例：弹出一个html片段

import { greatModalUtil } from "great-vue";
import Vue from "vue";
openModalHtml() {
    greatModalUtil.openModal({
      content:'<h4 style="min-width: 350px;">这是一个html片段X<span>X</span></h4>',
      Vue,
    })
    .then((v) => {
      console.log(v);
    });
}

• 示例：弹出一个自定义组件

import { greatModalUtil } from "great-vue";
import Vue from "vue";
import CardDemo01 from "../card/card-demo01";
openModalHtml() {
    greatModalUtil.openModal({
      content:CardDemo01,
      Vue,
    })
    .then((v) => {
      console.log(v);
    });
}

card

utils

base64Utils

import {base64Utils} from 'great-vue';
// 判断是否为base64的数据
const isBase64 = base64Utils.isBase64(this.value1);
if(isBase64){
    // 将base64解码
    this.value2 = base64Utils.decode(this.value1);
}else{
    // 用户base64编码
    this.value2 = base64Utils.encode(this.value1);
}

httpUtils

import {httpUtils} from 'great-vue';
httpUtils.get(url);
httpUtils.post(url, data);
httpUtils.put(url, data);
httpUtils.ajax({url});

greatFormValidate

<template>
    <div class="great-form-row">
        <!--
            v-required: 必填校验,
            great-emc: 指定错误消息的容器class名称
        -->
        <input v-required great-emc="message-error"/>
        <div class="message-error"></div>
    </div>
    <div class="great-form-row">
        <!--
             great-validator-options='{"max":222, "min":10}'
             指定最大值：222，指定最小值：10
        -->
        number：<input v-number great-emc="number-message-error" great-validator-options='{"max":222, "min":10}'/>
        <div class="number-message-error"></div>
    </div>
</template>
<script>
    import {greatFormValidator} from 'great-vue';
    export default {
        name: "form-demo01",
        directives: {
            required: greatFormValidator.required,
            number: greatFormValidator.number,
        }
    }
</script>

方法

• greatFormValidator.required：必填
• greatFormValidator.email：邮箱格式
• greatFormValidator.mobile：手机号格式
• greatFormValidator.landline：座机号格式
• greatFormValidator.phone：电话号格式
• greatFormValidator.url：URL格式
• greatFormValidator.number：数字格式
• greatFormValidator.strLength：字符串长度校验

属性与参数

• great-emc：显示校验未通过消息的容器（class名）
• great-validator-options
  • errorMsgContainer：显示校验未通过消息的容器（class名）
  • errorMsg：校验未通过时的提醒信息
  • max：数字时的最大值
  • min：数字旱的最小值
  • minScale：最少小数位数
  • maxScale：最多小数位数
  • scale：小数位数
  • maxLength：maxLength
  • minLength：minLength
  • length：length