Introducing Vue's imitated enterprise Chacha Tianyancha intellectual property standard information list component
With the continuous development of technology, traditional development methods make the system more and more complex. In the traditional development process, a small change or the addition of a small function may lead to a modification of the overall logic, causing a situation where the entire system is affected. In order to solve this problem, we adopted a component development model. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. It greatly improves development efficiency and reduces maintenance costs.
This article will introduce a component: the front-end Vue imitation enterprise Chacha Tianyancha intellectual property standard information list component. This component is developed based on Vue.js and has the advantages of independent development, independent maintenance and random combination. The complete code download address is attached: https://ext.dcloud.net.cn/plugin?id=14188.
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
I. Introduction
With the rapid development of information technology, the requirements for systems are becoming higher and higher. The traditional development method makes the system more and more complex. A small change or the addition of a small function may lead to a modification of the overall logic, causing a situation where the entire system is affected. In order to solve this problem, we adopted a component development model. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. It greatly improves development efficiency and reduces maintenance costs.
2. Technical implementation
cc-bzListView is a Vue.js-based intellectual property standard information list component that imitates Qichachatianyancha. This component adopts a component-based development approach, allowing developers to develop and maintain it individually, and combine it at will. Developers can customize and extend components according to their own needs to achieve more functions.
The main parameter of this component is bzList, which is an array information. Each element in the array is an object that contains corresponding information. Developers can put the information to be displayed in this array according to their own needs, and then pass it to the component. The component will automatically generate the corresponding list based on this information.
3. How to use
To use this component, you need to first introduce the relevant CSS and JavaScript files, then define the component's tag in HTML, and set the corresponding attribute values. Here is a sample code using this component:
```How to use
<!-- Imitate the standard information list component productList: array information -->
<cc-bzListView :bzList="bzList"></cc-bzListView>
```
#### HTML code implementation part
```html
<template>
<view class="content">
<div class="mui-content-padded">
<!-- Imitated enterprise check standard formulation list component -->
<cc-bzListView :productList="bzList"></cc-bzListView>
</div>
<!-- Customize the equal portion bottom menu button -->
<view class="bottomV">
<!-- upTextArr: upper title array downTextArr: lower title array selIndex: selection sequence selColor: selected color @menuClick: button click event -->
<cc-BotMenu :upTextArr="uptextArr" :downTextArr="downTextArr" :selIndex="selIndex" selColor="orange"
@menuClick="menuClick"></cc-BotMenu>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bzList: [],
uptextArr: ['1', "2", "3", "4", '5'],
downTextArr: ['National Standard', "Industry Standard", "Provincial Standard", "Group Standard", 'Enterprise Standard'],
selIndex: "0",
}
},
mounted() {
this.bzList = [{
"id": "2",
"isNewRecord": false,
"comName": "123456",
"socialCode": "123456",
"comCode": "123456",
"standardName": "Quality Standards for Drug Network Operations",
"standardType": "National Standard",
"standardNo": "T/CAPC 010—2023",
"createUnit": "China Pharmaceutical Business Association, Sinopharm Holdings Co., Ltd., Shanghai Pharmaceuticals Holdings Co., Ltd., China Resources Pharmaceutical Commercial Group Co., Ltd. and more 18 units",
"publishTime": "2021-01-03",
"standardState": "Implementing soon",
"recommended": "recommended"
}, {
"id": "1",
"isNewRecord": false,
"comName": "123456",
"socialCode": "123456",
"comCode": "123456",
"standardName": "Probiotic food",
"standardType": "Group Standard",
"standardNo": "T/CNFIA 131—2021",
"createUnit": "Beijing Ketuo Hengtong Biotechnology Co., Ltd., China Food Fermentation Industry Research Institute, Beijing Rexinchang Biotechnology Research Institute Co., Ltd., Inner Mongolia Mengniu Dairy (Group) Co., Ltd. and more 30 units",
"publishTime": "2021-01-02",
"standardState": "current",
"recommended": "recommended"
}];
},
methods: {
//Button click event
menuClick(tag) {
//Click sequence assignment
this.selIndex = tag;
}
}
}
</script>
<style>
page {
background: #f3f4f6;
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
}
.bottomV {
/* Set the view to the top */
display: flex;
flex-direction: row;
position: fixed;
margin-top: calc(100vh - 168px);
height: 60px;
z-index: 9999 !important;
width: 100vw;
background-color: white;
padding-left: 0px;
padding-bottom: 20px;
}
</style>
```
In the above code, we define a cc-bzListView component and set the bzList property. The value of this attribute is an array of information that contains all the information that needs to be displayed. Developers can generate this array according to their own needs and then pass it to the component.
4. Summary
This article introduces an intellectual property standard information list component based on Vue.js that imitates Qichachatianyancha: cc-bzListView. This component adopts a component-based development approach, allowing developers to develop and maintain it individually, and combine it at will. Developers can customize and extend components according to their own needs to achieve more functions. By using this component, developers can quickly build a beautiful and easy-to-use information list interface, improving the efficiency and quality of development.