great-vue
v1.1.0
Published
[great-generator](https://www.npmjs.com/package/great-generator)、 [great-jsutils](https://www.npmjs.com/package/great-jsutils)、 [great-ngform](https://www.npmjs.com/package/great-ngform)、 [great-zorroutils](https://www.npmjs.com/package/great-zorroutil
Downloads
16
Maintainers
Readme
友情链接
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