npm - m8-framework-mcp - Versions diffs - 1.0.0 → 1.0.1 - Mend

m8-framework-mcp 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/053-collapse/346/212/230/345/217/240/351/235/242/346/235/277.md DELETED Viewed

@@ -1,199 +0,0 @@
-# 组件使用
-## collapse 折叠面板
-### 介绍
--   折叠面板。
-### 代码演示
-#### 基础用法
-通过`v-model`控制展开的面板列表，`activeNames`为数组格式
-```html
-<em-collapse v-model="activeNames">
-    <em-collapse-item title="标题1" name="1" is-link>内容</em-collapse-item>
-    <em-collapse-item title="标题2" name="2" is-link>内容</em-collapse-item>
-    <em-collapse-item title="标题3" name="3" disabled is-link>内容</em-collapse-item>
-</em-collapse>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            activeNames: ['1']
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const activeNames = ref(['1']);
-```
-::: endif
-#### 手风琴
-通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
-```html
-<em-collapse v-model="activeName" accordion>
-    <em-collapse-item title="标题1" name="1" is-link>内容</em-collapse-item>
-    <em-collapse-item title="标题2" name="2" is-link>内容</em-collapse-item>
-    <em-collapse-item title="标题3" name="3" is-link>内容</em-collapse-item>
-</em-collapse>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            activeName: '1'
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const activeName = ref('1');
-```
-::: endif
-#### 自定义标题内容
-```html
-<em-collapse v-model="activeNames">
-    <em-collapse-item name="1" is-link>
-        <template #title>
-            <div>
-                标题1
-                <em-icon name="question-o" />
-            </div>
-        </template>
-        内容
-    </em-collapse-item>
-    <em-collapse-item title="标题2" name="2" icon="shop-o" is-link value="内容">内容</em-collapse-item>
-</em-collapse>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            activeNames: ['1']
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const activeNames = ref(['1']);
-```
-::: endif
-### API
-#### Collapse Props
-| 参数                                                                         |         说明          | 类型                                                           | 默认值  |
-| :--------------------------------------------------------------------------- | :-------------------: | :------------------------------------------------------------- | :------ |
-| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif | 当前展开面板的 `name` | 手风琴模式：number / string；非手风琴模式：(number / string)[] | -       |
-| accordion                                                                    |  是否开启手风琴模式   | boolean                                                        | `false` |
-| border                                                                       |    是否显示外边框     | boolean                                                        | `true`  |
-#### Collapse Events
-| 事件名 |      说明      | 回调参数                                 |
-| :----- | :------------: | :--------------------------------------- |
-| change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 |
-#### CollapseItem Props
-| 参数          |                 说明                 | 类型            | 默认值  |
-| :------------ | :----------------------------------: | :-------------- | :------ |
-| name          |       唯一标识符，默认为索引值       | number / string | `index` |
-| icon          |     标题栏左侧图标名称或图片链接     | string          | -       |
-| size          |     标题栏大小，可选值为 `large`     | string          | -       |
-| title         |            标题栏左侧内容            | number / string | -       |
-| value         |            标题栏右侧内容            | number / string | -       |
-| label         |            标题栏描述信息            | number / string | -       |
-| border        |            是否显示内边框            | boolean         | `true`  |
-| is-link       | 是否展示标题栏右侧箭头并开启点击反馈 | boolean         | `true`  |
-| disabled      |             是否禁用面板             | boolean         | `false` |
-| content-class |           内容区域额外类名           | string          | -       |
-| title-class   |           左侧标题额外类名           | string          | -       |
-| value-class   |           右侧内容额外类名           | string          | -       |
-| label-class   |           描述信息额外类名           | string          | -       |
-#### CollapseItem Slots
-| 名称      |             说明              |
-| :-------- | :---------------------------: |
-| default   |           面板内容            |
-| value     |        自定义显示内容         |
-| icon      |         自定义`icon`          |
-| title     |         自定义`title`         |
-| rightIcon | 自定义右侧按钮，默认是`arrow` |
-#### CollapseItem 方法
-通过 `ref` 可以获取到 `CollapseItem` 实例并调用实例方法，详见组件实例方法。
-| 方法名 |                               说明                               | 参数             | 返回值 |
-| :----- | :--------------------------------------------------------------: | :--------------- | :----- |
-| toggle | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | expand?: boolean | -      |
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-collapse"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-collapse"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
- <style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/054-grid/345/256/253/346/240/274.md DELETED Viewed

