1

我想在 VueJs 项目中包含Vue-Select 。

我正在实现一个 WebPack 配置，它为我在这个项目中的每个页面导出一个vendors.js文件和一个。page.js

现在 Vue-Select 是高度可参数化的，我想将这些设置保存在一个文件中，以便可以在我的所有页面和组件中使用它。

对于组件参数化，我在每个包含以下内容的组件中使用类似的东西Vue-Select：

    import vSelect from 'vue-select'
    import 'vue-select/dist/vue-select.css';

    vSelect.props.components.default = () => ({
        OpenIndicator: {
            render: createElement => createElement('span', { class: 'select-caret' }),
        },
    });
    Vue.component(vSelect)

    export default {
        components: {
            vSelect //I don't know why i have to include this aswell. 
                    //Vue.component(vSelect) or Vue.use(vSelect) shouldn't be enough?
        },
    }

我使用它的组件中的这个自定义样式

<style>
  span.select-caret {
        width: 14px;
    }

        span.select-caret::after {
            content: ' ';
            border-color: #888 transparent transparent transparent;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            height: 0;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
            position: absolute;
            top: 50%;
            width: 0;
        }
</style>

有没有办法将所有这些添加到一个文件中，并且只import在需要的组件中使用这个新的Vue-Select？

4

1 回答 1

0

这比我想象的要简单得多。

我将所有内容添加Script到Style一个新.vue文件中并将其包含在内！

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'
    import 'vue-select/dist/vue-select.css';

    // Set the components prop default to return our fresh components
    vSelect.props.components.default = () => ({
        //Deselect: {
        //    render: createElement => createElement('span', '❌'),
        //},
        OpenIndicator: {
            render: createElement => createElement('span', { class: 'select-caret' }),
        },
    });

    // Register the component
    Vue.component(vSelect)

    //!!! ===== This is really important ==== !!!//
    export default vSelect
</script>

<style>

    .vs__dropdown-toggle {
        border-radius: 0;
        background: #fff;
        padding: 3px 0
    }
</style>

在我的组件中，我只是import从这个新文件而不是原始库中使用。

import vSelect from '../Config/VueSelect.vue'

于 2019-12-05T16:52:46.133 回答