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

本文为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
            "uni-picker-action uni-picker-action-cancel"
            @click="_cancel">取消</div>
          <div
            "uni-picker-action uni-picker-action-confirm"
            "_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-action-confirm {
  float: right;
  #007aff;
}

• 在App.vue中修改颜色

uni-picker .uni-picker-action-confirm{#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",51); font-weight: 700;">on: {
    click: t._change
    }
},0);">'确定')])]),t.visible ? "picker-view",0);">"uni-picker-content",attrs: {
    value: t.valueArray
},51); font-weight: 700;">on: {
    "update:value": function(i) {
        t.valueArray = i
    }
}
},

• 修改样式