テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステムをアプリケーション全体として構築していましたが、小さな変更や小さな機能の増加により全体のロジックが変更されることがよくありました。一本の髪の毛によって全身が影響を受けてしまいます。
コンポーネント開発により、個別の開発と保守を効果的に実現でき、それらを自由に組み合わせることができます。開発効率を大幅に向上させ、メンテナンスコストを削減します。コンポーネント化は、複雑なビジネス シナリオや製品を何度も繰り返した後のフロントエンド アプリケーションにとって唯一の方法です。コンポーネント化は、表面的に見えるモジュールを分解して分離するだけではなく、ビジネス特性と組み合わせたモジュール分割戦略、モジュール間の相互作用方法、システムの構築など、コンポーネント化をサポートするための裏での作業がまだ多くあります。
今日紹介するコンポーネントはカスタムの美しい全文コピー テキスト プラグインで、全文テキスト コピー プラグインをサポートし、コピー ボタンの色を設定できます。ソース コードのダウンロード アドレスが添付されています: https:/ /ext.dcloud.net.cn/plugin?id =13495
レンダリングは次のとおりです。
# cc-copyBtn
＃＃＃＃ 説明書
「」「使い方」
<!-- 色: ボタンの背景色 copyText: テキスト文字をコピー -->
<cc-copyBtn color="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- 色: ボタンの背景色 copyText: テキスト文字をコピー -->
<cc-copyBtn color="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
「」
#### HTML コード実装部分
```html
<テンプレート>
<ビュークラス="コンテンツ">
<view style="margin: 20px 0px;"> { { myCopyText }}</view>
<!-- 色: ボタンの背景色 copyText: テキスト文字をコピー -->
<cc-copyBtn color="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- 色: ボタンの背景色 copyText: テキスト文字をコピー -->
<cc-copyBtn color="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
</ビュー>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
データ（） {
戻る {
myCopyText: "これはテキストのコピー、テキストのコピー プラグイン、全文コピー プラグインのサポートです"
}
}、
onLoad(オプション) {
}、
メソッド: {
}
}
</script>
<style lang="scss" スコープ>
ページ {
背景色: #F8F8F8;
}
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
項目を揃える: 中央;
整列項目: 中央;
}
</スタイル>
「」