feat(search): 迷你模式增加无边框示例 (#2091)

opentiny · Sep 10, 2024 · 47e0fb8 · 47e0fb8
1 parent 44e2779
commit 47e0fb8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue b/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
@@ -1,7 +1,16 @@
 <template>
-  <tiny-search mini></tiny-search>
+  <div>
+    <tiny-search mini></tiny-search>
+    <tiny-search mini class="mt24 custom-search"></tiny-search>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { Search as TinySearch } from '@opentiny/vue'
 </script>
+
+<style scoped>
+:deep(.tiny-search.custom-search.collapse .tiny-search__line) {
+  border: none;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/search/mini-mode.spec.ts b/examples/sites/demos/pc/app/search/mini-mode.spec.ts
@@ -4,7 +4,8 @@ test('迷你模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#mini-mode')
 
-  const search = page.locator('.tiny-search.mini')
+  const container = page.locator('#mini-mode')
+  const search = container.locator('.tiny-search.mini').first()
   const blank = page.getByRole('code').first()
   const line = search.locator('.tiny-search__line')
   const input = search.locator('.tiny-search__input')

diff --git a/examples/sites/demos/pc/app/search/mini-mode.vue b/examples/sites/demos/pc/app/search/mini-mode.vue
@@ -1,5 +1,8 @@
 <template>
-  <tiny-search mini></tiny-search>
+  <div>
+    <tiny-search mini></tiny-search>
+    <tiny-search mini class="mt24 custom-search"></tiny-search>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -11,3 +14,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+:deep(.tiny-search.custom-search.collapse .tiny-search__line) {
+  border: none;
+}
+</style>