openjs

Appearance

剪切板 Clipboard ​

按钮模式 ​

目标元素添加"open-clip-text"属性，值是需要复制的文本，自动为元素添加点击复制事件

显示代码
html
<button class="open-btn open-btn-primary" bg open-clip-text="按钮模式">按钮模式</button>

<script setup>
    import { onMounted } from 'vue'
    import { clipboard } from '../openjs@0.1.0-beta.esm.js';

    onMounted(()=>{

        // 按钮模式
        clipboard.btn(function(res){
            // 复制成功，res.status值为true
            if(res.status){
                // res.data值为需要复制的文本信息
                alert(res.data)
            }else{
                // 复制失败，res.status值为false

            }
        });
    })
</script>
<button class="open-btn open-btn-primary" bg open-clip-text="按钮模式">按钮模式</button>

<script setup>
    import { onMounted } from 'vue'
    import { clipboard } from '../openjs@0.1.0-beta.esm.js';

    onMounted(()=>{

        // 按钮模式
        clipboard.btn(function(res){
            // 复制成功，res.status值为true
            if(res.status){
                // res.data值为需要复制的文本信息
                alert(res.data)
            }else{
                // 复制失败，res.status值为false

            }
        });
    })
</script>

文本模式 ​

函数式调用，更灵活的复制文本信息

显示代码
html
<button class="open-btn open-btn-primary" bg @click="cliptext">文本模式</button>

<script setup>
    import { onMounted } from 'vue'
    import { clipboard } from '../openjs@0.1.0-beta.esm.js';

    // 文本模式，动态复制内容
    const cliptext = function(){
        
        clipboard.text('文本模式',function(res){
            // 复制成功，res.status值为true
            if(res.status){
                // res.data值为需要复制的文本信息
                alert(res.data)
            }
            // 复制失败，res.status值为false
        });
    }

</script>
<button class="open-btn open-btn-primary" bg @click="cliptext">文本模式</button>

<script setup>
    import { onMounted } from 'vue'
    import { clipboard } from '../openjs@0.1.0-beta.esm.js';

    // 文本模式，动态复制内容
    const cliptext = function(){
        
        clipboard.text('文本模式',function(res){
            // 复制成功，res.status值为true
            if(res.status){
                // res.data值为需要复制的文本信息
                alert(res.data)
            }
            // 复制失败，res.status值为false
        });
    }

</script>