@@ -1,183 +0,0 @@
-# 组件使用
-## grid 宫格
-### 介绍
--   宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
-::: ifdef M83
--   `v8.3.11`开始支持 weex 端使用
-::: endif
-### 代码演示
-#### 基础用法
-通过`icon`属性设置格子内的图标，`text`属性设置文字内容。
-```html
-<em-grid>
-    <em-grid-item icon="photo-o" text="文字" />
-    <em-grid-item icon="photo-o" text="文字" />
-    <em-grid-item icon="photo-o" text="文字" />
-    <em-grid-item icon="photo-o" text="文字" />
-</em-grid>
-```
-#### 自定义列数
-默认一行展示四个格子，可以通过`column-num`自定义列数
-```html
-<em-grid :column-num="3">
-    <em-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
-</em-grid>
-```
-#### 自定义内容
-通过插槽可以自定义格子展示的内容
-```html
-<em-grid :border="false" :column-num="3">
-    <em-grid-item>
-        <em-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
-    </em-grid-item>
-    <em-grid-item>
-        <em-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
-    </em-grid-item>
-    <em-grid-item>
-        <em-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
-    </em-grid-item>
-</em-grid>
-```
-#### 正方形格子
-设置`square`属性后，格子的高度会和宽度保持一致
-```html
-<em-grid square>
-    <em-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
-</em-grid>
-```
-#### 格子间距
-通过`gutter`属性设置格子之间的距离
-```html
-<em-grid :gutter="10">
-    <em-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
-</em-grid>
-```
-#### 内容横排
-将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
-```html
-<em-grid direction="horizontal" :column-num="3">
-    <em-grid-item icon="photo-o" text="文字" />
-    <em-grid-item icon="photo-o" text="文字" />
-    <em-grid-item icon="photo-o" text="文字" />
-</em-grid>
-```
-#### 页面导航
-通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 `URL` 跳转链接
-```html
-<em-grid clickable :column-num="2">
-    <em-grid-item icon="home-o" text="路由跳转" to="./em-cell" />
-    <em-grid-item icon="search" text="URL 跳转" url="./em-loading" />
-</em-grid>
-```
-#### 徽标提示
-设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
-```html
-<em-grid :column-num="2">
-    <em-grid-item icon="home-o" text="文字" dot />
-    <em-grid-item icon="search" text="文字" badge="99+" />
-</em-grid>
-```
-### API
-#### Grid Props
-| 参数       |                   说明                    | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
-| :--------- | :---------------------------------------: | :-------------- | :--------- | :---------------------------------- |
-| column-num |                   列数                    | number / string | `4`        | 是                                  |
-| icon-size  |         图标大小，默认单位为`px`          | number / string | `28px`     | 是                                  |
-| gutter     |      格子之间的间距，默认单位为`px`       | number / string | `0`        | 是                                  |
-| border     |               是否显示边框                | boolean         | `true`     | 是                                  |
-| center     |          是否将格子内容居中显示           | boolean         | `true`     | 是                                  |
-| square     |          是否将格子固定为正方形           | boolean         | `false`    | 是                                  |
-| clickable  |           是否开启格子点击反馈            | boolean         | `false`    | 是                                  |
-| direction  | 格子内容排列的方向，可选值为 `horizontal` | string          | `vertical` | 是                                  |
-#### GridItem Props
-| 参数        |                                             说明                                              | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
-| :---------- | :-------------------------------------------------------------------------------------------: | :-------------- | :--------- | :---------------------------------- |
-| text        |                                             文字                                              | string          | -          | 是                                  |
-| icon        |                                      图标名称或图片链接                                       | string          | -          | 是                                  |
-| icon-prefix |                      图标类名前缀，同 `Icon` 组件的 `class-prefix` 属性                       | string          | `van-icon` | 否                                  |
-| dot         |                                   是否显示图标右上角小红点                                    | boolean         | `false`    | 是                                  |
-| badge       |                                     图标右上角徽标的内容                                      | number / string | -          | 是                                  |
-| url         |                                     点击后跳转的链接地址                                      | string          | -          | 是                                  |
-| to          | 点击后跳转的目标路由对象，同 `vue-router` 的 `to` 属性，仅支持`path` `query` `replace` `hash` | string / object | -          | 是                                  |
-| replace     |                                 是否在跳转时替换当前页面历史                                  | boolean         | `false`    | 是                                  |
-#### GridItem Events
-| 事件名 |      说明      | 回调参数     |
-| :----- | :------------: | :----------- |
-| click  | 点击格子时触发 | event: Event |
-#### GridItem Slots
-| 名称    |         说明         |
-| :------ | :------------------: |
-| default | 自定义宫格的所有内容 |
-| icon    |      自定义图标      |
-| text    |      自定义文字      |
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-grid"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-grid"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
- <style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/055-countdown/345/200/222/350/256/241/346/227/266.md DELETED Viewed

