This commit is contained in:
2023-11-07 17:15:33 +08:00
commit fe37e2e1df
418 changed files with 53012 additions and 0 deletions
@@ -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>
+90
View File
@@ -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>