With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or a small function increase may cause the overall logic to change. Modifications, causing the whole body to be affected by a single hair.
Through component development, separate development and maintenance can be effectively realized, and they can be combined at will. Greatly improve development efficiency and reduce maintenance costs. Componentization is the only way for any front-end application with complex business scenarios and products after many iterations. Componentization needs to do more than just dismantling and decoupling modules seen on the surface. There is still a lot of work behind it to support componentization, such as module splitting strategies combined with business characteristics, interaction methods between modules, and building systems etc.
A component introduced to you today is a custom beautiful full-end copy text plug-in, which supports full-end text copy plug-ins and can set the color of the copy button; the source code download address is attached: https://ext.dcloud.net.cn/plugin?id =13495
The renderings are as follows:
# cc-copyBtn
#### Instructions
```How to use
<!-- colors: button background color copyText: copy text characters -->
<cc-copyBtn colors="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- colors: button background color copyText: copy text characters -->
<cc-copyBtn colors="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
```
#### HTML code implementation part
```html
<template>
<view class="content">
<view style="margin: 20px 0px;"> { { myCopyText }}</view>
<!-- colors: button background color copyText: copy text characters -->
<cc-copyBtn colors="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- colors: button background color copyText: copy text characters -->
<cc-copyBtn colors="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
</view>
</template>
<script>
export default {
data() {
return {
myCopyText: "This is copy text, copy text plugin, support full text copy plugin"
}
},
onLoad(options) {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F8F8F8;
}
.content {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
</style>
```