|
[App引擎]
avm的v-if 不同的位置渲染的结果有问题
[复制链接]
本帖最后由 忽上忽下 于 2022-1-21 13:55 编辑
avm的v-if 不同的位置渲染的结果有问题
v-if 是放在组件内部的, 在最外层使用v-if 编译后是有问题的,使用v-show 是没有问题的
这个是组件代码
- <template>
- <view v-if="this.props.show_alert == 'true'" class="m-alert-page m-alert-flex-middle">
- <view v-if="this.props.show_alert == 'true'" class="m-alert-content">
- <view class=" m-alert-flex-middle m-alert-flex-column">
- <text
- :class="'m-alert-title ' + this.fontm()"
- :style="`color:${this.props['title-color'] || '#000'};font-size:${this.props['title-size'] || 15}px;`">
- {{ this.props.title }}
- </text>
- <text
- class="m-alert-msg"
- :style="`color:${this.props['content-color'] || '#000'};font-size:${this.props['content-size'] || 10}px;`">
- {{ this.props.content }}
- </text>
- </view>
- <view class="m-alert-buttons m-alert-disflex">
- <button
- class="m-alert-button m-alert-right-bottom-radius"
- @click="confirm"
- :style="`color:${this.props['button-color'] || '#999'};font-size:${this.props['button-size'] || 13}px;`">
- 确定
- </button>
- </view>
- </view>
- </view>
- </template>
- <style scoped>
- /* 去除微信小程序 按钮边框的情况 */
- button::after {
- border: none;
- }
- .m-alert-right-line {
- border-right: 0.5px solid #eee;
- }
- .m-alert-right-bottom-radius {
- border-radius: 0 0 16px 0;
- border: 0;
- }
- .m-alert-left-bottom-radius {
- border-radius: 0 0 0 16px;
- border-top: 0;
- border-left: 0;
- border-bottom: 0;
- }
- .m-alert-button {
- flex: 1;
- height: 100%;
- background-color: #fff;
- }
- .m-alert-buttons {
- border-top: 0.5px solid #eeeeee;
- height: 50px;
- }
- .m-alert-disflex {
- flex-flow: row;
- align-items: flex-start;
- justify-content: flex-start;
- align-content: flex-start;
- }
- .m-alert-page {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, 0.5);
- z-index: 999999;
- }
- .m-alert-flex-middle {
- align-items: center;
- justify-content: center;
- text-align: center;
- }
- .m-alert-content {
- background: #fff;
- min-width: 60%;
- max-width: 75%;
- min-height: 100px;
- border-radius: 16px;
- }
- .m-alert-title {
- padding-top: 24px;
- padding-bottom: 12px;
- }
- .m-alert-msg {
- padding-left: 20px;
- padding-right: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
- .m-alert-flex-column {
- flex-flow: column;
- }
- </style>
- <script>
- export default {
- name: "m-alert",
- props: {
- title: String,
- content: String,
- "font-m": Boolean,
- "title-size": Number,
- "content-size": Number,
- "button-size": Number,
- "title-color": String,
- "content-color": String,
- "button-color": String,
- },
- installed() {
- console.log(`${this.props.show_alert} |------->来自[ ]`)
- //like created
- },
- data() {
- return {}
- },
- methods: {
- confirm() {
- this.fire("confirm", {})
- },
- fontm() {
- let boolean = this.props["font-m"].toString()
- if (boolean == "true") {
- return "font-m"
- }
- },
- },
- }
- </script>
复制代码
这个是页面代码,可能页面代码中的引入代码位置需要做个调整
- <template>
- <view class="page">
- <m-alert
- :show_alert="show_alert"
- title="测试"
- content="这是测试内容,仅供查看"
- :font-m="true"
- title-size="20"
- content-size="13"
- button-size="15"
- title-color="#f00"
- content-color="#ff0"
- button-color="#c87"
- @confirm="confirm"
- />
- </view>
- </template>
- <script>
- import Malert from "../../components/xx_avm_c/m-alert/m-alert.stml"
- export default {
- name: "test",
- apiready() {},
- data() {
- return {
- show_alert:false
- }
- },
- methods: {
- confirm(){
- console.log(`${ 123 } |------->来自[ ]`);
- this.data.show_alert = false
- }
- },
- }
- </script>
- <style>
- .page {
- height: 100%;
- }
- </style>
复制代码
|
|