特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。
版权归作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,获得授权的记录会放在本文的最后。
在 第五篇文章 中,两条 tips 让你学习到了自适应组件的概念,以及怎么通过使用 v-bind
和 v-on
来代理 props 和 events,继而创建自适应组件。
现在是时候实践一下了。在此之前,要问一下,你知道 vue-multiselect 这个第三方库吗?这是一个很棒的,由 Damian Dulisz 写的选择器组件。因为其灵活和可自定义的特性,它适用于多种场景。
基于该组件文档中的 这个例子,我们一起来写一个 ImageSelect 组件。在此,我们重新定义了一些 vue-multiselect 暴露的作用域插槽:
<multiselect v-model="value" :options="options">
<template slot="singleLabel" slot-scope="{ option }">
<img class="option__image" :src="option.img" alt="Sth" />
<span class="option__desc">
<span class="option__title">{{ option.title }}</span>
</span>
</template>
<template slot="option" slot-scope="{ option }">
<img class="option__image" :src="option.img" alt="Sth" />
<span class="option__desc">
<span class="option__title">{{ option.title }}</span>
<span class="option__small">{{ option.desc }}</span>
</span>
</template>
</multiselect>
我就没有再继续深入到代码中的作用域插槽了,仅假设这些代码都能运行成功。重点是我会在这段代码的基础上创建 ImageSelect
组件。
通过上一节教程,你大概已经知道了需要使用 v-bind="$props"
和 v-on="$listeners"
去代理 props 和 events。
因此现在你要重新声明 props 来自于原始的 vue-multiselect 组件,你可以在该组件源码中的 MultiselectMixin 找到这些 props:
<template>
<multiselect v-bind="$props" v-on="$listeners">
<template slot="singleLabel" slot-scope="{ option }">
<img class="option__image" :src="option.img" alt="No Man’s Sky" />
<span class="option__desc">
<span class="option__title">{{ option.title }}</span>
</span>
</template>
<template slot="option" slot-scope="{ option }">
<img class="option__image" :src="option.img" alt="No Man’s Sky" />
<span class="option__desc">
<span class="option__title">{{ option.title }}</span>
<span class="option__small">{{ option.desc }}</span>
</span>
</template>
</multiselect>
</template>
<script>
import Multiselect from "vue-multiselect";
import MultiselectMixin from "vue-multiselect/src/multiselectMixin";
export default {
components: {
Multiselect
},
props: MultiselectMixin.props
};
</script>
下面展示如何通过传递最少的属性来使用该 ImageSelect
组件:
<template>
<ImageSelect
v-model="imageValue"
:options="imageOptions"
label="title"
track-by="title"
:show-labels="false"
/>
</template>
<script>
import ImageSelect from "./ImageSelect";
export default {
components: {
ImageSelect
},
data: () => ({
imageValue: null,
imageOptions: [
{ title: "Random img", img: "https://picsum.photos/300/150" },
{ title: "Cool image", img: "https://picsum.photos/300/151" }
]
})
};
</script>
如果你运行了这段代码,就会注意到有些地方并没有正常工作。特别是 show-labels
这个 prop,然而事实上它现在还不是一个 prop,而仅是一个 attribute,并且他们可以在组件实例属性中被访问到。
为了修复这个问题,我要用一个计算属性来合并 props 和 attributes:
<template>
<multiselect v-bind="allBindings" v-on="$listeners">
<!-- ... -->
</multiselect>
</template>
<script>
import Multiselect from "vue-multiselect";
import MultiselectMixin from "vue-multiselect/src/multiselectMixin";
export default {
components: {
Multiselect
},
props: MultiselectMixin.props,
computed: {
allBindings() {
// Need to proxify both props and attrs, for example for showLabels
return { ...this.$props, ...this.$attrs };
}
}
};
</script>
你可以在我为你准备的 这个 sandbox 上运行一下,你将会看到另外的一些自适应组件,比如像 SingleSelect
和 MultiSelect
。
Pss: 它们其中有一些 css 的技巧,我们在下一节会讲到。
你可以在线阅读这篇 原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!
结语
此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~
如果想要了解译者的更多,请查阅如下:
- 个人博客:blog.hadesz.com
- 个人 github 仓库:github.com/hadeshe93
- 个人微信公众号:搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话,分享一下给小伙伴吧~