Question

我想将按钮的最小宽度设置为一个特定的值，该值将是呈现给HTML DOM后的宽度；因此，当单击该按钮并且微调器出现在中心时，其宽度保持不变。

在VanillaJS中，我们可以像element.style.minWidth一样进行访问，但是在VueJS组件中如何在不使用$ refs的情况下使用它呢？

我的Vue组件

Vue.component('submit-btn', {
    template: `
        <button v-on="clickListeners" class="btn btn-sm btn-primary font-blinker text-center" :style="styling">
            <span v-if="loading">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            </span>
            <span v-else>{{title}}</span>
        </button>
    `,
    data: function () {
        return {
            minWidth: '' 
        }
    },
    props: ['title', 'loading'],
    computed: {
        clickListeners: function () {
            var vm = this
              return Object.assign({},
                this.$listeners,
                {
                    click: function (event) {
                        vm.$emit('click', event)
                    }
                }
            )
        },
        styling: function () {
            return {
                minWidth: this.minWidth
            }
        }
    },
    created() {
        this.minWidth = this.$em.style.minWidth // Want to access width here and then set styling.
    }
})

Answer 1

使用vue's ref directive.

可以完成Vue 2.0的特定方式

查看以下JSFiddle示例：https://jsfiddle.net/zt4j5o2f/

您需要做的就是将ref="mybutton"属性添加到按钮，然后您应该可以使用this.$refs.mybutton

来访问它

如何在vue js中访问组件样式数组？

1 个答案: