vue3sandbox/src/views/Sandpack/components/HeaderOperate.tsx

42 lines
983 B
TypeScript

import { NButton, NSelect } from 'naive-ui'
import useCodeEditor from '../hooks/codeEditor'
import { useRoute } from 'vue-router'
const options = [
{
label: 'static',
value: 'static',
},
{
label: 'vanilla',
value: 'vanilla',
},
{
label: 'vue3',
value: 'vite-vue',
},
{
label: 'react',
value: 'react',
},
]
export default defineComponent({
setup() {
const { template, saveCode } = useCodeEditor()
const { query } = useRoute()
// const type = ref('static')
return () => (
<div class="flex gap-2 h-[64px] justify-center items-center bg-white border border-[var(--border-color)] rounded-lg p-5">
<NSelect class="w-[200px]" options={options} v-model:value={template.value}></NSelect>
<NButton type="primary" class="">
</NButton>
<NButton type="primary" class="ml-auto" onClick={() => saveCode(query)}>
</NButton>
</div>
)
},
})