### El-PageHeader Basic Usage Example

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/page-header.md

This snippet demonstrates the fundamental implementation of the El-PageHeader component, including its content display and a method to handle the back button click event.

```html
<el-page-header @back="goBack" content="详情页面">
</el-page-header>
```

```javascript
<script>
  export default {
    methods: {
      goBack() {
        console.log('go back');
      }
    }
  }
</script>
```

--------------------------------

### Basic Usage of Element Link Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/link.md

Demonstrates the fundamental usage of the `el-link` component, showcasing various link types such as default, primary, success, warning, danger, and info, along with an example of adding an icon.

```html
<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="jade">主题色链接<i class="el-icon-d-arrow-right"></i></el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>
```

--------------------------------

### OMarkdown Basic Usage Example

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/markdown.md

Demonstrates the fundamental integration of the OMarkdown component, initializing it with a default markdown value and basic upload options. This snippet shows how to embed the component and set up initial data.

```html
<template>
<div>
  <OMarkdown v-model="markdown" ref="markdown" :options="options"/>
</div>
</template>

<style>
  body {
    margin: 0;
  }
</style>

<script>
  export default {
    data() {
        let self = this
      return {
        markdown:'基础用法',
        options:{
            upload:{
               max: 10 * 1024 * 1024,
               url: 'xxxxxxx',
               token: 'token',
               filename: name => name.replace(/[^(a-zA-209\u4e00-\u9fa5\.)]/g, '').
                 replace(/[\\?\\/:|<>\[\]\(\)\%\{\}@~]/g, '').
                 replace('/\\s/g', ''),
            }
            
            
        }
      };
    },
    mounted(){
       
    }
  };
</script>
```

--------------------------------

### Adding Icons to Element Link Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/link.md

Explains how to integrate icons with `el-link` components to enhance visual recognition. Examples include placing an icon before the text and after the text.

```html
<div>
  <el-link icon="el-icon-edit">编辑</el-link>
  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```

--------------------------------

### Basic Usage of AppBar Component with Fixed Positions

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/app-bar.md

This example demonstrates the basic usage of the `o-app-bar` component, showing how to dynamically change its fixed position using buttons. It includes a template for the UI and a script for managing component data and methods.

```html
<template>
        <div class="box">
          <div class="top">
              <el-button class="item" @click="fixed = 'top-start'">上左</el-button>
              <el-button class="item" @click="fixed = 'top'">上边</el-button>
              <el-button class="item" @click="fixed = 'top-end'">上右</el-button>
          </div>
          <div class="left">
              <el-button class="item" @click="fixed = 'left-start'">左上</el-button>
              <el-button class="item" @click="fixed = 'left'">左边</el-button>
              <el-button class="item" @click="fixed = 'left-end'">左下</el-button>
          </div>
          <div class="right">
              <el-button class="item" @click="fixed = 'right-start'">右上</el-button>
              <el-button class="item" @click="fixed = 'right'">右边</el-button>
              <el-button class="item" @click="fixed = 'right-end'">右下</el-button>
          </div>
          <div class="bottom">
              <el-button class="item" @click="fixed = 'bottom-start'">下左</el-button>
              <el-button class="item" @click="fixed = 'bottom'">下边</el-button>
              <el-button class="item" @click="fixed = 'bottom-end'">下右</el-button>
          </div>
          <o-app-bar :fixed="fixed" :block="block" :size="size">
            <div slot="left" class="px-md py-md">左插槽 </div>
            <div slot="right" class="px-md py-md">右插槽 </div>
          工具条  工具条  工具条  工具条
            工具条  工具条  工具条  工具条
              工具条  工具条  工具条  工具条
                工具条  工具条  工具条  工具条
                  工具条  工具条  工具条  工具条
                    工具条  工具条  工具条  工具条
                      工具条  工具条  工具条  工具条
                        工具条  工具条  工具条  工具条
                          工具条  工具条  工具条  工具条
                            工具条  工具条  工具条  工具条
                              工具条  工具条  工具条  工具条
                                工具条  工具条  工具条  工具条
                                  工具条  工具条  工具条  工具条
                                    工具条  工具条  工具条  工具条
                                      工具条  工具条  工具条  工具条
                                        工具条  工具条  工具条  工具条
                                          工具条  工具条  工具条  工具条
                                            工具条  工具条  工具条  工具条
                                              工具条  工具条  工具条  工具条
                                                工具条  工具条  工具条  工具条
          </o-app-bar>
        </div>
</template>
```

