【译】Vue 的小奇技(第七篇):在 vue-multiselect 基础上创建 ImageSelect 组件

栏目: 编程语言 · 发布时间: 3个月前

来源: juejin.im

本文转载自:https://juejin.im/post/5c75ffe3f265da2ddb2972f3,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

特别声明:本文是作者Alex Jover 发布在VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,获得授权的记录会放在本文的最后。

在第五篇文章 中,两条 tips 让你学习到了自适应组件的概念,以及怎么通过使用 v-bindv-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 上运行一下,你将会看到另外的一些自适应组件,比如像 SingleSelectMultiSelect

Pss: 它们其中有一些 css 的技巧,我们在下一节会讲到。

你可以在线阅读这篇原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!

结语

此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~

如果想要了解译者的更多,请查阅如下:

  • 个人博客:blog.hadesz.com
  • 个人 github 仓库: github.com/hadeshe93
  • 个人微信公众号:搜索「程序猿何大叔」

以上所述就是小编给大家介绍的《【译】Vue 的小奇技(第七篇):在 vue-multiselect 基础上创建 ImageSelect 组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业在路上

创业在路上

罗永浩 / 中信出版集团 / 2018-9 / 58.00 元

★ 罗永浩的人生经历就是一本典型的创业宝典,对于如今的年轻人,具有可借鉴的实用价值。 ★ 还原了真实的、区别于公众形象的罗永浩。 ★ 送给创业者满满的干货: 比如“并不是所有人都适合创业。”“管控公司zui重要的三件事:找钱、找人和定战略方向。”“不要试图去补短板,一定不要自己去补自己不擅长的”等 ★ 《创业在路上》集结了2017年超长对话栏目《长谈》、罗永浩的创业分享课的......一起来看看 《创业在路上》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试