uniapp写一个可以自定义编辑的有颜色搭配的调查问卷代码
时间: 2024-02-15 07:05:15 浏览: 80
以下是一个简单的 uniapp 调查问卷代码,使用了 vant UI 组件和自定义样式:
```vue
<template>
<view class="questionnaire">
<van-form ref="form" v-model="form" label-width="80px">
<van-field
v-for="(question, index) in questions"
:key="index"
:name="'question' + (index + 1)"
:label="'Question ' + (index + 1)"
:rules="[{ required: true, message: 'Answer is required' }]"
placeholder="Answer here"
autosize
type="textarea"
/>
</van-form>
<van-button type="primary" @click="submit">Submit</van-button>
</view>
</template>
<script>
export default {
data() {
return {
form: {},
questions: [
{ color: '#f44336', text: 'What is your favorite color?' },
{ color: '#2196f3', text: 'What is your favorite animal?' },
{ color: '#4caf50', text: 'What is your favorite food?' },
],
};
},
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('Form submitted:', this.form);
} else {
console.log('Form validation failed');
}
});
},
},
};
</script>
<style>
.questionnaire {
padding: 20rpx;
}
.van-field__control {
border-color: #dddddd;
border-radius: 5rpx;
padding: 20rpx;
}
.questionnaire .van-field__label {
color: #666666;
font-size: 32rpx;
font-weight: bold;
}
.questionnaire .van-field__error-message {
color: #f44336;
font-size: 24rpx;
}
</style>
```
你可以根据需要自定义 questions 数组中的问题和颜色。可以使用任何合法的 CSS 颜色值。样式也可以根据需要进行更改。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)