Title: Front-end component development of custom product evaluation page single-select and multi-select tags components
I. Introduction
With the continuous development of front-end technology, component development has become the only way to build front-end applications for complex business scenarios. Through component development, we can achieve separate development and maintenance, and can combine them at will, which greatly improves development efficiency and reduces maintenance costs. Today, we will introduce a customized single-select and multi-select tags component for product review pages, and discuss the technical implementation and advantages behind it.
2. Introduction to single-select and multi-select label components on custom product evaluation pages
This custom single-select and multi-select label component on the product review page can help users implement single-select and multi-select functions on the product review page. Users can rate items by clicking on the tags in the selector. Each label has a default background color that users can set according to their needs. At the same time, arrays of labels and click events can also be passed through attributes. Attached is the complete code download address: https://ext.dcloud.net.cn/plugin?id=13487
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
3. Technical implementation
cc-multipleBtn
Instructions
<!-- colors:设置颜色 remarkList：标签数组 @click：标签点击 -->
<cc-multipleBtn :colors="colors" :remarkList="remarkList" @click="tagsClick"></cc-multipleBtn>
HTML code implementation part
<template>
<view class="cencal_order">
<view class="remark">
<textarea maxlength="-1" placeholder="请在此处输入评价" placeholder-class="textarea_p"></textarea>
</view>
<!-- colors:设置颜色 remarkList：标签数组 @click：标签点击 -->
<cc-multipleBtn :colors="colors" :remarkList="remarkList" @click="tagsClick"></cc-multipleBtn>
<view class="btns" :style="{background: '#fbbd08'}">
确认提交
</view>
</view>
</template>
<script>
var app = getApp();
export default {
data() {
return {
colors: '#f37b1d',
remarkList: [{
name: '商品品质好'
}, {
name: '性价比高'
}, {
name: '态度好'
}, {
name: '价格合理'
}, {
name: '做工不错'
}, {
name: '物流时间长'
}, {
name: '价格优惠低'
}, {
name: '其他原因'
}],
data: ""
};
},
components: {
},
props: {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
methods: {
tagsClick(tagArr) {
console.log("arr = ", JSON.stringify(tagArr));
uni.showModal({
title: '选中的标签',
content: '选中的标签 = ' + JSON.stringify(tagArr)
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #F5F5FA;
}
.cencal_order {
padding: 20upx 4%;
background-color: #fff;
}
.remark {
background-color: #F5F5F5;
border-radius: 10upx;
height: 28vw;
padding: 20upx;
margin-top: 20upx;
textarea {
font-size: 26upx;
color: #797979;
}
}
.textarea_p {
font-size: 24upx;
color: #797979;
}
.btns {
width: 100%;
height: 80upx;
line-height: 80upx;
font-size: 30upx;
color: #333;
text-align: center;
margin-top: 100upx;
border-radius: 8upx;
margin-bottom: 100px;
}
</style>
The technical implementation of this component mainly involves the use of the Vue.js framework. First, create a new component in Vue.js and define the corresponding properties and events. Then, the corresponding label elements are dynamically generated based on the label array and color attributes passed by the user. Each label element has a click event. When the user clicks, the corresponding event handler will be triggered.
4. Advantages
This custom product review page single-select and multi-select label component has the following advantages:
Highly customizable: Users can set the background color of labels according to their own needs to meet the needs of different business scenarios.
Separate development and maintenance: This component is an independent component and can be developed and maintained separately, which improves development efficiency.
Flexible combination: This component can be combined with other components at will, improving the reusability of the component.
Easy to use: The use of this component is simple and intuitive. Users can pass the corresponding properties and events as needed.
5. Summary
Through component development, we can achieve highly customized, individually developed and flexibly combined functions to meet the needs of complex business scenarios. This custom product review page single-select and multi-select label component is one example, which can help users evaluate products more conveniently. In the future, we will continue to explore more component-based development technologies and practices to provide more possibilities for building more efficient and flexible front-end applications.
6. References
Vue.js official documentation: https://vuejs.org/
DCloud company official website: https://www.dcloud.net.cn/