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>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<el-row>
|
||||
<div style="padding: 0rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
综合详情功能演示
|
||||
</div>
|
||||
<el-col :span="5">
|
||||
<div style="flex: 1;">
|
||||
<image style="width: 100%;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fclubimg.club.vmall.com%2Fdata%2Fattachment%2Fforum%2F202007%2F17%2F232123momgketgdekbqtvl.jpg&refer=http%3A%2F%2Fclubimg.club.vmall.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611383212&t=3d0e493b7e997749772227dcc4fa3ae7"></image>
|
||||
</div>
|
||||
</el-col >
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">姓名：</text>
|
||||
<text style="color: #978e94">蒙奇D-呵呵</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">年龄：</text>
|
||||
<text style="color: #978e94">？？？？</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">性别：</text>
|
||||
<text style="color: #978e94">男</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">星座：</text>
|
||||
<text style="color: #978e94">天秤座</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">爱好：</text>
|
||||
<text style="color: #978e94">女</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">民族：</text>
|
||||
<text style="color: #978e94">神族</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙术：</text>
|
||||
<text style="color: #978e94">凌波微步</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙骨：</text>
|
||||
<text style="color: #978e94">百万年</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">查克拉：</text>
|
||||
<text style="color: #978e94">？？？？？</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">斗气等级：</text>
|
||||
<text style="color: #978e94">？？？？？</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">果实能力：</text>
|
||||
<text style="color: #978e94">震震果实</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">所属派别：</text>
|
||||
<text style="color: #978e94">黑手党</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
<el-col :span="24" style="border-bottom: 1px solid #ebeef5;">
|
||||
</el-col>
|
||||
|
||||
<!-- 其他信息 -->
|
||||
<el-col :span="24">
|
||||
<div style="padding: 20rpx;" class="grid-content bg-purple-dark">其它信息</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">住址：</text>
|
||||
<text style="color: #978e94">天界</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">家乡：</text>
|
||||
<text style="color: #978e94">神界</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">城市：</text>
|
||||
<text style="color: #978e94">天宫</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙龄：</text>
|
||||
<text style="color: #978e94">6000年</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple-dark" style="padding: 20rpx;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">仙术：</text>
|
||||
<text style="color: #978e94">炎咒</text>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<text style="color: #3d475c;">公司：</text>
|
||||
<text style="color: #978e94">魔界</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="border-bottom: 1px solid #ebeef5;">
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
|
||||
<div style="padding: 20rpx;" class="grid-content bg-purple-dark">表格信息</div>
|
||||
|
||||
<el-table :data="data.tableData" style="width: 100%" border row-class-name="tableRowClassName">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
]
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
tableRowClassName({
|
||||
row,
|
||||
rowIndex
|
||||
}) {
|
||||
if (rowIndex === 1) {
|
||||
return 'warning-row';
|
||||
} else if (rowIndex === 3) {
|
||||
return 'success-row';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
div {
|
||||
padding: 12rpx 0rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.el-table .warning-row {
|
||||
background: oldlace !important;
|
||||
}
|
||||
|
||||
.el-table .success-row {
|
||||
background: #f0f9eb !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
高级表单功能演示
|
||||
</div>
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<!-- 出差信息功能展示 -->
|
||||
<div style="padding: 40rpx;">
|
||||
<div style="padding: 20rpx; font-weight: bold;">出差信息</div>
|
||||
<el-form label-position="top" label-width="100px" size="small" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
<el-row>
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="出差事由" prop="reason" required>
|
||||
<el-input v-model="data.ruleForm.reason"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="合同编号" prop="number" required>
|
||||
<el-input v-model="data.ruleForm.number"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<!-- 选择对应的出差时间 -->
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="出差日期" prop="travelDate" required>
|
||||
<el-date-picker style="width: 800rpx;" v-model="data.ruleForm.travelDate" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<!-- 出差时间对应的应该是和审批人一起的 -->
|
||||
<el-form-item label="审批人" prop="Urgency" required>
|
||||
<el-select v-model="data.ruleForm.Urgency" placeholder="选择审批人" style="width: 800rpx;">
|
||||
<el-option label="呵呵呵哒" value="shanghai" style="height: 100rpx;">
|
||||
<image style="width: 30%;height: 100%;border-radius: 300rpx;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1959779733,683430928&fm=26&gp=0.jpg"></image>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px;line-height:100rpx;">审批人一号</span>
|
||||
</el-option>
|
||||
|
||||
<el-option label="呵呵呵哒" value="beijing" style="height: 100rpx;">
|
||||
<image style="width: 30%;height: 100%;border-radius: 300rpx;" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2334974629,3626811871&fm=26&gp=0.jpg"></image>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px;line-height:100rpx;">审批人二号</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="7" style="margin: 0rpx 20rpx;">
|
||||
<!-- 出差时间对应的应该是和审批人一起的 -->
|
||||
<el-form-item label="紧急程度" prop="Urgency">
|
||||
<el-radio v-model="data.radio" label="1">
|
||||
|
||||
<el-tag type="danger">超级紧急</el-tag>
|
||||
</el-radio>
|
||||
|
||||
<el-radio v-model="data.radio" label="2">
|
||||
<el-tag type="warning">一般紧急</el-tag>
|
||||
</el-radio>
|
||||
|
||||
<el-radio v-model="data.radio" label="3">
|
||||
<el-tag type="success">丝毫不慌</el-tag>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 行程信息功能展示 -->
|
||||
<div style="padding: 40rpx;">
|
||||
<div style="padding: 20rpx; font-weight: bold;">行程信息</div>
|
||||
|
||||
<el-form label-position="top" label-width="100px" size="small" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="block" style="margin: 0rpx 20rpx;">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出发时间">
|
||||
<el-date-picker v-model="data.gotime" type="date" placeholder="选择出发日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label="返程时间">
|
||||
<el-date-picker style="" v-model="data.backtime" type="date" placeholder="选择返程日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<!-- 选择对应的出差时间 -->
|
||||
<el-col :span="8" style="margin: 0rpx 20rpx;">
|
||||
<el-form-item label="交通类型">
|
||||
<el-select v-model="data.ruleForm.traffic" placeholder="选择交通类型" style="width: 800rpx;">
|
||||
|
||||
<el-option label="飞机" value="shanghai" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
<el-option label="坦克" value="beijing" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格的页面数据内容从这个地方开始 -->
|
||||
<div>
|
||||
<div style="padding: 20rpx; font-weight: bold;">同行人员</div>
|
||||
<div style="float: right;">
|
||||
<el-tooltip content="添加" placement="top">
|
||||
<el-button style="margin-right: 80rpx;" type="success" size="small" icon="el-icon-circle-plus-outline" @click="addData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-table :data="data.tableData" style="width: 100%">
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.date" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.date }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="员工编号">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.name" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="所属部门">
|
||||
<template slot-scope="{row}">
|
||||
<el-form v-if="row.edit">
|
||||
<el-form-item>
|
||||
<el-input v-model="row.address" size="small" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-else>{{ row.address }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="操作" width="120" :resizable="false">
|
||||
<template slot-scope="{row}">
|
||||
<el-tooltip v-if="row.edit" content="保存" placement="top">
|
||||
<el-button type="success" size="small" icon="el-icon-check" @click="checkEditSaveOk(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-else-if="!row.edit" content="编辑" placement="top">
|
||||
<el-button type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button type="danger" size="small" icon="el-icon-error" @click="deletedata(row)" />
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 点击添加之后对应的对话框 -->
|
||||
|
||||
<el-dialog title="提示" :visible.sync="data.dialogVisible" width="30%">
|
||||
<el-form label-position="left" size="small">
|
||||
|
||||
<el-form-item label="姓名" prop="name">
|
||||
|
||||
<el-input v-model="data.add.one" style="width: 600rpx;"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="序号" prop="name">
|
||||
<el-input v-model="data.add.two" style="width: 600rpx;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="序号" prop="name">
|
||||
<el-select v-model="data.add.three" placeholder="选择对应部门" style="width: 800rpx;">
|
||||
|
||||
<el-option label="战忽部" value="zhanhu" style="height: 100rpx;">
|
||||
</el-option>
|
||||
<el-option label="策划部" value="cehua" style="height: 100rpx;">
|
||||
</el-option>
|
||||
<el-option label="财政部" value="caizheng" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
<el-option label="人事部" value="renshi" style="height: 100rpx;">
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-button @click="add()" type="success" size="medium" style="width:200rpx;">确定</el-button>
|
||||
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 去的时间和回来的时间
|
||||
gotime: '',
|
||||
backtime: '',
|
||||
// 选择城市等数据源
|
||||
props: {
|
||||
multiple: true
|
||||
},
|
||||
add: {
|
||||
one: '',
|
||||
two: '',
|
||||
three: '',
|
||||
},
|
||||
// 控制对话框的显示与否
|
||||
dialogVisible: false,
|
||||
// 多级联动数据源
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
}, ],
|
||||
// 多级联动的数据从这个地方开始
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
reason: '',
|
||||
number: '',
|
||||
travelDate: '',
|
||||
Urgency: '',
|
||||
city: ''
|
||||
// name: '',
|
||||
// region: '',
|
||||
// date1: '',
|
||||
// date2: '',
|
||||
// delivery: false,
|
||||
// type: [],
|
||||
// resource: '',
|
||||
// desc: ''
|
||||
},
|
||||
tableData: [{
|
||||
date: '特朗普',
|
||||
name: '001',
|
||||
address: '战忽部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '奥巴马',
|
||||
name: '002',
|
||||
address: '策划部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '拜登',
|
||||
name: '003',
|
||||
address: '财政部',
|
||||
edit: false
|
||||
}, {
|
||||
date: '罗斯福',
|
||||
name: '004',
|
||||
address: '人事部',
|
||||
edit: false
|
||||
}],
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在 3 到 5 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
reason: [{
|
||||
required: false,
|
||||
message: '请输入原因',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
city: [{
|
||||
required: false,
|
||||
message: '请输入出发城市',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
gotime: [{
|
||||
required: false,
|
||||
message: '请输入出发时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
backtime: [{
|
||||
required: false,
|
||||
message: '请输入返回时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
number: [{
|
||||
required: true,
|
||||
message: '请输入合同编号',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
travelDate: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择出差日期',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
Urgency: [{
|
||||
required: true,
|
||||
message: '请选择紧急程度',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
date2: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择时间',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
people: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个审批人',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
resource: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
desc: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
checkEditSaveOk(row) {
|
||||
row.edit = !row.edit
|
||||
console.log(row)
|
||||
},
|
||||
deletedata(row) {
|
||||
let content = this.data.tableData
|
||||
content.map((item, index) => {
|
||||
item === row ? content.splice(index, 1) : console.log('不相等')
|
||||
})
|
||||
console.log(this.data.tableData)
|
||||
this.$message({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
addData() {
|
||||
// 这个只控制对应的数据是否展示
|
||||
console.log('添加数据')
|
||||
this.data.dialogVisible = true
|
||||
},
|
||||
// 真实添加数据的逻辑
|
||||
add() {
|
||||
this.data.tableData.push({
|
||||
date: this.data.add.one,
|
||||
name: this.data.add.two,
|
||||
address: this.data.add.three,
|
||||
edit: false
|
||||
}, )
|
||||
this.$message({
|
||||
message: '添加成功!',
|
||||
type: 'success'
|
||||
});
|
||||
// 对应的添加的逻辑也已经完成
|
||||
this.data.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
普通表单功能演示
|
||||
</div>
|
||||
|
||||
<div style="padding-left: 300rpx;">
|
||||
|
||||
<el-radio-group v-model="data.labelPosition" size="small">
|
||||
<el-radio-button label="left">左对齐</el-radio-button>
|
||||
<el-radio-button label="right">右对齐</el-radio-button>
|
||||
<el-radio-button label="top">顶部对齐</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div style="margin: 20px;"></div>
|
||||
|
||||
<el-form :label-position="data.labelPosition" label-width="100px" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<el-form-item label="普通表单框" prop="name" required>
|
||||
|
||||
<el-col :span="10">
|
||||
<el-input v-model="data.ruleForm.name"></el-input>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Select选择" prop="region" required>
|
||||
<el-col :span="24">
|
||||
<el-select v-model="data.ruleForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="选项一" value="shanghai"></el-option>
|
||||
<el-option label="选项二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="时间选择器" required>
|
||||
<el-col :span="4">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="data.ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" style="text-align: center;" :span="1">
|
||||
<text style="color: #ccc;">—</text>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker placeholder="选择时间" v-model="data.ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 多级联动页面区域 -->
|
||||
<el-form-item label="多级联动" required>
|
||||
<div class="block">
|
||||
<el-cascader placeholder="多级联动组件展示" :options="data.options" :props="{ multiple: true }" filterable></el-cascader>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开关组件" prop="delivery" required>
|
||||
<el-switch v-model="data.ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="多选框" prop="type" required>
|
||||
<el-checkbox-group v-model="data.ruleForm.type">
|
||||
<el-checkbox label="选项一" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项二" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项三" name="type"></el-checkbox>
|
||||
<el-checkbox label="选项四" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单选框" prop="resource" required>
|
||||
<el-radio-group v-model="data.ruleForm.resource">
|
||||
<el-radio label="选项一"></el-radio>
|
||||
<el-radio label="选项二"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="活动形式" prop="desc" required>
|
||||
<el-col :span="10">
|
||||
<el-input type="textarea" v-model="data.ruleForm.desc"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 多级联动数据源
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
},
|
||||
],
|
||||
// 多级联动的数据从这个地方开始
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在 3 到 5 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
cascade:[{
|
||||
required: false,
|
||||
message: '请输入活动名称',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
region: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
date1: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择日期',
|
||||
trigger: 'change'
|
||||
}],
|
||||
date2: [{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: '请选择时间',
|
||||
trigger: 'change'
|
||||
}],
|
||||
type: [{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
resource: [{
|
||||
required: true,
|
||||
message: '请至少选择一个',
|
||||
trigger: 'change'
|
||||
}],
|
||||
desc: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
// 设置所有input的样式
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
分步表单功能演示
|
||||
</div>
|
||||
|
||||
<view style="padding: 80rpx 400rpx;margin-left: 0rpx;width: 1700rpx;">
|
||||
<el-steps :active="data.step" align-center>
|
||||
<el-step title="填写转账信息" icon="el-icon-edit"></el-step>
|
||||
<el-step title="确认转账信息" icon="el-icon-edit-outline"></el-step>
|
||||
<el-step title="完成" icon="el-icon-circle-check"></el-step>
|
||||
</el-steps>
|
||||
</view>
|
||||
|
||||
<view style="margin-left: 700rpx;">
|
||||
<el-form
|
||||
:label-position="data.labelPosition" label-width="100px" :model="data.ruleForm" :rules="data.rules" ref="ruleForm">
|
||||
|
||||
<!-- step为1的逻辑开始 -->
|
||||
<view v-if="this.data.step==1">
|
||||
<el-form-item label="付款账户" prop="account" required>
|
||||
<el-col :span="24">
|
||||
<el-select v-model="data.ruleForm.account" style="width: 800rpx;">
|
||||
<el-option label="账户一" value="shanghai"></el-option>
|
||||
<el-option label="账户二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="收款账户" prop="pay" required :inline="true">
|
||||
<el-col :span="24">
|
||||
<el-input placeholder="请输入收款账户" v-model="data.ruleForm.pay" class="input-with-select" style="width: 800rpx;">
|
||||
<el-select v-model="data.ruleForm.select" slot="prepend" placeholder="账户" style="width: 190rpx;">
|
||||
<el-option label="微信" value="1"></el-option>
|
||||
<el-option label="支付宝" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="收款人姓名" prop="name" required>
|
||||
<el-col :span="24">
|
||||
<el-input v-model="data.ruleForm.name" style="width: 800rpx;">
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="转账金额" prop="price" required :inline="true">
|
||||
<el-col :span="24">
|
||||
<el-input placeholder="请输入额度" v-model="data.ruleForm.price" class="input-with-select" style="width: 800rpx;">
|
||||
<template slot="prepend">¥</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</view>
|
||||
<!-- step为1的逻辑结束 -->
|
||||
|
||||
<!-- step为2的逻辑开始 -->
|
||||
<view v-if="this.data.step==2">
|
||||
<el-tag closable style="font-size: 40rpx;width:1200rpx;height: 80rpx;line-height: 80rpx;letter-spacing: 4rpx;background-color: #F8F8F8;color: red;">
|
||||
注意!确认转账后,资金将进到对方账户,无法退回
|
||||
</el-tag>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">付款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.account}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">收款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.pay}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;">
|
||||
<text style="color: #515a6e;">收款人姓名:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.name}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx;letter-spacing:4rpx;font-size: 30rpx;border-bottom: 1px solid #ccc;width: 1200rpx;">
|
||||
<text style="color: #515a6e;">转账金额:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;font-weight: bold;">¥{{data.ruleForm.price}}</text>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx">
|
||||
<el-form-item label="支付密码" prop="password" required>
|
||||
<el-input v-model="data.ruleForm.password" style="width: 800rpx;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</view>
|
||||
<!-- step为2的逻辑结束 -->
|
||||
|
||||
<!-- step为3的逻辑开始 -->
|
||||
<view v-if="this.data.step==3">
|
||||
<el-col :span="24" style="margin-left: 500rpx;">
|
||||
|
||||
<i class="el-icon-success" style="color: green;font-size: 200rpx;"></i>
|
||||
|
||||
<view style="font-family: kaiti;font-weight: bold;font-size: 80rpx;margin-left: -60rpx;margin-top: 20rpx;">操作成功</view>
|
||||
|
||||
<view style="letter-spacing: 4rpx;margin: 30rpx 0rpx 30rpx -40rpx;color: #8086a3;">预计两小时内到账</view>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="background-color: #f8f8f9;width: 1700rpx;margin-left: -200rpx;">
|
||||
<view style="display: flex; flex-flow: column;">
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">付款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.account}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">收款账户:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.pay}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">收款人姓名:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;">{{data.ruleForm.name}}</text>
|
||||
</view>
|
||||
|
||||
<view style="padding: 40rpx 160rpx;">
|
||||
<text style="color: #515a6e;">转账金额:</text>
|
||||
<text style="margin-left: 20rpx;color: #515a6e;font-weight: bold;">¥{{data.ruleForm.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</el-col>
|
||||
</view>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx;">
|
||||
<el-form-item>
|
||||
<el-button v-if="this.data.step==1" type="primary" @click="next('ruleForm')" :loading="data.loading">下一步</el-button>
|
||||
<el-button v-if="this.data.step==2" type="primary" @click="next('ruleForm')" :loading="data.loading">提交</el-button>
|
||||
|
||||
<el-button v-if="this.data.step==3" type="primary" @click="next('ruleForm')" :loading="data.loading">再来一单</el-button>
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- step为3的逻辑结束 -->
|
||||
</el-form>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
loading:false,
|
||||
step: 1,
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
pay: '',
|
||||
select: '微信',
|
||||
account: '账户一',
|
||||
price: '',
|
||||
password:''
|
||||
},
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '该项为必填项',
|
||||
trigger: 'input'
|
||||
},
|
||||
{
|
||||
min: 1,
|
||||
max: 8,
|
||||
message: '长度在 1 到 8 个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
pay: [{
|
||||
required: true,
|
||||
message: '请输入完整内容',
|
||||
trigger: 'change'
|
||||
}],
|
||||
account: [{
|
||||
required: true,
|
||||
message: '请选择付款账户',
|
||||
trigger: 'change'
|
||||
}],
|
||||
price: [{
|
||||
required: true,
|
||||
message: '请输入付款额度',
|
||||
trigger: 'change'
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
trigger: 'change'
|
||||
}],
|
||||
}
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
next(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
// 如果通过了验证之后才可以点下一步
|
||||
if (this.data.step <3) {
|
||||
// 再写一个判断 单独判断对应的值为1和2的时候
|
||||
this.data.loading=true
|
||||
setTimeout(()=>{
|
||||
this.data.step++;
|
||||
this.data.loading=false
|
||||
},1000)
|
||||
} else if (this.data.step == 3) {
|
||||
this.data.step=1
|
||||
this.data.ruleForm=[]
|
||||
}
|
||||
} else {
|
||||
// 否则就不能点下一步
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// submitForm(formName) {
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
// alert('submit!');
|
||||
// } else {
|
||||
// console.log('error submit!!');
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
resetForm(formName) {
|
||||
this.$refs.ruleForm.resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {}
|
||||
|
||||
.select-option {
|
||||
// border: 1px solid white !important;
|
||||
background-color: #F8F8F8 !important;
|
||||
color: red;
|
||||
}
|
||||
.topTip{
|
||||
width: 300rpx;
|
||||
height: 100rpx;
|
||||
background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
|
||||
}
|
||||
|
||||
// 设置所有input的样式
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-alert{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
弹窗功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-button type="text" @click="dialogVisible1 = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表格:
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套表单:
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
|
||||
|
||||
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
|
||||
<span>需要注意的是内容是默认不居中的</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
||||
// 页面数据变量
|
||||
return {
|
||||
|
||||
centerDialogVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
dialogVisible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
抽屉功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
普通功能:
|
||||
</div>
|
||||
<el-radio-group v-model="direction">
|
||||
<el-radio label="ltr">从左往右开</el-radio>
|
||||
<el-radio label="rtl">从右往左开</el-radio>
|
||||
<el-radio label="ttb">从上往下开</el-radio>
|
||||
<el-radio label="btt">从下往上开</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-col :span="24" style="padding: 40rpx 0rpx;margin-left: -40rpx;">
|
||||
<el-button @click="drawer = true" type="primary" size="small" style="margin-left: 18px;margin-top: 30rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
无标题:
|
||||
</div>
|
||||
<el-button @click="data.drawer = true" type="success" size="small" style="width: 160rpx;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer title="我是标题" :visible.sync="data.drawer" :with-header="false">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套内容:
|
||||
</div>
|
||||
|
||||
<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
|
||||
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
|
||||
<el-drawer title="我嵌套了表格!" :visible.sync="table" direction="rtl" size="50%">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer title="我嵌套了 Form !" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer"
|
||||
ref="drawer">
|
||||
<div class="demo-drawer__content">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
多层嵌套:
|
||||
</div>
|
||||
<el-button @click="drawer1 = true" type="danger" size="small" style="margin-left: -2px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是外面的 Drawer"
|
||||
:visible.sync="drawer1"
|
||||
size="50%">
|
||||
<div>
|
||||
<el-button @click="innerDrawer = true">打开里面的!</el-button>
|
||||
<el-drawer
|
||||
title="我是里面的"
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose1"
|
||||
:visible.sync="innerDrawer">
|
||||
<p>_(:зゝ∠)_</p>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
drawer1: false,
|
||||
innerDrawer: false,
|
||||
table: false,
|
||||
dialog: false,
|
||||
loading: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要提交表单吗？')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
handleClose1(done) {
|
||||
this.$confirm('还有未保存的工作哦确定关闭吗？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
<view style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
加载功能演示
|
||||
</view>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区域加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义加载的内容从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义加载:
|
||||
</view>
|
||||
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="date" label="日期" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<view style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
全屏加载:
|
||||
</view>
|
||||
<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
|
||||
指令方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="openFullScreen2">
|
||||
服务方式
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="doudou=true">
|
||||
自定义方式
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<el-image :draggable="false"
|
||||
style="width: 200rpx; height: 200rpx;text-align: center; margin-left: 50%; margin-top: 800rpx;"
|
||||
src="/static/icon/loading.gif"
|
||||
></el-image>
|
||||
</view> -->
|
||||
|
||||
<view class='popContainer' v-show="doudou" @click="doudou=false">
|
||||
<div
|
||||
class="loadingio-spinner-bean-eater-v394si28re"><div class="ldio-fk6s8i3hzwa">
|
||||
<div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div>
|
||||
</div></div>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
doudou:false,
|
||||
fullscreenLoading: false,
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen3() {
|
||||
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container{
|
||||
position: absolute !important;
|
||||
left: 300 !important;
|
||||
}
|
||||
view.popContainer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.loadingio-spinner-bean-eater-v394si28re{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
/* transform:scale(0.5) translate(-50%,-50%); */
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
transform:scale(0.5);
|
||||
}
|
||||
|
||||
@keyframes ldio-fk6s8i3hzwa-1 {
|
||||
0% { transform: rotate(0deg) }
|
||||
50% { transform: rotate(-45deg) }
|
||||
100% { transform: rotate(0deg) }
|
||||
}
|
||||
@keyframes ldio-fk6s8i3hzwa-2 {
|
||||
0% { transform: rotate(180deg) }
|
||||
50% { transform: rotate(225deg) }
|
||||
100% { transform: rotate(180deg) }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) {
|
||||
transform: translate(-15px,0);
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border-radius: 120px 120px 0 0;
|
||||
background: #f8b26a;
|
||||
animation: ldio-fk6s8i3hzwa-1 1s linear infinite;
|
||||
transform-origin: 60px 60px
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(2) {
|
||||
animation: ldio-fk6s8i3hzwa-2 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(2) div:nth-child(3) {
|
||||
transform: rotate(-90deg);
|
||||
animation: none;
|
||||
}@keyframes ldio-fk6s8i3hzwa-3 {
|
||||
0% { transform: translate(190px,0); opacity: 0 }
|
||||
20% { opacity: 1 }
|
||||
100% { transform: translate(70px,0); opacity: 1 }
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) {
|
||||
display: block;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
left: -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #e15b64;
|
||||
animation: ldio-fk6s8i3hzwa-3 1s linear infinite
|
||||
}
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(1) { animation-delay: -0.67s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(2) { animation-delay: -0.33s }
|
||||
.ldio-fk6s8i3hzwa > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
|
||||
.loadingio-spinner-bean-eater-v394si28re {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
.ldio-fk6s8i3hzwa {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform: translateZ(0) scale(1);
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 0 0; /* see note above */
|
||||
}
|
||||
.ldio-fk6s8i3hzwa div { box-sizing: content-box; }
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding:40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
消息提示:
|
||||
</div>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 确认消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open1">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
确认消息:
|
||||
</div>
|
||||
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 使用HTML消息功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML片段:
|
||||
</div>
|
||||
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 区分取消和关闭 -->
|
||||
<!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
区分取消和关闭:
|
||||
</div>
|
||||
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
内容居中布局:
|
||||
</div>
|
||||
<el-button type="text" @click="open5">点击打开 Message Box</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$alert('这是一段内容', '标题名称', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `消息内容: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
open2() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '执行中...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
open3() {
|
||||
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '放弃修改'
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '保存修改'
|
||||
});
|
||||
})
|
||||
.catch(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: action === 'cancel' ?
|
||||
'放弃保存并离开页面' :
|
||||
'停留在当前页面'
|
||||
})
|
||||
});
|
||||
},
|
||||
open5() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
消息提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
<el-button :plain="true" @click="open">打开消息提示</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不同状态:
|
||||
</div>
|
||||
<el-button :plain="true" type="success" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" type="primary" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" type="danger" @click="open4">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 可关闭功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
可关闭:
|
||||
</div>
|
||||
<el-button :plain="true" type="primary" @click="openA">消息</el-button>
|
||||
<el-button :plain="true" type="success" @click="openB">成功</el-button>
|
||||
<el-button :plain="true" type="warning" @click="openC">警告</el-button>
|
||||
<el-button :plain="true" type="danger" @click="openD">错误</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 居中 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
文字居中:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openCenter" type="infor">文字居中</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌入HTML片段 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌入HMTL片段:
|
||||
</div>
|
||||
<el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
open() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', {
|
||||
style: 'color: teal'
|
||||
}, 'VNode')
|
||||
])
|
||||
});
|
||||
},
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
open4() {
|
||||
this.$message.error('错了哦，这是一条错误消息');
|
||||
},
|
||||
openA() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-button plain @click="open1">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button plain @click="open2">
|
||||
不会自动关闭
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
具有倾向性:
|
||||
</div>
|
||||
<el-button plain @click="openA">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button plain @click="openB">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button plain @click="openC">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button plain @click="openD">
|
||||
错误
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义弹出位置:
|
||||
</div>
|
||||
<el-button plain @click="opena">
|
||||
右上角
|
||||
</el-button>
|
||||
<el-button plain @click="openb">
|
||||
右下角
|
||||
</el-button>
|
||||
<el-button plain @click="openc">
|
||||
左下角
|
||||
</el-button>
|
||||
<el-button plain @click="opend">
|
||||
左上角
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 带有偏移的弹窗 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
带偏移的消息提示:
|
||||
</div>
|
||||
<el-button plain @click="open">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
使用HTML字段:
|
||||
</div>
|
||||
<el-button plain @click="openuu">
|
||||
使用 HTML 片段
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 30rpx 40rpx; margin-top: -40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
不显示关闭按钮:
|
||||
</div>
|
||||
<el-button plain @click="openhide">
|
||||
隐藏关闭按钮
|
||||
</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
//
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '偏移',
|
||||
message: '这是一条带有偏移的提示消息',
|
||||
offset: 100
|
||||
});
|
||||
},
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: h('i', {
|
||||
style: 'color: teal'
|
||||
}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
openA() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
openB() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
openC() {
|
||||
this.$notify.info({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
openD() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息'
|
||||
});
|
||||
},
|
||||
opena() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右上角弹出的消息'
|
||||
});
|
||||
},
|
||||
|
||||
openb() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右下角弹出的消息',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
openc() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左下角弹出的消息',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
opend() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左上角弹出的消息',
|
||||
position: 'top-left'
|
||||
});
|
||||
},
|
||||
openuu() {
|
||||
this.$notify({
|
||||
title: 'HTML 片段',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
},
|
||||
openhide() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: '这是一条没有关闭按钮的消息',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
悬浮提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
自定义用法:
|
||||
</div>
|
||||
<el-popconfirm
|
||||
confirm-button-text='好的'
|
||||
cancel-button-text='不用了'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="宁确定要删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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){
|
||||
|
||||
},
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
提示弹框功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基本用法:
|
||||
</div>
|
||||
<el-popover placement="top-start" title="标题" width="200" style="margin-right: 30rpx;" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" style="margin-right: 30rpx;" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover ref="popover" placement="right" title="标题" width="200" style="" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover style="margin-right: 30rpx;">focus 激活</el-button>
|
||||
|
||||
<el-popover placement="bottom" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 自定义功能从这个地方开始 -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套信息:
|
||||
</div>
|
||||
<el-popover placement="right" width="400" trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 嵌套操作从这个地方开始 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
嵌套操作:
|
||||
</div>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible1">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible1 = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
visible1: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
visible: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<div style="padding: 40rpx;font-size: 70rpx;font-family: kaiti;">
|
||||
文字提示功能演示
|
||||
</div>
|
||||
|
||||
<!-- 基本用法 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx;">
|
||||
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
基础用法:
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<el-button>上左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<el-button>上边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<el-button>上右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<el-button>左上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<el-button>左边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<el-button>左下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<el-button>右上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<el-button>右边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<el-button>右下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<el-button>下左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<el-button>下边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<el-button>下右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 设置主题功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 更多content功能 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br />第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 高级拓展 -->
|
||||
<el-row>
|
||||
<el-col :span="24" style="padding: 40rpx; margin-top:-40rpx;">
|
||||
<div style="padding: 40rpx 0rpx;font-size: 40rpx;font-family: simsun;">
|
||||
设置主题:
|
||||
</div>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
disabled: false,
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<i class="el-icon-close"></i>
|
||||
<text class="fail">提交失败</text>
|
||||
<text class="txt">请核对并修改以下信息后，再重新提交。</text>
|
||||
<view class="examine">
|
||||
<text class="title">您提交的内容有如下错误：</text>
|
||||
<view>
|
||||
<i class="el-icon-circle-close"></i>
|
||||
<text>您的账户已被冻结</text>
|
||||
<text class="thaw">立即解冻</text>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</view>
|
||||
<view>
|
||||
<i class="el-icon-circle-close"></i>
|
||||
<text>您的账户还不具备申请资格</text>
|
||||
<text class="upgrade">立即升级</text>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<text class="modify">返回修改</text>
|
||||
<!-- 页面内容结束 -->
|
||||
</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) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding-top: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-icon-close {
|
||||
font-size: 90rpx;
|
||||
margin: 50rpx 0rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #ED4014;
|
||||
padding: 35rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fail {
|
||||
margin-bottom: 32rpx;
|
||||
color: #17233d;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #808695;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-top: 40rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 8rpx;
|
||||
width: 69%;
|
||||
padding: 40rpx 60rpx;
|
||||
color: #515a6e;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
view {
|
||||
&:first-of-type {
|
||||
margin: 40rpx 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modify {
|
||||
margin-top: 80rpx;
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 2rpx solid #2D8CF0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 8rpx;
|
||||
background-color: #2D8CF0;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-circle-close {
|
||||
color: #ED4014;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.upgrade,
|
||||
.thaw {
|
||||
color: #2D8CF0;
|
||||
margin: 0rpx 20rpx 0rpx 40rpx;
|
||||
|
||||
&:hover {
|
||||
color: #57a3f3;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-arrow-right {
|
||||
color: #515a6e;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<i class="el-icon-check"></i>
|
||||
<text class="success">提交成功</text>
|
||||
<text class="txt">提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。灰色区域可以显示一些补充的信息。</text>
|
||||
<text class="examine">已提交申请，等待部门审核。</text>
|
||||
<view class="project_list">
|
||||
<text>返回列表</text>
|
||||
<text>查看项目</text>
|
||||
<text>打印</text>
|
||||
</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) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding-top: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-icon-check {
|
||||
font-size: 90rpx;
|
||||
margin: 50rpx 0rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #19BE6B;
|
||||
padding: 35rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.success {
|
||||
margin-bottom: 32rpx;
|
||||
color: #17233d;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #808695;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.examine {
|
||||
margin-top: 40rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 8rpx;
|
||||
display: inline-block;
|
||||
width: 69%;
|
||||
height: 140rpx;
|
||||
line-height: 140rpx;
|
||||
padding-left: 80rpx;
|
||||
color: #515a6e;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.project_list {
|
||||
margin-top: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>text {
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid transparent;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
cursor: pointer;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:first-of-type {
|
||||
border-color: #2D8CF0;
|
||||
background-color: #2D8CF0;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin: 0rpx 20rpx;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-color: #DCDEE2;
|
||||
|
||||
&:hover {
|
||||
color: #57a3f3 !important;
|
||||
border-color: #57a3f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,429 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<!-- 左边 -->
|
||||
<view class="left">
|
||||
<view>
|
||||
<i class="el-icon-s-operation"></i>
|
||||
<text>个人设置</text>
|
||||
</view>
|
||||
<view :class="display_list == index ? 'select_list': ''" v-for="(item,index) of left_list" :key="index" @click="change_left(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右边 -->
|
||||
<view class="right">
|
||||
<view v-show="display_list == 0" class="form">
|
||||
<view class="base_set">
|
||||
<view class="right_title">基本设置</view>
|
||||
<el-form class="form_input" label-width="800px" label-position="top" :model="form1" :rules="rules" ref="form1">
|
||||
<el-form-item label="昵称" prop="name" required>
|
||||
<el-input v-model="form1.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email" required>
|
||||
<el-input v-model="form1.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="个人介绍" required>
|
||||
<el-input type="textarea" v-model="form1.introduce"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司" required>
|
||||
<el-input v-model="form1.company"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="居住地" required>
|
||||
<el-cascader placeholder="选择地区" :options="options_list" :props="{ multiple: true }" filterable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-button type="primary">更新基本信息</el-button>
|
||||
</el-form>
|
||||
</view>
|
||||
<view class="avater">
|
||||
<text >头像</text>
|
||||
<image src="../../../static/logo.png" ></image>
|
||||
<el-button class="avater_but" size="mini" style="margin-left: -2px;" plain><i class="el-icon-camera-solid"></i>修改头像</el-button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="display_list == index + 1" v-for="(item,index) of right_list" :key="index">
|
||||
<view class="right_title">{{item.title}}</view>
|
||||
<view class="name_tips" v-for="(value,key) of item.list" :key="key">
|
||||
<view class="name">
|
||||
<image src="" v-if="index == 1 && key == 0"></image>
|
||||
<image src="" v-if="index == 1 && key == 1"></image>
|
||||
<image src="" v-if="index == 1 && key == 2"></image>
|
||||
<image src="" v-if="index == 1 && key == 3"></image>
|
||||
<text>{{value.name}}</text>
|
||||
</view>
|
||||
<text class="tips">{{value.tips}}</text>
|
||||
<text class="operation">
|
||||
<el-switch v-show="index == 2" v-model="switch_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
<text class="operation_modify" v-show="index == 1 || index == 0">修改</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
let left_list = [{
|
||||
name: "基础设置",
|
||||
title: "个人账户信息设置"
|
||||
}, {
|
||||
name: "安全设置",
|
||||
title: "密码、邮箱等设置"
|
||||
}, {
|
||||
name: "账号绑定",
|
||||
title: "绑定第三方社交账户"
|
||||
}, {
|
||||
name: "新消息通知",
|
||||
title: "各种通知的设置"
|
||||
}];
|
||||
let right_list = [{
|
||||
title: "安全设置",
|
||||
list: [{
|
||||
name: "账户密码",
|
||||
tips: "绑定手机和邮箱，并设置密码，帐号更安全"
|
||||
}, {
|
||||
name: "绑定手机",
|
||||
tips: "已绑定手机号：+86185****0000"
|
||||
}, {
|
||||
name: "密保问题",
|
||||
tips: "未设置密保问题，密保问题可有效保护账户安全"
|
||||
}, {
|
||||
name: "个性域名",
|
||||
tips: "已绑定域名：iview.design"
|
||||
}]
|
||||
}, {
|
||||
title: "账号绑定",
|
||||
list: [{
|
||||
name: "微信",
|
||||
tips: "当前未绑定微信账号"
|
||||
}, {
|
||||
name: "微博",
|
||||
tips: "当前未绑定微博账号"
|
||||
}, {
|
||||
name: "Facebook",
|
||||
tips: "当前未绑定Facebook账号"
|
||||
}, {
|
||||
name: "Twitter",
|
||||
tips: "当前未绑定Twitter账号"
|
||||
}]
|
||||
}, {
|
||||
title: "新消息通知",
|
||||
list: [{
|
||||
name: "陌生人私信",
|
||||
tips: "未关注的人向您发私信时的通知"
|
||||
}, {
|
||||
name: "邀请/评论消息",
|
||||
tips: "有人对我发出邀请时，我会收到消息通知"
|
||||
}, {
|
||||
name: "赞同/赞赏消息设置",
|
||||
tips: "有人对我赞同或赞赏时，我会收到消息通知"
|
||||
}, {
|
||||
name: "邮件设置",
|
||||
tips: "重要事件发生时，我将会收到邮件提醒"
|
||||
}]
|
||||
}];
|
||||
let options_list = [{
|
||||
value: 'zhinan',
|
||||
label: '第一层数据',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '第二层数据',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '数据一'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '数据二'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '数据三'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '数据四'
|
||||
}]
|
||||
}],
|
||||
}];
|
||||
export default {
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
left_list,
|
||||
right_list,
|
||||
// 多级联动数据源
|
||||
options_list,
|
||||
display_list: 0,
|
||||
switch_value: true,
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
}, {
|
||||
min: 3,
|
||||
max: 5,
|
||||
message: '长度在3到5个字符',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
email: [{
|
||||
required: true,
|
||||
message: "请输入邮箱",
|
||||
trigger: "blur"
|
||||
}, {
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱！",
|
||||
trigger: "blur"
|
||||
}],
|
||||
},
|
||||
// init请求返回的数据
|
||||
data: {},
|
||||
// 表单请求数据
|
||||
form1: {
|
||||
name: "",
|
||||
email: "",
|
||||
introduce: "",
|
||||
company: "",
|
||||
options: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
|
||||
},
|
||||
pageTo(path) {
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
change_left(index) {
|
||||
this.display_list = index;
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
view,
|
||||
text {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F7F9;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
display: flex;
|
||||
background-color: #F5F7F9;
|
||||
|
||||
>view {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 800rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
transition: all .2s ease-in-out;
|
||||
padding-bottom: 14rpx;
|
||||
margin-right: 40rpx;
|
||||
border-bottom: 2rpx solid #e8eaec;
|
||||
position: relative;
|
||||
margin-bottom: auto;
|
||||
|
||||
.el-icon-s-operation {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
>view {
|
||||
&:first-of-type {
|
||||
font-size: 32rpx;
|
||||
border-bottom: 2rpx solid #e8eaec;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14rpx 32rpx;
|
||||
color: #515a6e;
|
||||
font-size: 14px !important;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
>text {
|
||||
&:first-of-type {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
font-size: 22rpx;
|
||||
color: #808695;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中左侧列表的样式
|
||||
.select_list {
|
||||
color: #2d8cf0 !important;
|
||||
background-color: #F0FAFF !important;
|
||||
|
||||
>text {
|
||||
color: #2d8cf0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 右边的样式
|
||||
.right {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.right_title {
|
||||
font-size: 45rpx;
|
||||
color: #515A6E;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.name_tips {
|
||||
margin-left: 32rpx;
|
||||
padding: 40rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 2rpx solid #E8EAEC;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
color: #808695;
|
||||
}
|
||||
|
||||
// 操作
|
||||
.operation {
|
||||
position: absolute;
|
||||
float: right;
|
||||
color: #2D8CF0;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.operation_modify {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式
|
||||
.form {
|
||||
display: flex;
|
||||
|
||||
.form_input {
|
||||
width: 1000rpx;
|
||||
}
|
||||
|
||||
.avater {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 100rpx;
|
||||
margin-top: 100rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-top: 10rpx;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avater_but {
|
||||
margin-top: 30rpx;
|
||||
|
||||
i {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
|
||||
这里是页面内容
|
||||
|
||||
<!-- 页面内容结束 -->
|
||||
</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){
|
||||
|
||||
},
|
||||
// 页面跳转
|
||||
pageTo(path){
|
||||
vk.navigateTo(path);
|
||||
},
|
||||
},
|
||||
// 过滤器
|
||||
filters:{
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
<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-row>
|
||||
</view>
|
||||
<!-- 自定义按钮区域结束 -->
|
||||
|
||||
<!-- 表格组件开始 -->
|
||||
<vk-data-table
|
||||
ref="table1"
|
||||
:action="table1.action"
|
||||
:columns="table1.columns"
|
||||
:query-form-param="queryForm1"
|
||||
:right-btns="['detail_auto','update','delete']"
|
||||
: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="120px"
|
||||
@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" },
|
||||
{ key:"_add_time", title:"距离现在", type:"dateDiff", width:120 },
|
||||
],
|
||||
// 多选框选中的值
|
||||
multipleSelection:[],
|
||||
// 当前高亮的记录
|
||||
selectItem:""
|
||||
},
|
||||
// 表格相关结束 -----------------------------------------------------------
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
// 查询表单请求数据
|
||||
queryForm1:{
|
||||
// 查询表单数据源，可在此设置默认值
|
||||
formData:{
|
||||
|
||||
},
|
||||
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
|
||||
columns:[
|
||||
{ key:"remark", title:"备注", type:"text", width:160, mode:"%%" },
|
||||
{ key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
|
||||
]
|
||||
},
|
||||
form1:{
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {
|
||||
|
||||
},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action:"",
|
||||
// 表单字段显示规则
|
||||
columns:[
|
||||
{ key:"text", title:"金额", type:"text", placeholder:"请输入xxx" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules:{
|
||||
|
||||
},
|
||||
// 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);
|
||||
},
|
||||
// 表单重置
|
||||
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
|
||||
},
|
||||
});
|
||||
},
|
||||
// 监听 - 批量操作的按钮点击事件
|
||||
batchBtn(index){
|
||||
switch(index){
|
||||
case 1: vk.toast("批量操作按钮1"); break;
|
||||
case 2: vk.toast("批量操作按钮2"); break;
|
||||
default : break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
},
|
||||
// 过滤器
|
||||
filters: {
|
||||
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-body {
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user