pit-docs-mcp 1.0.2

package/docs/pitElementUi/i18n.md

@@ -0,0 +1,228 @@
+## 国际化
+
+Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
+
+```javascript
+// 完整引入 Element
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+```
+
+或
+
+```javascript
+// 按需引入 Element
+import Vue from 'vue'
+import { Button, Select } from 'element-ui'
+import lang from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale'
+
+// 设置语言
+locale.use(lang)
+
+// 引入组件
+Vue.component(Button.name, Button)
+Vue.component(Select.name, Select)
+```
+
+如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
+
+**webpack.config.js**
+```javascript
+{
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+  ]
+}
+```
+
+## 兼容 `vue-i18n@5.x`
+
+Element 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。
+
+```javascript
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.use(Element)
+
+Vue.config.lang = 'zh-cn'
+Vue.locale('zh-cn', zhLocale)
+Vue.locale('en', enLocale)
+```
+
+## 兼容其他 i18n 插件
+如果不使用 `vue-i18n@5.x`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
+## 兼容 `vue-i18n@6.x`
+
+默认不支持 6.x 的 `vue-i18n`，你需要手动处理。
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
+  }
+}
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages, // set locale messages
+})
+
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+
+new Vue({ i18n }).$mount('#app')
+```
+
+## 按需加载里定制 i18n
+
+```js
+import Vue from 'vue'
+import DatePicker from 'element/lib/date-picker'
+import VueI18n from 'vue-i18n'
+
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from 'element-ui/lib/locale'
+
+Vue.use(VueI18n)
+Vue.use(DatePicker)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale
+  }
+}
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages, // set locale messages
+})
+
+ElementLocale.i18n((key, value) => i18n.t(key, value))
+```
+
+## 通过 CDN 的方式加载语言文件
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/element-ui"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  ELEMENT.locale(ELEMENT.lang.en)
+</script>
+```
+
+搭配 `vue-i18n` 使用
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+<script src="//unpkg.com/element-ui"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  Vue.locale('en', ELEMENT.lang.en)
+  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
+</script>
+```
+
+目前 Element 内置了以下语言：
+<ul class="language-list">
+  <li>简体中文（zh-CN）</li>
+  <li>英语（en）</li>
+  <li>德语（de）</li>
+  <li>葡萄牙语（pt）</li>
+  <li>西班牙语（es）</li>
+  <li>丹麦语（da）</li>
+  <li>法语（fr）</li>
+  <li>挪威语（nb-NO）</li>
+  <li>繁体中文（zh-TW）</li>
+  <li>意大利语（it）</li>
+  <li>韩语（ko）</li>
+  <li>日语（ja）</li>
+  <li>荷兰语（nl）</li>
+  <li>越南语（vi）</li>
+  <li>俄语（ru-RU）</li>
+  <li>土耳其语（tr-TR）</li>
+  <li>巴西葡萄牙语（pt-br）</li>
+  <li>波斯语（fa）</li>
+  <li>泰语（th）</li>
+  <li>印尼语（id）</li>
+  <li>保加利亚语（bg）</li>
+  <li>波兰语（pl）</li>
+  <li>芬兰语（fi）</li>
+  <li>瑞典语（sv-SE）</li>
+  <li>希腊语（el）</li>
+  <li>斯洛伐克语（sk）</li>
+  <li>加泰罗尼亚语（ca）</li>
+  <li>捷克语（cs-CZ）</li>
+  <li>乌克兰语（ua）</li>
+  <li>土库曼语（tk）</li>
+  <li>泰米尔语（ta）</li>
+  <li>拉脱维亚语（lv）</li>
+  <li>南非荷兰语（af-ZA）</li>
+  <li>爱沙尼亚语（ee）</li>
+  <li>斯洛文尼亚语（sl）</li>
+  <li>阿拉伯语（ar）</li>
+  <li>希伯来语（he）</li>
+  <li>立陶宛语（lt）</li>
+  <li>蒙古语（mn）</li>
+  <li>哈萨克斯坦语（kz）</li>
+  <li>匈牙利语（hu）</li>
+  <li>罗马尼亚语（ro）</li>
+  <li>库尔德语（ku）</li>
+  <li>维吾尔语（ug-CN）</li>
+  <li>高棉语（km）</li>
+  <li>塞尔维亚语（sr）</li>
+  <li>巴斯克语（eu）</li>
+  <li>吉尔吉斯语（kg）</li>
+  <li>亚美尼亚语 (hy)</li>
+  <li>克罗地亚 (hr)</li>
+  <li>世界语 (eo)</li>
+</ul>
+
+如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。

package/docs/pitElementUi/icon-custom.md

@@ -0,0 +1,99 @@
+## IconCustom 扩展图标
+
+按不同的分类扩展了一套常用的图标集合。
+
+:::demo
+```html
+<template>
+    
+  <el-tabs v-model="activeName" tab-position="left">
+    <el-tab-pane label="菜单" name="first">
+        <p>菜单类图标共：{{$iconCustom.length}}个</p>
+        <ul class="icon-list">
+            <li v-for="name in $iconCustom" :key="name">
+                <span>
+                  <i :class="'el-icon-' + name"></i>
+                  <span class="icon-name">{{'el-icon-' + name}}</span>
+                </span>
+            </li>
+        </ul>
+    </el-tab-pane>
+    <el-tab-pane label="基础" name="second2">
+        <p>基础类图标共：{{$iconBasics.length}}个</p>
+      <ul class="icon-list">
+          <li v-for="name in $iconBasics" :key="name">
+            <span>
+              <i :class="'el-icon-' + name"></i>
+              <span class="icon-name">{{'el-icon-' + name}}</span>
+            </span>
+          </li>
+      </ul>
+    </el-tab-pane>
+    <el-tab-pane label="登录" name="second">
+        <p>登录类图标共：{{$iconLogin.length}}个</p>
+        <ul class="icon-list">
+            <li v-for="name in $iconLogin" :key="name">
+                <span>
+                  <i :class="'el-icon-' + name"></i>
+                  <span class="icon-name">{{'el-icon-' + name}}</span>
+                </span>
+            </li>
+        </ul>
+    </el-tab-pane>
+      <el-tab-pane label="表单" name="second3">
+          <p>登录类图标共：{{$iconForm.length}}个</p>
+          <ul class="icon-list">
+              <li v-for="name in $iconForm" :key="name">
+                <span>
+                  <i :class="'el-icon-' + name"></i>
+                  <span class="icon-name">{{'el-icon-' + name}}</span>
+                </span>
+              </li>
+          </ul>
+      </el-tab-pane>
+    <el-tab-pane label="性别" name="third">
+        <p>性别类图标共：{{$iconGender.length}}个</p>
+        <ul class="icon-list">
+            <li v-for="name in $iconGender" :key="name">
+                <span>
+                  <i :class="'el-icon-' + name"></i>
+                  <span class="icon-name">{{'el-icon-' + name}}</span>
+                </span>
+            </li>
+        </ul>
+    </el-tab-pane>
+    <el-tab-pane label="方向" name="third2">
+        <p>方向类图标共：{{$iconDirection.length}}个</p>
+      <ul class="icon-list">
+          <li v-for="name in $iconDirection" :key="name">
+            <span>
+              <i :class="'el-icon-' + name"></i>
+              <span class="icon-name">{{'el-icon-' + name}}</span>
+            </span>
+          </li>
+      </ul>
+    </el-tab-pane>
+    <el-tab-pane label="天气" name="third3">
+        <p>天气类图标共：{{$iconWeather.length}}个</p>
+      <ul class="icon-list">
+          <li v-for="name in $iconWeather" :key="name">
+        <span>
+          <i :class="'el-icon-' + name"></i>
+          <span class="icon-name">{{'el-icon-' + name}}</span>
+        </span>
+          </li>
+      </ul>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+  };
+</script>
+```
+:::

package/docs/pitElementUi/icon-line-custom.md

@@ -0,0 +1,12 @@
+## IconCustom 扩展图标
+
+### 线性图标集合
+
+<ul class="icon-list">
+  <li v-for="name in $iconLineCustom" :key="name">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      <span class="icon-name">{{'el-icon-' + name}}</span>
+    </span>
+  </li>
+</ul>

package/docs/pitElementUi/icon.md

@@ -0,0 +1,28 @@
+## Icon 图标
+
+提供了一套常用的图标集合。
+
+### 使用方法
+
+直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
+
+:::demo
+```html
+<i class="el-icon-edit"></i>
+<i class="el-icon-share"></i>
+<i class="el-icon-delete"></i>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
+
+```
+:::
+
+### 图标集合
+
+<ul class="icon-list">
+  <li v-for="name in $icon" :key="name">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      <span class="icon-name">{{'el-icon-' + name}}</span>
+    </span>
+  </li>
+</ul>

package/docs/pitElementUi/image.md

@@ -0,0 +1,178 @@
+## Image 图片
+图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
+
+### 基础用法
+
+:::demo 可通过`fit`确定图片如何适应到容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
+
+```html
+
+<div class="demo-image">
+    <el-button @click="test">测试</el-button>
+    <div class="block" v-for="fit in fits" :key="fit">
+        <span class="demonstration">{{ fit }}</span>
+        <el-image
+                style="width: 100px; height: 100px"
+                :src="url"
+                :fit="fit"></el-image>
+        <el-image-viewer :onClose="onClose" v-if="visible" :urlList="urlList"></el-image-viewer>
+    </div>
+</div>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                visible: false,
+                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                urlList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
+            }
+        },
+        methods: {
+            test() {
+                this.visible = true
+            },
+            onClose() {
+                this.visible = false
+            }
+        }
+    }
+</script>
+```
+:::
+
+### 占位内容
+
+:::demo 可通过`slot = placeholder`可自定义占位内容
+```html
+<div class="demo-image__placeholder">
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-image :src="src"></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义</span>
+    <el-image :src="src">
+      <div slot="placeholder" class="image-slot">
+        加载中<span class="dot">...</span>
+      </div>
+    </el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 加载失败
+
+:::demo 可通过`slot = error`可自定义加载失败内容
+```html
+<div class="demo-image__error">
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-image></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义</span>
+    <el-image>
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</div>
+```
+:::
+
+### 懒加载
+
+:::demo 可通过`lazy`开启懒加载功能，当图片滚动到可视范围内才会加载。可通过`scroll-container`来设置滚动容器，若未定义，则为最近一个`overflow`值为`auto`或`scroll`的父元素。
+```html
+<div class="demo-image__lazy">
+  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        urls: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 大图预览
+
+:::demo 可通过 `previewSrcList` 开启预览大图的功能。
+```html
+<div class="demo-image__preview">
+  <el-image 
+    style="width: 100px; height: 100px"
+    :src="url" 
+    :preview-src-list="srcList">
+  </el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| src | 图片源，同原生 | string | — | - |
+| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| alt | 原生 alt | string | - | - |
+| referrer-policy | 原生 referrerPolicy | string | - | - |
+| lazy | 是否开启懒加载 | boolean | — | false |
+| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
+| preview-src-list | 开启图片预览功能 | Array | — | - |
+| z-index | 设置图片预览的 z-index | Number | — | 2000 |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| load | 图片加载成功触发 | (e: Event) |
+| error | 图片加载失败触发 | (e: Error) |
+
+### Slots
+| 名称    | 说明         |
+|---------|-------------|
+| placeholder | 图片未加载的占位内容 |
+| error | 加载失败的内容 |
+
+

package/docs/pitElementUi/infiniteScroll.md

@@ -0,0 +1,87 @@
+## InfiniteScroll 无限滚动
+
+滚动至底部时，加载更多数据。
+
+### 基础用法
+在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 禁用加载
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">加载中...</p>
+    <p v-if="noMore">没有更多了</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | 是否禁用           | boolean      | - |false |
+| infinite-scroll-delay   | 节流时延，单位为ms   | number       |   - |200   |
+| infinite-scroll-distance| 触发加载的距离阈值，单位为px | number   |- |0 |
+| infinite-scroll-immediate | 是否立即执行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true |