组件
<template>
<view>
<slot />
</view>
</template>
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'form-list',
});
</script>
页面
<template>
<view class="qt-padding-left--lg qt-padding-right--lg qt-bg--white">
<form-list>
<input :value="asd" @input="onInput(item, index, $event)" />
</form-list>
</view>
</template>
<script>
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import FormList from './asd';
export default defineComponent({
name: 'form-grid',
//ifdef MP-WEIXIN
options: {
styleIsolation: 'shared',
},
//endif
props: {
// 表单显示数据
grid: {
required: true,
type: Array,
default: () => {
return [];
},
},
// label位置
inputAlign: {
default: 'left',
type: String,
},
// 格式化数据
formatValues: {
type: Function,
default: value => value,
},
// 自动光标跳转
isAutoNext: {
type: Boolean,
default: true,
},
// 自定义组件
rowCompMap: {
type: Object,
},
// lable校验颜色显示
requiredColor: {
type: Boolean,
default: true,
},
// 跳转范围
nextScope: {
type: Array,
default: () => {
return [];
},
},
},
components: {
FormList,
},
setup() {
const aaa = reactive({
asd: '',
});
const formListRef = ref(null);
/**
* @description: 输入框发送数据
* @param {*} value
* @param {*} index
* @param {*} item
* @return {void} null
*/
function onInput(item, index, event) {
console.log(event);
aaa.asd = event.detail.value;
}
return {
onInput,
...toRefs(aaa),
};
},
});
</script>
1 个回复
柚子898 (作者)
<template>
<view>
<slot />
</view>
</template>
<script>
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'form-list',
});
</script>
<template>
<view class="qt-padding-left--lg qt-padding-right--lg qt-bg--white">
<form-list ref="formListRef">
<input :value="asd" @input="onInput(item, index, $event)" />
</form-list>
</view>
</template>
<script>
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import FormList from './form-list';
export default defineComponent({
name: 'form-grid',
//ifdef MP-WEIXIN
options: {
styleIsolation: 'shared',
},
//endif
props: {
// 表单显示数据
grid: {
required: true,
type: Array,
default: () => {
return [];
},
},
},
components: {
FormList,
},
setup() {
const aaa = reactive({
asd: '',
});
},
});
</script>