```javascript
export default {
         data(){
             return {
                fixed: 'none',
                block: true,
                size: 'md'
             }
         },
         computed:{
             
         },
         methods: {
                handleFixed (val) {
                        this.fixed = val
                }
         },
         mounted(){
        
         }
        }
```

--------------------------------

### GM Backend Form Example with o-window and Element UI

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/gm-form.md

This snippet demonstrates a comprehensive GM backend form using the `o-window` component for modal display. It integrates `el-form` for structure and various Element UI components (input, date picker, switch, checkboxes, radio buttons, textarea) along with custom `o-multiselect` components. The example also illustrates how to manage form data, handle submissions with a loading state, and dynamically populate options for select fields.

```html
<el-row>
  <div class="gallery-demo">
    <el-button @click="visible=!visible">
      开关弹窗1
    </el-button>
  </div>
  <o-window
    :height="800"
    :visible.sync="visible"
    :pending.sync="loading"
    title="活动配置"
    class="gm-form"
  >
    <el-form ref="form" :model="form" label-width="80px" size="small">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择日期"
          v-model="form.date1"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="单选控件">
        <o-multiselect
          v-model="form.region"
          :data="options"
          size="small"
        ></o-multiselect>
      </el-form-item>

      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="王国列表">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button>默认按钮</el-button>
      </el-form-item>
      <el-form-item label="选择王国">
        <o-multiselect
          v-model="form.value"
          multiple
          enable-interval-filter
          placeholder="请选择王国"
          :data="options"
          select-type="king"
        ></o-multiselect>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker
          v-model="form.date_range"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="small" type="primary" @click="submit">确定</el-button>
      <el-button size="mini" class="mr-md">取消</el-button>
    </div>
  </o-window>
</el-row>
<script>
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: "",
          date_range: [],
          value: [2, 3],
          options: []
        },
        options: []
      };
    },
    methods: {
      submit() {
        this.loading = true;
        setTimeout(() => {
          // 定时器模拟异步接口请求
          this.loading = false;
        }, 2000);
      }
    },
    computed: {},
    mounted() {
      const options = [];
      for (let i = 1; i < 101; i++) {
        const disabled = i === 1 ? true : false;
        options.push({
          label: `王国${i}`,
          value: `${i}`,
          selected: false,
          disabled
        });
      }
      this.options = options;
    }
  };
</script>
```

--------------------------------

### Basic Usage of El-Pagination Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/pagination.md

Demonstrates the fundamental use of the `el-pagination` component. The `layout` attribute defines the displayed elements like previous/next buttons, page numbers, total count, and jump functionality. Examples show behavior for both few and many pages.

```html
<div class="block">
  <span class="demonstration">页数较少时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
<div class="block">
  <span class="demonstration">大于 7 页时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>
```

--------------------------------

### El-Pagination with Advanced Features and Event Handling

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/pagination.md

Presents a comprehensive example demonstrating various advanced functionalities of the `el-pagination` component. It includes handling `size-change` and `current-change` events, displaying total item count, adjusting items per page using `page-sizes`, and direct page jumping with `jumper`.

```html
<template>
  <div class="block">
    <span class="demonstration">显示总数</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">调整每页显示条数</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">直接前往</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>
```

```javascript
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    };
  }
}
```

--------------------------------

### Implement Dashboard-style Progress Bar

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/progress.md

Illustrates how to create a dashboard-style progress indicator by setting the `type` property to `dashboard`. This example also includes interactive buttons to adjust the percentage and demonstrates custom color ranges for the dashboard.

```HTML

<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
  <el-button-group>
    <el-button icon="el-icon-minus" @click="decrease"></el-button>
    <el-button icon="el-icon-plus" @click="increase"></el-button>
  </el-button-group>
</div>
```

