请选择 进入手机版 | 继续访问电脑版

[App引擎] avm的v-if 不同的位置渲染的结果有问题

[复制链接]
忽上忽下 发表于 2022-1-19 11:27:48
本帖最后由 忽上忽下 于 2022-1-21 13:55 编辑

avm的v-if 不同的位置渲染的结果有问题

微信图片_20220119112434.png

v-if 是放在组件内部的, 在最外层使用v-if 编译后是有问题的,使用v-show 是没有问题的


这个是组件代码
  1. <template>
  2.         <view v-if="this.props.show_alert == 'true'" class="m-alert-page m-alert-flex-middle">
  3.                 <view v-if="this.props.show_alert == 'true'" class="m-alert-content">
  4.                         <view class=" m-alert-flex-middle m-alert-flex-column">
  5.                                 <text
  6.                                         :class="'m-alert-title ' + this.fontm()"
  7.                                         :style="`color:${this.props['title-color'] || '#000'};font-size:${this.props['title-size'] || 15}px;`">
  8.                                         {{  this.props.title }}
  9.                                 </text>
  10.                                 <text
  11.                                         class="m-alert-msg"
  12.                                         :style="`color:${this.props['content-color'] || '#000'};font-size:${this.props['content-size'] || 10}px;`">
  13.                                         {{  this.props.content }}
  14.                                 </text>
  15.                         </view>
  16.                         <view class="m-alert-buttons m-alert-disflex">
  17.                                 <button
  18.                                         class="m-alert-button m-alert-right-bottom-radius"
  19.                                         @click="confirm"
  20.                                         :style="`color:${this.props['button-color'] || '#999'};font-size:${this.props['button-size'] || 13}px;`">
  21.                                         确定
  22.                                 </button>
  23.                         </view>
  24.                 </view>
  25.         </view>
  26. </template>
  27. <style scoped>
  28. /* 去除微信小程序 按钮边框的情况 */
  29. button::after {
  30.         border: none;
  31. }
  32. .m-alert-right-line {
  33.         border-right: 0.5px solid #eee;
  34. }
  35. .m-alert-right-bottom-radius {
  36.         border-radius: 0 0 16px 0;
  37.         border: 0;
  38. }
  39. .m-alert-left-bottom-radius {
  40.         border-radius: 0 0 0 16px;
  41.         border-top: 0;
  42.         border-left: 0;
  43.         border-bottom: 0;
  44. }
  45. .m-alert-button {
  46.         flex: 1;
  47.         height: 100%;
  48.         background-color: #fff;
  49. }
  50. .m-alert-buttons {
  51.         border-top: 0.5px solid #eeeeee;
  52.         height: 50px;
  53. }
  54. .m-alert-disflex {
  55.         flex-flow: row;
  56.         align-items: flex-start;
  57.         justify-content: flex-start;
  58.         align-content: flex-start;
  59. }
  60. .m-alert-page {
  61.         width: 100%;
  62.         height: 100%;
  63.         position: absolute;
  64.         left: 0;
  65.         top: 0;
  66.         background: rgba(0, 0, 0, 0.5);
  67.         z-index: 999999;
  68. }
  69. .m-alert-flex-middle {
  70.         align-items: center;
  71.         justify-content: center;
  72.         text-align: center;
  73. }
  74. .m-alert-content {
  75.         background: #fff;
  76.         min-width: 60%;
  77.         max-width: 75%;
  78.         min-height: 100px;
  79.         border-radius: 16px;
  80. }
  81. .m-alert-title {
  82.         padding-top: 24px;
  83.         padding-bottom: 12px;
  84. }
  85. .m-alert-msg {
  86.         padding-left: 20px;
  87.         padding-right: 20px;
  88.         padding-bottom: 20px;
  89.         text-align: center;
  90. }
  91. .m-alert-flex-column {
  92.         flex-flow: column;
  93. }
  94. </style>

  95. <script>
  96. export default {
  97.         name: "m-alert",
  98.         props: {
  99.                 title: String,
  100.                 content: String,
  101.                 "font-m": Boolean,
  102.                 "title-size": Number,
  103.                 "content-size": Number,
  104.                 "button-size": Number,
  105.                 "title-color": String,
  106.                 "content-color": String,
  107.                 "button-color": String,
  108.         },
  109.         installed() {
  110.                 console.log(`${this.props.show_alert}   |------->来自[  ]`)
  111.                 //like created
  112.         },
  113.         data() {
  114.                 return {}
  115.         },
  116.         methods: {
  117.                 confirm() {
  118.                         this.fire("confirm", {})
  119.                 },
  120.                 fontm() {
  121.                         let boolean = this.props["font-m"].toString()
  122.                         if (boolean == "true") {
  123.                                 return "font-m"
  124.                         }
  125.                 },
  126.         },
  127. }
  128. </script>
复制代码


这个是页面代码,可能页面代码中的引入代码位置需要做个调整
  1. <template>
  2.         <view class="page">
  3.                 <m-alert
  4.                         :show_alert="show_alert"
  5.                         title="测试"
  6.                         content="这是测试内容,仅供查看"
  7.                         :font-m="true"
  8.                         title-size="20"
  9.                         content-size="13"
  10.                         button-size="15"
  11.                         title-color="#f00"
  12.                         content-color="#ff0"
  13.                         button-color="#c87"
  14.                         @confirm="confirm"
  15.                 />
  16.         </view>
  17. </template>
  18. <script>
  19. import Malert from "../../components/xx_avm_c/m-alert/m-alert.stml"
  20. export default {
  21.         name: "test",
  22.         apiready() {},
  23.         data() {
  24.                 return {
  25.                         show_alert:false
  26.                 }
  27.         },
  28.         methods: {
  29.                 confirm(){
  30.                         console.log(`${ 123 }   |------->来自[  ]`);
  31.                         this.data.show_alert = false
  32.                 }
  33.         },
  34. }
  35. </script>
  36. <style>
  37. .page {
  38.         height: 100%;
  39. }
  40. </style>
复制代码


3条回复

技术支持-F 管理员 26194Y币
已反馈给相关技术解答
杨永安 管理员 585Y币
本帖最后由 杨永安 于 2022-1-21 18:01 编辑

根节点出现条件渲染,可以先使用 三元表达式 来表达:
  1. <template>
  2.     {abc?<text>123</text>:<text>456</text>}
  3. </template>
复制代码
Vue 部分版本中也不推荐在根节点使用 v-if :  
https://www.**.**question/387469250
https://www.**.**gloxing/p/7529521.html

具体是否需要兼容,进一步评估确认中。





忽上忽下 业余车手 4002Y币
我操,大佬牛逼,给出的解决办法一针见血
杨永安 · 2022-1-21 17:20根节点出现条件渲染,可以先使用 三元表达式 来表达:
Vue 部分版本中也不推荐在根节点使用 v-if :  
https://www.**.**question/387469250
您需要登录后才可以回帖 登录

本版积分规则