元素项展示

src/views/formula/component/formulaItem.vue

@@ -1,9 +1,28 @@
 <template>
-  <span :class="getItemClass(item)" @click="itemClick(item)">
-    {{item.name}}
+  <div class="inline-container">
+    <!-- 元素标签 -->
+    <el-tag 
+      v-if="item.type === 'Element'"
+      type="info"   
+      :effect="item.selected ? 'dark' : 'plain'"
+      @click="itemClick(item)"
+      class="ellipse-tag"
+      :class="{'selected-tag': item.selected}"
+    > 
+      {{ item.name }}
+    </el-tag>
+    <span 
+      :class="getItemClass(item)" 
+      @click="itemClick(item)" 
+      v-else
+      class="element-span"
+    >
+      {{ item.name }}
+    </span>
     
-  </span>
-  
+    <!-- 光标指示器 - 选中时或强制显示时显示 -->
+    <span v-if="isShowCursor&&(item.selected || showCursor)" class="cursor-blink"></span>
+  </div>
 </template>
 
 <script>
@@ -12,48 +31,103 @@ export default {
   props: {
     item: {
       type: Object,
-      default: function () {
-        return {};
-      }
+      default: () => ({})
     },
-   
-  },
-  data(){
-    return{
-
-    }
+    // 新增属性：用于强制显示光标
+    showCursor: {
+      type: Boolean,
+      default: false
+    },
+    isShowCursor: {
+      type: Boolean,
+      default: true
+    }//是否显示光标
   },
-  methods:{
-    itemClick(item){
+  methods: {
+    itemClick(item) {
+      // 切换选中状态
       item.selected = !item.selected;
-      this.$emit('click',{
-        selected:item.selected,
+      this.$emit('click', {
+        selected: item.selected,
         item
-      })
+      });
     },
-    getItemClass(item){
-      let obj = {};
-      // obj[item.type.toLocaleLowerCase()+'-class']=true;
-      obj['element-class']=true;
-      if(item.selected){
-        obj.selected = true;
-      }
-      return obj;
+    getItemClass(item) {
+      return {
+        'element-class': true,
+        'selected': item.selected
+      };
     }
   }
 }
 </script>
+
 <style scoped lang="scss">
-  .element-class{
-    cursor: pointer;
-    padding: 0 3px;
-    &.selected{
-      color: rgba(64,149,229,1);
-    }
+// 共用样式
+.element-class, .ellipse-tag {
+  display: inline-flex;
+  align-items: center; // 纵向居中对齐
+  justify-content: center;
+  vertical-align: middle; // 确保与其他元素对齐
+  box-sizing: border-box;
+}
+
+.element-class {
+  cursor: pointer;
+  padding: 0 3px;
+  height: 32px; // 与tag保持一致高度
+  
+  &.selected {
+    color: #f0720a;
   }
-  .text-blue{
-    font-size: 20px;
-    color: rgba(64,149,229,1);
-    font-weight:bold;
+}
+
+// 标签样式
+.ellipse-tag {
+  border-radius: 50px !important; // 椭圆样式
+  padding: 0 12px !important;
+  height: 32px; // 固定高度确保对齐
+  transition: all 0.2s ease; // 平滑过渡效果
+  background-color: #E7E7E7 !important; // 默认背景色
+  border-color: #E7E7E7 !important;    // 默认边框色
+  color: #333 !important;              // 默认文字色
+  
+  &.selected-tag {
+    background-color: #909399 !important; // 选中状态背景色
+    border-color: #909399 !important;    // 选中状态边框色
+    color: #fff !important;              // 选中状态文字色
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    margin-left: 8px;
+    margin-right: 5px;
   }
-</style>
+}
+
+// 确保span和tag在同一行时对齐
+.element-span {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+}
+
+// 新增样式
+.inline-container {
+  display: inline-flex;
+  align-items: center;
+}
+
+// 光标样式 - 模拟输入框闪烁效果
+.cursor-blink {
+  width: 2px;
+  height: 1.2em;
+  background-color: #333;
+  margin: 0 1px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  from, to { background-color: transparent }
+  50% { background-color: #333 }
+}
+
+</style>