editName.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view class="page">
  3. <view class="inp">
  4. <view class="">
  5. <u--input placeholder="请输入内容" border="none" v-model="name" @confirm='changename'></u--input>
  6. </view>
  7. <text style="color: rgba(34, 34, 34, 0.3);">{{name.length}}</text>
  8. </view>
  9. <view class="prompt">
  10. {{i18n.prompt}}
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. name: '张三'
  19. }
  20. },
  21. onLoad(option) {
  22. this.name = option.name
  23. },
  24. computed: {
  25. i18n() {
  26. return this.$t('index')
  27. }
  28. },
  29. mounted() {
  30. uni.setNavigationBarTitle({
  31. title: this.i18n.editNextname
  32. })
  33. },
  34. methods: {
  35. changename(){
  36. const eventChannel = this.getOpenerEventChannel();
  37. eventChannel.emit("getname", this.name);
  38. uni.navigateBack()
  39. }
  40. }
  41. }
  42. </script>
  43. <style lang="scss" scoped>
  44. .page {
  45. padding: 20rpx 24rpx;
  46. .inp{
  47. background-color: #fff;
  48. border-radius: 16rpx;
  49. height: 96rpx;
  50. display: flex;
  51. justify-content: space-between;
  52. padding: 0 20px;
  53. align-items: center;
  54. }
  55. }
  56. .prompt {
  57. margin-top: 16rpx;
  58. font-size: 26rpx;
  59. color: rgba(34, 34, 34, 0.6);
  60. }
  61. </style>