更新示例

pages/demo/basic/image.uvue

@@ -41,15 +41,47 @@
 				<cl-image src=""></cl-image>
 			</demo-item>
 
-			<demo-item :label="t('自定义')">
+			<demo-item :label="t('自定义圆角')">
+				<view class="flex flex-row">
 					<cl-image
 						:src="url"
-					:height="200"
-					:width="300"
 						:pt="{
-						className: '!rounded-none border border-solid border-surface-200 p-3'
+							inner: {
+								className: '!rounded-none'
+							}
 						}"
 					></cl-image>
+
+					<cl-image
+						:src="url"
+						:pt="{
+							className: 'ml-3',
+							inner: {
+								className: '!rounded-2xl'
+							}
+						}"
+					></cl-image>
+
+					<cl-image
+						:src="url"
+						:pt="{
+							className: 'ml-3',
+							inner: {
+								className: '!rounded-3xl'
+							}
+						}"
+					></cl-image>
+
+					<cl-image
+						:src="url"
+						:pt="{
+							className: 'ml-3',
+							inner: {
+								className: '!rounded-full'
+							}
+						}"
+					></cl-image>
+				</view>
 			</demo-item>
 		</view>
 	</cl-page>
@@ -60,5 +92,5 @@ import { ref } from "vue";
 import DemoItem from "../components/item.uvue";
 import { t } from "@/locale";
 
-const url = ref("https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png");
+const url = ref("https://unix.cool-js.com/images/demo/avatar.jpg");
 </script>

pages/demo/form/form.uvue

@@ -31,7 +31,7 @@
 						></cl-input>
 					</cl-form-item>
 
-					<cl-form-item :label="t('身高（cm）')" prop="height" required>
+					<cl-form-item :label="t('身高')" prop="height" required>
 						<cl-slider v-model="formData.height" :max="220" show-value>
 							<template #value="{ value }">
 								<cl-text
@@ -44,7 +44,7 @@
 						</cl-slider>
 					</cl-form-item>
 
-					<cl-form-item :label="t('体重（kg）')" prop="weight" required>
+					<cl-form-item :label="t('体重')" prop="weight" required>
 						<cl-slider v-model="formData.weight" :max="150" show-value>
 							<template #value="{ value }">
 								<cl-text

uni_modules/cool-ui/components/cl-image/cl-image.uvue

@@ -1,12 +1,7 @@
 <template>
 	<view
 		class="cl-image"
-		:class="[
+		:class="[pt.className]"
-			{
-				'cl-image--border': border
-			},
-			pt.className
-		]"
 		:style="{
 			width: parseRpx(width!),
 			height: parseRpx(height!)
@@ -210,7 +205,7 @@ function onTap() {
 
 <style lang="scss" scoped>
 .cl-image {
-	@apply relative flex flex-row items-center justify-center rounded-xl;
+	@apply relative flex flex-row items-center justify-center;
 
 	&__inner {
 		@apply w-full h-full rounded-xl;
@@ -218,16 +213,12 @@ function onTap() {
 
 	&__loading,
 	&__error {
-		@apply absolute h-full w-full bg-surface-200;
+		@apply absolute h-full w-full bg-surface-200 rounded-xl;
 		@apply flex flex-col items-center justify-center;
 
 		&.is-dark {
 			@apply bg-surface-700;
 		}
 	}
-
-	&--border {
-		@apply border border-solid border-surface-300;
-	}
 }
 </style>