chore: using useTNodeJSX to render content

src/col/col.tsx

@@ -1,16 +1,20 @@
 import { computed, defineComponent, CSSProperties, inject } from 'vue';
 import { convertUnit } from '../shared';
-import ColProps from './props';
+import props from './props';
 import config from '../config';
 import { rowInjectionKey } from '../row/constants';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-col`;
 
 export default defineComponent({
   name,
-  props: ColProps,
-  setup(props, { slots }) {
+  props,
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+    const componentName = usePrefixClass('col');
     const { gutter } = inject(rowInjectionKey);
 
     // 设置col gutter style
@@ -27,20 +31,20 @@ export default defineComponent({
 
     // 设置col class
     const colClass = computed(() => {
-      let colClass = `${prefix}-col`;
+      let colClass = componentName.value;
       if (props.offset) {
-        colClass += ` ${prefix}-col--offset-${props.offset}`;
+        colClass += ` ${componentName.value}--offset-${props.offset}`;
       }
       if (props.span) {
-        colClass += ` ${prefix}-col--${props.span}`;
+        colClass += ` ${componentName.value}--${props.span}`;
       }
       return colClass;
     });
 
     return () => {
       return (
         <div class={colClass.value} style={style.value}>
-          {slots.default?.()}
+          {renderTNodeJSX('default')}
         </div>
       );
     };

src/col/demos/mobile.vue

@@ -15,8 +15,11 @@
 import BaseDemo from './base.vue';
 import OffsetDemo from './offset.vue';
 </script>
-<style scoped>
+
+<style lang="less" scoped>
 .tdesign-mobile-demo {
   background-color: #fff;
+  min-height: 100%;
+  box-sizing: border-box;
 }
 </style>

src/col/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/row/row.tsx

@@ -1,16 +1,21 @@
 import { computed, defineComponent, CSSProperties, provide } from 'vue';
 import { convertUnit } from '../shared';
-import RowProps from './props';
+import props from './props';
 import config from '../config';
 import { rowInjectionKey } from './constants';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-row`;
 
 export default defineComponent({
   name,
-  props: RowProps,
-  setup(props, { slots }) {
+  props,
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+    const componentName = usePrefixClass('row');
+
     // row gutter style
     const style = computed(() => {
       const styles: CSSProperties = {};
@@ -30,8 +35,8 @@ export default defineComponent({
 
     return () => {
       return (
-        <div class={`${prefix}-row`} style={style.value}>
-          {slots.default?.()}
+        <div class={componentName.value} style={style.value}>
+          {renderTNodeJSX('default')}
         </div>
       );
     };

src/row/style/css.js

@@ -0,0 +1 @@
+import './index.css';