usage

:::: el-tabs

::: el-tab-pane label=install

      yarn add vuepress-plugin-element-ui -D
yarn add core-js@2.6.12
    

:::

::: el-tab-pane label=use

      // .vuepress/config.js
module.exports = {
  plugins: [
    'element-ui'
  ]
}
    

:::

::: el-tab-pane label=docs 使用文档 :::

::::

具体使用

      :::: el-tabs

::: el-tab-pane label=yarn
``` bash
yarn add vuepress-plugin-element-ui -D
```
:::
::: el-tab-pane label=npm
 npm i vuepress-plugin-element-ui -D
:::
::::
    

demo

el-tabs

:::: el-tabs ::: el-tab-pane label=markdown

  • vue
    • vue-cli
    • nuxt
    • vuepress
  • react
    • create-react-app
    • nest ::: ::: el-tab-pane label=javascript
      () => {
  console.log('Javascript code example')
}
    

::: ::::

el-collapses

:::: el-collapse ::: el-collapse-item title=“一致性 Consistency” 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念; 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。 ::: ::: el-collapse-item title=“反馈 Feedback” 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作; 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。 ::: ::: el-collapse-item title=“效率 Efficiency” 简化流程:设计简洁直观的操作流程; 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策; 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。 ::: ::: el-collapse-item title=“可控 Controllability” 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策; 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。 ::: ::::

el-steps

:::: el-steps ::: el-step title=“步骤 11” icon=“el-icon-edit” ::: ::: el-step title=“步骤 2” icon=“el-icon-upload” ::: ::: el-step title=“步骤 3” icon=“el-icon-picture” ::: ::::

声明

作者: liyao

版权:本博客所有文章除特别声明外,均采用CCBY-NC-SA4.O许可协议。转载请注明!

最后更新于 2026-02-18 18:09 history