fix(ui): 收敛激活态描边、修正内层圆角溢出并替换 emoji 图标
This commit is contained in:
+24
-2
@@ -316,7 +316,7 @@ const content = h(
|
||||
'双向绑定',
|
||||
'textField 与信号双向同步:输入即回显;prefix/suffix 渲染为输入框内侧附加块;clearable 开启后有值即显一键清空。',
|
||||
textField({ placeholder: '输入名字…', value: name }),
|
||||
textField({ placeholder: '搜索…', value: name, prefix: '🔍', clearable: true }),
|
||||
textField({ placeholder: '搜索…', value: name, prefix: searchIcon(), clearable: true }),
|
||||
textField({ value: price, suffix: '元', clearable: true }),
|
||||
h('span', { class: 'out' }, () => (name() ? `你好,${name()}!` : '等待输入…')),
|
||||
),
|
||||
@@ -663,7 +663,7 @@ const content = h(
|
||||
button({ label: '切换数据态', onClick: () => noResult(!noResult()) }),
|
||||
),
|
||||
() => (noResult()
|
||||
? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', icon: '🔍', action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) })
|
||||
? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', icon: searchIcon(), action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) })
|
||||
: card({ title: '搜索结果' }, h('p', null, '这里展示命中的数据列表。'))),
|
||||
),
|
||||
section(
|
||||
@@ -1585,3 +1585,25 @@ const app = h('div', { class: 'shell' }, toc, content);
|
||||
|
||||
mount('#app', () => app);
|
||||
buildToc(toc, content);
|
||||
|
||||
/*** 放大镜图标:demo 内联 SVG,避免 emoji 在不同系统渲染成彩色位图 ***/
|
||||
function searchIcon(): HTMLElement {
|
||||
const ns = 'http://www.w3.org/2000/svg';
|
||||
const holder = document.createElement('span');
|
||||
holder.style.display = 'inline-flex';
|
||||
const svg = document.createElementNS(ns, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 16 16');
|
||||
svg.setAttribute('width', '14');
|
||||
svg.setAttribute('height', '14');
|
||||
svg.setAttribute('fill', 'none');
|
||||
svg.setAttribute('stroke', 'currentColor');
|
||||
svg.setAttribute('stroke-width', '1.5');
|
||||
svg.setAttribute('stroke-linecap', 'round');
|
||||
const lens = document.createElementNS(ns, 'circle');
|
||||
lens.setAttribute('cx', '7'); lens.setAttribute('cy', '7'); lens.setAttribute('r', '4.5');
|
||||
const handle = document.createElementNS(ns, 'line');
|
||||
handle.setAttribute('x1', '10.5'); handle.setAttribute('y1', '10.5'); handle.setAttribute('x2', '14'); handle.setAttribute('y2', '14');
|
||||
svg.append(lens, handle);
|
||||
holder.append(svg);
|
||||
return holder;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user