1107
This commit is contained in:
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单详情"
|
||||
subTitle="展示表单详情"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-detail
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
></vk-data-detail>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
data:{
|
||||
text:"这是文本",
|
||||
money:10000,
|
||||
number:10000,
|
||||
radio:1,
|
||||
checkbox:[1,2],
|
||||
select:1,
|
||||
image:[
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
],
|
||||
province: {
|
||||
code: "11",
|
||||
name: "北京市"
|
||||
},
|
||||
address: {
|
||||
codes: [
|
||||
"33",
|
||||
"3301",
|
||||
"330110"
|
||||
],
|
||||
names: [
|
||||
"浙江省",
|
||||
"杭州市",
|
||||
"余杭区"
|
||||
],
|
||||
text: "浙江省杭州市余杭区",
|
||||
showText: "浙江省 / 杭州市 / 余杭区",
|
||||
province: {
|
||||
code: "33",
|
||||
name: "浙江省"
|
||||
},
|
||||
city: {
|
||||
code: "3301",
|
||||
name: "杭州市"
|
||||
},
|
||||
area: {
|
||||
code: "330110",
|
||||
name: "余杭区"
|
||||
}
|
||||
},
|
||||
textarea:"啊啊啊啊是的111123",
|
||||
json:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
},
|
||||
switch:true,
|
||||
object:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
}
|
||||
|
||||
},
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"money", title:"money类型字段", type:"money" },
|
||||
{ key:"number", title:"number类型字段", type:"number" },
|
||||
{ key:"radio", title:"radio类型字段", type:"radio" ,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"checkbox", title:"checkbox类型字段", type:"checkbox",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"image", title:"image类型字段", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{ key:"province", title:"province类型字段", type:"province" },
|
||||
{ key:"address", title:"address类型字段", type:"address" },
|
||||
{ key:"textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows:6, maxRows:10 },
|
||||
},
|
||||
{ key:"json", title:"json类型字段", type:"json" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" },
|
||||
{ key:"object", title:"object类型字段", type:"object",
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" }
|
||||
]
|
||||
}
|
||||
]
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
formSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单详情"
|
||||
subTitle="展示表单详情"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-detail-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
></vk-data-detail-table>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
data:{
|
||||
text:"这是文本",
|
||||
money:10000,
|
||||
number:10000,
|
||||
radio:1,
|
||||
checkbox:[1,2],
|
||||
select:1,
|
||||
image:[
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ddu978w24hpp7a5735/828bfb9d-d293-444c-9db7-270c279d93ea.png",
|
||||
],
|
||||
province: {
|
||||
code: "11",
|
||||
name: "北京市"
|
||||
},
|
||||
address: {
|
||||
codes: [
|
||||
"33",
|
||||
"3301",
|
||||
"330110"
|
||||
],
|
||||
names: [
|
||||
"浙江省",
|
||||
"杭州市",
|
||||
"余杭区"
|
||||
],
|
||||
text: "浙江省杭州市余杭区",
|
||||
showText: "浙江省 / 杭州市 / 余杭区",
|
||||
province: {
|
||||
code: "33",
|
||||
name: "浙江省"
|
||||
},
|
||||
city: {
|
||||
code: "3301",
|
||||
name: "杭州市"
|
||||
},
|
||||
area: {
|
||||
code: "330110",
|
||||
name: "余杭区"
|
||||
}
|
||||
},
|
||||
textarea:"啊啊啊啊是的111123",
|
||||
json:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
},
|
||||
switch:true,
|
||||
object:{
|
||||
a:1,
|
||||
b:"aaa"
|
||||
}
|
||||
|
||||
},
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"money", title:"money类型字段", type:"money" },
|
||||
{ key:"number", title:"number类型字段", type:"number" },
|
||||
{ key:"radio", title:"radio类型字段", type:"radio" ,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"checkbox", title:"checkbox类型字段", type:"checkbox",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{ key:"image", title:"image类型字段", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{ key:"province", title:"province类型字段", type:"province" },
|
||||
{ key:"address", title:"address类型字段", type:"address" },
|
||||
{ key:"textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows:6, maxRows:10 },
|
||||
},
|
||||
{ key:"json", title:"json类型字段", type:"json" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" },
|
||||
{ key:"object", title:"object类型字段", type:"object",
|
||||
columns:[
|
||||
{ key:"text", title:"text类型字段", type:"text" },
|
||||
{ key:"switch", title:"switch类型字段", type:"switch" }
|
||||
]
|
||||
}
|
||||
]
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
formSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Dialog 弹窗"
|
||||
subTitle="基础用法"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="dialog.show1 = true">显示弹窗1</el-button>
|
||||
<el-button @click="dialog.show2 = true">显示弹窗2</el-button>
|
||||
</view>
|
||||
<view class="page-dialog">
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="dialog.show1"
|
||||
title="标题1"
|
||||
width="500px"
|
||||
top="14vh"
|
||||
center
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
这里是自定义内容
|
||||
<template v-slot:footer>
|
||||
<el-button @click="dialog.show1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialog.show1 = false">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
|
||||
<vk-data-dialog
|
||||
v-model="dialog.show2"
|
||||
title="标题2"
|
||||
width="500px"
|
||||
top="14vh"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
这里是自定义内容
|
||||
<template v-slot:footer="{ close }">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="close">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
dialog:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="form1.props.show = true">弹出表单</el-button>
|
||||
<el-button @click="resetForm">重置表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
title="表单标题"
|
||||
width="600px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:rules="form1.props.rules"
|
||||
:form-type="form1.props.formType"
|
||||
:loading.sync="form1.props.loading"
|
||||
:auto-close="true"
|
||||
label-width="140px"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio: 1,
|
||||
checkbox : [1,2]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "text", title: "text类型字段", type: "text" },
|
||||
{ key: "number", title: "number类型字段", type: "number" },
|
||||
{ key: "radio", title: "radio类型字段", type: "radio",
|
||||
data: [
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" },
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title: "checkbox类型字段", type: "checkbox",
|
||||
data: [
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" },
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title: "textarea类型字段", type: "textarea",
|
||||
autosize: { minRows: 4, maxRows: 10 },
|
||||
maxlength: 200,
|
||||
showWordLimit: true
|
||||
},
|
||||
{ key: "switch", title: "switch类型字段", type: "switch" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
text: [
|
||||
{ required: true, message: "text不能为空", trigger: "change" },
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
// 表单提交成功时的回调
|
||||
onFormSuccess() {
|
||||
// that.form1.props.show = false;
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
let that = this;
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Dialog 弹窗"
|
||||
subTitle="弹窗表格"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="show = true">显示弹窗</el-button>
|
||||
</view>
|
||||
<view class="page-dialog">
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="show"
|
||||
title="标题"
|
||||
width="900px"
|
||||
top="14vh"
|
||||
center
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
:data="table1.data"
|
||||
:columns="table1.columns"
|
||||
:max-height="500"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
<template v-slot:footer>
|
||||
<el-button @click="show = false">取 消</el-button>
|
||||
<el-button type="primary" @click="show = false">确 定</el-button>
|
||||
</template>
|
||||
</vk-data-dialog>
|
||||
<!-- 页面弹窗内容开始 -->
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
show:false,
|
||||
table1:{
|
||||
// 字段显示规则
|
||||
columns: [
|
||||
{ key: "_id" , title: "用户ID" , type: "text" , width: 200 },
|
||||
{ key: "username" , title: "用户名" , type: "text" , minWidth: 200 },
|
||||
{ key: "nickname" , title: "用户昵称" , type: "text" , minWidth: 200 },
|
||||
{ key: "mobile" , title: "手机号" , type: "text" , width: 200 },
|
||||
],
|
||||
// 表格数据
|
||||
data:[
|
||||
{
|
||||
_id:"001",
|
||||
username:`用户名001`,
|
||||
nickname:`用户昵001`,
|
||||
mobile:`尾号001`,
|
||||
},
|
||||
{
|
||||
_id:"002",
|
||||
username:`用户名002`,
|
||||
nickname:`用户昵002`,
|
||||
mobile:`尾号002`,
|
||||
},
|
||||
{
|
||||
_id:"003",
|
||||
username:`用户名003`,
|
||||
nickname:`用户昵003`,
|
||||
mobile:`尾号003`,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面头部内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="富文本编辑器"
|
||||
subTitle="editor"
|
||||
@back="pageBack"
|
||||
></vk-data-page-header>
|
||||
<!-- 页面头部内容结束 -->
|
||||
<view class="page-body">
|
||||
<!-- 页面主体内容开始 -->
|
||||
<view style="display: flex;">
|
||||
<vk-data-input-editor
|
||||
v-model="content"
|
||||
placeholder="开始输入"
|
||||
width="50%"
|
||||
></vk-data-input-editor>
|
||||
<view style="width: 50%;">
|
||||
<view style="padding: 20px;font-size: 35px;font-family: kaiti;color: red;">
|
||||
HTML效果展示
|
||||
</view>
|
||||
<view v-html="content" class="vk-data-input-editor-view" style="padding: 15px;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<view class="json-view" v-if="content">
|
||||
<pre>
|
||||
{{ content }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面主体内容结束 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
content:""
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch:{
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="子表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 1600px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"", title:"数组对象", type:"bar-title" },
|
||||
{
|
||||
key:"array1", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
switch:true,
|
||||
text1:""
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text",
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ["change","blur"] }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"select1", title:"select类型", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
],
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
],
|
||||
onChange:function(val, row, column, index){
|
||||
// 此处演示根据选择的值动态改变text1的值,注意,此处text1必须要有默认值,即使是空字符串也行.
|
||||
row.text1 = "昵称" + val;
|
||||
}
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
]
|
||||
},
|
||||
{ key:"", title:"递增递减", type:"bar-title" },
|
||||
{
|
||||
key:"array2", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
switch:true,
|
||||
text1:""
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"number1", title:"递增[>]", type:"number", placeholder:"输入数字",
|
||||
incMode: 1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number2", title:"递增[>=]", type:"number", placeholder:"输入数字",
|
||||
incMode: 2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number3", title:"递减[<]", type:"number", placeholder:"输入数字",
|
||||
incMode: -1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number4", title:"递减[<=]", type:"number", placeholder:"输入数字",
|
||||
incMode: -2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"", title:"数组嵌套数组", type:"bar-title" },
|
||||
{
|
||||
key:"array3", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
switch:true,
|
||||
array:[]
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text",
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
{
|
||||
key:"array", title:"数组<对象>类型", type:"array<object>", buttonText: "设置", dialog:true, width:140, dialogWidth:1000,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
|
||||
},
|
||||
rightBtns:['delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text", minWidth:160,
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number", minWidth:160,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{ key:"", title:"下方为纯字符串或纯数字类型数组", type:"bar-title" },
|
||||
{ key:"stringArray", title:"数组<字符串>类型", type:"array<string>", placeholder:"请输入字符串", width:400,
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"numberArray", title:"数组<数字>类型", type:"array<number>", placeholder:"请输入数字", width:400,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="基础表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio: 1,
|
||||
checkbox : [1,2]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{
|
||||
key: "role", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择",
|
||||
action:"template/db_api/sys/getList",
|
||||
multiple:true,
|
||||
columns:[
|
||||
{ key:"_id", title:"id", type:"text", width:260, idKey:true },
|
||||
{ key:"name", title:"昵称", type:"text", width:260, nameKey:true },
|
||||
{ key:"money", title:"金额", type:"money", width:100, sortable:"custom", summaryKey:true, summaryUnit:"元" }, // summaryKey开启该字段为统计字段， summaryUnit：单位
|
||||
],
|
||||
queryColumns:[
|
||||
{ key: "name", title: "昵称", type: "text", width: 150, mode: "%%" },
|
||||
{ key: "_id", title: "标识", type: "text", width: 150, mode: "%%" }
|
||||
]
|
||||
},
|
||||
{ key: "text", title:"text类型字段", type:"text" },
|
||||
{ key: "number", title:"number类型字段", type:"number" },
|
||||
{ key: "radio", title:"radio类型字段", type:"radio" ,
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 4, maxRows: 10 }, showWordLimit:true,
|
||||
},
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="证书转换"
|
||||
subTitle="快速将证书内容变成1行字符串"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<el-input v-model="form1.content" type="textarea" :rows="20" placeholder="请将证书内容粘贴到此处"></el-input>
|
||||
<view style="margin-top: 20px;">
|
||||
<el-button type="primary" @click="copy">复制证书内容（一行字符串形式）</el-button>
|
||||
</view>
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<view style="font-size: 14px;">证书内容</view>
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
content: "",
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
copy(){
|
||||
let str = JSON.stringify(this.form1);
|
||||
let content = str.substring(12,str.length-2);
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: function () {
|
||||
vk.toast("复制成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="复用同一个表单实现添加和修改"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
|
||||
<view style="padding: 15px;color:#303133;">
|
||||
当两个表单内的字段有大部分相似时，同一个表单组件可以复用。<br/>
|
||||
通过控制 formType 可以切换表单的类型<br/>
|
||||
同时在 columns 中添加属性 show:["add"] 代表该字段只有 formType 为 "add" 时才显示
|
||||
</view>
|
||||
<el-button @click="showForm('add')">弹出添加表单</el-button>
|
||||
<el-button @click="showForm('update')">弹出修改表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="600px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:action="form1.props.action"
|
||||
:columns='form1.props.columns'
|
||||
:rules="form1.props.rules"
|
||||
:form-type="form1.props.formType"
|
||||
:loading.sync="form1.props.loading"
|
||||
:auto-close="true"
|
||||
:submit-text='form1.props.submitText'
|
||||
label-width="140px"
|
||||
@success="form1.props.show = false;"
|
||||
@cancel="form1.props.show = false"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "text", title:"text类型字段", type:"text", show:["add"] },
|
||||
{ key: "number", title:"number类型字段", type:"number", show:["add"]},
|
||||
{ key: "radio", title:"radio类型字段", type:"radio" , show:["add"],
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox", show:["update"],
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 4, maxRows: 10 }, maxlength:200, showWordLimit:true,
|
||||
},
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false,
|
||||
// 表单标题
|
||||
title: '',
|
||||
submitText:''
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
},
|
||||
// 显示表单
|
||||
showForm(type){
|
||||
let { form1 } = that;
|
||||
// 先重置下表单
|
||||
that.resetForm();
|
||||
if(type === 'add'){
|
||||
form1.props.title = '添加表单';
|
||||
form1.props.submitText = '添加';
|
||||
// 此处添加的action和修改的action可以不一致
|
||||
form1.props.action = "template/test/sys/test";
|
||||
}else{
|
||||
form1.props.title = '修改表单';
|
||||
form1.props.submitText = '修改';
|
||||
// 此处添加的action和修改的action可以不一致
|
||||
form1.props.action = "template/test/sys/test";
|
||||
// 如果是修改 可以在此赋值
|
||||
form1.data = {
|
||||
checkbox: [1],
|
||||
textarea: '1111',
|
||||
switch: true
|
||||
};
|
||||
}
|
||||
form1.props.formType = type;
|
||||
form1.props.show = true;
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<el-button @click="form1.props.show = true">弹出表单</el-button>
|
||||
<el-button @click="resetForm">重置表单</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
title="表单标题"
|
||||
width="950px"
|
||||
mode="form"
|
||||
>
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:rules="form1.props.rules"
|
||||
:form-type="form1.props.formType"
|
||||
:loading.sync="form1.props.loading"
|
||||
:auto-close="true"
|
||||
label-width="140px"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio: 1,
|
||||
checkbox : [1,2]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "text", title: "text类型字段", type: "text" },
|
||||
{ key: "number", title: "number类型字段", type: "number" },
|
||||
{ key: "radio", title: "radio类型字段", type: "radio",
|
||||
data: [
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" },
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title: "checkbox类型字段", type: "checkbox",
|
||||
data: [
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" },
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title: "textarea类型字段", type: "textarea",
|
||||
autosize: { minRows: 4, maxRows: 10 },
|
||||
maxlength: 200,
|
||||
showWordLimit: true
|
||||
},
|
||||
{ key: "switch", title: "switch类型字段", type: "switch" },
|
||||
{ key:"editor", title:"富文本类型", type:"editor", width:"750px" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
text: [
|
||||
{ required: true, message: "text不能为空", trigger: "change" },
|
||||
]
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType: "",
|
||||
// 表单是否在请求中
|
||||
loading: false,
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
// 表单提交成功时的回调
|
||||
onFormSuccess() {
|
||||
// that.form1.props.show = false;
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
let that = this;
|
||||
if (that.$refs.form1) that.$refs.form1.resetForm();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="行内表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 1200px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
:inline="true"
|
||||
:columnsNumber="2"
|
||||
@cancel="onCancel"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
</view>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio: 1,
|
||||
checkbox : [1,2]
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "text", title:"text类型字段", type:"text" },
|
||||
{ key: "user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号",
|
||||
action:"admin/select/kh/user"
|
||||
},
|
||||
|
||||
{ key: "money", title:"money类型字段", type:"money" },
|
||||
{ key: "select", title:"select类型字段", type:"select",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "number", title:"number类型字段", type:"number" },
|
||||
{ key: "switch", title:"switch类型字段", type:"switch" },
|
||||
{ key: "radio", title:"radio类型字段", type:"radio" ,
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox",
|
||||
data:[
|
||||
{ value: 1, label: "选项1" },
|
||||
{ value: 2, label: "选项2" }
|
||||
]
|
||||
},
|
||||
{ key: "textarea", title:"textarea类型字段", type:"textarea",
|
||||
autosize:{ minRows: 6, maxRows: 10 }, maxlength:200, showWordLimit:true,
|
||||
width:820
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
onFormSuccess(){
|
||||
console.log("表单提交成功");
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="证书转换"
|
||||
subTitle="快速将证书内容变成1行字符串"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="width: 100%">
|
||||
<view style="color: red;font-size: 12px;">全程无网络请求（打开此页面后无网状态也能执行），直接在前端解析证书，没有证书泄露风险</view>
|
||||
<el-table :data="certList" style="width: 100%">
|
||||
<el-table-column prop="tips" label="说明" minWidth="300"> </el-table-column>
|
||||
<el-table-column prop="name" label="选择证书" minWidth="300">
|
||||
<template slot-scope="scope">
|
||||
<text style="margin-right: 20px;">{{ scope.row.name }}</text>
|
||||
<el-button type="success" @click="upload(scope.row)" size="mini" plain> {{ scope.row.content ? '已' : ''}}选择 {{ scope.row.file }} </el-button>
|
||||
<text style="margin-left: 20px;color: #c2e7b0;" v-if="scope.row.content && scope.row.file === scope.row.name"> √ </text>
|
||||
<text style="margin-left: 20px;color: red;" v-if="scope.row.content && scope.row.file !== scope.row.name"> × </text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="key4" label="选择后可复制" minWidth="200" >
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button type="success" @click="copy(scope.row.name)" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 复制 </el-button> -->
|
||||
<el-button type="success" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 请复制下方证书内容 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<view style="font-size: 14px;">证书内容</view>
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
certList: [
|
||||
{
|
||||
name: 'apiclient_cert.p12',
|
||||
tips: '微信支付v2需要用到的证书（wxpay.pfx）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.pfx'
|
||||
},
|
||||
{
|
||||
name: 'apiclient_cert.pem',
|
||||
tips: '微信支付v3需要用到的证书（wxpay.appCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.appCertContent'
|
||||
},
|
||||
{
|
||||
name: 'apiclient_key.pem',
|
||||
tips: '微信支付v3需要用到的证书（wxpay.appPrivateKeyContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'wxpay.appPrivateKeyContent'
|
||||
},
|
||||
{
|
||||
name: 'alipayCertPublicKey_RSA2.crt',
|
||||
tips: '支付宝支付 - 支付宝公钥证书（alipay.alipayPublicCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.alipayPublicCertContent'
|
||||
},
|
||||
{
|
||||
name: 'alipayRootCert.crt',
|
||||
tips: '支付宝支付 - 支付宝根证书（alipay.alipayRootCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.alipayRootCertContent'
|
||||
},
|
||||
{
|
||||
name: 'appCertPublicKey.crt',
|
||||
tips: '支付宝支付 - 应用公钥证书（alipay.appCertContent）的值',
|
||||
file: '',
|
||||
content: '',
|
||||
key: 'alipay.appCertContent'
|
||||
}
|
||||
],
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
wxpay: {
|
||||
pfx: "",
|
||||
appCertContent: "",
|
||||
appPrivateKeyContent: "",
|
||||
},
|
||||
alipay: {
|
||||
alipayPublicCertContent: "",
|
||||
alipayRootCertContent: "",
|
||||
appCertContent: ""
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
upload(item={}){
|
||||
let { name, key } = item;
|
||||
let index = this.certList.findIndex((certItem) => {
|
||||
return name === certItem.name;
|
||||
});
|
||||
let suffix = name.substring(name.lastIndexOf(".") + 1);
|
||||
uni.chooseFile({
|
||||
count: 1, //默认100
|
||||
extension: [suffix],
|
||||
success: (res) => {
|
||||
let tempFile = res.tempFiles[0];
|
||||
if (name === "apiclient_cert.p12") {
|
||||
vk.pubfn.fileToBase64({
|
||||
file: tempFile,
|
||||
success: (base64) => {
|
||||
let base64Index = base64.indexOf("base64,");
|
||||
base64 = base64.substring(base64Index+"base64,".length);
|
||||
this.form1.wxpay.pfx = base64;
|
||||
this.certList[index].content = base64;
|
||||
this.certList[index].file = tempFile.name;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
let result = reader.result;
|
||||
result = result.replace(/\r\n/g, "\n");
|
||||
vk.pubfn.setData(this.form1, key, result);
|
||||
this.certList[index].content = result;
|
||||
};
|
||||
reader.readAsText(res.tempFiles[0]);
|
||||
if (tempFile.name.indexOf("appCertPublicKey_") == 0) {
|
||||
tempFile.name = "appCertPublicKey.crt";
|
||||
}
|
||||
this.certList[index].file = tempFile.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
copy(name){
|
||||
let contentItem = this.certList.find((item) => {
|
||||
return name === item.name;
|
||||
});
|
||||
let content = contentItem.content;
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: () => {
|
||||
vk.toast("复制成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,543 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="高级表单"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
input-width="400px"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
||||
<!-- <template v-slot:editor="{ form, keyName }">
|
||||
<vk-data-input-editor v-model="form[keyName]" placeholder="开始输入" width="750px"></vk-data-input-editor>
|
||||
</template> -->
|
||||
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</view>
|
||||
|
||||
<view class="page-footer">
|
||||
<!-- 页面底部内容开始 -->
|
||||
<el-button :loading="form1.props.loading" type="primary" class="footer-update-btn" @click="submitForm">确定</el-button>
|
||||
<el-button plain class="footer-back-btn" @click="onCancel" style="margin-left: 30px;">返回</el-button>
|
||||
<!-- 页面底部内容开始 -->
|
||||
</view>
|
||||
|
||||
<view class="tips" style="position: fixed;right: 0px;top:100px;bottom:15px; overflow: auto;max-width: 400px;">
|
||||
<view class="json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
radio:1,
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
// 基础字段类型
|
||||
{ key:"", title:"基础字段", type:"bar-title" },
|
||||
{ key:"text", title:"单行文本", type:"text" },
|
||||
{
|
||||
key:"textarea", title:"多行文本", type:"textarea",
|
||||
autosize:{ minRows:4, maxRows:10 },
|
||||
maxlength:200,
|
||||
showWordLimit:true,
|
||||
},
|
||||
{ key:"money", title:"money类型", type:"money", tips:"100 = 1元。页面显示的是1，实际的值是100，请看右上角表单数据的值。" },
|
||||
{ key:"number", title:"number类型", type:"number", precision:2, tips:"number类型值会转为数字，可以指定小数位数" },
|
||||
{ key:"number2", title:"计数器类型", type:"number", controls:true, precision:0, min:5, max:100, placeholder:"请输入数字" },
|
||||
{ key:"percentage", title:"百分比类型", type:"percentage", precision:0, tips:"页面显示的是1，实际的值是0.01，请看右上角表单数据的值。" },
|
||||
{ key:"discount", title:"折扣类型", type:"discount", tips:"页面显示的是1，实际的值是0.1，请看右上角表单数据的值。" },
|
||||
{ key:"text2", title:"文本2", type:"text",prepend:"前置文字",append:"后置文字",prefixIcon:"el-icon-user" },
|
||||
// 选择型字段
|
||||
{ key:"", title:"选择型字段", type:"bar-title" },
|
||||
{
|
||||
key:"radio1", title:"radio类型1", type:"radio",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox1", title:"checkbox类型1", type:"checkbox",
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"radio2", title:"radio类型2", type:"radio",
|
||||
border:true,
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox2", title:"checkbox类型2", type:"checkbox",
|
||||
border:true,
|
||||
itemWidth:80,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"radio3", title:"radio类型3", type:"radio" ,
|
||||
optionType:'button',
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"checkbox3", title:"checkbox类型3", type:"checkbox" ,
|
||||
optionType:'button',
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"select1", title:"select类型1", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"select2", title:"select类型2", type:"select",
|
||||
multiple:true,
|
||||
multipleLimit:2,
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" },
|
||||
{ value:3, label:"选项3" },
|
||||
{ value:4, label:"选项4" }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"select3", title:"select类型3", type:"select",
|
||||
group:true,
|
||||
data:[
|
||||
{
|
||||
label: "分组1",
|
||||
children:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "分组2",
|
||||
children:[
|
||||
{ value:3, label:"选项3" },
|
||||
{ value:4, label:"选项4" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ key:"province", title:"province类型", type:"province" },
|
||||
{ key:"address", title:"address类型", type:"address" },
|
||||
{ key:"cascader1", title:"本地数据级联", type:"cascader",
|
||||
data:[
|
||||
{
|
||||
value:1,
|
||||
label:"数学",
|
||||
children:[
|
||||
{
|
||||
value:11,
|
||||
label:"奥数",
|
||||
},
|
||||
{
|
||||
value:12,
|
||||
label:"微积分",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:"语文",
|
||||
children:[
|
||||
{
|
||||
value:21,
|
||||
label:"文言文",
|
||||
},
|
||||
{
|
||||
value:22,
|
||||
label:"古诗",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"cascader2", title:"云端数据级联", type:"cascader",
|
||||
action:"admin/system/permission/sys/getAll",
|
||||
props:{
|
||||
list:"rows",
|
||||
value:"permission_id",
|
||||
label:"label",
|
||||
children:"children",
|
||||
multiple:true
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"cascader3", title:"云端数据级联懒加载", type:"cascader",
|
||||
action:"admin/system/menu/sys/getCascader",
|
||||
props:{
|
||||
list:"rows",
|
||||
value:"menu_id",
|
||||
label:"label",
|
||||
children:"children",
|
||||
lazy:true,
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"tree1", title:"树形选择(单选)", type:"tree-select", placeholder:"请选择学科",
|
||||
data:[
|
||||
{
|
||||
value:1,
|
||||
label:"数学",
|
||||
children:[
|
||||
{ value:11,label:"奥数" },
|
||||
{ value:12,label:"微积分" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:"语文",
|
||||
children:[
|
||||
{ value:21, label:"文言文" },
|
||||
{ value:22, label:"古诗" }
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"tree2", title:"树形选择(多选)", type:"tree-select", placeholder:"请选择学科",
|
||||
multiple:true,
|
||||
data:[
|
||||
{
|
||||
value:1,
|
||||
label:"数学",
|
||||
children:[
|
||||
{ value:11,label:"奥数" },
|
||||
{ value:12,label:"微积分" }
|
||||
]
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:"语文",
|
||||
children:[
|
||||
{ value:21, label:"文言文" },
|
||||
{ value:22, label:"古诗" }
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch" },
|
||||
{ key:"rate", title:"评分类型", type:"rate", allowHalf:false },
|
||||
{ key:"slider", title:"滑块类型", type:"slider" },
|
||||
{ key:"color1", title:"颜色类型1", type:"color" },
|
||||
{ key:"color2", title:"颜色类型2", type:"color", showAlpha:true },
|
||||
{ key:"icon1", title:"图标1", type:"icon" },
|
||||
{ key:"icon2", title:"图标2", type:"icon", filter:"vk-" },
|
||||
{ key:"icon3", title:"图标3", type:"icon",
|
||||
filter:(name)=>{
|
||||
// 不显示vk图标
|
||||
return name.indexOf("vk-icon") === 0 ? false : true;
|
||||
},
|
||||
},
|
||||
// 文件上传
|
||||
{ key:"", title:"文件上传", type:"bar-title" },
|
||||
{
|
||||
key:"image1", title:"image类型", type:"image",
|
||||
limit:6
|
||||
},
|
||||
{
|
||||
key:"image2", title:"拖拽上传", type:"image",
|
||||
limit:6, drag:true,
|
||||
fileSize:2,
|
||||
sizeUnit:"mb",
|
||||
tips:"图片大小限制：小于2M"
|
||||
},
|
||||
{
|
||||
key:"file", title:"文件类型", type:"file",
|
||||
limit:6,
|
||||
accept:".txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf"
|
||||
},
|
||||
{ key:"image3", title:"从素材库多选图片", type:"file-select", placeholder:"请选择图片", fileType:"image", multiple:true, multipleLimit:5 },
|
||||
{ key:"image4", title:"从素材库单选图片", type:"file-select", placeholder:"请选择图片", fileType:"image" },
|
||||
{ key:"video1", title:"从素材库单选视频", type:"file-select", placeholder:"请选择视频", fileType:"video" },
|
||||
// 日期型字段
|
||||
{ key:"", title:"日期型字段", type:"bar-title" },
|
||||
{ key:"date", title:"date类型", type:"date", dateType:"date", tips:"可选择年月日" },
|
||||
{ key:"dateTime", title:"dataTime类型", type:"date", dateType:"datetime", tips:"可选择年月日时分秒" },
|
||||
{ key:"dateArr", title:"date类型范围", type:"date", dateType:"daterange" },
|
||||
{ key:"dataTimeArr", title:"dataTime类型范围", type:"date", dateType:"datetimerange" },
|
||||
// 时间型字段
|
||||
{ key:"", title:"时间型字段", type:"bar-title" },
|
||||
{ key:"time1", title:"time类型1", type:"time" },
|
||||
{
|
||||
key:"time2", title:"time类型2", type:"time",
|
||||
valueFormat:"HH:mm",
|
||||
pickerOptions:{
|
||||
format:"HH:mm"
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"time3", title:"time类型3", type:"time", custom:true,
|
||||
pickerOptions:{
|
||||
start: '08:00',
|
||||
step: '01:00',
|
||||
end: '24:00'
|
||||
}
|
||||
},
|
||||
{ key:"timeArr1", title:"time类型范围1", type:"time", isRange:true },
|
||||
{
|
||||
key:"timeArr2", title:"time类型范围2", type:"time", isRange:true,
|
||||
valueFormat:"HH:mm",
|
||||
pickerOptions:{
|
||||
selectableRange: '18:30:00 - 20:30:00',
|
||||
format:"HH:mm"
|
||||
}
|
||||
},
|
||||
// 数据库联动字段
|
||||
{ key:"", title:"数据库联动字段", type:"bar-title" },
|
||||
{
|
||||
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
|
||||
action:"admin/select/kh/user",
|
||||
},
|
||||
{
|
||||
key: "user_id", title: "选择用户", type: "table-select", placeholder:"选择",
|
||||
action:"admin/system/user/sys/getList",
|
||||
columns:[
|
||||
{ key:"nickname", title:"用户昵称", type:"text", nameKey:true },
|
||||
{ key:"_id", title:"用户标识", type:"text", idKey:true },
|
||||
{ key:"mobile", title:"手机号", type:"text" },
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "role1", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择角色",
|
||||
action:"admin/system/role/sys/getList",
|
||||
columns:[
|
||||
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
|
||||
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "role2", title: "通过表格选择(多选)", type: "table-select", placeholder:"请选择角色",
|
||||
action:"admin/system/role/sys/getList",
|
||||
columns:[
|
||||
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
|
||||
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
|
||||
],
|
||||
multiple:true
|
||||
},
|
||||
// 布局
|
||||
{ key:"", title:"横向布局", type:"bar-title" },
|
||||
{ key:"", title:"", type:"group", justify:"start",
|
||||
columns:[
|
||||
{ key:"text1", title:"单行文本1", type:"text" },
|
||||
{ key:"text2", title:"单行文本2", type:"text" },
|
||||
{ key:"text3", title:"单行文本3", type:"text" },
|
||||
{ key:"text4", title:"单行文本4", type:"text" },
|
||||
]
|
||||
},
|
||||
{ key:"", title:"", type:"group", justify:"start",
|
||||
columns:[
|
||||
{ key:"text5", title:"单行文本5", type:"text" },
|
||||
{ key:"text6", title:"单行文本6", type:"text" },
|
||||
{ key:"text7", title:"单行文本7", type:"text" },
|
||||
{ key:"text8", title:"单行文本8", type:"text" },
|
||||
]
|
||||
},
|
||||
// 对象类型
|
||||
{ key:"", title:"对象类型", type:"bar-title" },
|
||||
{ key:"object1", title:"对象类型1", type:"object",
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"对象内属性b", type:"text" },
|
||||
]
|
||||
},
|
||||
// 可以通过设置showLabel:false, 隐藏左侧的label
|
||||
{ key:"object2", title:"对象类型2", type:"object", showLabel:false,
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"对象内属性b", type:"text" },
|
||||
]
|
||||
},
|
||||
// 多层嵌套object
|
||||
{ key:"object3", title:"对象类型3", type:"object", showLabel:true,
|
||||
columns:[
|
||||
{ key:"a", title:"对象内属性a", type:"text" },
|
||||
{ key:"b", title:"嵌套对象b", type:"object", showLabel:true,
|
||||
columns:[
|
||||
{ key:"b1", title:"嵌套对象b内属性b1", type:"text" },
|
||||
{ key:"b2", title:"嵌套对象b内属性b2", type:"text" },
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
// 特殊类型
|
||||
{ key:"", title:"特殊类型", type:"bar-title" },
|
||||
{ key:"editor", title:"富文本类型", type:"editor", width:"1000px" },
|
||||
{ key:"json", title:"json类型", type:"json" },
|
||||
{ key:"position", title:"地图位置", type:"map", width:600, height:300, defaultLocation:{ latitude: 30.224781, longitude: 120.12438 } },
|
||||
{ key:"array1", title:"数组字符串类型", type:"array<string>" },
|
||||
{ key:"array2", title:"数组数字类型", type:"array<number>" },
|
||||
{
|
||||
key:"array", title:"数组对象类型", type:"array<object>", itemWidth:260,
|
||||
showAdd:true,
|
||||
showClear:true,
|
||||
showSort:true,
|
||||
// 新增一行时,该行的默认值
|
||||
defaultValue:{
|
||||
select1:1
|
||||
},
|
||||
rightBtns:['copy','delete'],
|
||||
// 每行每个字段对应的渲染规则
|
||||
columns:[
|
||||
{
|
||||
key:"text1", title:"昵称", type:"text",
|
||||
isUnique:true,
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ["change","blur"] }
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"number1", title:"数字", type:"number",
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"select1", title:"select类型", type:"select",
|
||||
data:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
],
|
||||
rules:[
|
||||
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
|
||||
]
|
||||
},
|
||||
{ key:"switch", title:"switch类型", type:"switch", width:160 },
|
||||
]
|
||||
},
|
||||
{ key:"goods_tags", title:"商品标签", type:"tag" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
text:[
|
||||
{ required:true, message:'text不能为空', trigger:'change' }
|
||||
],
|
||||
money:[
|
||||
{ required:true, message:'金额不能为空', trigger:'change' },
|
||||
{ type:"number", message:'金额必须是数字', trigger:'change' },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show:false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods:{
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 关闭按钮
|
||||
onCancel(){
|
||||
console.log("关闭");
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
// 表单提交
|
||||
submitForm(){
|
||||
that.$refs.form1.submitForm();
|
||||
},
|
||||
// 表单提交成功
|
||||
onFormSuccess(){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Form 表单"
|
||||
subTitle="使用插糟自定义表单"
|
||||
></vk-data-page-header>
|
||||
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
:loading.sync="form1.props.loading"
|
||||
label-width="140px"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<!-- v-slot:rate 中的 rate 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
|
||||
<template v-slot:rate="{ form, keyName }">
|
||||
<view style="height: 36px;display: flex;align-items: center;">
|
||||
<el-rate v-model="form[keyName]"></el-rate>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer="{ loading }">
|
||||
<el-button plain style="margin-right: 20px;width: 80px;" @click="onCancel">返回</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width: 80px;" @click="submitForm">添加</el-button>
|
||||
</template>
|
||||
|
||||
</vk-data-form>
|
||||
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1.data">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1.data }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单相关开始-----------------------------------------------------------
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"template/test/sys/test",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key: "text", title:"text类型字段", type:"text" },
|
||||
{ key: "rate", title:"插糟用法", type:"text" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:'',
|
||||
// 是否显示表单1 的弹窗
|
||||
show: false,
|
||||
// 表单是否在请求中
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
// 表单相关结束-----------------------------------------------------------
|
||||
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
// 页面返回
|
||||
onCancel(){
|
||||
vk.menuTabs.closeCurrent();
|
||||
},
|
||||
// 表单提交
|
||||
submitForm(){
|
||||
that.$refs.form1.submitForm();
|
||||
},
|
||||
// 表单提交成功后
|
||||
onFormSuccess(){
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!-- 与element-icons区别是没有left和top窗口 -->
|
||||
<template>
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="Element 图标"
|
||||
subTitle="点击图标即可复制图标代码"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/element-icons.js'
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
icons,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
}
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="Element 图标"
|
||||
subTitle="点击图标即可复制图标代码"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/element-icons.js'
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
icons,
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
}
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
export default [
|
||||
"el-icon-platform-eleme",
|
||||
"el-icon-eleme",
|
||||
"el-icon-delete-solid",
|
||||
"el-icon-delete",
|
||||
"el-icon-s-tools",
|
||||
"el-icon-setting",
|
||||
"el-icon-user-solid",
|
||||
"el-icon-user",
|
||||
"el-icon-phone",
|
||||
"el-icon-phone-outline",
|
||||
"el-icon-more",
|
||||
"el-icon-more-outline",
|
||||
"el-icon-star-on",
|
||||
"el-icon-star-off",
|
||||
"el-icon-s-goods",
|
||||
"el-icon-goods",
|
||||
"el-icon-warning",
|
||||
"el-icon-warning-outline",
|
||||
"el-icon-question",
|
||||
"el-icon-info",
|
||||
"el-icon-remove",
|
||||
"el-icon-circle-plus",
|
||||
"el-icon-success",
|
||||
"el-icon-error",
|
||||
"el-icon-zoom-in",
|
||||
"el-icon-zoom-out",
|
||||
"el-icon-remove-outline",
|
||||
"el-icon-circle-plus-outline",
|
||||
"el-icon-circle-check",
|
||||
"el-icon-circle-close",
|
||||
"el-icon-s-help",
|
||||
"el-icon-help",
|
||||
"el-icon-minus",
|
||||
"el-icon-plus",
|
||||
"el-icon-check",
|
||||
"el-icon-close",
|
||||
"el-icon-picture",
|
||||
"el-icon-picture-outline",
|
||||
"el-icon-picture-outline-round",
|
||||
"el-icon-upload",
|
||||
"el-icon-upload2",
|
||||
"el-icon-download",
|
||||
"el-icon-camera-solid",
|
||||
"el-icon-camera",
|
||||
"el-icon-video-camera-solid",
|
||||
"el-icon-video-camera",
|
||||
"el-icon-message-solid",
|
||||
"el-icon-bell",
|
||||
"el-icon-s-cooperation",
|
||||
"el-icon-s-order",
|
||||
"el-icon-s-platform",
|
||||
"el-icon-s-fold",
|
||||
"el-icon-s-unfold",
|
||||
"el-icon-s-operation",
|
||||
"el-icon-s-promotion",
|
||||
"el-icon-s-home",
|
||||
"el-icon-s-release",
|
||||
"el-icon-s-ticket",
|
||||
"el-icon-s-management",
|
||||
"el-icon-s-open",
|
||||
"el-icon-s-shop",
|
||||
"el-icon-s-marketing",
|
||||
"el-icon-s-flag",
|
||||
"el-icon-s-comment",
|
||||
"el-icon-s-finance",
|
||||
"el-icon-s-claim",
|
||||
"el-icon-s-custom",
|
||||
"el-icon-s-opportunity",
|
||||
"el-icon-s-data",
|
||||
"el-icon-s-check",
|
||||
"el-icon-s-grid",
|
||||
"el-icon-menu",
|
||||
"el-icon-share",
|
||||
"el-icon-d-caret",
|
||||
"el-icon-caret-left",
|
||||
"el-icon-caret-right",
|
||||
"el-icon-caret-bottom",
|
||||
"el-icon-caret-top",
|
||||
"el-icon-bottom-left",
|
||||
"el-icon-bottom-right",
|
||||
"el-icon-back",
|
||||
"el-icon-right",
|
||||
"el-icon-bottom",
|
||||
"el-icon-top",
|
||||
"el-icon-top-left",
|
||||
"el-icon-top-right",
|
||||
"el-icon-arrow-left",
|
||||
"el-icon-arrow-right",
|
||||
"el-icon-arrow-down",
|
||||
"el-icon-arrow-up",
|
||||
"el-icon-d-arrow-left",
|
||||
"el-icon-d-arrow-right",
|
||||
"el-icon-video-pause",
|
||||
"el-icon-video-play",
|
||||
"el-icon-refresh",
|
||||
"el-icon-refresh-right",
|
||||
"el-icon-refresh-left",
|
||||
"el-icon-finished",
|
||||
"el-icon-sort",
|
||||
"el-icon-sort-up",
|
||||
"el-icon-sort-down",
|
||||
"el-icon-rank",
|
||||
"el-icon-loading",
|
||||
"el-icon-view",
|
||||
"el-icon-c-scale-to-original",
|
||||
"el-icon-date",
|
||||
"el-icon-edit",
|
||||
"el-icon-edit-outline",
|
||||
"el-icon-folder",
|
||||
"el-icon-folder-opened",
|
||||
"el-icon-folder-add",
|
||||
"el-icon-folder-remove",
|
||||
"el-icon-folder-delete",
|
||||
"el-icon-folder-checked",
|
||||
"el-icon-tickets",
|
||||
"el-icon-document-remove",
|
||||
"el-icon-document-delete",
|
||||
"el-icon-document-copy",
|
||||
"el-icon-document-checked",
|
||||
"el-icon-document",
|
||||
"el-icon-document-add",
|
||||
"el-icon-printer",
|
||||
"el-icon-paperclip",
|
||||
"el-icon-takeaway-box",
|
||||
"el-icon-search",
|
||||
"el-icon-monitor",
|
||||
"el-icon-attract",
|
||||
"el-icon-mobile",
|
||||
"el-icon-scissors",
|
||||
"el-icon-umbrella",
|
||||
"el-icon-headset",
|
||||
"el-icon-brush",
|
||||
"el-icon-mouse",
|
||||
"el-icon-coordinate",
|
||||
"el-icon-magic-stick",
|
||||
"el-icon-reading",
|
||||
"el-icon-data-line",
|
||||
"el-icon-data-board",
|
||||
"el-icon-pie-chart",
|
||||
"el-icon-data-analysis",
|
||||
"el-icon-collection-tag",
|
||||
"el-icon-film",
|
||||
"el-icon-suitcase",
|
||||
"el-icon-suitcase-1",
|
||||
"el-icon-receiving",
|
||||
"el-icon-collection",
|
||||
"el-icon-files",
|
||||
"el-icon-notebook-1",
|
||||
"el-icon-notebook-2",
|
||||
"el-icon-toilet-paper",
|
||||
"el-icon-office-building",
|
||||
"el-icon-school",
|
||||
"el-icon-table-lamp",
|
||||
"el-icon-house",
|
||||
"el-icon-no-smoking",
|
||||
"el-icon-smoking",
|
||||
"el-icon-shopping-cart-full",
|
||||
"el-icon-shopping-cart-1",
|
||||
"el-icon-shopping-cart-2",
|
||||
"el-icon-shopping-bag-1",
|
||||
"el-icon-shopping-bag-2",
|
||||
"el-icon-sold-out",
|
||||
"el-icon-sell",
|
||||
"el-icon-present",
|
||||
"el-icon-box",
|
||||
"el-icon-bank-card",
|
||||
"el-icon-money",
|
||||
"el-icon-coin",
|
||||
"el-icon-wallet",
|
||||
"el-icon-discount",
|
||||
"el-icon-price-tag",
|
||||
"el-icon-news",
|
||||
"el-icon-guide",
|
||||
"el-icon-male",
|
||||
"el-icon-female",
|
||||
"el-icon-thumb",
|
||||
"el-icon-cpu",
|
||||
"el-icon-link",
|
||||
"el-icon-connection",
|
||||
"el-icon-open",
|
||||
"el-icon-turn-off",
|
||||
"el-icon-set-up",
|
||||
"el-icon-chat-round",
|
||||
"el-icon-chat-line-round",
|
||||
"el-icon-chat-square",
|
||||
"el-icon-chat-dot-round",
|
||||
"el-icon-chat-dot-square",
|
||||
"el-icon-chat-line-square",
|
||||
"el-icon-message",
|
||||
"el-icon-postcard",
|
||||
"el-icon-position",
|
||||
"el-icon-turn-off-microphone",
|
||||
"el-icon-microphone",
|
||||
"el-icon-close-notification",
|
||||
"el-icon-bangzhu",
|
||||
"el-icon-time",
|
||||
"el-icon-odometer",
|
||||
"el-icon-crop",
|
||||
"el-icon-aim",
|
||||
"el-icon-switch-button",
|
||||
"el-icon-full-screen",
|
||||
"el-icon-copy-document",
|
||||
"el-icon-mic",
|
||||
"el-icon-stopwatch",
|
||||
"el-icon-medal-1",
|
||||
"el-icon-medal",
|
||||
"el-icon-trophy",
|
||||
"el-icon-trophy-1",
|
||||
"el-icon-first-aid-kit",
|
||||
"el-icon-discover",
|
||||
"el-icon-place",
|
||||
"el-icon-location",
|
||||
"el-icon-location-outline",
|
||||
"el-icon-location-information",
|
||||
"el-icon-add-location",
|
||||
"el-icon-delete-location",
|
||||
"el-icon-map-location",
|
||||
"el-icon-alarm-clock",
|
||||
"el-icon-timer",
|
||||
"el-icon-watch-1",
|
||||
"el-icon-watch",
|
||||
"el-icon-lock",
|
||||
"el-icon-unlock",
|
||||
"el-icon-key",
|
||||
"el-icon-service",
|
||||
"el-icon-mobile-phone",
|
||||
"el-icon-bicycle",
|
||||
"el-icon-truck",
|
||||
"el-icon-ship",
|
||||
"el-icon-basketball",
|
||||
"el-icon-football",
|
||||
"el-icon-soccer",
|
||||
"el-icon-baseball",
|
||||
"el-icon-wind-power",
|
||||
"el-icon-light-rain",
|
||||
"el-icon-lightning",
|
||||
"el-icon-heavy-rain",
|
||||
"el-icon-sunrise",
|
||||
"el-icon-sunrise-1",
|
||||
"el-icon-sunset",
|
||||
"el-icon-sunny",
|
||||
"el-icon-cloudy",
|
||||
"el-icon-partly-cloudy",
|
||||
"el-icon-cloudy-and-sunny",
|
||||
"el-icon-moon",
|
||||
"el-icon-moon-night",
|
||||
"el-icon-dish",
|
||||
"el-icon-dish-1",
|
||||
"el-icon-food",
|
||||
"el-icon-chicken",
|
||||
"el-icon-fork-spoon",
|
||||
"el-icon-knife-fork",
|
||||
"el-icon-burger",
|
||||
"el-icon-tableware",
|
||||
"el-icon-sugar",
|
||||
"el-icon-dessert",
|
||||
"el-icon-ice-cream",
|
||||
"el-icon-hot-water",
|
||||
"el-icon-water-cup",
|
||||
"el-icon-coffee-cup",
|
||||
"el-icon-cold-drink",
|
||||
"el-icon-goblet",
|
||||
"el-icon-goblet-full",
|
||||
"el-icon-goblet-square",
|
||||
"el-icon-goblet-square-full",
|
||||
"el-icon-refrigerator",
|
||||
"el-icon-grape",
|
||||
"el-icon-watermelon",
|
||||
"el-icon-cherry",
|
||||
"el-icon-apple",
|
||||
"el-icon-pear",
|
||||
"el-icon-orange",
|
||||
"el-icon-coffee",
|
||||
"el-icon-ice-tea",
|
||||
"el-icon-ice-drink",
|
||||
"el-icon-milk-tea",
|
||||
"el-icon-potato-strips",
|
||||
"el-icon-lollipop",
|
||||
"el-icon-ice-cream-square",
|
||||
"el-icon-ice-cream-round"
|
||||
];
|
||||
@@ -0,0 +1,468 @@
|
||||
export default [
|
||||
"vk-icon-activityfill",
|
||||
"vk-icon-crownfill",
|
||||
"vk-icon-crown",
|
||||
"vk-icon-goodsfill",
|
||||
"vk-icon-messagefill",
|
||||
"vk-icon-profilefill",
|
||||
"vk-icon-sound",
|
||||
"vk-icon-sponsorfill",
|
||||
"vk-icon-sponsor",
|
||||
"vk-icon-upblock",
|
||||
"vk-icon-weblock",
|
||||
"vk-icon-weunblock",
|
||||
"vk-icon-1111",
|
||||
"vk-icon-my",
|
||||
"vk-icon-myfill",
|
||||
"vk-icon-emojifill",
|
||||
"vk-icon-emojiflashfill",
|
||||
"vk-icon-flashbuyfill-copy",
|
||||
"vk-icon-text",
|
||||
"vk-icon-goodsfavor",
|
||||
"vk-icon-musicfill",
|
||||
"vk-icon-musicforbidfill",
|
||||
"vk-icon-roundleftfill",
|
||||
"vk-icon-triangledownfill",
|
||||
"vk-icon-triangleupfill",
|
||||
"vk-icon-roundleftfill-copy",
|
||||
"vk-icon-pulldown1",
|
||||
"vk-icon-emojilight",
|
||||
"vk-icon-keyboardlight",
|
||||
"vk-icon-recordfill",
|
||||
"vk-icon-recordlight",
|
||||
"vk-icon-appreciate",
|
||||
"vk-icon-record",
|
||||
"vk-icon-check",
|
||||
"vk-icon-roundaddlight",
|
||||
"vk-icon-close",
|
||||
"vk-icon-soundlight",
|
||||
"vk-icon-edit",
|
||||
"vk-icon-cardboardfill",
|
||||
"vk-icon-emoji",
|
||||
"vk-icon-cardboard",
|
||||
"vk-icon-favorfill",
|
||||
"vk-icon-formfill",
|
||||
"vk-icon-favor",
|
||||
"vk-icon-coin",
|
||||
"vk-icon-loading",
|
||||
"vk-icon-sortlight",
|
||||
"vk-icon-locationfill",
|
||||
"vk-icon-cardboardforbid",
|
||||
"vk-icon-location",
|
||||
"vk-icon-circlefill",
|
||||
"vk-icon-phone",
|
||||
"vk-icon-circle",
|
||||
"vk-icon-roundcheckfill",
|
||||
"vk-icon-attentionforbid",
|
||||
"vk-icon-roundcheck",
|
||||
"vk-icon-attentionforbidfill",
|
||||
"vk-icon-roundclosefill",
|
||||
"vk-icon-attentionfavorfill",
|
||||
"vk-icon-roundclose",
|
||||
"vk-icon-attentionfavor",
|
||||
"vk-icon-roundrightfill",
|
||||
"vk-icon-piclight",
|
||||
"vk-icon-roundright",
|
||||
"vk-icon-shoplight",
|
||||
"vk-icon-search",
|
||||
"vk-icon-voicelight",
|
||||
"vk-icon-taxi",
|
||||
"vk-icon-attentionfavorfill-copy",
|
||||
"vk-icon-timefill",
|
||||
"vk-icon-full",
|
||||
"vk-icon-time",
|
||||
"vk-icon-mail",
|
||||
"vk-icon-unfold",
|
||||
"vk-icon-peoplelist",
|
||||
"vk-icon-warnfill",
|
||||
"vk-icon-goodsnewfill",
|
||||
"vk-icon-warn",
|
||||
"vk-icon-goodsnew",
|
||||
"vk-icon-camerafill",
|
||||
"vk-icon-medalfill",
|
||||
"vk-icon-camera",
|
||||
"vk-icon-medal",
|
||||
"vk-icon-commentfill",
|
||||
"vk-icon-newsfill",
|
||||
"vk-icon-comment",
|
||||
"vk-icon-newshotfill",
|
||||
"vk-icon-likefill",
|
||||
"vk-icon-newshot",
|
||||
"vk-icon-like",
|
||||
"vk-icon-news",
|
||||
"vk-icon-notificationfill",
|
||||
"vk-icon-videofill",
|
||||
"vk-icon-notification",
|
||||
"vk-icon-video",
|
||||
"vk-icon-order",
|
||||
"vk-icon-askfill",
|
||||
"vk-icon-samefill",
|
||||
"vk-icon-ask",
|
||||
"vk-icon-same",
|
||||
"vk-icon-exit",
|
||||
"vk-icon-deliver",
|
||||
"vk-icon-skinfill",
|
||||
"vk-icon-evaluate",
|
||||
"vk-icon-skin",
|
||||
"vk-icon-pay",
|
||||
"vk-icon-moneybagfill",
|
||||
"vk-icon-send",
|
||||
"vk-icon-usefullfill",
|
||||
"vk-icon-shop",
|
||||
"vk-icon-usefull",
|
||||
"vk-icon-ticket",
|
||||
"vk-icon-moneybag",
|
||||
"vk-icon-wang",
|
||||
"vk-icon-redpacket_fill",
|
||||
"vk-icon-back",
|
||||
"vk-icon-subscription",
|
||||
"vk-icon-cascades",
|
||||
"vk-icon-home_light",
|
||||
"vk-icon-discover",
|
||||
"vk-icon-my_light",
|
||||
"vk-icon-list",
|
||||
"vk-icon-community_light",
|
||||
"vk-icon-more",
|
||||
"vk-icon-cart_light",
|
||||
"vk-icon-scan",
|
||||
"vk-icon-we_light",
|
||||
"vk-icon-settings",
|
||||
"vk-icon-home_fill_light",
|
||||
"vk-icon-questionfill",
|
||||
"vk-icon-cart_fill_light",
|
||||
"vk-icon-question",
|
||||
"vk-icon-community_fill_light",
|
||||
"vk-icon-shopfill",
|
||||
"vk-icon-my_fill_light",
|
||||
"vk-icon-form",
|
||||
"vk-icon-we_fill_light",
|
||||
"vk-icon-wangfill",
|
||||
"vk-icon-skin_light",
|
||||
"vk-icon-pic",
|
||||
"vk-icon-search_light",
|
||||
"vk-icon-filter",
|
||||
"vk-icon-scan_light",
|
||||
"vk-icon-footprint",
|
||||
"vk-icon-people_list_light",
|
||||
"vk-icon-top",
|
||||
"vk-icon-message_light",
|
||||
"vk-icon-pulldown",
|
||||
"vk-icon-close_light",
|
||||
"vk-icon-pullup",
|
||||
"vk-icon-add_light",
|
||||
"vk-icon-right",
|
||||
"vk-icon-profile_light",
|
||||
"vk-icon-refresh",
|
||||
"vk-icon-service_light",
|
||||
"vk-icon-moreandroid",
|
||||
"vk-icon-friend_add_light",
|
||||
"vk-icon-deletefill",
|
||||
"vk-icon-edit_light",
|
||||
"vk-icon-refund",
|
||||
"vk-icon-camera_light",
|
||||
"vk-icon-cart",
|
||||
"vk-icon-hot_light",
|
||||
"vk-icon-qrcode",
|
||||
"vk-icon-refresh_light",
|
||||
"vk-icon-remind",
|
||||
"vk-icon-back_light",
|
||||
"vk-icon-delete",
|
||||
"vk-icon-share_light",
|
||||
"vk-icon-profile",
|
||||
"vk-icon-comment_light",
|
||||
"vk-icon-home",
|
||||
"vk-icon-appreciate_light",
|
||||
"vk-icon-cartfill",
|
||||
"vk-icon-favor_light",
|
||||
"vk-icon-discoverfill",
|
||||
"vk-icon-appreciate_fill_light",
|
||||
"vk-icon-homefill",
|
||||
"vk-icon-comment_fill_light",
|
||||
"vk-icon-message",
|
||||
"vk-icon-wang_light",
|
||||
"vk-icon-addressbook",
|
||||
"vk-icon-more_android_light",
|
||||
"vk-icon-link",
|
||||
"vk-icon-friend_light",
|
||||
"vk-icon-lock",
|
||||
"vk-icon-more_light",
|
||||
"vk-icon-unlock",
|
||||
"vk-icon-goods_favor_light",
|
||||
"vk-icon-vip",
|
||||
"vk-icon-goods_new_fill_light",
|
||||
"vk-icon-weibo",
|
||||
"vk-icon-goods_new_light",
|
||||
"vk-icon-activity",
|
||||
"vk-icon-goods_light",
|
||||
"vk-icon-big",
|
||||
"vk-icon-medal_fill_light",
|
||||
"vk-icon-friendaddfill",
|
||||
"vk-icon-medal_light",
|
||||
"vk-icon-friendadd",
|
||||
"vk-icon-news_fill_light",
|
||||
"vk-icon-friendfamous",
|
||||
"vk-icon-news_hot_fill_light",
|
||||
"vk-icon-friend",
|
||||
"vk-icon-news_hot_light",
|
||||
"vk-icon-goods",
|
||||
"vk-icon-news_light",
|
||||
"vk-icon-selection",
|
||||
"vk-icon-video_fill_light",
|
||||
"vk-icon-tmall",
|
||||
"vk-icon-message_fill_light",
|
||||
"vk-icon-explore",
|
||||
"vk-icon-form_light",
|
||||
"vk-icon-present",
|
||||
"vk-icon-video_light",
|
||||
"vk-icon-squarecheckfill",
|
||||
"vk-icon-search_list_light",
|
||||
"vk-icon-square",
|
||||
"vk-icon-form_fill_light",
|
||||
"vk-icon-squarecheck",
|
||||
"vk-icon-global_light",
|
||||
"vk-icon-round",
|
||||
"vk-icon-global",
|
||||
"vk-icon-roundaddfill",
|
||||
"vk-icon-favor_fill_light",
|
||||
"vk-icon-roundadd",
|
||||
"vk-icon-delete_light",
|
||||
"vk-icon-add",
|
||||
"vk-icon-back_android",
|
||||
"vk-icon-notificationforbidfill",
|
||||
"vk-icon-back_android_light",
|
||||
"vk-icon-explorefill",
|
||||
"vk-icon-down_light",
|
||||
"vk-icon-fold",
|
||||
"vk-icon-round_close_light",
|
||||
"vk-icon-game",
|
||||
"vk-icon-round_close_fill_light",
|
||||
"vk-icon-redpacket",
|
||||
"vk-icon-expressman",
|
||||
"vk-icon-selectionfill",
|
||||
"vk-icon-punch_light",
|
||||
"vk-icon-similar",
|
||||
"vk-icon-evaluate_fill",
|
||||
"vk-icon-appreciatefill",
|
||||
"vk-icon-furniture",
|
||||
"vk-icon-infofill",
|
||||
"vk-icon-dress",
|
||||
"vk-icon-info",
|
||||
"vk-icon-coffee",
|
||||
"vk-icon-tao",
|
||||
"vk-icon-sports",
|
||||
"vk-icon-mobiletao",
|
||||
"vk-icon-group_light",
|
||||
"vk-icon-forwardfill",
|
||||
"vk-icon-location_light",
|
||||
"vk-icon-forward",
|
||||
"vk-icon-attention_light",
|
||||
"vk-icon-rechargefill",
|
||||
"vk-icon-group_fill_light",
|
||||
"vk-icon-recharge",
|
||||
"vk-icon-group_fill",
|
||||
"vk-icon-vipcard",
|
||||
"vk-icon-play_forward_fill",
|
||||
"vk-icon-voice",
|
||||
"vk-icon-subscription_light",
|
||||
"vk-icon-voicefill",
|
||||
"vk-icon-deliver_fill",
|
||||
"vk-icon-friendfavor",
|
||||
"vk-icon-notice_forbid_fill",
|
||||
"vk-icon-wifi",
|
||||
"vk-icon-qr_code_light",
|
||||
"vk-icon-share",
|
||||
"vk-icon-settings_light",
|
||||
"vk-icon-wefill",
|
||||
"vk-icon-pick",
|
||||
"vk-icon-we",
|
||||
"vk-icon-form_favor_light",
|
||||
"vk-icon-lightauto",
|
||||
"vk-icon-round_comment_light",
|
||||
"vk-icon-lightforbid",
|
||||
"vk-icon-phone_light",
|
||||
"vk-icon-lightfill",
|
||||
"vk-icon-round_down_light",
|
||||
"vk-icon-camerarotate",
|
||||
"vk-icon-friend_settings_light",
|
||||
"vk-icon-light",
|
||||
"vk-icon-change",
|
||||
"vk-icon-barcode",
|
||||
"vk-icon-round_list_light",
|
||||
"vk-icon-flashlightclose",
|
||||
"vk-icon-ticket_fill",
|
||||
"vk-icon-flashlightopen",
|
||||
"vk-icon-round_friend_fill",
|
||||
"vk-icon-searchlist",
|
||||
"vk-icon-round_crown_fill",
|
||||
"vk-icon-service",
|
||||
"vk-icon-round_link_fill",
|
||||
"vk-icon-sort",
|
||||
"vk-icon-round_light_fill",
|
||||
"vk-icon-1212",
|
||||
"vk-icon-round_favor_fill",
|
||||
"vk-icon-down",
|
||||
"vk-icon-round_menu_fill",
|
||||
"vk-icon-mobile",
|
||||
"vk-icon-round_location_fill",
|
||||
"vk-icon-mobilefill",
|
||||
"vk-icon-round_pay_fill",
|
||||
"vk-icon-copy",
|
||||
"vk-icon-round_like_fill",
|
||||
"vk-icon-countdownfill",
|
||||
"vk-icon-round_people_fill",
|
||||
"vk-icon-countdown",
|
||||
"vk-icon-round_pay",
|
||||
"vk-icon-noticefill",
|
||||
"vk-icon-round_rank_fill",
|
||||
"vk-icon-notice",
|
||||
"vk-icon-round_redpacket_fill",
|
||||
"vk-icon-qiang",
|
||||
"vk-icon-round_skin_fill",
|
||||
"vk-icon-upstagefill",
|
||||
"vk-icon-round_record_fill",
|
||||
"vk-icon-upstage",
|
||||
"vk-icon-round_ticket_fill",
|
||||
"vk-icon-babyfill",
|
||||
"vk-icon-round_redpacket",
|
||||
"vk-icon-baby",
|
||||
"vk-icon-round_text_fill",
|
||||
"vk-icon-brandfill",
|
||||
"vk-icon-round_ticket",
|
||||
"vk-icon-brand",
|
||||
"vk-icon-round_transfer_fill",
|
||||
"vk-icon-choicenessfill",
|
||||
"vk-icon-subtitle_block_light",
|
||||
"vk-icon-choiceness",
|
||||
"vk-icon-warn_light",
|
||||
"vk-icon-clothesfill",
|
||||
"vk-icon-round_transfer",
|
||||
"vk-icon-clothes",
|
||||
"vk-icon-vip_code_light",
|
||||
"vk-icon-creativefill",
|
||||
"vk-icon-subtitle_unblock_light",
|
||||
"vk-icon-creative",
|
||||
"vk-icon-round_shop_fill",
|
||||
"vk-icon-female",
|
||||
"vk-icon-oppose_fill_light",
|
||||
"vk-icon-keyboard",
|
||||
"vk-icon-oppose_light",
|
||||
"vk-icon-male",
|
||||
"vk-icon-living",
|
||||
"vk-icon-newfill",
|
||||
"vk-icon-goods_hot_fill",
|
||||
"vk-icon-new",
|
||||
"vk-icon-ticket_money_fill",
|
||||
"vk-icon-pullleft",
|
||||
"vk-icon-arrow_left_fill",
|
||||
"vk-icon-pullright",
|
||||
"vk-icon-arrow_up_fill",
|
||||
"vk-icon-rankfill",
|
||||
"vk-icon-xiaoheiqun",
|
||||
"vk-icon-rank",
|
||||
"vk-icon-auction",
|
||||
"vk-icon-bad",
|
||||
"vk-icon-return",
|
||||
"vk-icon-cameraadd",
|
||||
"vk-icon-mall_light",
|
||||
"vk-icon-focus",
|
||||
"vk-icon-mall_fill_light",
|
||||
"vk-icon-friendfill",
|
||||
"vk-icon-broadcast_fill",
|
||||
"vk-icon-cameraaddfill",
|
||||
"vk-icon-at",
|
||||
"vk-icon-apps",
|
||||
"vk-icon-card_fill",
|
||||
"vk-icon-paintfill",
|
||||
"vk-icon-paint",
|
||||
"vk-icon-picfill",
|
||||
"vk-icon-refresharrow",
|
||||
"vk-icon-markfill",
|
||||
"vk-icon-mark",
|
||||
"vk-icon-presentfill",
|
||||
"vk-icon-repeal",
|
||||
"vk-icon-album",
|
||||
"vk-icon-peoplefill",
|
||||
"vk-icon-people",
|
||||
"vk-icon-servicefill",
|
||||
"vk-icon-repair",
|
||||
"vk-icon-file",
|
||||
"vk-icon-repairfill",
|
||||
"vk-icon-taoxiaopu",
|
||||
"vk-icon-attentionfill",
|
||||
"vk-icon-attention",
|
||||
"vk-icon-commandfill",
|
||||
"vk-icon-command",
|
||||
"vk-icon-communityfill",
|
||||
"vk-icon-community",
|
||||
"vk-icon-read",
|
||||
"vk-icon-suan",
|
||||
"vk-icon-hua",
|
||||
"vk-icon-ju",
|
||||
"vk-icon-tian",
|
||||
"vk-icon-calendar",
|
||||
"vk-icon-cut",
|
||||
"vk-icon-magic",
|
||||
"vk-icon-backwardfill",
|
||||
"vk-icon-playfill",
|
||||
"vk-icon-stop",
|
||||
"vk-icon-tagfill",
|
||||
"vk-icon-tag",
|
||||
"vk-icon-group",
|
||||
"vk-icon-all",
|
||||
"vk-icon-backdelete",
|
||||
"vk-icon-hotfill",
|
||||
"vk-icon-hot",
|
||||
"vk-icon-post",
|
||||
"vk-icon-radiobox",
|
||||
"vk-icon-rounddown",
|
||||
"vk-icon-upload",
|
||||
"vk-icon-writefill",
|
||||
"vk-icon-write",
|
||||
"vk-icon-radioboxfill",
|
||||
"vk-icon-punch",
|
||||
"vk-icon-shake",
|
||||
"vk-icon-add1",
|
||||
"vk-icon-move",
|
||||
"vk-icon-safe",
|
||||
"vk-icon-qi",
|
||||
"vk-icon-ye",
|
||||
"vk-icon-cangku",
|
||||
"vk-icon-cangku1",
|
||||
"vk-icon-percentage",
|
||||
"vk-icon-select",
|
||||
"vk-icon-cascader",
|
||||
"vk-icon-radio1",
|
||||
"vk-icon-radio2",
|
||||
"vk-icon-checkbox1",
|
||||
"vk-icon-checkbox2",
|
||||
"vk-icon-checkbox3",
|
||||
"vk-icon-discount",
|
||||
"vk-icon-number",
|
||||
"vk-icon-color",
|
||||
"vk-icon-json",
|
||||
"vk-icon-text1",
|
||||
"vk-icon-textarea",
|
||||
"vk-icon-quyuguanli",
|
||||
"vk-icon-dengji",
|
||||
"vk-icon-jiagoufenxiao",
|
||||
"vk-icon-gudongfenhong",
|
||||
"vk-icon-tixianguanli",
|
||||
"vk-icon-miaosha",
|
||||
"vk-icon-youhuiquan",
|
||||
"vk-icon-jifen1",
|
||||
"vk-icon-shouqicaidan",
|
||||
"vk-icon-zhankaicaidan",
|
||||
"vk-icon-weixin",
|
||||
"vk-icon-weixin1",
|
||||
"vk-icon-zhifubaozhifu",
|
||||
"vk-icon-zhifubaozhifu1",
|
||||
"vk-icon-zhifubaozhifu2",
|
||||
"vk-icon-anzhuo",
|
||||
"vk-icon-iOS",
|
||||
"vk-icon-QQ",
|
||||
"vk-icon-APPku",
|
||||
"vk-icon-weixingongzhonghao",
|
||||
"vk-icon-weixinxiaochengxu",
|
||||
"vk-icon-heading-h5",
|
||||
"vk-icon-shengji3-xianxing"
|
||||
];
|
||||
@@ -0,0 +1,100 @@
|
||||
<!-- 与vk-icons区别是没有left和top窗口 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="VK框架图标"
|
||||
subTitle="点击图标即可复制图标代码，如需其他图标，欢迎提交需求。Q群：22466457"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/vk-icons.js';
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
};
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<vk-data-page-header
|
||||
title="VK框架图标"
|
||||
subTitle="点击图标即可复制图标代码，如需其他图标，欢迎提交需求。Q群：22466457"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body icons">
|
||||
<view v-for="(icon,index) in icons" :key="icon" class="icon-item pointer">
|
||||
<vk-data-icon :name="icon" size="30" @click="setClipboardData('tag',icon)"></vk-data-icon>
|
||||
<text @click="setClipboardData('class',icon)" class="icon-text">{{icon}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './js/vk-icons.js';
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
setClipboardData(type, icon) {
|
||||
let data = icon;
|
||||
if (type === 'tag') {
|
||||
data = `<vk-data-icon name="${icon}" size="30"></vk-data-icon>`;
|
||||
};
|
||||
vk.pubfn.setClipboardData({
|
||||
data,
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '复制 ' + data + ' 成功！'
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
uni.showModal({
|
||||
content: '复制 ' + data + ' 失败！',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
width: 16.6%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.icon-item:hover,
|
||||
.icon-item:hover .icon-text {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #99a9bf;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.icon-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="address 省市区选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
同时支持下拉选择 和 输入搜索
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address1"
|
||||
placeholder="请选择省市区"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address2"
|
||||
placeholder="请选择省市"
|
||||
:level="2"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-address
|
||||
v-model="form1.address3"
|
||||
placeholder="请选择省"
|
||||
:level="1"
|
||||
></vk-data-input-address>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input JSON"
|
||||
subTitle="JSON编辑器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="mt15">
|
||||
<vk-data-input-json
|
||||
v-model="form1.value1"
|
||||
mode="code"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-json>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="money 金额"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
金额 与 数字不一样的地方是 此处金额单位是分<br/>
|
||||
输入框显示的是1，但值其实是100
|
||||
</view>
|
||||
<view class="mt15">
|
||||
金额输入框：
|
||||
<vk-data-input-money
|
||||
v-model="form1.value1"
|
||||
placeholder="请输入金额"
|
||||
width="300px"
|
||||
></vk-data-input-money>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
表单绑定值：
|
||||
<vk-data-input-number
|
||||
class="mt15"
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入金额"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value1:100
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="number-box 步进器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
整数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
2位小数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
v-model="form1.value2"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mt15 tips">
|
||||
只能输入1-10内的数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
ref="input-number-3"
|
||||
v-model="form1.value3"
|
||||
:precision="0"
|
||||
:max="10"
|
||||
:min="1"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
隐藏按钮
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number-box
|
||||
ref="input-number-3"
|
||||
v-model="form1.value4"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
width="200px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number-box>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<el-button @click="focus">使上方输入框获得焦点</el-button>
|
||||
<el-button @click="select">选中上方输入框中的文字</el-button>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
focus(){
|
||||
that.$refs["input-number-3"].focus();
|
||||
},
|
||||
blur(){
|
||||
that.$refs["input-number-3"].blur();
|
||||
},
|
||||
select(){
|
||||
that.$refs["input-number-3"].select();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="number 数字"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
正整数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
v-model="form1.value1"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
2位小数
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
v-model="form1.value2"
|
||||
:precision="2"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mt15 tips">
|
||||
最大值100
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-number
|
||||
ref="input-number-3"
|
||||
v-model="form1.value3"
|
||||
:precision="0"
|
||||
width="300px"
|
||||
placeholder="请输入数字"
|
||||
:max="100"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<el-button @click="focus">使上方输入框获得焦点</el-button>
|
||||
<el-button @click="blur">使上方输入框失去焦点</el-button>
|
||||
<el-button @click="select">选中上方输入框中的文字</el-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
focus(){
|
||||
that.$refs["input-number-3"].focus();
|
||||
},
|
||||
blur(){
|
||||
that.$refs["input-number-3"].blur();
|
||||
},
|
||||
select(){
|
||||
that.$refs["input-number-3"].select();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="percentage 百分比"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
百分比 与 数字不一样的地方是<br/>
|
||||
输入框显示的是1，但值其实是0.01<br/>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
百分比输入框：
|
||||
<vk-data-input-percentage
|
||||
v-model="form1.value1"
|
||||
placeholder="请输入百分比"
|
||||
:precision="2"
|
||||
:max="100"
|
||||
width="300px"
|
||||
></vk-data-input-percentage>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
表单绑定的值：
|
||||
<vk-data-input-number
|
||||
v-model="form1.value1"
|
||||
:precision="4"
|
||||
width="300px"
|
||||
placeholder="请输入金额"
|
||||
></vk-data-input-number>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value1:0.01
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="province 省份选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
同时支持下拉选择 和 输入搜索
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-province
|
||||
v-model="form1.value"
|
||||
></vk-data-input-province>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1.value">
|
||||
<pre>
|
||||
{{ form1.value }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value:""
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="remote-select 远程搜索选择器"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
主要用于选择 user_id 等外键字段
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input-remote-select
|
||||
v-model="form1.user_id"
|
||||
placeholder="请输入用户名"
|
||||
action="admin/select/kh/user"
|
||||
width="300px"
|
||||
></vk-data-input-remote-select>
|
||||
</view>
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
user_id:"",
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="select 下拉选择"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="mt15">
|
||||
<vk-data-input-select
|
||||
class="width-box"
|
||||
v-model="form1.value1"
|
||||
:localdata='[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]'
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
></vk-data-input-select>
|
||||
</view>
|
||||
|
||||
<view class="mt15">
|
||||
<vk-data-input-select
|
||||
class="width-box"
|
||||
v-model="form1.value2"
|
||||
:group="true"
|
||||
:localdata='[
|
||||
{
|
||||
label: "分组1",
|
||||
children:[
|
||||
{ value:1, label:"选项1" },
|
||||
{ value:2, label:"选项2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "分组2",
|
||||
children:[
|
||||
{ value:3, label:"选项3" },
|
||||
{ value:4, label:"选项4" }
|
||||
]
|
||||
}
|
||||
]'
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
></vk-data-input-select>
|
||||
</view>
|
||||
|
||||
<view class="mt15 tips">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Input 表单输入"
|
||||
subTitle="聚合输入框"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<view class="tips">
|
||||
根据type自动渲染的不同的输入框
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<el-radio-group v-model="type">
|
||||
<el-radio label="number">数字输入框</el-radio>
|
||||
<el-radio label="money">金额输入框</el-radio>
|
||||
<el-radio label="percentage">百分比输入框</el-radio>
|
||||
<el-radio label="discount">折扣输入框</el-radio>
|
||||
<el-radio label="number-box">步进器</el-radio>
|
||||
<!-- <el-radio label="json">JSON输入框</el-radio> -->
|
||||
<el-radio label="textarea">多行文本输入框</el-radio>
|
||||
</el-radio-group>
|
||||
</view>
|
||||
<view class="mt15">
|
||||
<vk-data-input :type="type" v-model="form1.value" :precision="0" width="300px" placeholder="请输入"></vk-data-input>
|
||||
</view>
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<pre>
|
||||
{{form1}}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
value:""
|
||||
},
|
||||
type:"number"
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!-- 基础用法 -->
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="表格基础用法"
|
||||
subTitle="高性能表格 - 万行数据如丝滑般流畅"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table ref="table1" :data="table1.data" :columns="table1.columns" :row-no="true"></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 字段显示规则
|
||||
table1: {
|
||||
// 表格数据
|
||||
data: [],
|
||||
// 表格字段显示规则
|
||||
columns: [
|
||||
{ key: "_id", title: "用户ID", type: "text", width: 200 },
|
||||
{ key: "username", title: "用户名", type: "text", width: 200 },
|
||||
{ key: "nickname", title: "用户昵称", type: "text", width: 200 },
|
||||
{ key: "mobile", title: "手机号", type: "text", width: 200 },
|
||||
{ key: "comment", title: "备注", type: "text", minWidth: 200 }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
let list = [];
|
||||
for (let i = 1; i <= 10000; i++) {
|
||||
let s = i;
|
||||
if (i < 10) {
|
||||
s = "0" + i;
|
||||
}
|
||||
list.push({
|
||||
_id: i + "",
|
||||
username: `用户名${s}`,
|
||||
nickname: `用户昵称${s}`,
|
||||
mobile: `尾号${s}`,
|
||||
comment: `用户${s}的备注`
|
||||
});
|
||||
}
|
||||
that.table1.data = list;
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0"
|
||||
>
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button type="success" size="small" icon="el-icon-edit-outline" style="margin-left: 20rpx;" @click="exportExcel" > 订单导出xls </el-button>
|
||||
<el-button type="success" size="small" icon="el-icon-edit-outline" style="margin-left: 20rpx;" @click="exportExcelAll" > 导出全部 </el-button>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete','more']"
|
||||
:right-btns-more="table1.rightBtnsMore"
|
||||
:selection="true"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="500px"
|
||||
mode="form"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
label-width="80px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"template/db_api/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns:[
|
||||
{ key:"_id", title:"id", type:"text", width:220 },
|
||||
{ key:"money", title:"金额", type:"money", width:80, sortable:"custom" },
|
||||
{ key:"remark", title:"备注", type:"text", width:80 },
|
||||
{ key:"_add_time", title:"添加时间", type:"time", width:160, sortable:"custom", valueFormat:"yyyy-MM-dd hh:mm:ss" },
|
||||
{ key:"_add_time", title:"距离现在", type:"dateDiff", width:120 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
rightBtnsMore:[
|
||||
{
|
||||
title:'按钮1',
|
||||
onClick:function(item){
|
||||
vk.toast(`${item._id}-按钮1`);
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'按钮2',
|
||||
onClick:function(item){
|
||||
vk.toast(`${item._id}-按钮2`);
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"money_1", type:"money", title:"金额范围", width:160, placeholder:"请输入最小金额",
|
||||
mode:">=", fieldName:"money"
|
||||
},
|
||||
{ key:"money_2", type:"money", title:"-", width:160, placeholder:"请输入最大金额",
|
||||
mode:"<=" , fieldName:"money"
|
||||
},
|
||||
{ key:"remark", title:"备注", type:"text", width:160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
|
||||
]
|
||||
},
|
||||
form1:{
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{
|
||||
key: "user_id", title: "选择用户", type: "table-select", placeholder:"选择",
|
||||
action:"admin/system/user/sys/getList",
|
||||
columns:[
|
||||
{ key:"nickname", title:"用户昵称", type:"text", nameKey:true },
|
||||
{ key:"_id", title:"用户标识", type:"text", idKey:true },
|
||||
{ key:"mobile", title:"手机号", type:"text", defaultValue:"无" },
|
||||
]
|
||||
},
|
||||
{ key:"money", title:"金额", type:"money", placeholder:"请输入金额" },
|
||||
{ key:"remark", title:"备注", type:"text", placeholder:"请输入备注" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
user_id:[
|
||||
{ required:true, message: "请选择用户", trigger:"change" }
|
||||
],
|
||||
money:[
|
||||
{ required:true, message:"金额不能为空", trigger:"blur" },
|
||||
{ type:"number", message:"金额必须是数字", trigger:"blur" },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:"",
|
||||
// 是否显示表单的弹窗
|
||||
show:false
|
||||
}
|
||||
},
|
||||
formDatas:{}
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 页面返回
|
||||
pageBack(path){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length>1 && pages[0].route !== that.$page.route) {
|
||||
vk.navigateBack();
|
||||
} else if(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(){
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'template/db_api/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'template/db_api/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action: "template/db_api/sys/delete",
|
||||
data:{
|
||||
_id: item._id
|
||||
},
|
||||
refresh: true
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index){
|
||||
switch(index){
|
||||
case 1: vk.toast("批量操作按钮1"); break;
|
||||
case 2: vk.toast("批量操作按钮2"); break;
|
||||
default : break;
|
||||
}
|
||||
},
|
||||
// 导出xls表格文件（表格当前页数据）
|
||||
exportExcel(){
|
||||
that.$refs.table1.exportExcel();
|
||||
},
|
||||
// 导出xls表格文件（全部数据）
|
||||
exportExcelAll(){
|
||||
that.$refs.table1.exportExcel({
|
||||
fileName: "表格全部数据",
|
||||
title: "正在导出数据...",
|
||||
pageIndex: 1,
|
||||
pageSize: -1, // 此值为-1，代表导出所有数据
|
||||
});
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 自定义按钮区域开始 -->
|
||||
<view>
|
||||
<el-row>
|
||||
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
|
||||
<!-- 批量操作 -->
|
||||
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn">
|
||||
<el-button type="danger" size="small" style="margin-left: 20rpx;"
|
||||
:disabled="table1.multipleSelection.length === 0"
|
||||
>
|
||||
批量操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="1">批量操作1</el-dropdown-item>
|
||||
<el-dropdown-item :command="2">批量操作2</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button type="success" size="small" icon="el-icon-edit-outline"
|
||||
style="margin-left: 20rpx;"
|
||||
@click="exportExcel"
|
||||
>
|
||||
订单导出xls
|
||||
</el-button>
|
||||
</el-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete','more']"
|
||||
:right-btns-more="table1.rightBtnsMore"
|
||||
:selection="true"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
:expand="true"
|
||||
@update="updateBtn"
|
||||
@delete="deleteBtn"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 添加或编辑的弹窗开始 -->
|
||||
<vk-data-dialog
|
||||
v-model="form1.props.show"
|
||||
:title="form1.props.title"
|
||||
width="500px"
|
||||
mode="form"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<vk-data-form
|
||||
v-model="form1.data"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:form-type="form1.props.formType"
|
||||
:columns='form1.props.columns'
|
||||
label-width="80px"
|
||||
@success="form1.props.show = false;refresh();"
|
||||
></vk-data-form>
|
||||
</vk-data-dialog>
|
||||
<!-- 添加或编辑的弹窗结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"template/db_api/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns:[
|
||||
{ key:"_id", title:"id", type:"text", width:220, show:["expand","detail"] },
|
||||
{ key:"money", title:"金额", type:"money", width:80, sortable:"custom" },
|
||||
{ key:"remark", title:"备注", type:"text", width:80, show:["expand","detail"] },
|
||||
{ key:"_add_time", title:"添加时间", type:"time", width:160, sortable:"custom", valueFormat:"yyyy-MM-dd hh:mm:ss" },
|
||||
{ key:"_add_time", title:"距离现在", type:"dateDiff", width:120 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:"",
|
||||
rightBtnsMore:[
|
||||
{
|
||||
title:'按钮1',
|
||||
onClick:function(item){
|
||||
vk.toast(`${item._id}-按钮1`);
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'按钮2',
|
||||
onClick:function(item){
|
||||
vk.toast(`${item._id}-按钮2`);
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"money_1", type:"money", title:"金额范围", width:160, placeholder:"请输入最小金额",
|
||||
mode:">=", fieldName:"money"
|
||||
},
|
||||
{ key:"money_2", type:"money", title:"-", width:160, placeholder:"请输入最大金额",
|
||||
mode:"<=" , fieldName:"money"
|
||||
},
|
||||
{ key:"remark", title:"备注", type:"text", width:160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
|
||||
]
|
||||
},
|
||||
form1:{
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{
|
||||
key: "user_id", title: "选择用户", type: "table-select", placeholder:"选择",
|
||||
action:"admin/system/user/sys/getList",
|
||||
columns:[
|
||||
{ key:"nickname", title:"用户昵称", type:"text", nameKey:true },
|
||||
{ key:"_id", title:"用户标识", type:"text", idKey:true },
|
||||
{ key:"mobile", title:"手机号", type:"text", defaultValue:"无" },
|
||||
]
|
||||
},
|
||||
{ key:"money", title:"金额", type:"money", placeholder:"请输入金额" },
|
||||
{ key:"remark", title:"备注", type:"text", placeholder:"请输入备注" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
user_id:[
|
||||
{ required:true, message: "请选择用户", trigger:"change" }
|
||||
],
|
||||
money:[
|
||||
{ required:true, message:"金额不能为空", trigger:"blur" },
|
||||
{ type:"number", message:"金额必须是数字", trigger:"blur" },
|
||||
],
|
||||
},
|
||||
// add 代表添加 update 代表修改
|
||||
formType:"",
|
||||
// 是否显示表单的弹窗
|
||||
show:false
|
||||
}
|
||||
},
|
||||
formDatas:{}
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
// 页面返回
|
||||
pageBack(path){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length>1 && pages[0].route !== that.$page.route) {
|
||||
vk.navigateBack();
|
||||
} else if(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(){
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
// 显示添加页面
|
||||
addBtn(){
|
||||
that.resetForm();
|
||||
that.form1.props.action = 'template/db_api/sys/add';
|
||||
that.form1.props.formType = 'add';
|
||||
that.form1.props.title = '添加';
|
||||
that.form1.props.show = true;
|
||||
},
|
||||
// 显示修改页面
|
||||
updateBtn({ item }){
|
||||
that.form1.props.action = 'template/db_api/sys/update';
|
||||
that.form1.props.formType = 'update';
|
||||
that.form1.props.title = '编辑';
|
||||
that.form1.props.show = true;
|
||||
that.form1.data = item;
|
||||
},
|
||||
// 删除按钮
|
||||
deleteBtn({ item, deleteFn }){
|
||||
deleteFn({
|
||||
action: "template/db_api/sys/delete",
|
||||
data:{
|
||||
_id: item._id
|
||||
},
|
||||
refresh: true
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index){
|
||||
switch(index){
|
||||
case 1: vk.toast("批量操作按钮1"); break;
|
||||
case 2: vk.toast("批量操作按钮2"); break;
|
||||
default : break;
|
||||
}
|
||||
},
|
||||
// 导出xls表格文件
|
||||
exportExcel(){
|
||||
that.$refs.table1.exportExcel();
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 表格搜索组件开始 -->
|
||||
<vk-data-table-query
|
||||
v-model="queryForm1.formData"
|
||||
:columns="queryForm1.columns"
|
||||
:main-columns="['user_id','_add_time']"
|
||||
@search="search"
|
||||
></vk-data-table-query>
|
||||
<!-- 表格搜索组件结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto']"
|
||||
:selection="true"
|
||||
:row-no="true"
|
||||
:pagination="true"
|
||||
@current-change="currentChange"
|
||||
@selection-change="selectionChange"
|
||||
></vk-data-table>
|
||||
<!-- 表格组件结束 -->
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
var originalForms = {}; // 表单初始化数据
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 页面是否请求中或加载中
|
||||
loading:false,
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表格相关开始 -----------------------------------------------------------
|
||||
table1:{
|
||||
// 表格数据请求地址
|
||||
action:"template/db_api/sys/getList",
|
||||
// 表格字段显示规则
|
||||
columns:[
|
||||
{ key:"_id", title:"id", type:"text", width:220 },
|
||||
{ key:"user_id", title:"用户ID", type:"text", width:80, sortable:"custom" },
|
||||
{ key:"money", title:"金额", type:"money", width:80, sortable:"custom" },
|
||||
{ key:"remark", title:"备注", type:"text", width:80 },
|
||||
{ key:"_add_time", title:"添加时间", type:"time", width:160, sortable:"custom" },
|
||||
{ key:"_add_time", title:"距离现在", type:"dateDiff", width:120 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{
|
||||
key:"user_id", title:"选择用户", type:"remote-select", placeholder:"请输入用户账号/昵称",
|
||||
action:"admin/select/kh/user",
|
||||
},
|
||||
{ key:"money_1", type:"money", title:"最小金额", width:160, placeholder:"请输入最小金额",
|
||||
mode:">=", fieldName:"money"
|
||||
},
|
||||
{ key:"money_2", type:"money", title:"最大金额", width:160, placeholder:"请输入最大金额",
|
||||
mode:"<=" , fieldName:"money"
|
||||
},
|
||||
{ key:"remark", title:"备注", type:"text", width:160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
|
||||
]
|
||||
},
|
||||
// 表单相关结束 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
originalForms["form1"] = vk.pubfn.copyObject(that.form1);
|
||||
},
|
||||
// 表单重置
|
||||
resetForm(){
|
||||
vk.pubfn.resetForm(originalForms, that);
|
||||
},
|
||||
// 搜索
|
||||
search(){
|
||||
that.$refs.table1.search();
|
||||
},
|
||||
// 刷新
|
||||
refresh(){
|
||||
that.$refs.table1.refresh();
|
||||
},
|
||||
// 获取当前选中的行的数据
|
||||
getCurrentRow(){
|
||||
return that.$refs.table1.getCurrentRow();
|
||||
},
|
||||
// 监听 - 行的选中高亮事件
|
||||
currentChange(val){
|
||||
that.table1.selectItem = val;
|
||||
},
|
||||
// 当选择项发生变化时会触发该事件
|
||||
selectionChange(list) {
|
||||
that.table1.multipleSelection = list;
|
||||
},
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Upload 上传"
|
||||
subTitle="基础用法"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body">
|
||||
<vk-data-upload
|
||||
v-model="form1.images"
|
||||
:limit="6"
|
||||
></vk-data-upload>
|
||||
</view>
|
||||
|
||||
<el-button @click="a">清空值</el-button>
|
||||
<el-button @click="b">设置值</el-button>
|
||||
|
||||
<view class="tips mt15">
|
||||
<view class="mt15 json-view" v-if="form1">
|
||||
<view style="font-size: 14px;">表单数据</view>
|
||||
<pre>
|
||||
{{ form1 }}
|
||||
</pre>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
images : []
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
},
|
||||
a(){
|
||||
that.form1.images = [];
|
||||
},
|
||||
b(){
|
||||
that.form1.images = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608288366373&di=c8e0bb26e8a98a5dc1c869037c5f2286&imgtype=0&src=http%3A%2F%2Fimg3.iqilu.com%2Fdata%2Fattachment%2Fforum%2F201308%2F22%2F092042sk2dhz7sdzkftyc1.jpg'];
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 页面内容开始 -->
|
||||
<vk-data-page-header
|
||||
title="Upload 上传"
|
||||
subTitle="拖拽上传"
|
||||
></vk-data-page-header>
|
||||
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
|
||||
<vk-data-upload
|
||||
v-model="form1.images"
|
||||
:drag="true"
|
||||
:limit="5"
|
||||
list-type="picture"
|
||||
>
|
||||
</vk-data-upload>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data:{
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady(){
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options){
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user