Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x-input的slot="label"被占用后,group组件中的labelWidth、labelMarginRight失效问题 #918

Closed
zqyadam opened this issue Feb 14, 2017 · 3 comments

Comments

@zqyadam
Copy link

zqyadam commented Feb 14, 2017

vux@2.1.0-rc48

在x-input内使用slot="label"占用label插槽后,group组件中的labelWidth、labelMarginRight、textAlign属性不起作用
例如:

<group labelWidth="5em" labelMarginRight="1em" labelAlign="left" gutter="8px">
          <x-input type="email" is-type="email" ref="email">
            <i class="iconfont icon-email" slot="label">邮箱</i>
          </x-input>
          <x-input type="text" :show-clear="true">
            <i class="iconfont icon-loginusername"  slot="label">用户名</i>
          </x-input>
</group>

这里的<i>不会按照group组件设置属性执行

看了下源码

<div class="weui_cell_hd" >
      <slot name="label">
        <label class="weui_label" v-if="title" v-html="title" :style="{width: $parent.labelWidth || (labelWidth + 'em'), textAlign: $parent.labelAlign, marginRight: $parent.labelMarginRight}"></label>
        <inline-desc v-if="inlineDesc">{{inlineDesc}}</inline-desc>
      </slot>
    </div>

源码将style放在slot里面的<label>上了,如果我要想让例子中的标签也能对齐,是不是应该将style放在<div class="weui_cell_hd" >这里?,如下:

 <div class="weui_cell_hd" :style="{width: $parent.labelWidth || (labelWidth + 'em'), textAlign: $parent.labelAlign, marginRight: $parent.labelMarginRight}">
      <slot name="label">
        <label class="weui_label" v-if="title" v-html="title"></label>
        <inline-desc v-if="inlineDesc">{{inlineDesc}}</inline-desc>
      </slot>
    </div>
@airyland
Copy link
Owner

label 是用以完全代替原来的title位置的,使用后当然就要自己处理了。

@airyland
Copy link
Owner

上面的做法也不合理,group上设置的是label的宽度,这样做的话,也影响到了inline-desc了。

@zqyadam
Copy link
Author

zqyadam commented Feb 14, 2017

确实是,好在我现在没用到inline-desc,暂时先这么解决了~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants