目录
1、使用element-plus框架
2、安装:
3、引用:
4、开发疑问+解答
1、使用element-plus框架
官方组件库:
Button 按钮 | Element Plus (gitee.io)
2、安装:
3、引用:
import { createApp } from 'vue'
// 全局引用
import ElementPlus from 'element-plus';
// 引用所有样式
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
// 使用
app.use(ElementPlus)
app.mount('#app')
配置引入
- 只能引入插件的?
css ?文件,但是?base ?样式和icon ?还需要手动引入 - 下载插件:?
npm install babel-plugin-import -D - 配置?
babel.config.js
?babel.config.js 文件内容如下:
module.exports = {
presets: ['@vue/app'],
plugins: [
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
name = name.slice(3)
return `element-plus/packages/theme-chalk/src/${name}.scss`;
},
},
],
],
}
4、开发疑问+解答
1、dark
<script lang="ts" setup>
import { isDark } from '~/composables/dark'
</script>
<template>
<div class="flex">
<el-button color="#626aef" :dark="isDark">Default</el-button>
</div>
</template>
:dark="isDark"? 目前调研此为错误
2、引用示例
- 注意script写法,v-model内值,定义时加入ref
<template>
<el-cascader :options="options" />
</template>
<script lang="ts" setup>
const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'message-box',
label: 'MessageBox',
},
],
},
],
},
]
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const checked1 = ref(true)
const checked2 = ref(false)
</script>
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A" />
<el-checkbox label="Option B" />
<el-checkbox label="Option C" />
<el-checkbox label="disabled" disabled />
<el-checkbox label="selected and disabled" disabled />
</el-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checkList = ref(['selected and disabled', 'Option A'])
</script>
<template>
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>Check all</el-checkbox
>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox v-for="city in cities" :key="city" :label="city">{{
city
}}</el-checkbox>
</el-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
const handleCheckAllChange = (val: boolean) => {
checkedCities.value = val ? cities : []
isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
const checkedCount = value.length
checkAll.value = checkedCount === cities.length
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>
扩展好文章?
vue3使用element-plus搭建后台管理系统---菜单管理_搬砖狗-小强的博客-CSDN博客
|