{{ displayTitle }}|
+{{ hero.sub }}
+碎片收藏
+每一格都是一段被打断的思绪
+每件东西都有自己的气味,闻到就穿越了
+ — 手记 #1 +快照 +
收集的过程比结果更重要
+ — 手记 #2 +有些东西扔不掉,不是因为值钱,是因为记得
+ — 手记 #3 +不是作品集,
是私人日记
+ 没有策划,没有主题,就是随手拍、随便留。三年下来,发现这些碎片其实比"正经作品"更像自己。
+- Toast / Dialog 组件行为验证页 -
-v-model:show 控制显示,监听 close 事件
-center / bottom / top
-maskCanClose=false 禁止点击遮罩关闭
-累计触发次数: {{ closeCount }}
-:animation="false" 关闭所有过渡
-- animation 传入方向名: slide-fade / bottom-fade / top-fade / left-fade / right-fade -
-- maskAnimation 传入方向名: fade / left / right / top / bottom -
-destoryOnClose=true 关闭后销毁内容
-
- 作为 bo-dialog__content 的同级锚点,
- 在 <style scoped> 中通过兄弟选择器控制 dialog 内部样式
-
Dialog 限定在容器范围内
-这个 Dialog 被限制在父容器内,不会铺满屏幕。
-基于 DialogToken 识别父子,父级 teleport 会被禁用
-stopPropagation=false 时点击内容会冒泡到遮罩
-noCenterYMargin=true 取消上下内边距
-:style 对象传入 width: 600px
-:style="{ width: '80%' }" 撑满父容器
-min-width 320px, max-width 800px
-:style 接受 string 形式
-
- 这是最基础的 Dialog 用法。使用 v-model:show 绑定显示状态,
- 点击遮罩或关闭按钮都可以关闭。
-
- 通过 mode="bottom" 让 Dialog 从底部弹出,常用于移动端 ActionSheet。
-
- mode="top" 让 Dialog 从顶部滑入。
-
- 设置 maskCanClose=false,
- 点击遮罩不会关闭 Dialog,只能通过显式按钮关闭。
-
- :animation="false" 关闭所有过渡动画。
-
- 默认动画,animation=true 时也使用这个。
-
- 从底部上滑 + 淡入。注意:animation 只影响过渡,
- 布局仍是 center,要贴底需用
- mode="bottom"。
-
- 从顶部下滑 + 淡入。 -
-- 从左侧右滑 + 淡入。适合侧边抽屉。 -
-- 从右侧左滑 + 淡入。 -
-- 遮罩默认淡入淡出。 -
-
- 遮罩从左侧渐入渐出。常与 animation="left-fade" 组合做抽屉。
-
- 遮罩从右侧渐入渐出。 -
-- 遮罩从顶部渐入渐出。 -
-- 遮罩从底部渐入渐出。 -
-
- destoryOnClose 会在关闭后销毁内容节点,
- 适合内容包含不可重用状态的场景。
-
- placeholder 渲染在 bo-dialog__content 的同级位置。
- 它本身在 dialog 包裹层(全屏)里而非内容卡里,视觉上难以直接附着。
- 因此它的正确用法是:作为 scoped CSS 钩子,通过兄弟选择器
- .ph-anchor ~ :deep(.bo-dialog__content)
- 影响 dialog 内部内容。
-
- noCenterYMargin 取消居中模式下的 40px 上下内边距,
- 让 Dialog 紧贴屏幕边缘。
-
- 在 Dialog 内部再打开 Dialog,组件会通过 DialogToken 自动识别父子关系: - 子级 Dialog 的 teleport 会被禁用,与父级共同渲染。 -
-- 我在父级 Dialog 内部。父级不会因我打开而消失。 -
-
- stopPropagation=false,
- 点击内容区域会冒泡到遮罩,触发关闭。
-
- 通过 :style="{ width: '600px' }"
- 覆盖默认的 30% 宽度。
-
- width: '80%' 撑满视口宽度的 80%。
-
- min-width: 320px; max-width: 800px。
- 在窄屏上不会小于 320px,宽屏上不会超过 800px。
-
- style="width: 480px; max-width: 90vw;"
- 也可以直接传字符串。
-
{{ hero.sub }}
+每一格都是一段被打断的思绪
+每件东西都有自己的气味,闻到就穿越了
+ — 手记 #1 +收集的过程比结果更重要
+ — 手记 #2 +有些东西扔不掉,不是因为值钱,是因为记得
+ — 手记 #3 +没有策划,没有主题,就是随手拍、随便留。三年下来,发现这些碎片其实比"正经作品"更像自己。
+当前分类下暂无卡片
+没有找到匹配「{{ route.query.q }}」的卡片
+点击右下角 + 按钮创建第一张卡片
+{{ confirmMsg }}
+当前分类下暂无卡片
-没有找到匹配「{{ route.query.q }}」的卡片
-点击右下角 + 按钮创建第一张卡片
-{{ confirmMsg }}
-+ Toast / Dialog 组件行为验证页 +
+v-model:show 控制显示,监听 close 事件
+center / bottom / top
+maskCanClose=false 禁止点击遮罩关闭
+累计触发次数: {{ closeCount }}
+:animation="false" 关闭所有过渡
++ animation 传入方向名: slide-fade / bottom-fade / top-fade / left-fade / right-fade +
++ maskAnimation 传入方向名: fade / left / right / top / bottom +
+destoryOnClose=true 关闭后销毁内容
+
+ 作为 bo-dialog__content 的同级锚点,
+ 在 <style scoped> 中通过兄弟选择器控制 dialog 内部样式
+
Dialog 限定在容器范围内
+这个 Dialog 被限制在父容器内,不会铺满屏幕。
+基于 DialogToken 识别父子,父级 teleport 会被禁用
+stopPropagation=false 时点击内容会冒泡到遮罩
+noCenterYMargin=true 取消上下内边距
+:style 对象传入 width: 600px
+:style="{ width: '80%' }" 撑满父容器
+min-width 320px, max-width 800px
+:style 接受 string 形式
+
+ 这是最基础的 Dialog 用法。使用 v-model:show 绑定显示状态,
+ 点击遮罩或关闭按钮都可以关闭。
+
+ 通过 mode="bottom" 让 Dialog 从底部弹出,常用于移动端 ActionSheet。
+
+ mode="top" 让 Dialog 从顶部滑入。
+
+ 设置 maskCanClose=false,
+ 点击遮罩不会关闭 Dialog,只能通过显式按钮关闭。
+
+ :animation="false" 关闭所有过渡动画。
+
+ 默认动画,animation=true 时也使用这个。
+
+ 从底部上滑 + 淡入。注意:animation 只影响过渡,
+ 布局仍是 center,要贴底需用
+ mode="bottom"。
+
+ 从顶部下滑 + 淡入。 +
++ 从左侧右滑 + 淡入。适合侧边抽屉。 +
++ 从右侧左滑 + 淡入。 +
++ 遮罩默认淡入淡出。 +
+
+ 遮罩从左侧渐入渐出。常与 animation="left-fade" 组合做抽屉。
+
+ 遮罩从右侧渐入渐出。 +
++ 遮罩从顶部渐入渐出。 +
++ 遮罩从底部渐入渐出。 +
+
+ destoryOnClose 会在关闭后销毁内容节点,
+ 适合内容包含不可重用状态的场景。
+
+ placeholder 渲染在 bo-dialog__content 的同级位置。
+ 它本身在 dialog 包裹层(全屏)里而非内容卡里,视觉上难以直接附着。
+ 因此它的正确用法是:作为 scoped CSS 钩子,通过兄弟选择器
+ .ph-anchor ~ :deep(.bo-dialog__content)
+ 影响 dialog 内部内容。
+
+ noCenterYMargin 取消居中模式下的 40px 上下内边距,
+ 让 Dialog 紧贴屏幕边缘。
+
+ 在 Dialog 内部再打开 Dialog,组件会通过 DialogToken 自动识别父子关系: + 子级 Dialog 的 teleport 会被禁用,与父级共同渲染。 +
++ 我在父级 Dialog 内部。父级不会因我打开而消失。 +
+
+ stopPropagation=false,
+ 点击内容区域会冒泡到遮罩,触发关闭。
+
+ 通过 :style="{ width: '600px' }"
+ 覆盖默认的 30% 宽度。
+
+ width: '80%' 撑满视口宽度的 80%。
+
+ min-width: 320px; max-width: 800px。
+ 在窄屏上不会小于 320px,宽屏上不会超过 800px。
+
+ style="width: 480px; max-width: 90vw;"
+ 也可以直接传字符串。
+
cf=zv_+MAHZ!v zISmU4)?gbJo~rRX;FJu5F{|Lk9d<7YYd{qd%qoH{NWm(>d<3b4K(K;mgj6A=C$}j? z3~oY-+%7{TvCB{jM%c7cnt$H$Ol-4~k`5eql-r$UcAL#&^R%>B>|Te{a-!Vlvv_J4{_d(I8QCr%SHB&bI! R)Bn)k+DKBdjU=rJ{sFiFC1C&n delta 685 zcma)(Ur19?9LLY^-rd?Yy}w;^ZnA+6SBz-c=H|AS?9YpZv?8n*%g+Av=OKdWLlBf! z5 ay~I{YaoQka+D@wD2mOX4?UN!(2Mb2YwFv)U7W(sOm*%)8tbX%Vgdx2$4wGcmY#q=ovDabPr{+9U zkRDBbna5^u5eMF8pN_&RJJtz)(J#f=yW? e&5c;AyB;BdEj zC)rLUsV{!5k5am&g> Q)1RvudzQ=Cf&nSN~j;1+ 9% zrM|M0wL+7n!*4Cx;!Su}V;H^XpV1x+!KH*zz!g2(uV*Uck*%Q6#8HvpPb_j&KvrxN zY#gl Op#F=sQoCRn3R3E6ZH)wjZW@gQ+`j#um^ i7HOJ0LxK=yZ^Os&66KW|F!