```JavaScript
export default {
  data() {
    return {
      percentage: 10,
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    };
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
}
```

--------------------------------

### Element UI Click-to-Upload with File Limits and Removal Confirmation

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/upload.md

This example shows how to implement a click-triggered file upload using Element UI. It demonstrates customizing the upload button via slots, setting a file upload limit, handling exceeding files, and confirming file removal before action.

```HTML
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">
    只能上传jpg/png文件，且不超过500kb
  </div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
          {
            name: "food2.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          }
        ]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  };
</script>
```

--------------------------------

### Basic Usage of Collapse Panel with Multiple Active Items

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/collapse.md

This example demonstrates the fundamental usage of the el-collapse component. It allows multiple panels to be open simultaneously. The v-model is bound to an array activeNames to control the currently active panels, and the change event handler logs the updated active panels.

```html
<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
  <el-collapse-item title="反馈 Feedback" name="2">
    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
  </el-collapse-item>
  <el-collapse-item title="效率 Efficiency" name="3">
    <div>简化流程：设计简洁直观的操作流程；</div>
    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
  </el-collapse-item>
  <el-collapse-item title="可控 Controllability" name="4">
    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
  </el-collapse-item>
</el-collapse>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>
```

--------------------------------

### Basic Usage of InputNumber Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/input-number.md

To use the `el-input-number` component, simply bind a variable using `v-model`. The initial value of the variable will serve as the default. This example also demonstrates handling the `change` event and setting `min` and `max` limits.

```html
<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>
```

--------------------------------

### JavaScript UI Configuration Data Fragment

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/cascader.md

This JavaScript object literal fragment provides a partial view of a UI configuration, detailing items with 'label', 'value', 'leaf', and 'level' properties. It includes a continuation of an unnamed list and the start of a 'project' specific list, demonstrating a common pattern for structured configuration data in UI applications.

```JavaScript
                                        "label": "sentry",
                                        "value": "sentry",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "test",
                                        "value": "test",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "translate",
                                        "value": "translate",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "uap",
                                        "value": "uap",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "usercenter",
                                        "value": "usercenter",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "web",
                                        "value": "web",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "world",
                                        "value": "world",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "worldDbSlave",
                                        "value": "worldDbSlave",
                                        "leaf": true,
                                        "level": 1
                                    }
                                ],
                                project: [
                                    {
                                        "label": "bigData",
                                        "value": "bigData",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "boe",
                                        "value": "boe",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "dk",
                                        "value": "dk",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "dm",
                                        "value": "dm",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "emc",
                                        "value": "emc",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "gameSupport",
                                        "value": "gameSupport",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "gos",
                                        "value": "gos",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "gs",
                                        "value": "gs",
                                        "leaf": true,
                                        "level": 1
                                    },
                                    {
                                        "label": "koh",
                                        "value": "koh",

```

--------------------------------

### Basic Usage of o-frame Component in Vue.js

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/frame.md

This example demonstrates the fundamental structure and dynamic control of the `o-frame` component. It shows how to define the main frame, header, footer, left, and right sections using slots, and how to dynamically adjust their visibility and layout properties (like `fillHeader`, `fillFooter`, `transition`, `headerSize`, `footerSize`, `leftSize`, `rightSize`) using Vue data properties and `el-form` controls.

