Update docs

Author: imengyu

README.md

@@ -77,7 +77,7 @@ Or component:
  :options="optionsComponent"
 >
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
- <context-menu-sperator /><!--use this to add sperator-->
+ <context-menu-separator /><!--use this to add separator-->
  <context-menu-group label="Menu with child">
  <context-menu-item label="Item1" @click="onMenuClick(2)" />
  <context-menu-item label="Item2" @click="onMenuClick(3)" />

docs/en/guide/customize.md

@@ -236,7 +236,7 @@ export default defineComponent({
  font-size: 20px;
  color: #f05;
 }
-.my-menu-sperator {
+.my-menu-separator {
  border-bottom: 1px dashed #f00;
 }
 </style>
@@ -259,18 +259,18 @@ Usage after encapsulation:
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  </context-menu-group>
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Menu with child child child">
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  <context-menu-item label="Item2" @click="alertContextMenuItemClicked('Item2')" />
  <context-menu-group label="Child with v-for 50">
  <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="alertContextMenuItemClicked('Item3' + index)" />
  </context-menu-group>
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Childs">
  <context-menu-item label="Item1-1" @click="alertContextMenuItemClicked('Item1-1')" />
  <context-menu-item label="Item1-2" @click="alertContextMenuItemClicked('Item1-2')" />
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Childs">
  <context-menu-item label="Item2-1" @click="alertContextMenuItemClicked('Item2-1')" />
  <context-menu-item label="Item2-2" @click="alertContextMenuItemClicked('Item2-2')" />

docs/en/guide/install.md

@@ -49,7 +49,7 @@ Then import components where you need to use them:
  >
  <context-menu-item label="Simple item" @click="alertContextMenuItemClicked('Item1')" />
  <context-menu-item label="Item with a icon" icon="icon-reload-1" @click="alertContextMenuItemClicked('Item2')" />
- <context-menu-sperator />
+ <context-menu-separator />
  <context-menu-group label="Menu with child">
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item2-1')" />
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item2-2')" />

docs/en/guide/useage.md

@@ -96,7 +96,7 @@ createApp(App)
  :options="options"
  >
  <context-menu-item label="Simple item" @click="onMenuClick(0)" />
- <context-menu-sperator /><!--use this to add sperator-->
+ <context-menu-separator /><!--use this to add separator-->
  <context-menu-group label="Menu with child">
  <context-menu-item label="Item1" @click="onMenuClick(1)" />
  <context-menu-item label="Item2" @click="onMenuClick(2)" />
@@ -173,7 +173,7 @@ The following example shows how to dynamically display/hide menus and dynamicall
  >
  <context-menu-item label="Test item dynamic show and hide" :clickClose="false" @click="showItem=!showItem" />
  <context-menu-item v-if="showItem" label="Click the item above to show/hide me" />
- <context-menu-sperator v-if="showItem" />
+ <context-menu-separator v-if="showItem" />
  <context-menu-item :label="itemText" :clickClose="false" @click="changeLabelText" />
  </context-menu>
 </template>

docs/guide/customize.md

@@ -241,7 +241,7 @@ export default defineComponent({
  font-size: 20px;
  color: #f05;
 }
-.my-menu-sperator {
+.my-menu-separator {
  border-bottom: 1px dashed #f00;
 }
 </style>
@@ -264,18 +264,18 @@ export default defineComponent({
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  </context-menu-group>
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Menu with child child child">
  <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
  <context-menu-item label="Item2" @click="alertContextMenuItemClicked('Item2')" />
  <context-menu-group label="Child with v-for 50">
  <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="alertContextMenuItemClicked('Item3' + index)" />
  </context-menu-group>
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Childs">
  <context-menu-item label="Item1-1" @click="alertContextMenuItemClicked('Item1-1')" />
  <context-menu-item label="Item1-2" @click="alertContextMenuItemClicked('Item1-2')" />
- <div class="my-menu-sperator"></div>
+ <div class="my-menu-separator"></div>
  <context-menu-group label="Childs">
  <context-menu-item label="Item2-1" @click="alertContextMenuItemClicked('Item2-1')" />
  <context-menu-item label="Item2-2" @click="alertContextMenuItemClicked('Item2-2')" />

docs/guide/useage.md

@@ -54,7 +54,7 @@ onContextMenu(e : MouseEvent) {
  :options="optionsComponent"
 >
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
- <context-menu-sperator /><!--use this to add sperator-->
+ <context-menu-separator /><!--use this to add separator-->
  <context-menu-group label="Menu with child">
  <context-menu-item label="Item1" @click="onMenuClick(2)" />
  <context-menu-item label="Item2" @click="onMenuClick(3)" />
@@ -126,7 +126,7 @@ menuData.items[0].hidden = true; //更改是否隐藏
  >
  <context-menu-item label="Test item dynamic show and hide" :clickClose="false" @click="showItem=!showItem" />
  <context-menu-item v-if="showItem" label="Click the item above to show/hide me" />
- <context-menu-sperator v-if="showItem" />
+ <context-menu-separator v-if="showItem" />
  <context-menu-item :label="itemText" :clickClose="false" @click="changeLabelText" />
  </context-menu>
 </template>