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
<!-- colors：按钮背景色 copyText：复制文本字符 -->
<cc-copyBtn colors="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- colors：按钮背景色 copyText：复制文本字符 -->
<cc-copyBtn colors="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
HTML code implementation part
<template>
<view class="content">
<view style="margin: 20px 0px;"> {
{ myCopyText }}</view>
<!-- colors：按钮背景色 copyText：复制文本字符 -->
<cc-copyBtn colors="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- colors：按钮背景色 copyText：复制文本字符 -->
<cc-copyBtn colors="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
</view>
</template>
<script>
export default {
data() {
return {
myCopyText: "这是复制文本, 复制文本插件，支持全端文本复制插件"
}
},
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>