search

sonofmagic / weapp-tailwindcss

weapp-tailwindcss - bring tailwindcss to weapp ! 把 tailwindcss 原子化思想带入小程序开发吧 ! weapp-vite 把现代化的开发模式带入小程序开发
https://weapp-tw.icebreaker.top
MIT License
1.2k stars 87 forks source link

virtualHost 虚拟节点 会导致 tailwindcss 的class未生效, 名称里也没有小程序的下划下, 见截图 #228

Closed gaokun closed 12 months ago

gaokun commented 1 year ago

期望行为(可选) 期望mt-[28px] 能正常生效

屏幕截图(可选) image

运行环境

Additional context n-image是自定义的组件, 里面没有用view包装

image

sonofmagic commented 1 year ago

附录 dist 里的 wxml:

<image mode="{{a}}" src="{{b}}" style="{{c + ';' + virtualHostStyle}}" bindload="{{d}}" class="{{[virtualHostClass]}}"/>
sonofmagic commented 1 year ago

感觉结果 wxml 和图上的 vue 组件对不上啊，我没有复现这个问题，有完整的 vue 组件代码提供嘛？

gaokun commented 1 year ago

n-image

<template>
  <image :mode="mode ?? 'widthFix'" :src="src" :style="styles" @load="onLoad" />
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue';

const props = defineProps<{
  mode?: string;
  src: string;
  style?: object;
}>();

const rect = reactive({
  width: 0,
  height: 0,
});

const styles = computed(() => ({
  width: rect.width + 'rpx',
  height: rect.height + 'rpx',
  ...props.style,
}));

function onLoad(event) {
  const { detail } = event;
  rect.width = detail.width;
  rect.height = detail.height;
}
</script>

<script lang="ts">
import BaseComp from '../base/BaseComp';
export default {
  name: 'NImage',
  mixins: [BaseComp],
};
</script>

BaseComp

export default {
  options: {
    // multipleSlot: true,
    // styleIsolation: 'isolated',
    // addCglobalClass: true,
    virtualHost: true,
  },
};
sonofmagic commented 1 year ago

看上去是 virtualHost 配置项导致的，我在复现的时候，发现我传入 class prop ，在最终的 wxml 调试器上全部丢失了 怀疑是 virtualHost 的问题

已经使用了最新了 uni vite 3 和 微信开发者工具。

复现示例详见: https://github.com/sonofmagic/weapp-tailwindcss/blob/main/demo/uni-app-vue3-vite/src/components/Issue228.vue

sonofmagic commented 12 months ago

add support in 2.8.3