必備UI組件
圖標(biāo)選擇器將用到以下幾個(gè)組件：
Icon 圖標(biāo)
Button 按鈕
Message 消息提示
Dialog 對(duì)話框
組件設(shè)計(jì)
修改路由src\router\index.ts
/*
* @Author: bobokaka
* @Date: 2021-12-19 11:26:38
* @LastEditTime: 2021-12-20 21:17:12
* @LastEditors: bobokaka
* @Description: 路由
* @FilePath: \vue3-element-ui-baseline\src\router\index.ts
*/
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Container,
children: [
{
path: '/',
component: Home,
},
{
path: '/chooseIcon',
component: () => import('../views/chooseIcon/index.vue'),
},
],
},
]
const router = createRouter({
routes,
history: createWebHistory(),
})
export default router
新建src\views\chooseIcon\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 20:29:00
* @LastEditTime: 2021-12-20 21:03:47
* @LastEditors: bobokaka
* @Description: 圖標(biāo)選擇器
* @FilePath: \vue3-element-ui-baseline\src\views\chooseIcon\index.vue
-->
<template>
<div>
<choose-icon title="選擇圖標(biāo)" v-model:visiable="visiable">
選擇圖標(biāo)
</choose-icon>
</div>
</template>
<script lang="ts" setup>
import ChooseIcon from '../../components/baseline/chooseIcon/src/index.vue'
import { ref } from 'vue'
const visiable = ref(false)
</script>
<style lang="scss" scoped></style>
新增src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:15:36
* @LastEditors: Please set LastEditors
* @Description: 選擇圖標(biāo)
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">111</el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
const props = defineProps<{
//彈出框標(biāo)題
title: string
//控制彈出框的顯示與隱藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父組件的數(shù)據(jù)
emits('update:visiable', !props.visiable)
}
//拷貝一份父組件傳遞過來的visiable
//監(jiān)聽visiable的變化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//監(jiān)聽組件內(nèi)部currentVisiable的變化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped></style>
輸入地址http://localhost:8080/chooseIcon
image.png
進(jìn)一步調(diào)整：
利用vue的特性component：動(dòng)態(tài)組件的特性昧识，is參數(shù)傳什么就會(huì)生成一個(gè)對(duì)應(yīng)得標(biāo)簽医咨，比如
:is="hhh",就會(huì)生成<hhh></hhh>修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:26:57
* @LastEditors: Please set LastEditors
* @Description: 選擇圖標(biāo)
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div v-for="(item, index) in Object.keys(ElIcons)" :key="index">
<div>
<component :is="`el-icon-${toLine(item)}`"></component>
</div>
<div>{{ item }}</div>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//彈出框標(biāo)題
title: string
//控制彈出框的顯示與隱藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父組件的數(shù)據(jù)
emits('update:visiable', !props.visiable)
}
//拷貝一份父組件傳遞過來的visiable
//監(jiān)聽visiable的變化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//監(jiān)聽組件內(nèi)部currentVisiable的變化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
......
效果如下：
image.png
樣式優(yōu)化
優(yōu)化css屬性：
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:44:19
* @LastEditors: Please set LastEditors
* @Description: 選擇圖標(biāo)
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
>
<div>
<component :is="`el-icon-${toLine(item)}`"></component>
</div>
<div class="bs-wrapper__container__item__title">{{ item }}</div>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//彈出框標(biāo)題
title: string
//控制彈出框的顯示與隱藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父組件的數(shù)據(jù)
emits('update:visiable', !props.visiable)
}
//拷貝一份父組件傳遞過來的visiable
//監(jiān)聽visiable的變化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//監(jiān)聽組件內(nèi)部currentVisiable的變化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5個(gè)一行
display: flex;
flex-direction: column; //靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣布近。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //獨(dú)占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
image.png
現(xiàn)在的效果是可以不停向下滾動(dòng)炎辨，優(yōu)化成頁內(nèi)滾動(dòng)捕透，方式如下：
新建src\style\ui.scss
//修改組件庫內(nèi)部的樣式
//1.需要自定義一個(gè)類名空間
//2.瀏覽器中調(diào)試樣式
//3.調(diào)試好的類名放在這個(gè)類名中
//4.在App.vue里面引入這個(gè)文件
//5.在組件內(nèi)需要改樣式的元素的父元素加上這個(gè)類名
.bk--choose-icon-dialog-body-height {
.el-dialog__body {
height: 5rem;
overflow: scroll;
}
}
修改src\style\index.scss
@import './base.scss';
@import './ui.scss';
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 22:58:14
* @LastEditors: Please set LastEditors
* @Description: 選擇圖標(biāo)
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<div>
<div>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
</div>
<div class="bk--choose-icon-dialog-body-height">
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
>
<div>
<component
:is="`el-icon-${toLine(item)}`"
></component>
</div>
<div class="bs-wrapper__container__item__title">
{{ item }}
</div>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//彈出框標(biāo)題
title: string
//控制彈出框的顯示與隱藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父組件的數(shù)據(jù)
emits('update:visiable', !props.visiable)
}
//拷貝一份父組件傳遞過來的visiable
//監(jiān)聽visiable的變化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//監(jiān)聽組件內(nèi)部currentVisiable的變化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5個(gè)一行
display: flex;
flex-direction: column; //靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣碴萧。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //獨(dú)占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
效果如下：
image.png
這里/style/index.scss在src\main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'
import './style/index.scss'
const app = createApp(App)
//全局組件注冊(cè)乙嘀，犧牲一些性能，但方便使用
//封裝成el-icon-xxx
for (let i in Icons) {
// console.log(`i:`, i)
// console.log('Icons[i]', (Icons as any)[i])
app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}
app.use(router)
app.use(ElementPlus)
app.mount('#app')
滾動(dòng)條還可以再優(yōu)化一下：
修改src\style\ui.scss
//修改組件庫內(nèi)部的樣式
//1.需要自定義一個(gè)類名空間
//2.瀏覽器中調(diào)試樣式
//3.調(diào)試好的類名放在這個(gè)類名中
//4.在App.vue里面引入這個(gè)文件
//5.在組件內(nèi)需要改樣式的元素的父元素加上這個(gè)類名
.bk--choose-icon-dialog-body-height {
.el-dialog__body {
height: 5rem;
overflow-y: scroll;
overflow-x: auto;
}
}
image.png
利用hooks函數(shù)實(shí)現(xiàn)復(fù)制
hooks函數(shù)都是以u(píng)se開頭破喻。
src\hooks\useCopy\index.ts
import { ElMessage } from 'element-plus'
export const useCopy = (text: string) => {
//創(chuàng)建一個(gè)input輸入框
let input = document.createElement('input')
//給輸入框value賦值
input.value = text
//追加到body中
document.body.appendChild(input)
//選擇輸入框的操作
input.select()
//執(zhí)行復(fù)制操作
document.execCommand('Copy')
//刪除input輸入框的dom節(jié)點(diǎn)
document.body.removeChild(input)
//提示用戶
ElMessage.success('復(fù)制成功')
}
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-21 19:33:02
* @LastEditors: Please set LastEditors
* @Description: 選擇圖標(biāo)
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<div>
<div>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
</div>
<div class="bk--choose-icon-dialog-body-height">
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
@click="handleClickItem(item)"
>
<div>
<component
:is="`el-icon-${toLine(item)}`"
></component>
</div>
<div class="bs-wrapper__container__item__title">
{{ item }}
</div>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
import { useCopy } from '../../../../hooks/useCopy'
const props = defineProps<{
//彈出框標(biāo)題
title: string
//控制彈出框的顯示與隱藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
//點(diǎn)擊按鈕顯示彈出框
const handleClick = () => {
//需要修改父組件的數(shù)據(jù)
emits('update:visiable', !props.visiable)
}
//點(diǎn)擊圖標(biāo)
const handleClickItem = (item: string) => {
let text = `<el-icon-${toLine(item)} />`
console.log(`text:`, text)
useCopy(text)
//關(guān)閉彈框
currentVisiable.value = false
}
//拷貝一份父組件傳遞過來的visiable
//監(jiān)聽visiable的變化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//監(jiān)聽組件內(nèi)部currentVisiable的變化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5個(gè)一行
display: flex;
flex-direction: column; //靈活的項(xiàng)目將垂直顯示虎谢，正如一個(gè)列一樣。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //獨(dú)占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
功能開發(fā)完畢曹质。
