GithubStar/Vue.NetCore
1
0
Fork 0
mirror of https://github.com/cq-panda/Vue.NetCore.git synced 2026-10-29 14:10:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

文档1.0整理中

Browse Source
This commit is contained in:
jxx
2019-11-15 22:21:39 +08:00
parent d761cedb0d
commit abaffc41ca
8 changed files with 118 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Vol.Vue/src/components/basic/VolBox.vue
+7 -3
View File
@@ -13,7 +13,7 @@
<i class="ivu-icon ivu-icon-ios-close"></i>
</a>
<p slot="header" class="header">
<Icon type="ios-information-circle-outline"></Icon>
<Icon :type="icon"></Icon>
<span>{{title}}</span>
</p>
<div class="view-model-content" :style="{height:height+'px'}">
@@ -33,6 +33,10 @@
<script>
export default {
props: {
icon:{
type:String,
default:'ios-information-circle-outline'
},
title: {
type: String,
default: "基本信息"
@@ -78,10 +82,10 @@ export default {
}
},
mounted() {
console.log("cm");
// console.log("cm");
},
created() {
console.log("c1");
// console.log("c1");
if (this.$slots.footer) {
this.footer = false;
}
Vol.Vue/src/components/basic/VolHeader.vue
+6 -1
View File
@@ -4,7 +4,7 @@
<Icon size="20" :type="icon" />
<span>{{text}}</span>
</div>
<div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="v-right-content">
@@ -44,6 +44,11 @@ export default {
top: 2px;
}
}
.content {
line-height: 25px;
padding-left: 10px;
padding: 6px 0 0 10px;
}
.v-right-content {
flex: 1;
}
Vol.Vue/src/views/document/docApi/api.vue
+12 -1
View File
@@ -21,11 +21,14 @@ import "./doc.less";
export default {
components: {
Icons: () => import("./doc_icons"),
DocForm: () => import("./doc_volform")
DocForm: () => import("./doc_volform"),
VolHeader: () => import("./doc_header"),
box: () => import("./doc_box")
}, //
methods: {
toggleCom(index) {
this.currentComponent = this.data[index].com_name;
this.active = index;
}
},
data() {
@@ -39,6 +42,14 @@ export default {
{
com_name: "DocForm",
title: "表单组件"
}, //
{
com_name: "VolHeader",
title: "VolHeader"
},
{
com_name: "box",
title: "弹出框"
}
],
currentComponent: "Icons"
Vol.Vue/src/views/document/docApi/param.js
+18 -2
View File
@@ -35,8 +35,24 @@ let param = {
{ name: "表单验证", desc: "表单验证使用：this.$refs.你的ref名字.validate()，返回值bool", type: "", default: "" },
{ name: "数据槽slot", desc: "可以在表单的第一行第前使用<div name='header'></div>或最后一行<div name='footer'></div>", type: "", default: "" }],
methods: []
}, header: {
attr: [{ name: "icon", desc: "显示图标", type: "string", default: "" },
{ name: "text", desc: "显示名称", type: "string", default: "" },
{ name: "slot数据槽", desc: "右边button显示的这部份内容", type: "", default: "" },
{ name: "slot数据槽content", desc: "使用方式<div slot='content'>VolHeader这里可以定义显示内容</div>", type: "", default: "" }],
methods: []
},
box:{
attr:[{ name: "title", desc: "弹出框标题", type: "string", default: "基本信息" },
{ name: "icon", desc: "弹出框图标", type: "string", default: "ios-information-circle-outline" },
{ name: "model", desc: "是否显示弹出框", type: "bool", default: "false" },
{ name: "height", desc: "弹出框高度", type: "int", default: "200" },
{ name: "width", desc: "弹出框宽度", type: "int", default: "650" },
{ name: "padding", desc: "弹出框内容padding大小", type: "int", default: "16" },
{ name: "mask", desc: "弹出框是否显示遮罩", type: "boole", default: "true" },
{ name: "数据槽slot", desc: "弹出框内容", type: "", default: "" },
{ name: "数据槽footer", desc: "弹出框底部按钮，默认只有一个关闭按钮，如果加了 <div slot='footer'></div>关闭按钮不会显示，需要自己添加", type: "", default: "" }],
methods:[]
}
}
export default param;
Vol.Vue/src/views/document/docApi/sourceCode.js
+60 -3
View File
@@ -1,5 +1,5 @@
let codeString = {
icons: `<div>
icons: `<div>
<div class="cnblogs_code">
<pre> &lt;template&gt;
&lt;div&gt;
@@ -33,7 +33,7 @@ let codeString = {
}
};
// ]]></script>`,
form:`<div class="cnblogs_code">
form: `<div class="cnblogs_code">
<pre>&lt;template&gt;
&lt;div&gt;
&lt;VolForm :label-width="150" :loadKey="true" :formFileds="formFileds1" :formRules="formRules1"&gt;&lt;/VolForm&gt;
@@ -186,5 +186,62 @@ let codeString = {
};
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;</p>`}
<p>&nbsp;</p> `,
header: `<div class="cnblogs_code">
<pre>&lt;template&gt;
&lt;div&gt;
&lt;VolHeader style="margin: 30px 0;" :icon="icon" :text="text"&gt;
&lt;div slot="content"&gt;VolHeader这里可以定义显示内容&lt;/div&gt;
&lt;div style="text-align: right;padding-top: 4px;"&gt;
&lt;Button type="text" icon="ios-search" size="small" @click="()=&gt;{this.$Message.error('1')}"&gt;buttons1&lt;/Button&gt;
&lt;Button type="text" icon="ios-search" size="small" @click="()=&gt;{this.$Message.error('2')}"&gt;buttons2&lt;/Button&gt;
&lt;/div&gt;
&lt;/VolHeader&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;<span style="color: #000000;">
import VolHeader from </span>"@/components/basic/VolHeader.vue"<span style="color: #000000;">;
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
data() {
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> {
icon: </span>"md-male"<span style="color: #000000;">,
text: </span>"主题名称"<span style="color: #000000;">
};
},
components: { VolHeader},
methods: {
}
};
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;</p>`,
box:`<div class="cnblogs_code">
<pre>&lt;template&gt;
&lt;div&gt;
&lt;Button type="info" @click="model=!model"&gt;弹出框&lt;/Button&gt;
&lt;VolBox :model.sync="model" title="弹出框标题" :height="400" :width="700" :padding="15"&gt;
&lt;div&gt;弹出框内容&lt;/div&gt;
&lt;!-- footer 这里不写，默认有一个关闭按钮 --&gt;
&lt;div slot="footer"&gt;
&lt;Button type="default" @click="()=&gt;{this.$Message.error('点击确认')}"&gt;确认&lt;/Button&gt;
&lt;Button type="default" @click="()=&gt;{model=false}"&gt;点击关闭弹出框&lt;/Button&gt;
&lt;/div&gt;
&lt;/VolBox&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;<span style="color: #000000;">
import VolBox from </span>"@/components/basic/VolBox.vue"<span style="color: #000000;">;
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
data() {
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> {
model: </span><span style="color: #0000ff;">false</span><span style="color: #000000;">
};
},
components: { VolBox },
methods: {}
};
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;</p>`
}
export default codeString
Vol.Vue/src/views/document/docApi/test.vue
+14 -140
View File
@@ -1,151 +1,25 @@
<template>
<div>
<VolForm :label-width="150" :loadKey="true" :formFileds="formFileds1" :formRules="formRules1"></VolForm>
<Button type="info" @click="model=!model">弹出框</Button>
<VolBox :model.sync="model" title="弹出框标题" :height="400" :width="700" :padding="15">
<div>弹出框内容</div>
<!-- footer 这里不写，默认有一个关闭按钮 -->
<div slot="footer">
<Button type="default" @click="()=>{this.$Message.error('点击确认')}">确认</Button>
<Button type="default" @click="()=>{model=false}">点击关闭弹出框</Button>
</div>
</VolBox>
</div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
export default {
components: { VolForm },
methods: {},
data() {
return {
formFileds1: {
Variety: 1,
AgeRange: "",
DateRange: [],
City: "北京市",
AvgPrice: 8.88,
number1: 20,
mail: "",
Date: "",
IsTop: "还没想好...",
Fruits: [],
Other: "",
Switch: 1,
ProImg:
"https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
},
formRules1: [
//两列的表单，formRules数据格式为:[[{},{}]]
[
{
dataKey: "city",
title: "自动绑定数据源",
required: true,
field: "City",
data: [],
type: "select"
},
{
title: "手动绑定数据源",
dataKey: "age",
placeholder: "在这里可设置提示描述",
//如果这里绑定了data数据，后台不会加载此数据源
data: [{ key: 1, value: "是" }, { key: 0, value: "否" }],
required: false,
field: "Variety",
type: "select"
}
],
[
{
title: "手机号",
required: true, //设置为必选项
field: "AgeRange",
type: "phone"
},
{
title: "date日期",
field: "Date",
type: "datetime"
}
],
[
{
title: "多选日期",
range: true, //设置为true可以选择开始与结束日期
required: false,
field: "DateRange",
type: "date"
},
{
type: "number",
title: "数字",
required: true,
placeholder: "你可以自己定义placeholder显示的文字",
field: "number1"
}
],
[
{
type: "decimal",
title: "最大最小decimal值",
max: 10,
min: 2,
required: true,
field: "AvgPrice"
},
{
title: "邮箱",
field: "mail",
range: true, //设置为true可以选择开始与结束日期
required: false,
type: "mail"
}
],
[
{
title: "自定义验证",
required: true,
field: "Other",
validator: (rule, val, callback) => {
if (val != "234") {
return callback(new Error("必须输入【234】"));
}
return callback();
}
},
{
title: "Switch",
field: "Switch",
dataKey: "enable", //这里会从后台自动绑定数据源
data: [],
required: false,
type: "switch"
}
],
[
{
title: "备注",
required: true,
field: "IsTop",
colSize: 12, //设置12，此列占100%宽度
type: "textarea"
}
],
[
{
title: "图片",
disabled: true, //必须设置此属性
field: "ProImg",
type: "img"
},
{
title: "checkbox",
//如果这里绑定了data数据，后台不会加载此数据源
data: [
{ key: 0, value: "冬瓜" },
{ key: 1, value: "西瓜" },
{ key: 2, value: "南瓜" },
{ key: 3, value: "哈密瓜" }
],
field: "Fruits",
type: "checkbox"
}
]
]
model: false
};
}
},
components: { VolBox },
methods: {}
};
</script>
Vol.Vue/src/views/tables/table1.vue
-1
View File
@@ -10,7 +10,6 @@
<div class="tb">
<VolHeader icon="md-apps" text="双击表即可编辑">
<div
style="padding-top: 10px;padding-left: 20px;"
slot="content"
>同时可配置数据字典编号自动绑定字段的显示值,如【是否启用】列值为0/1显示文本为是、否</div>
<slot>
Vol.Vue/src/views/tables/table2.vue
+1 -4
View File
@@ -16,10 +16,7 @@
</Alert>
<div style="padding: 0px 20px;">
<VolHeader icon="md-apps" text="从api加载数据">
<div
style="padding-top: 10px;padding-left: 20px;"
slot="content"
>同时可配置数据字典编号自动绑定字段的显示值,如【是否启用】列值为0/1显示文本为是、否</div>
<div slot="content">同时可配置数据字典编号自动绑定字段的显示值,如【是否启用】列值为0/1显示文本为是、否</div>
<slot>
<div style="text-align: right;">
<Button type="info" ghost @click="load">刷新表数据</Button>