```html
<template>
<div class="demo">
    <o-frame class="demo-o-frame"
    style="height: 500px; width:100%"
    :fillHeader="fillHeader"
    :fillFooter="fillFooter"
    :transition="transition"
    :header-size="headerSize"
    :footer-size="footerSize"
    :left-size="leftSize"
    :right-size="rightSize">
      <div style="height: 100%;width: 100%;background-color: #E7E7E7"></div>
      <div v-if="showHeader" style="height:100%; background-color: #409EFF" class="demo-o-frame-header" slot="header"></div>
      <div v-if="showFooter" style="height:100%; background-color: #409EFF" class="demo-o-frame-footer" slot="footer"></div>
      <div v-if="showLeft" style="height:100%;width:100%; background-color: #B1A2FF" class="demo-o-frame-left" slot="left"></div>
      <div v-if="showRight" style="height:100%;width:100%; background-color: #B1A2FF" class="demo-o-frame-right" slot="right"></div>
    </o-frame>
    
    <div class="demo-handler" style="margin-top: 40px">
            <el-form ref="form" inline label-width="80px">
                <el-form-item label="头部填充">
                   <el-radio-group v-model="fillHeader" size="mini">
                     <el-radio-button label="both"></el-radio-button>
                     <el-radio-button label="none"></el-radio-button>
                     <el-radio-button label="left"></el-radio-button>
                     <el-radio-button label="right"></el-radio-button>
                   </el-radio-group>
                </el-form-item>
                <el-form-item label="底部填充">
                  <el-radio-group v-model="fillFooter" size="mini">
                    <el-radio-button label="both"></el-radio-button>
                    <el-radio-button label="none"></el-radio-button>
                    <el-radio-button label="left"></el-radio-button>
                    <el-radio-button label="right"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="过渡效果">
                  <el-switch v-model="transition"></el-switch>
                </el-form-item>
                <el-form-item label="切换头部">
                  <el-switch v-model="showHeader"></el-switch>
                </el-form-item>
                <el-form-item label="切换底部">
                  <el-switch v-model="showFooter"></el-switch>
                </el-form-item>
                <el-form-item label="切换左栏">
                  <el-switch v-model="showLeft"></el-switch>
                </el-form-item>
                <el-form-item label="切换右栏">
                  <el-switch v-model="showRight"></el-switch>
                </el-form-item>
            </el-form>
    </div>
  </div>
</template>
```

```javascript
export default {
	data () {
		return {
			fillHeader: 'both',
                        fillFooter: 'both',
			showHeader: true,
			showFooter: true,
			showLeft: true,
			showRight: true,
                        headerSize: 50,
                        footerSize: 50,
                        leftSize: 100,
                        rightSize: 100,
                        transition: true
		}
	}
}
```

--------------------------------

### o-department Component: Basic User Selection

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/department.md

This snippet illustrates how to adapt the `o-department` component for selecting users instead of departments. By setting the `type` prop to 'user', the component's behavior changes to handle user data. Examples include both multiple and single user selection, along with options for hiding the save button. The JavaScript logic for data and methods is shared with the department selection example.

```html
<template>
  <div>
    多选
    <o-department
      v-model="value"
      collapse-tags
      title="人员选择"
      :tree="options"
      multiple
      type="user"
      clearable
      placeholder="请选择"
    ></o-department>
  </div>

  <div>
    单选
    <o-department
      v-model="value2"
      size="small"
      title="人员选择"
      type="user"
      clearable
      :tree="options"
      placeholder="请选择"
    ></o-department>
  </div>
  <div>
      隐藏保存按钮
    <o-department
      v-model="value2"
      size="small"
      title="人员选择"
      type="user"
      clearable
      :tree="options"
      placeholder="请选择"
    ></o-department>
```

--------------------------------

### Basic Usage of o-notice Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/notice.md

Demonstrates the fundamental way to use the `o-notice` component, requiring the `msg` attribute to be passed.

```HTML
<template>
    <o-notice msg="这是一条通知公告&nbsp;&nbsp&nbsp&nbsp777"></o-notice>
</template>
```

--------------------------------

### Breadcrumb with Icon Separator

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/breadcrumb.md

Illustrates how to use an icon as a separator in `el-breadcrumb` by setting the `separator-class` attribute. This method overrides the `separator` string setting. The example uses `el-icon-arrow-right` as the separator icon.

```HTML
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
```

--------------------------------

### Element UI File Upload with Preview and Limits

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/upload.md

This snippet demonstrates a basic file upload component using Element UI's `el-upload`. It includes functionalities for file preview (`on-preview`), removal (`on-remove`, `before-remove`), and limiting the number of files (`limit`, `on-exceed`). Initial files can be pre-populated in `fileList`.

```HTML
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  clip
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">
    只能上传jpg/png文件，且不超过500kb
  </div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
          {
            name: "food2.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          }
        ]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  };
</script>
```

--------------------------------

### OMarkdown Component Options API

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/markdown.md

