Skip to content

Fakin's Blog

  • 首页
  • 前端
    • Vue
    • React
    • JavaScript
    • CSS
  • 技术
    • 织梦教程
  • 模板
    • 织梦模板
    • wordpress主题
  • 资源
  • 日记
  • 友链

uni-app中picker组件“确定”和“取消”文字的修改

十一月 8, 2019 by Fakin

本文为uniapp中picker组件“确定”和“取消”文字的修改的教程,包括颜色和文字,需要清楚的是,颜色在H5和微信小程序下非常容易修改,但是“确定”和“取消”文字是无法修改的,因为在uniapp中这些都是写死在uniapp源码中的,目前没有找到更好的方式去修改!

前言

首先需要确定的几点
* 在uniapp中picker组件是webview(无论是小程序还是APP,h5是dom)
* 需要清楚自己需要修改的是什么版本的,H5和APP以及小程序不一样
* 是需要修改文字还是颜色
* 没有源码阅读能力者请谨慎操作

H5

修改颜色非常方面,但是修改文字目前只能改uniapp源码
* 修改文字,找到你安装HBuilderX的目录

D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\src\platforms\h5\view\components\picker\index.vue
// D:\Program Files为你安装的HBuilderX目录
// 在index.vue中16-25行代码中

        <div
          class="uni-picker-header"
          @click.stop>
          <div
            class="uni-picker-action uni-picker-action-cancel"
            @click="_cancel">取消</div>
          <div
            class="uni-picker-action uni-picker-action-confirm"
            @click="_change">确定</div>
        </div>
  • 修改颜色,可以直接在上面的index.vue里面修改,但是这样做会带来一个问题,就是每次升级HBuilderX的时候就需要修改这个文件
// 在index.vue中550-558行代码中
.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
  float: left;
  color: #888;
}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  float: right;
  color: #007aff;
}
  • 在App.vue中修改颜色
uni-picker .uni-picker-action.uni-picker-action-confirm{color: #FF725C;}

App和小程序

在app和小程序中 H5版本的修改方法全部失效

  • 修改文字
// 在D:\Program Files\HBuilderX\plugins\weapp-tools\template\common\__uniapppicker.html
// 第 5562-5577是“取消”和“确定”的文字
}, [t._v('取消')]), e("div", {
    staticClass: "uni-picker-action uni-picker-action-confirm",
    on: {
    click: t._change
    }
}, [t._v('确定')])]), t.visible ? e("picker-view", {
    staticClass: "uni-picker-content",
    attrs: {
    value: t.valueArray
},
    on: {
    "update:value": function(i) {
        t.valueArray = i
    }
}
},
  • 修改样式
// 第14行css代码中
.uni-picker-action.uni-picker-action-cancel[data-v-1c1d4578]{float:left;color:#888} // 取消
.uni-picker-action.uni-picker-action-confirm[data-v-1c1d4578]{float:right;color:#57DBD0} //确定

注意事项

此方法在升级更新HBuilderX里面的文件就会重置,请注意再次修改,最好把自己项目需要修改的文件修改后备份

Post navigation

上一篇:

uni-app国际化

下一篇:

vue技巧【持续更新】

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注

最近文章

  • JavaScript实用工具库【持续更新】
  • vue技巧【持续更新】
  • uni-app中picker组件“确定”和“取消”文字的修改
  • uni-app国际化
  • vue-cli3.0配置scss全局变量
  • uni-app跨域设置
  • JavaScript字符串base64加密与解密
  • element ui+七牛云上传

最近评论

  • Teacher Du发表在《友情链接》
  • 火辣辣发表在《友情链接》
  • 心灵博客发表在《uni-app跨域设置》
  • 腾讯云代金券发表在《element ui+七牛云上传》
  • repostone发表在《element ui+七牛云上传》

更新日历

2019年十二月
一 二 三 四 五 六 日
« 11月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
© 2019 Fakin's Blog | WordPress Theme by SuperbThemes | 蜀ICP备16017838号-2