基于Vue3+Vite+TS,二次封装element-plus业务组件【完整】分享学习
发布于 9 天前 作者 liumaogoo 73 次浏览 来自 分享

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

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

在这里使用图标选择器来举例,先看代码再述说重点。 这里是子组件的代码: <template>

<el-input v-model="value" placeholder="图标名称" readonly > <template #prepend></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)” ></el-button> </el-tooltip> </el-col> </el-row> </el-scrollbar> </el-popover> </template> </el-input>
</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](/user/height): 220px; .el-scrollbar { height: [@height](/user/height) !important; :v-deep .el-scrollbar__wrap { height: [@height](/user/height) !important; overflow: scroll; overflow-x: auto; } } .el-row { margin-bottom: 20px; display: flex; flex-wrap: wrap; height: [@height](/user/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 展示不出来了 后来用了国际化的第二种方法

回到顶部