Detailed API documentation for the OMarkdown component's `options` property, listing various configuration parameters such as cache, height, width, placeholder, language, and event handlers like input, focus, blur, esc, ctrlEnter, and select.

```APIDOC
options:
  cache: boolean - Whether to use localStorage for caching (default: true)
  height: string - Total editor height (default: 'auto')
  width: string - Total editor width, supports % (default: 'auto')
  placeholder: string - Hint when input area is empty (default: '')
  lang: string - Multi-language: en_US, zh_CN (default: 'zh_CN')
  counter: number - Counter (default: 0)
  input(value: string, previewElement?: HTMLElement): void - Triggered after input
  focus(value: string): void - Triggered after focus
  blur(value: string): void - Triggered after blur
  esc(value: string): void - Triggered after esc key press
  ctrlEnter(value: string): void - Triggered after ⌘/ctrl+enter key press
  select(value: string): void - Triggered after text selection in editor
  tab: string - Tab key operation string, supports `\t` and any string
```

--------------------------------

### Carousel Indicator Positioning (HTML/CSS)

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/carousel.md

Illustrates how to control the position of carousel indicators using the `indicator-position` attribute. Examples include `outside` for external display and `none` for hiding indicators.

```HTML
<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
```

--------------------------------

### Avatar Image Fit Property

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/avatar.md

Demonstrates how to use the `fit` property to control how an image adapts to its container, similar to CSS `object-fit`. Examples include 'fill', 'contain', 'cover', 'none', and 'scale-down'.

```html
<template>
  <div class="demo-fit">
    <div class="block" v-for="fit in fits" :key="fit">
        <span class="title">{{ fit }}</span>
        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    }
  }
</script>
```

--------------------------------

### Render Basic El-Tag Components

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/tag.md

Demonstrates how to render basic El-Tag components using the `type` attribute for different styles and the `color` attribute for custom backgrounds.

```html
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
```

--------------------------------

### Customizing El-Divider with Text Content

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/divider.md

Illustrates how to embed custom text or icons directly within the El-Divider. Examples show text positioning options (left, center, right) for enhanced content presentation.

```html
<template>
  <div>
    <span>头上一片晴天，心中一个想念</span>
    <el-divider content-position="left">少年包青天</el-divider>
    <span>饿了别叫妈, 叫饿了么</span>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <span>为了无法计算的价值</span>
    <el-divider content-position="right">阿里云</el-divider>
  </div>
</template>
```

--------------------------------

### Collapse Component Attributes Reference

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/collapse.md

This section details the configurable attributes for the el-collapse component. Each attribute's purpose, data type, acceptable values, and default setting are provided to guide component customization.

```APIDOC
Attribute: value / v-model
  Description: Currently active panel(s). If in accordion mode, the bound value type should be 'string', otherwise it should be 'array'.
  Type: string / array
  Options: —
  Default: —

Attribute: accordion
  Description: Whether to enable accordion mode.
  Type: boolean
  Options: —
  Default: false
```

--------------------------------

### Vditor Static Methods Overview

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/markdown.md

An overview of various static methods provided by Vditor for transforming and rendering different types of content, including mathematical formulas, diagrams, code blocks, and media.

```APIDOC
mathRender(element: HTMLElement)
  description: Converts text in element to mathematical formulas.
mermaidRender(element: HTMLElement)
  description: Converts text in element to flowcharts, sequence diagrams, or Gantt charts.
codeRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN")
  description: Adds a copy button to code blocks within the element.
chartRender(element: (HTMLElement | Document) = document)
  description: Renders charts.
abcRender(element: (HTMLElement | Document) = document)
  description: Renders staff notation.
md2html(mdText: string, options?: IPreviewOptions): string
  description: Converts Markdown text to HTML. This method requires asynchronous programming.
highlightRender(hljsStyle: string, enableHighlight: boolean, element?: HTMLElement | Document)
  description: Renders code blocks within the element with highlighting.
mediaRender(element: HTMLElement)
  description: Renders specific links as video, audio, or embedded iframes.
mathRenderByLute(element: HTMLElement)
  description: Renders mathematical formulas that were processed by Lute.
```

