mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<n-button
|
|
class="edit-button"
|
|
text
|
|
:size="size"
|
|
@click="handleClick"
|
|
:depth="depth"
|
|
>
|
|
<template #icon>
|
|
<n-icon size="14">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 -16 544 560">
|
|
<rect
|
|
x="128"
|
|
y="128"
|
|
width="336"
|
|
height="336"
|
|
rx="57"
|
|
ry="57"
|
|
style="
|
|
fill: none;
|
|
stroke: currentcolor;
|
|
stroke-linejoin: round;
|
|
stroke-width: 32px;
|
|
"
|
|
></rect>
|
|
<path
|
|
d="M383.5,128l.5-24a56.16,56.16,0,0,0-56-56H112a64.19,64.19,0,0,0-64,64V328a56.16,56.16,0,0,0,56,56h24"
|
|
style="
|
|
fill: none;
|
|
stroke: currentcolor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 32px;
|
|
"
|
|
></path>
|
|
</svg>
|
|
</n-icon>
|
|
</template>
|
|
</n-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
export default {
|
|
name: 'CopyCodeButton',
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
successText: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
text: Boolean,
|
|
size: String,
|
|
depth: String
|
|
},
|
|
setup (props) {
|
|
const message = useMessage()
|
|
return {
|
|
handleClick () {
|
|
navigator.clipboard.writeText(props.code).then(() => {
|
|
message.success(props.successText)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|