基於tauri+vite4+pinia2跨端後臺管理系統應用實例TauriAdmin。 tauri-admin 基於最新跨端技術 Tauri Rust webview2 整合 Vite4 構建桌面端通用後臺管理解決方案。搭載輕量級ve-plus組件庫、支持多視窗切換管理、vue-i18n多語言包、動 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。 組件化對於任何一個業務場景複雜的前端應用以及經過多次迭代之後的產品來說都是必經之路。組件化要做的不僅僅是錶面上看到的模塊拆分解耦，其背後還有很多工作來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的交互方式和構建系統等等
今天給大家介紹的一款組件是自定義精美全端複製文本插件，支持全端文本複製插件 可設置複製按鈕顏色 ；附源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13495
效果圖如下:
cc-copyBtn
使用方法
<!-- colors：按鈕背景色 copyText：複製文本字元 -->
<cc-copyBtn colors="#fa436a" :copyText="myCopyText"></cc-copyBtn>
<!-- colors：按鈕背景色 copyText：複製文本字元 -->
<cc-copyBtn colors="#f37b1d" :copyText="myCopyText"></cc-copyBtn>
HTML代碼實現部分
<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>
