创建vue3数学符号选择器(vue3+elementPlus+ts)
本文包含两种效果：
- 效果一：数学符号只能选择一次，选中的数学符号高亮
- 效果二：相同的数学符号可以选择多次，当前选中的数学符号高亮
首先创建math.ts定义常见数学符号数组 :
export const symbols = [
{ id: 1, value: '+', description: '加号' },
{ id: 2, value: '-', description: '减号' },
{ id: 3, value: '×', description: '乘号' },
{ id: 4, value: '÷', description: '除号' },
{ id: 5, value: '=', description: '等号' },
{ id: 6, value: '≠', description: '不等号' },
{ id: 7, value: '<', description: '小于号' },
{ id: 8, value: '>', description: '大于号' },
{ id: 9, value: '≤', description: '小于等于号' },
{ id: 10, value: '≥', description: '大于等于号' },
{ id: 11, value: '∑', description: '求和符号' },
{ id: 12, value: '∫', description: '积分符号' },
{ id: 13, value: '√', description: '平方根符号' },
{ id: 14, value: '∠', description: '角度符号' },
{ id: 15, value: '°', description: '度符号' },
{ id: 16, value: 'π', description: '圆周率' },
{ id: 17, value: '∞', description: '无穷大符号' },
{ id: 18, value: '≈', description: '约等于号' },
{ id: 19, value: '∝', description: '成比例符号' },
{ id: 20, value: '∴', description: '因此符号' },
{ id: 21, value: '∵', description: '由此推出符号' },
{ id: 22, value: '∀', description: '全称量词' },
{ id: 23, value: '∃', description: '存在量词' },
{ id: 24, value: '∈', description: '属于符号' },
{ id: 25, value: '∉', description: '不属于符号' },
{ id: 26, value: '∩', description: '交集符号' },
{ id: 27, value: '∪', description: '并集符号' },
{ id: 28, value: '⊂', description: '真子集符号' },
{ id: 29, value: '⊆', description: '子集或等于符号' },
{ id: 30, value: '⊄', description: '非子集符号' },
{ id: 31, value: '⊃', description: '真包含符号' },
{ id: 32, value: '⊇', description: '包含或等于符号' },
{ id: 33, value: '⊅', description: '非包含符号' },
{ id: 34, value: '∑', description: '求和符号' },
{ id: 35, value: '∏', description: '乘积符号' },
{ id: 36, value: '∂', description: '偏导符号' },
{ id: 37, value: '∆', description: '增量符号' },
{ id: 38, value: '∇', description: '梯度符号' },
{ id: 39, value: '∫', description: '积分符号' },
{ id: 40, value: '∮', description: '曲线积分符号' },
{ id: 41, value: '∬', description: '面积积分符号' },
{ id: 42, value: '∭', description: '体积积分符号' },
{ id: 43, value: '∀', description: '普遍量词符号' },
{ id: 44, value: '∈', description: '属于符号' },
{ id: 45, value: '∉', description: '不属于符号' },
{ id: 46, value: '∋', description: '包含符号' },
{ id: 47, value: '∌', description: '不包含符号' },
{ id: 48, value: '∩', description: '交集符号' },
{ id: 49, value: '∪', description: '并集符号' },
{ id: 50, value: '⊂', description: '真子集符号' },
{ id: 51, value: '⊃', description: '真包含符号' },
{ id: 52, value: '⊆', description: '子集或等于符号' },
{ id: 53, value: '⊇', description: '包含或等于符号' },
{ id: 54, value: '⊄', description: '非子集符号' },
{ id: 55, value: '⊅', description: '非包含符号' },
{ id: 56, value: '⊈', description: '真非子集符号' },
{ id: 57, value: '⊉', description: '真非包含符号' },
{ id: 58, value: '⊕', description: '异或符号' },
{ id: 59, value: '⊖', description: '减法环符号' },
{ id: 60, value: '⊗', description: '张量积符号' },
{ id: 61, value: '⊙', description: '哈达玛积符号' },
{ id: 62, value: '⊢', description: '右推出符号' },
{ id: 63, value: '⊣', description: '左推出符号' },
{ id: 64, value: '⊤', description: '真值符号' },
{ id: 65, value: '⊥', description: '垂直符号' },
{ id: 66, value: '⋅', description: '点乘符号' },
{ id: 67, value: '⋆', description: '星号符号' },
{ id: 68, value: '⋮', description: '连续省略号符号' },
{ id: 69, value: '⋯', description: '中间省略号符号' },
{ id: 70, value: '⋰', description: '上斜省略号符号' },
{ id: 71, value: '⋱', description: '下斜省略号符号' },
{ id: 72, value: 'ℕ', description: '自然数集符号' },
{ id: 73, value: 'ℤ', description: '整数集符号' },
{ id: 74, value: 'ℚ', description: '有理数集符号' },
{ id: 75, value: 'ℝ', description: '实数集符号' },
{ id: 76, value: 'ℂ', description: '复数集符号' },
{ id: 77, value: 'ℵ', description: '纤维符号' },
{ id: 78, value: 'ℶ', description: '纤维符号' },
{ id: 79, value: 'ℷ', description: '纤维符号' },
{ id: 80, value: 'ℸ', description: '纤维符号' },
{ id: 81, value: '℘', description: '幂集符号' },
{ id: 82, value: 'ℑ', description: '虚部符号' },
{ id: 83, value: 'ℜ', description: '实部符号' },
{ id: 84, value: '℠', description: '商标符号' },
{ id: 85, value: '™', description: '商标符号' },
{ id: 86, value: '∅', description: '空集符号' },
{
id: 87,
value: '∈',
description: '属于符号',
},
{
id: 88,
value: '∉',
description: '不属于符号',
},
{
id: 89,
value: '∋',
description: '包含符号',
},
{
id: 90,
value: '∌',
description: '不包含符号',
},
{
id: 91,
value: '⊂',
description: '真子集符号',
},
{
id: 92,
value: '⊃',
description: '真包含符号',
},
{
id: 93,
value: '⊆',
description: '子集或等于符号',
},
{
id: 94,
value: '⊇',
description: '包含或等于符号',
},
{
id: 95,
value: '⊄',
description: '非子集符号',
},
{
id: 96,
value: '⊅',
description: '非包含符号',
},
{
id: 97,
value: '⊈',
description: '真非子集符号',
},
{
id: 98,
value: '⊉',
description: '真非包含符号',
},
{
id: 99,
value: '⊕',
description: '异或符号',
},
{
id: 100,
value: '⊖',
description: '减法环符号',
},
{
id: 101,
value: '⊗',
description: '张量积符号',
},
{
id: 102,
value: '⊙',
description: '哈达玛积符号',
},
{
id: 103,
value: '⊢',
description: '右推出符号',
},
{
id: 104,
value: '⊣',
description: '左推出符号',
},
{
id: 105,
value: '⊤',
description: '真值符号',
},
{
id: 106,
value: '⊥',
description: '垂直符号',
},
{
id: 107,
value: '⋅',
description: '点乘符号',
},
{
id: 108,
value: '⋆',
description: '星号符号',
},
{
id: 109,
value: '⋮',
description: '连续省略号符号',
},
{
id: 110,
value: '⋯',
description: '中间省略号符号',
},
{
id: 111,
value: '⋰',
description: '上斜省略号符号',
},
{
id: 112,
value: '⋱',
description: '下斜省略号符号',
},
{
id: 113,
value: 'ℕ',
description: '自然数集符号',
},
{
id: 114,
value: 'ℤ',
description: '整数集符号',
},
{
id: 115,
value: 'ℚ',
description: '有理数集符号',
},
{
id: 116,
value: 'ℝ',
description: '实数集符号',
},
{
id: 117,
value: 'ℂ',
description: '复数集符号',
},
]
效果一：
效果图：
html区域:
{{ symbol.value }}
选择数学符号
{{ item.value }},
ts区域:
scss区域:
效果二（添加了隐藏选择器时，取消选择器中的高亮元素）
效果图：
html区域:
{{ symbol.value }}
选择数学符号
{{ item.value }},
ts区域: