登录
登录 注册新账号
注册
已有账号登录
基于Vue3+Vite+TS,二次封装element-plus业务组件【完整】分享学习
原动力 阅读 673 次
1月12日发布

Downlaod: 基于Vue3+Vite+TS,二次封装element-plus业务组件

在Vue3+element-plus中,封装组件并使父子组件互相传

在这里使用图标选择器来举例,先看代码再述说重点。
这里是子组件的代码:
<template>
<div>
<el-input
v-model="value"
placeholder="图标名称"
readonly
>
<template #prepend><i :class="value"></i></template>
<template #append>
<el-popover
placement="bottom"
:width="220"
trigger="click"
v-model:visible="visible"
>
<template #reference>
<el-button>选择图标</el-button>
</template>
<el-scrollbar
:native="false"
wrapStyle=""
viewClass=""
viewStyle=""
:noresize="false"
tag="section"
>
<el-row class="el-row">
<el-col
v-for="(item,index) in icons"
:key=index
:span="6"
>
<el-tooltip
effect="light"
:content="item"
placement="bottom-start"
:open-delay="1000"
>
<el-button
class="change-box"
click="selectIcon(item)"
><i :class="item"></i></el-button>
</el-tooltip>
</el-col>
</el-row>
</el-scrollbar>
</el-popover>
</template>
</el-input>
</div></template>
<script>import "font-awesome/scss/font-awesome.scss";import { watch, ref, getCurrentInstance } from "vue";export default {
props: {
icon: String,
},
emits: ["update:icon"],
setup(props, { emit }) {
const { proxy: that } = getCurrentInstance();
const value = ref(null);
const visible = ref(false);
const icons = [
"fa fa-address-book",
"fa fa-address-book-o",
"fa fa-address-card",
"fa fa-address-card-o",
"fa fa-adjust",
"fa fa-american-sign-language-interpreting",
"fa fa-anchor",
];

    watch(props, () => {
        that.value = props.icon;
    });
    function selectIcon(icon) {
        that.visible = false;
        that.value = icon;
        emit("update:icon", icon);
    }
    return {
        value,
        visible,
        icons,
        selectIcon,
    };
},

};</script>
<style lang="less" scoped>
height: 220px;
.el-scrollbar {
height: height !important;
:v-deep .el-scrollbar__wrap {
height: height !important;
overflow: scroll;
overflow-x: auto;
}
}
.el-row {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
height: height !important;
}
.change-box {
width: 50px !important;
margin-bottom: 5px;
}</style>
这里是父组件代码:<icon-picker v-model:icon="form.icon"></icon-picker>import IconPicker from "/components/IconPicker";export default {
components: {
IconPicker,
},
//code….
}

在子组件里props是接收父组件传来的值,在父组件中v-model:icon的icon和子组件props里icon起到对应关系,这样关联起来才互相传值;在子组件用watch来监听父组件传来的值变化并更新当前组件的变量;子组件里的emit是用来更新父组件变量值。顺便说下样式里:v-deep是用来代替/deep/的。

element-plus 分页组件汉化

版本1.0.2-beta.71,今天开发分页的时候发现分页组件是英文的 ,原来element-plus 默认设置的语言是英语,看了网上的答案引用 import locale from '
element-plus/lib/locale/lang/zh-cn' // element-plus createApp(App).use(ElementPlus, { locale }).mount('#app') ,试了下无效!后来又重复尝试了好多个版本某些版本有效果了 但是分页组件报错提示找不到ELPAGAINATION 展示不出来了 后来用了国际化的第二种方法