uni-app中picker组件“确定”和“取消”文字的修改
发布时间:2020-12-14 19:06:11 所属栏目:资源 来源:网络整理
导读:本文为uniapp中picker组件“确定”和“取消”文字的修改的教程,包括颜色和文字,需要清楚的是,颜色在H5和微信小程序下非常容易修改,但是“确定”和“取消”文字是无法修改的,因为在uniapp中这些都是写死在uniapp源码中的,目前没有找到更好的方式去修改
本文为uniapp中picker组件“确定”和“取消”文字的修改的教程,包括颜色和文字,需要清楚的是,颜色在H5和微信小程序下非常容易修改,但是“确定”和“取消”文字是无法修改的,因为在uniapp中这些都是写死在uniapp源码中的,目前没有找到更好的方式去修改! 前言首先需要确定的几点 * 在uniapp中picker组件是webview(无论是小程序还是APP,h5是dom) * 需要清楚自己需要修改的是什么版本的,H5和APP以及小程序不一样 * 是需要修改文字还是颜色 * 没有源码阅读能力者请谨慎操作 H5修改颜色非常方面,但是修改文字目前只能改uniapp源码 * 修改文字,找到你安装HBuilderX的目录 D:Program FilesHBuilderXpluginsuniapp-clinode_modules@dcloudiouni-h5srcplatformsh5viewcomponentspickerindex.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中550-558行代码中
.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
float: left;
color: #888;
}
.uni-picker-action-confirm {
float: right;
#007aff;
}
uni-picker .uni-picker-action-confirm{#FF725C;}
App和小程序在app和小程序中 H5版本的修改方法全部失效
// 在D:Program FilesHBuilderXpluginsweapp-toolstemplatecommon__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
}
}
},
|