--------------------------------

### Disabling Element UI Radio Buttons

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/radio.md

Shows how to disable an `el-radio` component. Set the `disabled` attribute to `true` to make the radio button unusable. This example demonstrates both a disabled unchecked and a disabled checked state.

```html
<template>
  <el-radio disabled v-model="radio" label="disabled">Option</el-radio>
  <el-radio disabled v-model="radio" label="selected and disabled">Option</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: 'selected and disabled'
      };
    }
  }
</script>
```

--------------------------------

### OMarkdown Preview Options API

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/markdown.md

API documentation for configuring the OMarkdown editor's preview functionality. This includes settings for the debounce delay before preview updates, the display mode (both, editor, or preview only), a callback function for custom preview parsing, and a URL for external Markdown parsing requests.

```APIDOC
options.preview:
  delay: number - Preview debounce milliseconds interval (default: 1000)
  mode: string - Display mode: 'both', 'editor', 'preview' (default: 'both')
  parse(element: HTMLElement): void - Preview callback
  url: string - Markdown parsing request URL
```

--------------------------------

### Basic Usage of El-Timeline Component

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/timeline.md

Demonstrates the fundamental implementation of the El-Timeline component, showcasing how to display a list of activities with timestamps. It also includes a radio group to dynamically control the sorting order of the timeline items (ascending or descending).

```html
<div class="block">
  <div class="radio">
    排序：
    <el-radio-group v-model="reverse">
      <el-radio :label="true">倒序</el-radio>
      <el-radio :label="false">正序</el-radio>
    </el-radio-group>
  </div>

  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        reverse: true,
        activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }]
      };
    }
  };
</script>
```

--------------------------------

### Basic Catalog Usage with Vue.js

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/catalog.md

Demonstrates the fundamental usage of the o-catalog component. It shows how to create a catalog with multiple panes, including nested panes, and how to dynamically add or remove items. The catalog supports one-level and two-level directories.

```html
<el-row>
 <div style="height: 500px">
<div>
 <el-button><div @click="list.shift()">删除</div></el-button>
 <el-button><div @click="list.push({value:'mulu'})">添加</div></el-button>
</div>
 <o-catalog  @change="openFullScreen"  :pageSize="8" >
      <o-catalog-pane  style="height: 400px;" :label="test"><div>牛逼咯</div></o-catalog-pane>
      <o-catalog-pane label="目录二">
             <div  style="height: 200px;">我的生命之道就是吃吃吃吃</div>
             <o-catalog-pane  style="height: 200px;"  v-for="(tip,index) in list" :label="tip.value" :key="index">{{tip.value}}</o-catalog-pane>
      </o-catalog-pane>
      <o-catalog-pane  style="height: 400px;" label="目录三">目录三</o-catalog-pane>
      <o-catalog-pane  style="height: 400px;" label="目录四">目录四</o-catalog-pane>
      <o-catalog-pane  style="height: 400px;" label="目录五">目录五</o-catalog-pane>
 </o-catalog>
</div>
</el-row>
```

```javascript
  export default {
     data(){
        return {
            list:[],
            test:'测试标题'
        }
    },
    methods: {
      openFullScreen(val) {

      },
     
    },
    mounted(){
             let arr=[];
             for(let i=0;i<3;i++){
                 let data={
                     value:'目录'+i
                 }
                 arr.push(data);
             }
             this.list=arr;
        }

  }
```

--------------------------------

### Collapse Panel with Accordion Mode

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/collapse.md

This example demonstrates how to configure the el-collapse component to behave as an accordion, where only one panel can be open at a time. This is achieved by adding the accordion boolean attribute to the el-collapse component. The v-model is bound to a single string activeName.

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

--------------------------------

### InputNumber Component Methods

Source: https://github.com/shayelee/onev-ui/blob/main/examples/docs/zh-CN/input-number.md

A list of methods available on the `el-input-number` component instance, along with their descriptions and parameters.

```APIDOC
Method: focus
  Description: Makes the input gain focus
  Parameters: -
Method: select
  Description: Selects the text in the input
  Parameters: —
```