elementsUI和windicss一起用

npm install element-plus windicss --save

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import WindiCSS from 'windicss'
import 'windi.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(WindiCSS)
app.mount('#app')

 2. ElementsUI和WindiCSS可能存在样式冲突，如何解决？

1）

<template>
  <div class="my-component">
    <el-button>ElementsUI Button</el-button>
    <button class="btn">WindiCSS Button</button>
  </div>
</template>

<style scoped>
.my-component {
  background-color: #fff;
}
.btn {
  background-color: #555;
  color: #fff;
}
</style>

在这个例子中，.my-component类的样式只会应用于这个组件中，而.btn类的样式也只会应用于这个组件中的按钮。

2）

<template>
  <div class="my-app">
    <el-button class="my-button" type="primary">Button</el-button>
  </div>
</template>

<style>
  /* Add a higher priority to WindiCSS classes to override ElementsUI */
  .my-app .my-button {
    @apply !important;
  }
</style>

在上面的示例中，我们使用WindiCSS的@apply命令来添加优先级，并使用!important来确保WindCSS样式优先于ElementsUI样式。

3. 使用 Vue 3 实现带搜索框的下拉框

<template>
  <div>
    <el-select v-model="selectedOption" filterable clearable placeholder="Select an option">
      <el-option
        v-for="option in filteredOptions"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElSelect, ElOption } from 'element-plus'

export default {
  components: {
    ElSelect,
    ElOption,
  },
  setup() {
    const selectedOption = ref('')
    const options = [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
      { label: 'Option 5', value: 'option5' },
    ]
    const filteredOptions = computed(() => {
      if (!selectedOption.value) {
        return options
      }
      return options.filter(option =>
        option.label.toLowerCase().includes(selectedOption.value.toLowerCase())
      )
    })

    return {
      selectedOption,
      filteredOptions,
    }
  },
}
</script>

<style>
/* Style the search box */
.el-select__input {
  border: none;
  box-shadow: none;
}

/* Style the dropdown list */
.el-scrollbar__wrap {
  max-height: 200px;
  overflow-y: auto;
}
</style>

在这个示例代码中，使用 ref 来创建一个响应式的变量 selectedOption 来存储选择的选项。我们还使用 computed 函数来计算一个过滤后的选项列表 filteredOptions，该列表根据 selectedOption 变量的值来过滤 options 数组。

请注意，在 Vue 3 中，不再需要使用 data() 函数来定义数据对象，而是直接在 setup() 函数中定义响应式变量。我们也不需要使用 v-bind 或 v-on 等指令来绑定数据或监听事件，而是直接将属性和事件传递给组件。