@@ -1,289 +0,0 @@
-# 组件使用
-## countdown 倒计时
-### 介绍
--   倒计时。
-### 代码演示
-#### 基础用法
-`time`属性表示倒计时总时长，单位为毫秒
-```html
-<em-count-down :time="time" />
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            time: 30 * 60 * 60 * 1000
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const time = ref(30 * 60 * 60 * 1000);
-```
-::: endif
-#### 自定义格式
-通过`format`属性设置倒计时文本的内容
-```html
-<em-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
-```
-#### 毫秒级渲染
-倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
-```html
-<em-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-```
-#### 自定义样式
-通过插槽自定义倒计时的样式，`timeData`对象格式见下方表格
-::: ifdef M83
-```html
-<em-count-down :time="time">
-    <template v-slot="{ timeData }">
-        <span class="block">{{ timeData.hours }}</span>
-        <span class="colon">:</span>
-        <span class="block">{{ timeData.minutes }}</span>
-        <span class="colon">:</span>
-        <span class="block">{{ timeData.seconds }}</span>
-    </template>
-</em-count-down>
-<style>
-    .colon {
-        display: inline-block;
-        margin: 0 4px;
-        color: #ee0a24;
-    }
-    .block {
-        display: inline-block;
-        width: 22px;
-        color: #fff;
-        font-size: 12px;
-        text-align: center;
-        background-color: #ee0a24;
-    }
-</style>
-```
-::: endif
-::: ifdef M84
-```html
-<em-count-down :time="time">
-    <template #default="{ timeData }">
-        <span class="block">{{ timeData.hours }}</span>
-        <span class="colon">:</span>
-        <span class="block">{{ timeData.minutes }}</span>
-        <span class="colon">:</span>
-        <span class="block">{{ timeData.seconds }}</span>
-    </template>
-</em-count-down>
-<script setup>
-    import { ref } from 'vue';
-    const time = ref(30 * 60 * 60 * 1000);
-</script>
-<style>
-    .colon {
-        display: inline-block;
-        margin: 0 4px;
-        color: #ee0a24;
-    }
-    .block {
-        display: inline-block;
-        width: 22px;
-        color: #fff;
-        font-size: 12px;
-        text-align: center;
-        background-color: #ee0a24;
-    }
-</style>
-```
-::: endif
-#### 手动控制
-通过 `ref` 获取到组件实例后，可以调用`start`、`pause`、`reset`方法
-::: ifdef M83
-```html
-<em-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="finish" />
-<em-grid clickable>
-    <em-grid-item text="开始" icon="play-circle-o" @click="start" />
-    <em-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
-    <em-grid-item text="重置" icon="replay" @click="reset" />
-</em-grid>
-<em-toast ref="emToast"></em-toast>
-```
-```js
-export default {
-    methods: {
-        start() {
-            this.$refs.countDown.start();
-        },
-        pause() {
-            this.$refs.countDown.pause();
-        },
-        reset() {
-            this.$refs.countDown.reset();
-        },
-        finish() {
-            Toast('倒计时结束');
-        }
-    }
-};
-```
-::: endif
-::: ifdef M84
-```html
-<em-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="finish" />
-<em-grid clickable>
-    <em-grid-item text="开始" icon="play-circle-o" @click="start" />
-    <em-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
-    <em-grid-item text="重置" icon="replay" @click="reset" />
-</em-grid>
-<em-toast ref="emToastRef"></em-toast>
-```
-```js
-import { ref } from 'vue';
-const countDown = ref(null);
-const emToastRef = ref(null);
-const start = () => {
-    countDown.value.start();
-};
-const pause = () => {
-    countDown.value.pause();
-};
-const reset = () => {
-    countDown.value.reset();
-};
-const finish = () => {
-    Toast('倒计时结束');
-};
-defineExpose({
-    emToastRef
-});
-```
-::: endif
-### API
-#### Props
-| 参数        |         说明         | 类型            | 默认值     |
-| :---------- | :------------------: | :-------------- | :--------- |
-| time        | 倒计时时长，单位毫秒 | number / string | `0`        |
-| format      |       时间格式       | string          | `HH:mm:ss` |
-| auto-start  |  是否自动开始倒计时  | boolean         | `true`     |
-| millisecond |  是否开启毫秒级渲染  | boolean         | `false`    |
-#### format 格式
-| 格式 |     说明     |
-| :--- | :----------: |
-| DD   |     天数     |
-| HH   |     小时     |
-| mm   |     分钟     |
-| ss   |     秒数     |
-| S    | 毫秒（1 位） |
-| SS   | 毫秒（2 位） |
-| SSS  | 毫秒（3 位） |
-#### Events
-| 事件名                                         |          说明          | 回调参数           |
-| :--------------------------------------------- | :--------------------: | :----------------- |
-| finish                                         |    倒计时结束时触发    | -                  |
-| change                                         |    倒计时变化时触发    | timeData: TimeData |
-| ::: ifdef M84 update:timeData `v8.4` ::: endif | 用于同步 timeData 事件 | timeData: TimeData |
-#### Slots
-| 名称    |    说明    | SlotProps                                  |
-| :------ | :--------: | :----------------------------------------- |
-| default | 自定义内容 | timeData: TimeData |
-#### TimeData 格式
-| 名称         |   说明   | 类型   |
-| :----------- | :------: | :----- |
-| days         | 剩余天数 | number |
-| hours        | 剩余小时 | number |
-| minutes      | 剩余分钟 | number |
-| seconds      | 剩余秒数 | number |
-| milliseconds | 剩余毫秒 | number |
-#### 方法
-通过 `ref` 可以获取到 `CountDown` 实例并调用实例方法，详见组件实例方法
-| 方法名 |                            说明                            | 参数 | 返回值 |
-| :----- | :--------------------------------------------------------: | :--- | :----- |
-| start  |                         开始倒计时                         | -    | -      |
-| pause  |                         暂停倒计时                         | -    | -      |
-| reset  | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | -    | -      |
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-count-down"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-count-down"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
- <style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>