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

m8-framework-mcp 1.0.0 → 1.0.3

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 (389) hide show

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/008-cell/345/215/225/345/205/203/346/240/274.md DELETED Viewed

@@ -1,213 +0,0 @@
-# 组件使用
-## cell 单元格
-### 介绍
--   单元格组件。
-::: ifdef M83
--   `v8.3.11`开始支持 weex 端使用
-::: endif
-### 代码演示
-#### 基础用法
-`Cell` 可以单独使用，也可以与 `CellGroup` 搭配使用，`CellGroup` 可以为 `Cell` 提供上下外边框。由于最后一个 `Cell` 和 `CellGroup` 的下边都有边框，会有边框重叠问题，需要手动将最后一个 `Cell` 设置成不显示边框。
-```html
-<em-cell-group>
-    <em-cell title="单元格" value="内容" />
-    <em-cell title="单元格" value="内容" label="描述信息" :border="false" />
-</em-cell-group>
-```
-#### 单元格大小
-通过 `size` 属性可以控制单元格的大小。
-```html
-<em-cell title="单元格" value="内容" size="large" />
-<em-cell title="单元格" value="内容" size="large" label="描述信息" />
-```
-#### 展示图标
-通过 `icon` 属性在标题左侧展示图标。
-```html
-<em-cell title="单元格" icon="location-o" />
-```
-#### 只设置 value
-只设置 `value` 时，内容会靠左对齐。
-```html
-<em-cell value="内容" />
-```
-#### 展示箭头
-设置 `is-link` 属性后会在单元格右侧显示箭头，并且可以通过 `arrow-direction` 属性控制箭头方向。
-```html
-<em-cell title="单元格" is-link />
-<em-cell title="单元格" is-link value="内容" />
-<em-cell title="单元格" is-link arrow-direction="down" value="内容" />
-```
-#### 页面导航
-可以通过 `url` 属性进行 `URL` 跳转，或通过 `to` 属性进行路由跳转。
-```html
-<em-cell title="URL 跳转" is-link url="/van/mobile.html" />
-<em-cell title="路由跳转" is-link to="index" />
-```
-#### 分组标题
-通过 `CellGroup` 的 `title` 属性可以指定分组标题。
-```html
-<em-cell-group title="分组1">
-    <em-cell title="单元格" value="内容" />
-</em-cell-group>
-<em-cell-group title="分组2">
-    <em-cell title="单元格" value="内容" />
-</em-cell-group>
-```
-#### 使用插槽
-如以上用法不能满足你的需求，可以使用插槽来自定义内容。
-```html
-<em-cell value="内容" is-link>
-    <!-- 使用 title 插槽来自定义标题 -->
-    <template #title>
-        <span class="custom-title">单元格</span>
-        <em-tag type="danger">标签</em-tag>
-    </template>
-</em-cell>
-<em-cell title="单元格" icon="shop-o">
-    <!-- 使用 rightIcon 插槽来自定义右侧图标 -->
-    <template #rightIcon>
-        <em-icon name="search" class="search-icon" />
-    </template>
-</em-cell>
-<style>
-    .custom-title {
-        margin-right: 4px;
-        vertical-align: middle;
-    }
-    .search-icon {
-        font-size: 16px;
-        line-height: inherit;
-    }
-</style>
-```
-#### 垂直居中
-通过 `center` 属性可以让 `Cell` 的左右内容都垂直居中。
-```html
-<em-cell center title="单元格" value="内容" label="描述信息" />
-```
-### API
-#### CellGroup Props
-| 参数   |      说明      | 类型    | 默认值 | ::: ifdef M83 weex 端支持 ::: endif |
-| :----- | :------------: | :------ | :----- | :---------------------------------- |
-| title  |    分组标题    | string  | -      | 是                                  |
-| border | 是否显示外边框 | boolean | `true` | 是                                  |
-#### Cell Props
-| 参数            |                        说明                        | 类型            | 默认值     | ::: ifdef M83 weex 端支持 ::: endif |
-| :-------------- | :------------------------------------------------: | :-------------- | :--------- | :---------------------------------- |
-| title           |                      左侧标题                      | number / string | -          | 是                                  |
-| value           |                      右侧内容                      | number / string | -          | 是                                  |
-| label           |                 标题下方的描述信息                 | string          | -          | 是                                  |
-| size            |             单元格大小，可选值为 large             | string          | -          | 是                                  |
-| icon            |               左侧图标名称或图片链接               | string          | -          | 是                                  |
-| icon-prefix     |   图标类名前缀，同 Icon 组件的 class-prefix 属性   | string          | `van-icon` | 否                                  |
-| url             |                点击后跳转的链接地址                | string          | -          | 是                                  |
-| to              | 点击后跳转的目标路由对象，同 vue-router 的 to 属性 | string / object | -          | 是                                  |
-| border          |                   是否显示内边框                   | boolean         | `true`     | 是                                  |
-| replace         |            是否在跳转时替换当前页面历史            | boolean         | `false`    | 是                                  |
-| clickable       |                  是否开启点击反馈                  | boolean         | `false`    | 是                                  |
-| is-link         |           是否展示右侧箭头并开启点击反馈           | boolean         | `false`    | 是                                  |
-| required        |                是否显示表单必填星号                | boolean         | `false`    | 是                                  |
-| center          |                 是否使内容垂直居中                 | boolean         | `false`    | 否（weex 端默认居中）               |
-| arrow-direction |          箭头方向，可选值为 left up down           | string          | `right`    | 是                                  |
-| extraPosition   |       extra 插槽的位置，可选值为 left right        | string          | `right`    | 是                                  |
-| title-style     |                  左侧标题额外样式                  | string          | -          | 否                                  |
-| title-class     |                  左侧标题额外类名                  | string          | -          | 否                                  |
-| value-class     |                  右侧内容额外类名                  | string          | -          | 否                                  |
-| label-class     |                  描述信息额外类名                  | string          | -          | 否                                  |
-#### Cell Events
-| 事件名 |       说明       | 回调参数     |
-| :----- | :--------------: | :----------- |
-| click  | 点击单元格时触发 | event: Event |
-#### CellGroup Slots
-| 名称    |      说明      |
-| :------ | :------------: |
-| default |    默认插槽    |
-| title   | 自定义分组标题 |
-#### Cell Slots
-| 名称      |             说明             |
-| :-------- | :--------------------------: |
-| default   |   自定义右侧 value 的内容    |
-| title     |   自定义左侧 title 的内容    |
-| label     | 自定义标题下方 label 的内容  |
-| icon      |        自定义左侧图标        |
-| rightIcon | 自定义右侧按钮，默认为 arrow |
-| extra     |    自定义单元格的额外内容    |
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-cell"
- 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-cell"
- 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/009-checkbox/345/244/215/351/200/211/346/241/206.md DELETED Viewed

