csdn里边有许多使用教程,写这篇文章的主要目的是下次自己用的时候找起来更方便。
话不多比,直接开始
第一步:安装(我使用的是npm)
npm install element-plus --save
第二步:引入(我是在main.js里边引入)
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus)
app.use(router);
app.mount('#app');
第三步:在views里边使用(官方代码)
<template>
<el-radio-group v-model="size" label="size control" size="small">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
</el-radio-group>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
:size="size"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const shortcuts = [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: 'A week ago',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
const disabledDate = (time: Date) => {
return time.getTime() > Date.now()
}
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
话不多比,结束。
如果想要自己对官网的案例进行修改,我是打开F12打开浏览器的开发者工具,一点一点去找class名,然后再自己的vue里边一点点去重写样式(注意,先看官方文档有没有这方面的属性,没有在自己动手)。
具体的,我也说不明白,毕竟