<template><input class="dade-input" style="width: 100%;" :type="type" :placeholder="placeholder"/>
</template><script setup>import { defineProps } from 'vue';// 定义 propsconst props = defineProps({placeholder: {type: String,default: ''},type:{type: String,default: 'text' }});
</script><style scoped>.dade-input{border: none;outline: none;padding: 4px 8px;border: 1px solid transparent;margin: 2px;}.dade-input:hover {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 1.5px 0 #1ab362c7;}.dade-input:focus {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 3px 0 #1ab362c7;}
</style>

全局注册

import './assets/main.css'
import naive from 'naive-ui'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dadeInput from './common/dadeInput.vue'const app = createApp(App)
app.use(naive)
app.use(router)
// 使用 app.component() 注册全局组件
app.component('dade-input', dadeInput)app.mount('#app')

使用

<dade-input type="text" placeholder="大得"></dade-input>