<template> <view class="content"> <view class="content-form"> <u--form label-position="top" labelWidth="100" :model="model" :rules="rules" ref="form"> <u-form-item required label="标题" prop="title" borderBottom :customStyle="{ 'flex-direction': 'row !important' }" > <u--input inputAlign="right" maxlength="-1" border="none" v-model="model.title" placeholder="请填写标题"></u--input> </u-form-item> <u-form-item required label="备注" prop="remarks" borderBottom> <u--textarea :customStyle="{ marginTop: '20rpx', background: '#F5F5F5', border: 'none' }" v-model="model.remarks" placeholder="备注说明" height="128rpx" ></u--textarea> </u-form-item> </u--form> </view> <u-button text="提交反馈" color="#2C66FF" :customStyle="{ width: '710rpx', height: '80rpx', borderRadius: '10rpx', padding: '0rpx', position: 'absolute', bottom: '142rpx', left: '20rpx' }" ></u-button> </view> </template> <script> import apiBaseConfig from '@/config/index.js'; export default { data() { return { imgBgUrl: apiBaseConfig.imgBgUrl, globalData: getApp().globalData, scrollTopHeader: 0, model: { title: '', remarks: '' }, rules: { title: { type: 'string', required: true, message: '请填写标题', trigger: ['blur', 'change'] }, remarks: { type: 'string', required: true, message: '请填写备注说明', trigger: ['blur', 'change'] } } }; }, onLoad() {}, onReady() { //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。 this.$refs.form.setRules(this.rules); }, methods: {} }; </script> <style lang="scss" scoped> .content { &-form { margin: 30rpx 20rpx; width: calc(100% - 20rpx * 2); /deep/ .u-form { width: calc(100% - 20rpx * 2); margin: 0rpx 20rpx; } } } </style>