在vue 3中设置element-plus组件样式

k0pti3hp  于 2023-04-21  发布在  Vue.js
关注(0)|答案(2)|浏览(291)

我需要帮助与样式组件el-date-picker从元素加,不能弄清楚。
来自组件的文本输入的代码:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
<div v-if="error" class="form-error">{{ error }}</div>

文本输入组件调用:

<text-input v-model="form.sender.text" :error="form.errors.sender" class="pb-8 pr-6 w-full lg:w-1/3" label="Nadpis" :disabled="true" />

这是正确的(Which is correct):

但是,来自组件的元素加日期时间选择器的代码:

<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<el-date-picker :id="id" ref="input" v-model="selected" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" type="datetime" />
<div v-if="error" class="form-error">{{ error }}</div>

Element-plus组件调用:

<DatetimeInput v-model="form.stamp" :error="form.errors.stamp" class="pb-8 pr-6 w-full lg:w-1/3" label="Add time" />

使得:

我做错了什么?如何样式化这个,我读了element-plus网站的文档,但我不明白它,也找不到样式文件。

nvbavucw

nvbavucw1#

你需要导入CSS样式

import 'element-ui/lib/theme-chalk/index.css';
biswetbf

biswetbf2#

在我的主.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import "./app.css";

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

export default app;

我的el-date-picker x1c 0d1x

相关问题