@@ -1,501 +0,0 @@
-# 组件使用
-## checkbox 复选框
-### 介绍
--   复选框。
-### 代码演示
-#### 基础用法
-通过`v-model`绑定复选框的勾选状态
-```html
-<em-checkbox v-model="checked">复选框</em-checkbox>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            checked: true
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const checked = ref(true);
-```
-::: endif
-#### 禁用状态
-通过设置`disabled`属性可以禁用复选框
-```html
-<em-checkbox v-model="checked" disabled>复选框</em-checkbox>
-```
-#### 自定义形状
-将`shape`属性设置为`round`，复选框的形状会变成圆形,
-其他形状属性值需要在组件中预设，建议其他形状使用【自定义图标】
-```html
-<em-checkbox v-model="checked" shape="round">复选框</em-checkbox>
-```
-#### 自定义颜色
-通过`checked-color`属性设置选中状态的图标颜色
-```html
-<em-checkbox v-model="checked" checked-color="#07c160">复选框</em-checkbox>
-```
-#### 自定义大小
-通过`icon-size`属性可以自定义图标的大小
-```html
-<em-checkbox v-model="checked" icon-size="24px">复选框</em-checkbox>
-```
-#### 自定义图标
-通过 `icon` 插槽自定义图标，可以通过`slotProps`判断是否为选中状态
-**注意：**
-因微信和支付宝小程序兼容性问题，需在 `em-checkbox` 或 `em-checkbox-group` 标签上添加 `icon` 属性， 纯 h5 环境中可不加
-```html
-<em-checkbox v-model="checked" icon>
-    自定义图标
-    <template #icon="props">
-        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
-    </template>
-</em-checkbox>
-<style>
-    .img-icon {
-        height: 20px;
-    }
-</style>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            checked: true,
-            activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-            inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const checked = ref(true);
-const activeIcon = ref('https://img.yzcdn.cn/vant/user-active.png');
-const inactiveIcon = ref('https://img.yzcdn.cn/vant/user-inactive.png');
-```
-::: endif
-#### 中选框
-设置 `indeterminate` 属性可调整复选框风格
-```html
-<em-checkbox v-model="checked" :indeterminate="indeterminate">中选框</em-checkbox>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            checked: true,
-            indeterminate: true
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const checked = ref(true);
-const indeterminate = ref(true);
-```
-::: endif
-#### 禁用文本点击
-设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
-```html
-<em-checkbox v-model="checked" label-disabled>复选框</em-checkbox>
-```
-#### 复选框组
-复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
-```html
-<em-checkbox-group v-model="result">
-    <em-checkbox name="a">复选框 a</em-checkbox>
-    <em-checkbox name="b">复选框 b</em-checkbox>
-</em-checkbox-group>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            result: ['a', 'b']
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const result = ref(['a', 'b']);
-```
-::: endif
-#### 水平排列
-将`direction`属性设置为`horizontal`后，复选框组会变成水平排列
-```html
-<em-checkbox-group v-model="result" direction="horizontal">
-    <em-checkbox name="a">复选框 a</em-checkbox>
-    <em-checkbox name="b">复选框 b</em-checkbox>
-</em-checkbox-group>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            result: []
-        };
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const result = ref([]);
-```
-::: endif
-#### 限制最大可选数
-通过`max`属性可以限制复选框组的最大可选数
-```html
-<em-checkbox-group v-model="result" :max="2">
-    <em-checkbox name="a">复选框 a</em-checkbox>
-    <em-checkbox name="b">复选框 b</em-checkbox>
-    <em-checkbox name="c">复选框 c</em-checkbox>
-</em-checkbox-group>
-```
-#### 全选与反选
-通过`CheckboxGroup`实例上的`toggleAll`方法可以实现全选与反选
-```html
-<em-checkbox-group v-model="result" ref="checkboxGroup">
-    <em-checkbox name="a">复选框 a</em-checkbox>
-    <em-checkbox name="b">复选框 b</em-checkbox>
-    <em-checkbox name="c">复选框 c</em-checkbox>
-</em-checkbox-group>
-<em-button type="primary" @click="checkAll">全选</em-button>
-<em-button type="info" @click="toggleAll">反选</em-button>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            result: []
-        };
-    },
-    methods: {
-        checkAll() {
-            this.$refs.checkboxGroup.toggleAll(true);
-        },
-        toggleAll() {
-            this.$refs.checkboxGroup.toggleAll();
-        }
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const result = ref([]);
-const checkboxGroup = ref(null);
-const checkAll = () => {
-    // 获取 checkboxGroup 的引用并调用 toggleAll
-    checkboxGroup.value.toggleAll(true);
-};
-const toggleAll = () => {
-    // 获取 checkboxGroup 的引用并调用 toggleAll
-    checkboxGroup.value.toggleAll();
-};
-```
-::: endif
-#### 搭配单元格组件使用
-此时你需要再引入`Cell`和`CellGroup`组件，并通过`Checkbox`实例上的 `toggle` 方法触发切换
-```html
-<em-checkbox-group v-model="result">
-    <em-cell-group>
-        <em-cell v-for="(item, index) in list" clickable :key="item" :title="`复选框 ${item}`" @click="toggle(index)">
-            <template #rightIcon>
-                <em-checkbox :name="item" ref="checkboxes" />
-            </template>
-        </em-cell>
-    </em-cell-group>
-</em-checkbox-group>
-```
-::: ifdef M83
-```js
-export default {
-    data() {
-        return {
-            list: ['a', 'b'],
-            result: []
-        };
-    },
-    methods: {
-        toggle(index) {
-            this.$refs.checkboxes[index].toggle();
-        }
-    }
-};
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const list = ref(['a', 'b']);
-const result = ref([]);
-const checkboxes = ref([]);
-const toggle = (index) => {
-    checkboxes.value[index].toggle(); // 假设这里用来切换选中状态
-};
-```
-::: endif
-### API
-#### Checkbox Props
-| 参数                                                                         |                      说明                      | 类型            | 默认值    |
-| :--------------------------------------------------------------------------- | :--------------------------------------------: | :-------------- | :-------- |
-| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |                 是否为选中状态                 | boolean         | `false`   |
-| name                                                                         |       标识符，注意微信小程序请传递字符串       | any             | -         |
-| shape                                                                        |             形状，可选值为 `round`             | string          | `square`  |
-| indeterminate                                                                |                   启用中选框                   | boolean         | `false`   |
-| disabled                                                                     |                 是否禁用复选框                 | boolean         | `false`   |
-| label-disabled                                                               |             是否禁用复选框文本点击             | boolean         | `false`   |
-| label-position                                                               |           文本位置，可选值为 `left`            | string          | `right`   |
-| icon-size                                                                    |            图标大小，默认单位为`px`            | number / string | `20px`    |
-| icon                                                                         | 自定义图标依赖该属性用于兼容微信和支付宝小程序 | boolean         | `false`   |
-| checked-color                                                                |                  选中状态颜色                  | string          | `#1989fa` |
-| bind-group                                                                   |               是否与复选框组绑定               | boolean         | `true`    |
-#### CheckboxGroup Props
-| 参数                                                                         |                      说明                      | 类型            | 默认值     |
-| :--------------------------------------------------------------------------- | :--------------------------------------------: | :-------------- | :--------- |
-| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |               所有选中项的标识符               | any[]           | -          |
-| disabled                                                                     |               是否禁用所有复选框               | boolean         | `false`    |
-| max                                                                          |             最大可选数，0 为无限制             | number / string | 0          |
-| icon                                                                         | 自定义图标依赖该属性用于兼容微信和支付宝小程序 | boolean         | `false`    |
-| direction                                                                    |         排列方向，可选值为`horizontal`         | string          | `vertical` |
-| icon-size                                                                    |      所有复选框的图标大小，默认单位为`px`      | number / string | `20px`     |
-| checked-color                                                                |            所有复选框的选中状态颜色            | string          | `#1989fa`  |
-#### Checkbox Events
-| 事件名                                        |           说明           | 回调参数         |
-| :-------------------------------------------- | :----------------------: | :--------------- |
-| change                                        | 当绑定值变化时触发的事件 | checked: boolean |
-| click                                         |     点击复选框时触发     | event: Event     |
-| ::: ifdef M84 update:checked `v8.4` ::: endif |  用于同步 checked 事件   | checked: boolean |
-#### CheckboxGroup Events
-| 事件名 |           说明           | 回调参数     |
-| :----- | :----------------------: | :----------- |
-| change | 当绑定值变化时触发的事件 | names: any[] |
-#### Checkbox Slots
-| 名称    |    说明    | SlotProps        |
-| :------ | :--------: | :--------------- |
-| default | 自定义文本 | -                |
-| icon    | 自定义图标 | checked: boolean |
-#### CheckboxGroup 方法
-通过 `ref` 可以获取到 `CheckboxGroup` 实例并调用实例方法，详见组件实例方法
-| 方法名    |                              说明                              | 参数                     | 返回值 |
-| :-------- | :------------------------------------------------------------: | :----------------------- | :----- |
-| toggleAll | 切换所有复选框，传 true 为选中，false 为取消选中，不传参为取反 | options?: boolean/object | -      |
-| toggle    |          切换所选复选框，传数组下标，自动进行切换状态          | Number                   | -      |
-#### toggleAll 方法示例
-::: ifdef M83
-```js
-const { checkboxGroup } = this.$refs;
-// 全部反选
-checkboxGroup.toggleAll();
-// 全部选中
-checkboxGroup.toggleAll(true);
-// 全部取消
-checkboxGroup.toggleAll(false);
-// 全部反选，并跳过禁用的复选框, M8框架8.2.10版本以上支持
-checkboxGroup.toggleAll({
-    skipDisabled: true
-});
-// 全部选中，并跳过禁用的复选框，M8框架8.2.10版本以上支持
-checkboxGroup.toggleAll({
-    checked: true,
-    skipDisabled: true
-});
-```
-::: endif
-::: ifdef M84
-```js
-import { ref } from 'vue';
-const checkboxGroup = ref(null);
-// 全部反选
-checkboxGroup.value.toggleAll();
-// 全部选中
-checkboxGroup.value.toggleAll(true);
-// 全部取消
-checkboxGroup.value.toggleAll(false);
-// 全部反选，并跳过禁用的复选框, M8框架8.2.10版本以上支持
-checkboxGroup.value.toggleAll({
-    skipDisabled: true
-});
-// 全部选中，并跳过禁用的复选框，M8框架8.2.10版本以上支持
-checkboxGroup.value.toggleAll({
-    checked: true,
-    skipDisabled: true
-});
-```
-::: endif
-#### Checkbox 方法
-通过 `ref` 可以获取到 `Checkbox` 实例并调用实例方法，详见组件实例方法
-| 方法名 |                             说明                             | 参数              | 返回值 |
-| :----- | :----------------------------------------------------------: | :---------------- | :----- |
-| toggle | 切换选中状态，传 true 为选中，false 为取消选中，不传参为取反 | checked?: boolean | -      |
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-checkbox"
- 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-checkbox"
- 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>