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

InputITtem 清空内容的icon一直存在的问题 #196

Closed
MickeyMouse623 opened this issue Sep 2, 2018 · 9 comments
Closed

InputITtem 清空内容的icon一直存在的问题 #196

MickeyMouse623 opened this issue Sep 2, 2018 · 9 comments
Assignees
Labels
bug Something isn't working @Components Components related

Comments

@MickeyMouse623
Copy link

问题:InputITtem 设置 clearable 属性后, 清空内容的icon一直存在的问题

解决:

在 mand-mobile/lib/input-item/index.js 文件 406 行

_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isInputEmpty)

// 修改为
_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isInputEmpty && _vm.isInputFocus)

修改后的状态为:聚焦且有内容时显示clear,丢失焦点则display: none

@xxyan0205 xxyan0205 self-assigned this Sep 3, 2018
@xxyan0205 xxyan0205 added the bug Something isn't working label Sep 3, 2018
@xxyan0205
Copy link
Collaborator

其实是一个交互的问题,本来想在2.0里修复,既然提了就提前改了

@MickeyMouse623
Copy link
Author

那麻烦你们 InputItem 类型为 password时,增加 查看密码 的功能,这种普遍需求都没有。
尝试 配和 使用时,icon居然没有 click事件向下传递。。。

没办法了,只有弃用,期待你们2.0

@xxyan0205
Copy link
Collaborator

抱歉之前的困扰。
因为密码明文/密文的切换我们认为属于特殊表单的“业务”相关功能,并非大多数表单通用,所以考虑到代码体积(除了功能本身代码,还要增加两个图标)没有增加到InputItem内。
Icon之前的确没有将click事件传递,的确是疏忽了,最近的一个小版本迭代可修复。但是目前可以通过@click.native的方式。

@MickeyMouse623
Copy link
Author

你好,你们框架使用的是 rem 作为css单位。我现在通过 postcss 更改为 vw 了,但是根节点任然被加上了 100rem (iphone 6/7/8 375 * 675 配置),这时通过 document.documentElement.clientHeight 获取到的高度为 675 * 2。
请问,根节点指定rem怎么去除???

@xxyan0205
Copy link
Collaborator

xxyan0205 commented Sep 3, 2018

组件库中样式单位使用的是px,可根据使用情况选择是否转换rem,我们在产出包中也包含了一个vw的版本,
https://didi.github.io/mand-mobile/#/zh-CN/docs/started?anchor=%3Ccode%3EPx%3C%2Fcode%3E%20to%20%3Ccode%3ERem%3C%2Fcode%3E
https://didi.github.io/mand-mobile/#/zh-CN/docs/started?anchor=%E4%BA%A7%E5%87%BA%E5%8C%85%E7%9B%AE%E5%BD%95

100rem是否是使用了其他库?

@MickeyMouse623
Copy link
Author

{
"name": "mand-mobile",
"version": "1.5.6",
"description": "A Vue.js 2.0 Mobile UI Toolkit",
"homepage": "https://github.com/didi/mand-mobile",
"main": "lib/mand-mobile.umd.js",
"style": "lib/mand-mobile.css",
"module": "lib/mand-mobile.esm.js",
"unpkg": "lib/index.js",
"typings": "types/index.d.ts"

修改 package.json 中 main,type,module,unpkg 中的 lib 为 lib-vw 吗???

@xxyan0205
Copy link
Collaborator

如果全量引入,直接import lib-vw/mand-mobile.umd.js lib-vw/mand-mobile.css,如果是按需加载修改引入路径配置。
https://didi.github.io/mand-mobile/#/zh-CN/docs/started?anchor=%E5%BC%95%E5%85%A5

@moyus moyus closed this as completed Sep 3, 2018
@xxyan0205 xxyan0205 added the @Components Components related label Oct 10, 2018
@abozhang
Copy link

abozhang commented Aug 22, 2019

clear 这个icon不能显示,用demo中的例子代码也不能展示,但是别的icon可以显示

mand-mobile/components/icon/demo/cases/demo0.vue

@xxyan0205
Copy link
Collaborator

clear 这个icon不能显示,用demo中的例子代码也不能展示,但是别的icon可以显示

需要用检查元素看下是否有其他样式覆盖或者干扰的问题,如果没有的话用mand-mobile-issue-helper反馈下问题并提供下复现问题的demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working @Components Components related
Projects
None yet
Development

No branches or pull requests

4 participants