一、需求背景
需要针对某个功能进行用户调查反馈，设计一个弹框，进行后端入表记录，以便后期进行数据分析。
二、实现UI
三、代码留存
以vue为例
<template><div class="advice-container"><van-dialogv-model="showAdviceDialog"show-cancel-buttonconfirm-button-color="#1774fd"confirm-button-text="提交"><div class="advice-dialog"><div class="title">进一步反馈:</div><div><van-checkbox-group v-model="result" class="content" @change="handleCheckChange"><van-checkbox name="无法理解上下文" shape="square">无法理解上下文</van-checkbox><van-checkbox name="答非所问" shape="square">答非所问</van-checkbox><van-checkbox name="回答对我没有帮助" shape="square">回答对我没有帮助</van-checkbox><van-checkbox name="回答逻辑混乱" shape="square">回答逻辑混乱</van-checkbox><van-checkbox name="没能理解指令" shape="square">没能理解指令</van-checkbox></van-checkbox-group></div><div style="font-size: 16px; margin: 12px 0;">将您更多的宝贵建议反馈给我们：</div><van-fieldv-model="inputMessage"rows="2"autosizetype="textarea"maxlength="100"placeholder="请输入您的宝贵建议..."show-word-limit@input="handleInput"/></div></van-dialog></div>
</template><script>
export default {name: 'Advice',data() {return {showAdviceDialog: true,result: [],inputMessage: '',afterInput: ''};},methods: {handleInput(inputStr) {if (inputStr) {// 获取用户输入的内容this.afterInput = inputStr.substring(this.result.toString().length);}},handleCheckChange(checkStr) {// 拼接用户输入的内容和选择的内容this.inputMessage = checkStr.toString() + this.afterInput;}}
};
</script><style scoped lang="scss">.advice-container {/deep/ .van-dialog {border-radius: 6px;}/deep/ .van-checkbox__label {width: 200px;font-size: 14px;}/deep/ .van-icon {width: 14px;height: 14px;}/deep/ .van-field {border: 1px solid #d9d9d9;}.advice-dialog {padding: 16px;.title {font-size: 16px;margin-bottom: 12px;}.content {display: flex;flex-wrap: wrap;}}}
</style>
